@ndla/ui 19.1.1 → 20.0.2

package/src/TreeStructure/FolderItem.tsx

@@ -6,13 +6,14 @@
  *
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { KeyboardEvent, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { ArrowDropDown } from '@ndla/icons/common';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { colors, spacing, misc, animations } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
+import { arrowNavigation } from './arrowNavigation';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
   background: transparent;
@@ -49,7 +50,10 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   }
 `;
 
-const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
+const FolderName = styled('button', { shouldForwardProp: (name) => !['marked', 'noArrow'].includes(name) })<{
+  marked: boolean;
+  noArrow?: boolean;
+}>`
   line-height: 1;
   background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
   color: ${colors.text.primary};
@@ -81,16 +85,19 @@ const FolderNameLink = FolderName.withComponent(SafeLink);
 interface Props {
   name: string;
   id: string;
-  onToggleOpen: (id: string) => void;
+  level: number;
+  onCloseFolder: (id: string) => void;
+  onOpenFolder: (id: string) => void;
   onMarkFolder: (id: string) => void;
+  onSelectFolder?: (id: string) => void;
   isOpen: boolean;
   markedFolderId?: string;
   focusedFolderId?: string;
+  visibleFolders: string[];
   loading?: boolean;
   openOnFolderClick?: boolean;
   hideArrow?: boolean;
   setFocusedFolderId: SetFocusedFolderId;
-  url?: string;
   icon?: React.ReactNode;
   noPaddingWhenArrowIsHidden?: boolean;
   folderChild?: FolderChildFuncType;
@@ -99,62 +106,61 @@ interface Props {
 const FolderItem = ({
   hideArrow,
   loading,
+  level,
   name,
   id,
-  onToggleOpen,
+  visibleFolders,
+  onCloseFolder,
+  onOpenFolder,
   onMarkFolder,
+  onSelectFolder,
   isOpen,
   markedFolderId,
   focusedFolderId,
   openOnFolderClick,
   setFocusedFolderId,
   icon,
-  url,
   noPaddingWhenArrowIsHidden,
   folderChild,
 }: Props) => {
-  const folderNameLinkRef = useRef<HTMLAnchorElement | null>(null);
-  const folderNameButtonRef = useRef<HTMLButtonElement | null>(null);
+  const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
+  const marked = markedFolderId === id;
+
+  const handleMarkFolder = () => {
+    onMarkFolder(id);
+    if (openOnFolderClick) {
+      if (isOpen) {
+        onCloseFolder(id);
+      } else {
+        onOpenFolder(id);
+      }
+    }
+  };
+
   useEffect(() => {
     if (focusedFolderId === id) {
-      if (url && folderNameLinkRef.current) {
-        folderNameLinkRef.current.focus();
-      } else if (folderNameButtonRef.current) {
-        folderNameButtonRef.current.focus();
+      if (ref.current) {
+        ref.current.focus();
       }
     }
-  }, [focusedFolderId, folderNameLinkRef, folderNameButtonRef, url, id]);
-  const marked = markedFolderId === id;
+  }, [focusedFolderId, ref, id]);
+
   return (
     <FolderItemWrapper>
       {!hideArrow && (
-        <OpenButton tabIndex={-1} isOpen={isOpen} disabled={loading} onClick={() => onToggleOpen(id)}>
+        <OpenButton
+          tabIndex={-1}
+          isOpen={isOpen}
+          disabled={loading}
+          onClick={() => (isOpen ? onCloseFolder(id) : onOpenFolder(id))}>
           <ArrowDropDown />
         </OpenButton>
       )}
-      {url ? (
-        <FolderNameLink
-          ref={folderNameLinkRef}
-          noArrow={hideArrow}
-          to={loading ? '' : url}
-          tabIndex={marked ? 0 : -1}
-          marked={marked}
-          onFocus={() => {
-            setFocusedFolderId(id);
-          }}
-          onClick={() => {
-            onMarkFolder(id);
-            if (openOnFolderClick) {
-              onToggleOpen(id);
-            }
-          }}>
-          {icon || <FolderOutlined />}
-          {name}
-        </FolderNameLink>
-      ) : (
+      {onSelectFolder ? (
         <>
           <FolderName
-            ref={folderNameButtonRef}
+            ref={ref}
+            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)}
             noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
             tabIndex={marked ? 0 : -1}
             marked={marked}
@@ -163,10 +169,8 @@ const FolderItem = ({
               setFocusedFolderId(id);
             }}
             onClick={() => {
-              onMarkFolder(id);
-              if (openOnFolderClick) {
-                onToggleOpen(id);
-              }
+              handleMarkFolder();
+              onSelectFolder(id);
             }}>
             {icon || <FolderOutlined />}
             {name}
@@ -177,6 +181,25 @@ const FolderItem = ({
             </WrapperForFolderChild>
           )}
         </>
+      ) : (
+        <FolderNameLink
+          ref={ref}
+          onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
+            arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)
+          }
+          noArrow={hideArrow}
+          to={loading ? '' : `/minndla/${level > 1 ? 'folders/' : ''}${id}`}
+          tabIndex={marked || level === 1 ? 0 : -1}
+          marked={marked}
+          onFocus={() => {
+            setFocusedFolderId(id);
+          }}
+          onClick={() => {
+            handleMarkFolder();
+          }}>
+          {icon || <FolderOutlined />}
+          {name}
+        </FolderNameLink>
       )}
     </FolderItemWrapper>
   );

package/src/TreeStructure/FolderItems.tsx

@@ -32,65 +32,73 @@ const StyledLI = styled.li`
 
 const FolderItems = ({
   loading,
-  data,
-  idPaths,
+  folders,
+  level,
   editable,
-  onToggleOpen,
+  onSelectFolder,
+  onCloseFolder,
+  onOpenFolder,
   onCreateNewFolder,
   onCancelNewFolder,
   onSaveNewFolder,
-  newFolder,
+  newFolderParentId,
+  visibleFolders,
   openFolders,
   markedFolderId,
   onMarkFolder,
   openOnFolderClick,
   focusedFolderId,
   setFocusedFolderId,
-  firstLevel,
   folderChild,
   maximumLevelsOfFoldersAllowed,
 }: FolderItemsProps) => (
-  <StyledUL role="group" firstLevel={firstLevel}>
-    {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
-      const newIdPaths = [...idPaths, _index];
+  <StyledUL role="group" firstLevel={level === 1}>
+    {folders.map(({ name, subfolders, id, icon }, _index) => {
       const isOpen = openFolders?.includes(id);
       return (
         <StyledLI key={id} role="treeitem">
           <div>
             <FolderItem
+              level={level}
               icon={icon}
-              url={url}
+              onSelectFolder={onSelectFolder}
               openOnFolderClick={openOnFolderClick}
               loading={loading}
               isOpen={isOpen}
               id={id}
+              visibleFolders={visibleFolders}
               name={name}
               markedFolderId={markedFolderId}
               focusedFolderId={focusedFolderId}
-              onToggleOpen={onToggleOpen}
               onMarkFolder={onMarkFolder}
-              hideArrow={dataChildren?.length === 0 || newIdPaths.length >= maximumLevelsOfFoldersAllowed}
-              noPaddingWhenArrowIsHidden={editable && firstLevel && dataChildren?.length === 0}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
+              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
+              noPaddingWhenArrowIsHidden={editable && level === 1 && subfolders?.length === 0}
               setFocusedFolderId={setFocusedFolderId}
               folderChild={folderChild}
             />
           </div>
-          {newFolder?.parentId === id && (
+          {newFolderParentId === id && (
             <FolderNameInput
+              parentId={newFolderParentId}
               loading={loading}
               onCancelNewFolder={onCancelNewFolder}
               onSaveNewFolder={onSaveNewFolder}
             />
           )}
-          {dataChildren && isOpen && (
+          {subfolders && isOpen && (
             <FolderItems
+              onSelectFolder={onSelectFolder}
               loading={loading}
-              newFolder={newFolder}
+              newFolderParentId={newFolderParentId}
+              visibleFolders={visibleFolders}
               openFolders={openFolders}
-              idPaths={newIdPaths}
+              level={level + 1}
               editable={editable}
-              data={dataChildren}
-              onToggleOpen={onToggleOpen}
+              folders={subfolders}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
               onCreateNewFolder={onCreateNewFolder}
               onSaveNewFolder={onSaveNewFolder}
               onCancelNewFolder={onCancelNewFolder}
@@ -99,7 +107,6 @@ const FolderItems = ({
               openOnFolderClick={openOnFolderClick}
               focusedFolderId={focusedFolderId}
               setFocusedFolderId={setFocusedFolderId}
-              firstLevel={false}
               folderChild={folderChild}
               maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
             />

package/src/TreeStructure/FolderNameInput.tsx

@@ -13,7 +13,7 @@ import { ArrowDropDown as ArrowDropDownRaw } from '@ndla/icons/common';
 import { spacing, colors, misc, animations } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { isMobile } from 'react-device-detect';
-import Spinner from '../Spinner';
+import { Spinner } from '@ndla/icons';
 
 const ArrowRight = styled(ArrowDropDownRaw)`
   color: ${colors.text.primary};
@@ -53,14 +53,15 @@ const StyledInput = styled.input`
 `;
 
 interface FolderNameInputProps {
-  onSaveNewFolder: (value: string) => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
+  parentId: string;
   onCancelNewFolder: () => void;
   loading?: boolean;
 }
 
-const FolderNameInput = ({ onSaveNewFolder, onCancelNewFolder, loading }: FolderNameInputProps) => {
+const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading }: FolderNameInputProps) => {
   const { t } = useTranslation();
-  const [value, setValue] = useState<string>(t('treeStructure.newFolder.defaultName'));
+  const [name, setName] = useState<string>(t('treeStructure.newFolder.defaultName'));
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -82,22 +83,19 @@ const FolderNameInput = ({ onSaveNewFolder, onCancelNewFolder, loading }: Folder
           autoFocus
           placeholder={t('treeStructure.newFolder.placeholder')}
           disabled={loading}
-          value={value}
+          value={name}
           onBlur={() => onCancelNewFolder()}
           onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
             if (e.key === 'Escape') {
               onCancelNewFolder();
-              return;
-            }
-            if (e.key === 'Enter' || e.key === 'Tab') {
-              onSaveNewFolder(value);
+            } else if (e.key === 'Enter' || e.key === 'Tab') {
               e.preventDefault();
+              onSaveNewFolder(name, parentId);
             }
-            return;
           }}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            const target = e.target as HTMLInputElement;
-            setValue(target.value);
+            const target = e.target;
+            setName(target.value);
           }}
         />
         {loading && <Spinner size="small" />}

package/src/TreeStructure/TreeStructure.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { uuid } from '@ndla/util';
 import { AddButton } from '@ndla/button';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
@@ -16,9 +15,8 @@ import { spacing, fonts } from '@ndla/core';
 import { uniq } from 'lodash';
 import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
-import { getIdPathsOfFolder, getPathOfFolder, getFolderName } from './helperFunctions';
-import keyboardNavigation, { KEYBOARD_KEYS_OF_INTEREST } from './keyboardNavigation/keyboardNavigation';
-import { NewFolderProps, TreeStructureProps } from './TreeStructure.types';
+import { getPathOfFolder, getFolderName, flattenFolders } from './helperFunctions';
+import { TreeStructureProps } from './TreeStructure.types';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -32,26 +30,32 @@ const AddFolderWrapper = styled.div`
 `;
 
 const TreeStructure = ({
-  data,
+  folders,
   label,
   editable,
   loading,
   onNewFolder,
+  onSelectFolder,
   openOnFolderClick,
   framed,
   folderIdMarkedByDefault,
   defaultOpenFolders,
   folderChild,
-  maximumLevelsOfFoldersAllowed,
+  maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
-  const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
+  const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
   const [focusedFolderId, setFocusedFolderId] = useState<string | undefined>();
-  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || data[0]?.id);
+  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || folders[0]?.id);
   const treestructureRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const rootLevelId = useMemo(() => uuid(), []); // TODO: use useId hook when we update to React 18
+  const rootLevelId = 'treestructure-root';
+
+  const visibleFolders = useMemo(
+    () => flattenFolders(folders, openFolders).map((folder) => folder.id),
+    [folders, openFolders],
+  );
 
   useEffect(() => {
     if (defaultOpenFolders) {
@@ -63,54 +67,51 @@ const TreeStructure = ({
 
   useEffect(() => {
     if (!loading) {
-      setNewFolder(undefined);
+      setNewFolderParentId(undefined);
     }
   }, [loading]);
 
-  const onToggleOpen = (id: string) => {
-    if (openFolders.includes(id)) {
-      // Did we just closed a folder with a marked folder inside it?
-      // If so, we need to mark the folder we just closed.
-      if (markedFolderId) {
-        const closingFolderPath = getPathOfFolder(data, id);
-        const markedFolderPath = getPathOfFolder(data, markedFolderId);
-        const markedFolderIsSubPath = closingFolderPath.every(
-          (folderId, _index) => markedFolderPath[_index] === folderId,
-        );
-        if (markedFolderIsSubPath) {
+  const onCloseFolder = (id: string) => {
+    // Did we just closed a folder with a marked folder inside it?
+    // If so, we need to mark the folder we just closed.
+    if (markedFolderId) {
+      const closingFolderPath = getPathOfFolder(folders, id);
+      const markedFolderPath = getPathOfFolder(folders, markedFolderId);
+      const markedFolderIsSubPath = closingFolderPath.every(
+        (folderId, _index) => markedFolderPath[_index] === folderId,
+      );
+      if (markedFolderIsSubPath) {
+        if (onSelectFolder) {
           setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
+          onSelectFolder(closingFolderPath[closingFolderPath.length - 1]);
+        } else {
+          setFocusedFolderId(closingFolderPath[closingFolderPath.length - 1]);
         }
       }
-      setOpenFolders(openFolders.filter((folder) => folder !== id));
-    } else {
-      setOpenFolders(uniq([...openFolders, id]));
     }
+    setOpenFolders(openFolders.filter((folder) => folder !== id));
   };
 
-  const onCreateNewFolder = (props: { idPaths: number[]; parentId?: string }) => {
-    setNewFolder(props);
+  const onOpenFolder = (id: string) => {
+    setOpenFolders(uniq(openFolders.concat(id)));
   };
 
-  const onSaveNewFolder = (value: string) => {
-    if (newFolder) {
-      // We would like to create a new folder with the name of value.
-      // Its location in structure is based on newFolder object
-      onNewFolder({ ...newFolder, value }).then((newFolderId) => {
-        if (newFolderId) {
-          setMarkedFolderId(newFolderId);
-          setFocusedFolderId(newFolderId);
-          // Open current folder in case it was closed..
-
-          if (newFolder.parentId) {
-            setOpenFolders(uniq([...openFolders, newFolder.parentId]));
-          }
-        }
-      });
-    }
+  const onCreateNewFolder = (parentId: string) => {
+    setNewFolderParentId(parentId);
+  };
+
+  const onSaveNewFolder = (name: string, parentId: string) => {
+    onNewFolder(name, parentId).then((newFolderId) => {
+      if (newFolderId) {
+        setMarkedFolderId(newFolderId);
+        setFocusedFolderId(newFolderId);
+        setOpenFolders(uniq(openFolders.concat(parentId)));
+      }
+    });
   };
 
   const onCancelNewFolder = () => {
-    setNewFolder(undefined);
+    setNewFolderParentId(undefined);
   };
 
   const onMarkFolder = (id: string) => {
@@ -118,35 +119,25 @@ const TreeStructure = ({
     setFocusedFolderId(id);
   };
 
-  const paths = getPathOfFolder(data, markedFolderId || '');
+  const paths = getPathOfFolder(folders, markedFolderId || '');
   const canAddFolder = editable && paths.length < (maximumLevelsOfFoldersAllowed || 1);
 
   return (
-    <div
-      ref={treestructureRef}
-      onKeyDown={(e) => {
-        if (wrapperRef.current?.contains(document.activeElement) && KEYBOARD_KEYS_OF_INTEREST.includes(e.key)) {
-          keyboardNavigation({
-            e,
-            data,
-            setFocusedFolderId,
-            focusedFolderId,
-            onToggleOpen,
-            openFolders,
-          });
-        }
-      }}>
+    <div ref={treestructureRef}>
       {label && <StyledLabel htmlFor={rootLevelId}>{label}</StyledLabel>}
       <TreeStructureStyledWrapper ref={wrapperRef} id={rootLevelId} aria-label="Menu tree" role="tree" framed={framed}>
         <FolderItems
-          idPaths={[]}
-          data={data}
+          onSelectFolder={onSelectFolder}
+          level={1}
+          folders={folders}
           editable={editable}
-          onToggleOpen={onToggleOpen}
-          newFolder={newFolder}
+          onOpenFolder={onOpenFolder}
+          onCloseFolder={onCloseFolder}
+          newFolderParentId={newFolderParentId}
           onCreateNewFolder={onCreateNewFolder}
           onCancelNewFolder={onCancelNewFolder}
           onSaveNewFolder={onSaveNewFolder}
+          visibleFolders={visibleFolders}
           openFolders={openFolders}
           markedFolderId={markedFolderId}
           onMarkFolder={onMarkFolder}
@@ -154,7 +145,6 @@ const TreeStructure = ({
           loading={loading}
           focusedFolderId={focusedFolderId}
           setFocusedFolderId={setFocusedFolderId}
-          firstLevel
           folderChild={folderChild}
           maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
         />
@@ -165,16 +155,15 @@ const TreeStructure = ({
             tooltip={
               canAddFolder
                 ? t('myNdla.newFolderUnder', {
-                    folderName: getFolderName(data, markedFolderId),
+                    folderName: getFolderName(folders, markedFolderId),
                   })
-                : t('myNdla.maxFoldersAlreadyAdded')
+                : t('treeStructure.maxFoldersAlreadyAdded')
             }>
             <AddButton
               disabled={!canAddFolder}
               aria-label={t('myNdla.newFolder')}
               onClick={() => {
-                const idPaths = getIdPathsOfFolder(data, markedFolderId || '');
-                setNewFolder({ idPaths, parentId: paths[paths.length - 1] });
+                setNewFolderParentId(markedFolderId);
               }}>
               {t('myNdla.newFolder')}
             </AddButton>
@@ -185,8 +174,4 @@ const TreeStructure = ({
   );
 };
 
-TreeStructure.defaultProps = {
-  maximumLevelsOfFoldersAllowed: MAX_LEVEL_FOR_FOLDERS,
-};
-
 export default TreeStructure;

package/src/TreeStructure/TreeStructure.types.ts

@@ -11,35 +11,29 @@ import React, { ReactNode } from 'react';
 export interface FolderStructureProps {
   id: string;
   name: string;
-  isOpen?: boolean;
-  data?: FolderStructureProps[];
+  subfolders: FolderStructureProps[];
   isFavorite?: boolean;
   status?: string;
   openAsDefault?: boolean;
-  url?: string;
   icon?: ReactNode;
 }
 
-export interface NewFolderProps {
-  parentId?: string;
-  idPaths: number[];
-}
-
 interface CommonFolderProps {
-  data: FolderStructureProps[];
   editable?: boolean;
   loading?: boolean;
   openOnFolderClick?: boolean;
+  onSelectFolder?: (id: string) => void;
 }
 
 export interface TreeStructureProps extends CommonFolderProps {
+  folders: FolderStructureProps[];
   framed?: boolean;
   label?: string;
   folderIdMarkedByDefault?: string;
-  onNewFolder: (props: { value: string; parentId?: string; idPaths: number[] }) => Promise<string>;
+  onNewFolder: (name: string, parentId: string) => Promise<string>;
   defaultOpenFolders?: string[];
   folderChild?: FolderChildFuncType;
-  maximumLevelsOfFoldersAllowed: number;
+  maximumLevelsOfFoldersAllowed?: number;
 }
 
 export type onCreateNewFolderProp = ({
@@ -56,18 +50,20 @@ export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | un
 export type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
 
 export interface FolderItemsProps extends CommonFolderProps {
-  onToggleOpen: (id: string) => void;
-  onSaveNewFolder: (value: string) => void;
+  folders: FolderStructureProps[];
+  onCloseFolder: (id: string) => void;
+  onOpenFolder: (id: string) => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
   onCancelNewFolder: () => void;
-  onCreateNewFolder: onCreateNewFolderProp;
-  newFolder: NewFolderProps | undefined;
+  onCreateNewFolder: (parentId: string) => void;
+  newFolderParentId: string | undefined;
+  visibleFolders: string[];
   openFolders: string[];
   markedFolderId?: string;
   onMarkFolder: (id: string) => void;
-  idPaths: number[];
+  level: number;
   focusedFolderId: string | undefined;
   setFocusedFolderId: SetFocusedFolderId;
-  firstLevel: boolean;
   keyNavigationFocusIsCreateFolderButton?: boolean;
   icon?: ReactNode;
   folderChild?: FolderChildFuncType;

package/src/TreeStructure/arrowNavigation.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { KeyboardEvent } from 'react';
+
+const navigateVertical = (
+  visibleFolders: string[],
+  folderId: string,
+  setFocusedFolderId: (id: string) => void,
+  direction: 1 | -1,
+) => {
+  const currentIndex = visibleFolders.findIndex((id) => id === folderId);
+  const target = visibleFolders[currentIndex + direction];
+  if (target !== undefined) {
+    setFocusedFolderId(target);
+  }
+};
+
+const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+export const arrowNavigation = (
+  e: KeyboardEvent<HTMLElement>,
+  id: string,
+  visibleFolders: string[],
+  setFocusedFolderId: (id: string) => void,
+  onOpen: (id: string) => void,
+  onClose: (id: string) => void,
+) => {
+  if (!arrowKeys.includes(e.key)) {
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  switch (e.key) {
+    case 'ArrowUp':
+      return navigateVertical(visibleFolders, id, setFocusedFolderId, -1);
+    case 'ArrowDown':
+      return navigateVertical(visibleFolders, id, setFocusedFolderId, 1);
+    case 'ArrowLeft':
+      return onClose(id);
+    case 'ArrowRight':
+      return onOpen(id);
+    default:
+      return;
+  }
+};