add improvements

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

@@ -123,6 +123,7 @@ export const useMultiSelectRow = <TData,>(table: Table<TData>) => {
 interface KeyHandlerOptions<TData> {
   multiSelect?: boolean;
   reorder?: { updateOrder?: (moveIndexes: number[], toIndex: number) => void; getRowId?: (row: TData) => string };
+  lazyLoadChildren?: (row: Row<TData>) => void;
 }
 
 interface TableKeyboardHandlerProps<TData> {
@@ -131,7 +132,7 @@ interface TableKeyboardHandlerProps<TData> {
   options?: KeyHandlerOptions<TData>;
 }
 
-export const useTableKeyHandler = <TData,>(props: TableKeyboardHandlerProps<TData>) => {
+export const useTableKeyHandler = <TData,>({ table, data, options }: TableKeyboardHandlerProps<TData>) => {
   const [rootIndex, setRootIndex] = React.useState<number | undefined>(undefined);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableElement>, onEnterAction?: (row: Row<TData>) => void) => {
@@ -140,34 +141,27 @@ export const useTableKeyHandler = <TData,>(props: TableKeyboardHandlerProps<TDat
     switch (event.key) {
       case 'ArrowUp':
       case 'ArrowDown': {
-        onArrowKeyDownUpTableHandler({ ...props, event });
+        handleArrowKeyUpDown(event);
         break;
       }
       case 'ArrowRight':
-        toggleExpand(props.table.getSelectedRowModel().flatRows, true);
+        toggleExpand(table.getSelectedRowModel().flatRows, true, options?.lazyLoadChildren);
         break;
       case 'ArrowLeft':
-        toggleExpand(props.table.getSelectedRowModel().flatRows, false);
+        toggleExpand(table.getSelectedRowModel().flatRows, false, options?.lazyLoadChildren);
         break;
       case 'Tab':
-        props.table.resetRowSelection();
+        table.resetRowSelection();
         break;
       case 'Enter':
-        if (props.table.getSelectedRowModel().flatRows.length === 1 && onEnterAction) {
-          onEnterAction(props.table.getSelectedRowModel().flatRows[0]);
-        }
+        handleEnterKey(table.getSelectedRowModel().flatRows, onEnterAction);
         break;
       default:
         break;
     }
   };
 
-  const onArrowKeyDownUpTableHandler = <TData,>({
-    table,
-    data,
-    event,
-    options
-  }: TableKeyboardHandlerProps<TData> & { event: React.KeyboardEvent<HTMLTableElement> }) => {
+  const handleArrowKeyUpDown = (event: React.KeyboardEvent<HTMLTableElement>) => {
     const { multiSelect = false, reorder } = options || {};
     const allRows = table.getRowModel().rows;
     const selectedRows = table.getSelectedRowModel().flatRows;
@@ -188,15 +182,15 @@ export const useTableKeyHandler = <TData,>(props: TableKeyboardHandlerProps<TDat
       resetAndSetRowSelection(table, data, moveIds, reorder.getRowId);
       setRootIndex(newReorderIndex);
     } else if (multiSelect && event.shiftKey) {
-      toggleShiftRow(direction, newSelectIndex, allRows, selectedRows);
+      toggleRowWithShift(direction, newSelectIndex, allRows, selectedRows);
     } else {
       table.resetRowSelection();
       allRows[newReorderIndex].toggleSelected();
       setRootIndex(newReorderIndex);
     }
   };
 
-  const toggleShiftRow = <TData,>(
+  const toggleRowWithShift = <TData,>(
     direction: -1 | 1,
     newIndex: number | undefined,
     allRows: Array<Row<TData>>,
@@ -209,26 +203,27 @@ export const useTableKeyHandler = <TData,>(props: TableKeyboardHandlerProps<TDat
       setRootIndex(selectedRows[0].index);
     }
     if (direction === 1) {
-      if (rootIndex === allRows.indexOf(selectedRows[0]) || selectedRows.length === 1) {
-        allRows[newIndex].toggleSelected();
-      } else {
-        selectedRows[0].toggleSelected();
-      }
+      const shouldToggleFirst = rootIndex === allRows.indexOf(selectedRows[0]) || selectedRows.length === 1;
+      shouldToggleFirst ? allRows[newIndex].toggleSelected() : selectedRows[0].toggleSelected();
     } else {
-      if (rootIndex === allRows.indexOf(selectedRows[selectedRows.length - 1]) || selectedRows.length === 1) {
-        allRows[newIndex].toggleSelected();
-      } else {
-        selectedRows[selectedRows.length - 1].toggleSelected();
-      }
+      const shouldToggleLast = rootIndex === allRows.indexOf(selectedRows[selectedRows.length - 1]) || selectedRows.length === 1;
+      shouldToggleLast ? allRows[newIndex].toggleSelected() : selectedRows[selectedRows.length - 1].toggleSelected();
     }
   };
 
   return { handleKeyDown };
 };
 
-const toggleExpand = <TData,>(rows: Row<TData>[], expand: boolean) => {
+const handleEnterKey = <TData,>(selectedRows: Array<Row<TData>>, onEnterAction?: (row: Row<TData>) => void) => {
+  if (selectedRows.length === 1 && onEnterAction) {
+    onEnterAction(selectedRows[0]);
+  }
+};
+
+const toggleExpand = <TData,>(rows: Row<TData>[], expand: boolean, loadChildren?: (row: Row<TData>) => void) => {
   if (rows.length === 1) {
     if (expand && !rows[0].getIsExpanded()) {
+      loadChildren && loadChildren(rows[0]);
       rows[0].toggleExpanded();
     } else if (!expand && rows[0].getIsExpanded()) {
       rows[0].toggleExpanded();

packages/components/src/components/editor/browser/browser.tsx

@@ -80,7 +80,7 @@ export const useBrowser = (
       ...select.tableState
     }
   });
-  const { handleKeyDown } = useTableKeyHandler({ table, data });
+  const { handleKeyDown } = useTableKeyHandler({ table, data, options: { lazyLoadChildren: options?.loadChildren } });
   return { table, globalFilter: { filter, setFilter }, handleKeyDown };
 };