feat(FileOrganizer): multi-directional movement and focusing

Author: liamross

.storybook/style.scss

@@ -52,6 +52,25 @@ body {
 // Change appearance of inserted stories.
 #docs-root {
   .sbdocs-content {
+    kbd {
+      font-family: 'IBM Plex Mono', 'Operator Mono', 'Fira Code Retina',
+        'Fira Code', 'FiraCode-Retina', 'Andale Mono', 'Lucida Console',
+        Consolas, Monaco, monospace;
+
+      background-color: #eee;
+      border-radius: 3px;
+      border: 1px solid #b4b4b4;
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+        0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+      color: #333;
+      display: inline-block;
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1;
+      padding: 2px 4px;
+      white-space: nowrap;
+    }
+
     .sbdocs-preview {
       // Remove `Show code` button for inserted stories.
       > div:nth-child(1) > div:nth-child(2) {

src/components/EditableText/EditableText.tsx

@@ -139,8 +139,8 @@ export const EditableText = forwardRef<HTMLDivElement, EditableTextProps>(
     const handleOnKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Escape') {
         handleOnCancel();
-        event.stopPropagation();
       }
+      event.stopPropagation();
     };
 
     const [valueToDisplay, isPlaceholder] = useMemo(() => {

src/components/FileOrganizer/FileOrganizer.stories.tsx

@@ -9,6 +9,7 @@ import { FileOrganizer, FileOrganizerProps } from '../FileOrganizer';
 import { Thumbnail } from '../Thumbnail';
 import { ThumbnailDragLayer } from '../ThumbnailDragLayer';
 import readme from './README.md';
+import close from '../Thumbnail/close-24px.svg';
 
 export default {
   title: 'Components/FileOrganizer',
@@ -20,9 +21,12 @@ interface TemplateProps {
   onRenderDragLayer?: boolean;
   numFiles?: number;
   lazy?: boolean;
+  editable?: boolean;
 }
 
-const Template: FC<TemplateProps> = ({ onRenderDragLayer, numFiles = 2, lazy }) => {
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+const Template: FC<TemplateProps> = ({ onRenderDragLayer, numFiles = 2, lazy, editable }) => {
   // This is the index organizing function.
   const [files, setFiles] = useState<FakeFile[]>([]);
   const handleOnMove = useCallback<NonNullable<FileOrganizerProps<FakeFile>['onMove']>>((fromIndex, toIndex) => {
@@ -65,7 +69,23 @@ const Template: FC<TemplateProps> = ({ onRenderDragLayer, numFiles = 2, lazy })
       onDeselectAll={action('onDeselectAll')}
       onSelectAll={action('onSelectAll')}
       onRenderDragLayer={onRenderDragLayer ? () => <ThumbnailDragLayer /> : undefined}
-      onRenderThumbnail={({ onRenderThumbnailProps }) => <Thumbnail {...onRenderThumbnailProps} />}
+      onRenderThumbnail={({ onRenderThumbnailProps }) => (
+        <Thumbnail
+          {...onRenderThumbnailProps}
+          onRename={editable ? () => {} : undefined}
+          buttonProps={
+            editable
+              ? [
+                  {
+                    children: <img src={close} alt={'close'} />,
+                    onClick: () => {},
+                    key: 0,
+                  },
+                ]
+              : undefined
+          }
+        />
+      )}
     />
   );
 };
@@ -74,6 +94,10 @@ export const Basic = () => {
   const numFiles = number('number of files', 2, { min: 0, max: 16, step: 1, range: true });
   return <Template numFiles={numFiles} />;
 };
+export const WithThumbnailButtonsAndEditableText = () => {
+  const numFiles = number('number of files', 2, { min: 0, max: 16, step: 1, range: true });
+  return <Template numFiles={numFiles} editable />;
+};
 export const WithCustomDragLayer = () => {
   const numFiles = number('number of files', 2, { min: 0, max: 16, step: 1, range: true });
   return <Template numFiles={numFiles} onRenderDragLayer />;

src/components/FileOrganizer/FileOrganizer.tsx

@@ -15,7 +15,14 @@ import React, {
   useState,
 } from 'react';
 import { FixedSizeGrid as Grid } from 'react-window';
-import { getRowAndColumnIndex, getSibling, isScrolledIntoView, ObjectWithId, THUMBNAIL_WIDTH } from '../../utils';
+import {
+  getRowAndColumnIndex,
+  getSibling,
+  isScrolledIntoView,
+  ObjectWithId,
+  THUMBNAIL_WIDTH,
+  focusableElementDomString,
+} from '../../utils';
 import { DndMultiProvider } from '../DndMultiProvider';
 import { Draggable } from '../Draggable';
 import { DragLayer, DragLayerProps } from '../DragLayer';
@@ -185,19 +192,59 @@ export function FileOrganizer<F extends ObjectWithId>({
 
   const handleItemKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>, index: number, _file: F, draggableRef: RefObject<HTMLDivElement>) => {
-      if (preventArrowsToMove || disableMove || editingId !== undefined || !onMove) return;
-      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+      let indexDiff = 0;
 
-      const indexDiff = event.key === 'ArrowLeft' ? -1 : 1;
+      switch (event.key) {
+        case 'ArrowLeft':
+          indexDiff = -1;
+          break;
+        case 'ArrowRight':
+          indexDiff = 1;
+          break;
+        case 'ArrowUp':
+          indexDiff = -1 * columnCount;
+          break;
+        case 'ArrowDown':
+          indexDiff = columnCount;
+          break;
+        default:
+          return; // Return if not one of above keys
+      }
 
-      onMove(index, index + indexDiff);
       event.preventDefault();
 
+      let hasMoved = false;
+
+      // If meta key was pressed, move to new location.
+      if (
+        !preventArrowsToMove &&
+        (event.metaKey || event.ctrlKey) &&
+        !disableMove &&
+        editingId === undefined &&
+        onMove
+      ) {
+        hasMoved = true;
+        onMove(index, index + indexDiff);
+      }
+
       if (!gridRef.current) return;
 
-      const newLocation = getSibling(draggableRef.current, indexDiff);
-      const { isVisible } = isScrolledIntoView(newLocation, fileOrganizerRef.current);
+      const siblingAtLocation = getSibling(draggableRef.current, indexDiff);
+
+      // If no meta key was pressed, focus item in direction of keys.
+      if (siblingAtLocation && !(event.metaKey || event.ctrlKey)) {
+        const focusable = siblingAtLocation.querySelector<HTMLElement>(focusableElementDomString);
+        if (focusable) {
+          hasMoved = true;
+          requestAnimationFrame(() => {
+            focusable.focus();
+          });
+        }
+      }
+
+      if (!hasMoved) return;
 
+      const { isVisible } = isScrolledIntoView(siblingAtLocation, fileOrganizerRef.current);
       if (isVisible) return;
 
       // Use react-window scrollToItem api for virtualized items.
@@ -281,7 +328,7 @@ export function FileOrganizer<F extends ObjectWithId>({
     event => {
       onKeyDown?.(event);
       if (event.key === 'Escape') return onDeselectAll?.();
-      if (event.key === 'a' && event.metaKey) {
+      if (event.key === 'a' && (event.metaKey || event.ctrlKey)) {
         onSelectAll?.();
         event.preventDefault();
       }

src/components/FileOrganizer/README.md

@@ -1,10 +1,19 @@
 The file organizer allows you to view multiple page files and use drag-and-drop
-to re-order them. Unless `preventArrowsToMove` is set to true, you can also use
-the left and right arrows while focusing any part of the file thumbnail in order
-to fire `onMove`. The `FileOrganizer` is virtualized, so there will be no
+to re-order them. You can also use the arrow keys while focusing any part of the
+file thumbnail in order to focus on a new file, or tab to move through them one
+by one (tab will also focus internal elements, such as the editable text within
+`Thumbnail`). The `FileOrganizer` is virtualized, so there will be no
 performance issues even with thousands of thumbnails (see the stress test
 playground).
 
+## Moving files
+
+You can click and drag to move items. If you are using `useManagedFiles` hook,
+you can hold <kbd>Shift</kbd> to multi-select items and then move them together.
+Unless `preventArrowsToMove` is set to true, you can hold the <kbd>⌘
+Command</kbd> key on macOS, or the <kbd>Ctrl</kbd> key on Windows and use the
+arrow keys, `onMove` will be fired.
+
 ## Rendering Files
 
 The easiest way to get started would be to use the `Thumbnail` element as the

src/components/Thumbnail/Thumbnail.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import React, { MouseEvent, ReactNode, ReactText, useEffect, useRef } from 'react';
+import React, { MouseEvent, ReactNode, ReactText, useRef } from 'react';
 import { FileLike } from '../../data';
 import { useFile, useFocus } from '../../hooks';
 import { ClickableDiv, ClickableDivProps } from '../ClickableDiv';
@@ -90,12 +90,6 @@ export function Thumbnail<F extends FileLike>({
 
   const { focused, handleOnFocus, handleOnBlur } = useFocus(onFocus, onBlur);
 
-  useEffect(() => {
-    if (!selected && focused && thumbnailRef.current) {
-      thumbnailRef.current.focus();
-    }
-  }, [focused, selected]);
-
   const file = useFile(_file, isShownOnLoad ? 0 : throttle);
 
   const handleOnSave = (newName: string) => {
@@ -142,11 +136,7 @@ export function Thumbnail<F extends FileLike>({
       </div>
       <div className="ui__thumbnail__controls">
         {buttonProps?.map(buttonPropObject => (
-          <ToolButton
-            disabled={disabled}
-            onClick={e => buttonPropObject.onClick(e, file.file)}
-            tabIndex={selected ? undefined : -1}
-          >
+          <ToolButton disabled={disabled} onClick={e => buttonPropObject.onClick(e, file.file)}>
             {buttonPropObject.children}
           </ToolButton>
         ))}
@@ -161,7 +151,6 @@ export function Thumbnail<F extends FileLike>({
         onSave={handleOnSave}
         onCancel={handleOnCancel}
         onEdit={handleOnEdit}
-        tabIndex={selected ? undefined : -1}
       />
     </ClickableDiv>
   );

src/components/Thumbnail/_Thumbnail.scss

@@ -35,7 +35,7 @@ $thumbnail-border-size: 2px;
   }
 
   &:hover,
-  &--focused.ui__thumbnail--selected:not(.ui__thumbnail--disabled) {
+  &--focused:not(.ui__thumbnail--disabled) {
     // Do not style for hover or focus if anything is dragging
     &:not(.ui__thumbnail--dragging):not(.ui__thumbnail--otherDragging) {
       .ui__thumbnail__controls {
@@ -47,10 +47,8 @@ $thumbnail-border-size: 2px;
   &:hover,
   &--focused:not(.ui__thumbnail--disabled) {
     // Do not style for hover or focus if anything is dragging
-    &:not(.ui__thumbnail--dragging):not(.ui__thumbnail--otherDragging) {
-      &:not(.ui__thumbnail--selected) {
-        background-color: $color-gray-3;
-      }
+    &:not(.ui__thumbnail--dragging):not(.ui__thumbnail--otherDragging):not(.ui__thumbnail--selected) {
+      background-color: $color-gray-3;
     }
   }
 

src/hooks/useFocusTrap.ts

@@ -1,4 +1,5 @@
 import { RefObject, useCallback, useEffect, useRef } from 'react';
+import { focusableElementDomString } from '../utils';
 
 export interface UseFocusTrapOptions {
   /**
@@ -7,20 +8,6 @@ export interface UseFocusTrapOptions {
   focusLastOnUnlock?: boolean;
 }
 
-const focusableElementDomString = [
-  'a[href]',
-  'area[href]',
-  'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
-  'select:not([disabled]):not([aria-hidden])',
-  'textarea:not([disabled]):not([aria-hidden])',
-  'button:not([disabled]):not([aria-hidden])',
-  'iframe',
-  'object',
-  'embed',
-  '[contenteditable]',
-  '[tabindex]:not([tabindex^="-"])',
-].join(',');
-
 function findFocusableIndex(elements: NodeListOf<HTMLElement>, toFind: Element | EventTarget | null) {
   let index = -1;
   if (!toFind) return index;

src/utils/domUtils.ts

@@ -59,3 +59,20 @@ export function generateClickEventFromKeyboardEvent(keyboardEvent: KeyboardEvent
   });
   return clickEvent;
 }
+
+/**
+ * A string for querying all focusable elements.
+ */
+export const focusableElementDomString = [
+  'a[href]',
+  'area[href]',
+  'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+  'select:not([disabled]):not([aria-hidden])',
+  'textarea:not([disabled]):not([aria-hidden])',
+  'button:not([disabled]):not([aria-hidden])',
+  'iframe',
+  'object',
+  'embed',
+  '[contenteditable]',
+  '[tabindex]:not([tabindex^="-"])',
+].join(',');