Merge pull request #208 from axonivy/improve-table-keyboard-support

Improve useTableKeyHandler-Hook

Author: ivy-edp

packages/components/src/components/common/table/hooks/hooks.tsx

@@ -124,6 +124,7 @@ interface KeyHandlerOptions<TData> {
   multiSelect?: boolean;
   reorder?: { updateOrder?: (moveIndexes: number[], toIndex: number) => void; getRowId?: (row: TData) => string };
   lazyLoadChildren?: (row: Row<TData>) => void;
+  resetSelectionOnTab?: boolean;
 }
 
 interface TableKeyboardHandlerProps<TData> {
@@ -141,16 +142,17 @@ export const useTableKeyHandler = <TData,>({ table, data, options }: TableKeyboa
     const actions: Record<string, () => void> = {
       ArrowUp: () => handleArrowKeyUpDown(event, -1),
       ArrowDown: () => handleArrowKeyUpDown(event, 1),
-      ArrowLeft: () => toggleExpand(table.getSelectedRowModel().flatRows[0], true, options?.lazyLoadChildren),
-      ArrowRight: () => toggleExpand(table.getSelectedRowModel().flatRows[0], false, options?.lazyLoadChildren),
-      Tab: () => table.resetRowSelection(),
+      ArrowLeft: () => toggleExpand(false, table.getSelectedRowModel().flatRows[0], options?.lazyLoadChildren),
+      ArrowRight: () => toggleExpand(true, table.getSelectedRowModel().flatRows[0], options?.lazyLoadChildren),
+      Tab: () => options?.resetSelectionOnTab && table.resetRowSelection(),
       Enter: () => onEnterAction?.(table.getSelectedRowModel().flatRows[0])
     };
 
     actions[event.key]?.();
   };
 
   const handleArrowKeyUpDown = (event: React.KeyboardEvent<HTMLTableElement>, direction: -1 | 1) => {
+    event.preventDefault();
     const { multiSelect = false, reorder } = options || {};
     const allRows = table.getRowModel().rows;
     const selectedRows = table.getSelectedRowModel().flatRows;
@@ -175,6 +177,7 @@ export const useTableKeyHandler = <TData,>({ table, data, options }: TableKeyboa
       table.resetRowSelection();
       allRows[newReorderIndex].toggleSelected();
       setRootIndex(newReorderIndex);
+      event.currentTarget.rows[newReorderIndex].scrollIntoView({ block: 'center' });
     }
   };
 
@@ -208,7 +211,10 @@ export const useTableKeyHandler = <TData,>({ table, data, options }: TableKeyboa
   return { handleKeyDown };
 };
 
-const toggleExpand = <TData,>(row: Row<TData>, expand: boolean, loadChildren?: (row: Row<TData>) => void) => {
+const toggleExpand = <TData,>(expand: boolean, row?: Row<TData>, loadChildren?: (row: Row<TData>) => void) => {
+  if (row === undefined || !row.getCanExpand()) {
+    return;
+  }
   if (expand && !row.getIsExpanded()) {
     loadChildren?.(row);
     row.toggleExpanded();

packages/components/src/components/common/table/row/row.stories.tsx

@@ -258,7 +258,8 @@ export const MultiSelectWithReorder: Story = {
       data,
       options: {
         multiSelect: true,
-        reorder: { updateOrder: updateDataArray, getRowId: row => row.id }
+        reorder: { updateOrder: updateDataArray, getRowId: row => row.id },
+        resetSelectionOnTab: true
       }
     });
 

packages/components/src/components/common/table/table.css.ts

@@ -17,10 +17,9 @@ export const table = style({
   tableLayout: 'fixed',
   borderCollapse: 'collapse',
   fontSize: '12px',
-  selectors: {
-    '&:focus-visible': {
-      border: vars.border.active
-    }
+  ':focus-visible': {
+    outline: 'none',
+    border: vars.border.active
   }
 });
 

packages/components/src/components/editor/browser/data.ts

@@ -138,7 +138,13 @@ export const cmsData: Array<CmsBrowserNode> = [
         icon: IvyIcons.FolderOpen,
         children: [
           { value: 'accepted', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'akzeptiert', en: 'accepted' } },
-          { value: 'deslined', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'abgelehnt', en: 'deslined' } }
+          { value: 'declined', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'abgelehnt', en: 'declined' } },
+          { value: 'pending', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'ausstehend', en: 'pending' } },
+          { value: 'processed', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'bearbeitet', en: 'processed' } },
+          { value: 'rejected', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'zurück', en: 'rejected' } },
+          { value: 'confirmed', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'bestätigt', en: 'confirmed' } },
+          { value: 'archived', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'archiviert', en: 'archived' } },
+          { value: 'draft', info: 'STRING', icon: IvyIcons.ChangeType, children: [], cmsValues: { de: 'Entwurf', en: 'draft' } }
         ],
         cmsValues: {}
       },