@vuu-ui/vuu-table 0.8.23-debug → 0.8.24-debug

package/esm/index.js

@@ -418,9 +418,9 @@ import { metadataKeys as metadataKeys6, useId } from "@vuu-ui/vuu-utils";
 import { useForkRef } from "@salt-ds/core";
 import cx9 from "clsx";
 import {
-  forwardRef,
-  useRef as useRef15,
-  useState as useState8
+  forwardRef as forwardRef2,
+  useRef as useRef16,
+  useState as useState9
 } from "react";
 
 // src/Row.tsx
@@ -433,7 +433,11 @@ import {
   RowSelected
 } from "@vuu-ui/vuu-utils";
 import cx7 from "clsx";
-import { memo, useCallback as useCallback9 } from "react";
+import {
+  forwardRef,
+  memo,
+  useCallback as useCallback9
+} from "react";
 
 // src/table-cell/TableCell.tsx
 import { isNumericColumn } from "@vuu-ui/vuu-utils";
@@ -537,9 +541,23 @@ var TableGroupCell = ({
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var { IDX, IS_EXPANDED, SELECTED } = metadataKeys2;
 var classBase6 = "vuuTableRow";
+var RowProxy = forwardRef(
+  function RowProxy2({ height }, forwardedRef) {
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cx7(classBase6, `${classBase6}-proxy`),
+        ref: forwardedRef,
+        style: { height }
+      }
+    );
+  }
+);
 var Row = memo(
   ({
     className: classNameProp,
+    classNameGenerator,
     columnMap,
     columns,
     highlighted,
@@ -566,14 +584,19 @@ var Row = memo(
       [onClick, row]
     );
     const { True, First, Last } = RowSelected;
-    const className = cx7(classBase6, classNameProp, {
-      [`${classBase6}-even`]: zebraStripes && rowIndex % 2 === 0,
-      [`${classBase6}-expanded`]: isExpanded,
-      [`${classBase6}-highlighted`]: highlighted,
-      [`${classBase6}-selected`]: selectionStatus & True,
-      [`${classBase6}-selectedStart`]: selectionStatus & First,
-      [`${classBase6}-selectedEnd`]: selectionStatus & Last
-    });
+    const className = cx7(
+      classBase6,
+      classNameProp,
+      classNameGenerator == null ? void 0 : classNameGenerator(row, columnMap),
+      {
+        [`${classBase6}-even`]: zebraStripes && rowIndex % 2 === 0,
+        [`${classBase6}-expanded`]: isExpanded,
+        [`${classBase6}-highlighted`]: highlighted,
+        [`${classBase6}-selected`]: selectionStatus & True,
+        [`${classBase6}-selectedStart`]: selectionStatus & First,
+        [`${classBase6}-selectedEnd`]: selectionStatus & Last
+      }
+    );
     const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
     const handleGroupCellClick = useCallback9(
       (evt, column) => {
@@ -791,7 +814,7 @@ import {
 import {
   useCallback as useCallback19,
   useEffect as useEffect4,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef14,
   useState as useState7
 } from "react";
@@ -1336,7 +1359,6 @@ var useDataSource = ({
       if (isMounted.current) {
         forceUpdate({});
       } else {
-        console.log(`ignore update as we're not mounted`);
       }
     },
     [dataWindow]
@@ -1899,11 +1921,11 @@ var columnReducer = (state, action) => {
   }
 };
 var useTableModel = (tableConfigProp, dataSource) => {
-  const [state, dispatchColumnAction] = useReducer(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
+  const [state, dispatchTableModelAction] = useReducer(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
   const { columns, headings, tableConfig, ...tableAttributes } = state;
   return {
     columns,
-    dispatchColumnAction,
+    dispatchTableModelAction,
     headings,
     tableAttributes,
     tableConfig
@@ -2224,11 +2246,13 @@ var useTableScroll = ({
   onHorizontalScroll,
   onVerticalScroll,
   onVerticalScrollInSitu,
+  rowHeight,
   scrollingApiRef,
   setRange,
   viewportMeasurements
 }) => {
   const firstRowRef = useRef11(0);
+  const rowHeightRef = useRef11(rowHeight);
   const contentContainerScrolledRef = useRef11(false);
   const contentContainerPosRef = useRef11({
     scrollTop: 0,
@@ -2510,10 +2534,19 @@ var useTableScroll = ({
     [scrollHandles]
   );
   useEffect3(() => {
-    const { current: from } = firstRowRef;
-    const rowRange = { from, to: from + viewportRowCount };
-    setRange(rowRange);
-  }, [setRange, viewportRowCount]);
+    if (rowHeight !== rowHeightRef.current) {
+      rowHeightRef.current = rowHeight;
+      if (contentContainerPosRef.current.scrollTop > 0) {
+        if (contentContainerRef.current) {
+          contentContainerRef.current.scrollTop = 0;
+        }
+      }
+    } else {
+      const { current: from } = firstRowRef;
+      const rowRange = { from, to: from + viewportRowCount };
+      setRange(rowRange);
+    }
+  }, [rowHeight, setRange, viewportRowCount]);
   return {
     columnsWithinViewport: columnsWithinViewportRef.current,
     /** Ref to be assigned to ScrollbarContainer */
@@ -2775,6 +2808,38 @@ var useTableAndColumnSettings = ({
   };
 };
 
+// src/useRowClassNameGenerators.ts
+import {
+  getRowClassNameGenerator
+} from "@vuu-ui/vuu-utils";
+import { useMemo as useMemo6 } from "react";
+var createClassNameGenerator = (ids) => {
+  const functions = [];
+  ids == null ? void 0 : ids.forEach((id) => {
+    const fn = getRowClassNameGenerator(id);
+    if (fn) {
+      functions.push(fn.fn);
+    }
+  });
+  return (row, columnMap) => {
+    const classNames = [];
+    functions == null ? void 0 : functions.forEach((fn) => {
+      const className = fn(row, columnMap);
+      if (className) {
+        classNames.push(className);
+      }
+    });
+    return classNames.join(" ");
+  };
+};
+var useRowClassNameGenerators = ({
+  rowClassNameGenerators
+}) => {
+  return useMemo6(() => {
+    return createClassNameGenerator(rowClassNameGenerators);
+  }, [rowClassNameGenerators]);
+};
+
 // src/useTable.ts
 var stripInternalProperties = (tableConfig) => {
   return tableConfig;
@@ -2819,8 +2884,9 @@ var useTable = ({
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
+  const rowClassNameGenerator = useRowClassNameGenerators(config);
   const useRowDragDrop = allowDragDrop ? useDragDrop2 : useNullDragDrop;
-  const menuBuilder = useMemo6(
+  const menuBuilder = useMemo7(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
@@ -2829,37 +2895,37 @@ var useTable = ({
   }, []);
   const {
     columns,
-    dispatchColumnAction,
+    dispatchTableModelAction,
     headings,
     tableAttributes,
     tableConfig
   } = useTableModel(config, dataSource);
   useLayoutEffectSkipFirst2(() => {
-    dispatchColumnAction({
+    dispatchTableModelAction({
       type: "init",
       tableConfig: config,
       dataSource
     });
-  }, [config, dataSource, dispatchColumnAction]);
+  }, [config, dataSource, dispatchTableModelAction]);
   const applyTableConfigChange = useCallback19(
     (config2) => {
-      dispatchColumnAction({
+      dispatchTableModelAction({
         type: "init",
         tableConfig: config2,
         dataSource
       });
       onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(config2));
     },
-    [dataSource, dispatchColumnAction, onConfigChange]
+    [dataSource, dispatchTableModelAction, onConfigChange]
   );
-  const columnMap = useMemo6(
+  const columnMap = useMemo7(
     () => buildColumnMap2(dataSource.columns),
     [dataSource.columns]
   );
   const onSubscribed = useCallback19(
     ({ tableSchema }) => {
       if (tableSchema) {
-        dispatchColumnAction({
+        dispatchTableModelAction({
           type: "setTableSchema",
           tableSchema
         });
@@ -2867,7 +2933,7 @@ var useTable = ({
         console.log("subscription message with no schema");
       }
     },
-    [dispatchColumnAction]
+    [dispatchTableModelAction]
   );
   const {
     getRowAtPosition,
@@ -2908,14 +2974,14 @@ var useTable = ({
   });
   const handleConfigEditedInSettingsPanel = useCallback19(
     (tableConfig2) => {
-      dispatchColumnAction({
+      dispatchTableModelAction({
         type: "init",
         tableConfig: tableConfig2,
         dataSource
       });
       onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(tableConfig2));
     },
-    [dataSource, dispatchColumnAction, onConfigChange]
+    [dataSource, dispatchTableModelAction, onConfigChange]
   );
   const handleDataSourceConfigChanged = useCallback19(
     (dataSourceConfig) => {
@@ -2927,14 +2993,21 @@ var useTable = ({
     [dataSource]
   );
   useEffect4(() => {
-    dataSource.on("config", (config2, confirmed) => {
-      dispatchColumnAction({
+    dataSource.on("config", (config2, confirmed, changes) => {
+      const scrollSensitiveChanges = (changes == null ? void 0 : changes.filterChanged) || (changes == null ? void 0 : changes.groupByChanged);
+      if (scrollSensitiveChanges && dataSource.range.from > 0) {
+        requestScroll({
+          type: "scroll-end",
+          direction: "home"
+        });
+      }
+      dispatchTableModelAction({
         type: "tableConfig",
         ...config2,
         confirmed
       });
     });
-  }, [dataSource, dispatchColumnAction]);
+  }, [dataSource, dispatchTableModelAction, requestScroll]);
   const handleCreateCalculatedColumn = useCallback19(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
@@ -2992,12 +3065,12 @@ var useTable = ({
           case "pinColumn":
             return pinColumn3(action);
           default:
-            dispatchColumnAction(action);
+            dispatchTableModelAction(action);
         }
       }
     },
     [
-      dispatchColumnAction,
+      dispatchTableModelAction,
       hideColumns2,
       pinColumn3,
       showColumnSettingsPanel,
@@ -3034,7 +3107,7 @@ var useTable = ({
         } else if (phase === "end") {
           resizeCells.current = void 0;
           if (isValidNumber(width)) {
-            dispatchColumnAction({
+            dispatchTableModelAction({
               type: "resizeColumn",
               phase,
               column,
@@ -3057,7 +3130,7 @@ var useTable = ({
               `.vuuTableCell${byColIndex},.vuuTableHeaderCell${byColIndex}`
             )) != null ? _c : []
           );
-          dispatchColumnAction({
+          dispatchTableModelAction({
             type: "resizeColumn",
             phase,
             column,
@@ -3070,7 +3143,13 @@ var useTable = ({
         );
       }
     },
-    [columns, dispatchColumnAction, onConfigChange, tableConfig, containerRef]
+    [
+      columns,
+      dispatchTableModelAction,
+      onConfigChange,
+      tableConfig,
+      containerRef
+    ]
   );
   const onToggleGroup = useCallback19(
     (row, column) => {
@@ -3083,7 +3162,7 @@ var useTable = ({
           const idx = columns.indexOf(column);
           const rows = (_a = dataSource.getRowsAtDepth) == null ? void 0 : _a.call(dataSource, idx + 1);
           if (rows && !rows.some((row2) => row2[IS_EXPANDED2] || row2[IS_LEAF2])) {
-            dispatchColumnAction({
+            dispatchTableModelAction({
               type: "hideColumns",
               columns: columns.slice(idx + 2)
             });
@@ -3099,7 +3178,7 @@ var useTable = ({
             columnsToShow.push(columns[idx + 1]);
           }
           if (columnsToShow.some((col) => col.hidden)) {
-            dispatchColumnAction({
+            dispatchTableModelAction({
               type: "showColumns",
               columns: columnsToShow
             });
@@ -3107,7 +3186,7 @@ var useTable = ({
         }
       }
     },
-    [columnMap, columns, dataSource, dispatchColumnAction]
+    [columnMap, columns, dataSource, dispatchTableModelAction]
   );
   const {
     highlightedIndexRef,
@@ -3211,14 +3290,14 @@ var useTable = ({
         ...tableConfig,
         columns: columns2
       };
-      dispatchColumnAction({
+      dispatchTableModelAction({
         type: "init",
         tableConfig: newTableConfig,
         dataSource
       });
       onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(newTableConfig));
     },
-    [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
+    [dataSource, dispatchTableModelAction, onConfigChange, tableConfig]
   );
   const handleDropRow = useCallback19(
     (dragDropState) => {
@@ -3256,6 +3335,7 @@ var useTable = ({
   return {
     ...containerProps,
     "aria-rowcount": dataSource.size,
+    rowClassNameGenerator,
     draggableRow,
     onBlur: editingBlur,
     onDoubleClick: editingDoubleClick,
@@ -3287,6 +3367,44 @@ var useTable = ({
   };
 };
 
+// src/useRowHeight.ts
+import { isValidNumber as isValidNumber2 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback20, useMemo as useMemo8, useRef as useRef15, useState as useState8 } from "react";
+var useRowHeight = ({
+  rowHeight: rowHeightProp = 0
+}) => {
+  const [rowHeight, setRowHeight] = useState8(rowHeightProp);
+  const heightRef = useRef15(rowHeight);
+  const resizeObserver = useMemo8(() => {
+    return new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { height: measuredHeight } = entry.contentRect;
+        const newHeight = Math.round(measuredHeight);
+        if (isValidNumber2(newHeight) && heightRef.current !== newHeight) {
+          heightRef.current = newHeight;
+          setRowHeight(newHeight);
+        }
+      }
+    });
+  }, []);
+  const rowRef = useCallback20(
+    (el) => {
+      if (el) {
+        if (rowHeightProp === 0) {
+          const { height } = el.getBoundingClientRect();
+          console.log(`measured rowHeight = ${height}`);
+          resizeObserver.observe(el);
+          setRowHeight(height);
+        }
+      } else {
+        resizeObserver.disconnect();
+      }
+    },
+    [resizeObserver, rowHeightProp]
+  );
+  return { rowHeight, rowRef };
+};
+
 // src/Table.tsx
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var classBase7 = "vuuTable";
@@ -3312,11 +3430,11 @@ var TableCore = ({
   onSelect,
   onSelectionChange,
   renderBufferSize = 5,
-  rowHeight = 20,
+  rowHeight,
   scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
-  headerHeight = showColumnHeaders ? 25 : 0,
+  headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,
   size
 }) => {
   const id = useId(idProp);
@@ -3329,6 +3447,7 @@ var TableCore = ({
     handleContextMenuAction,
     headings,
     highlightedIndex,
+    menuBuilder,
     onDataEdited,
     onMoveColumn,
     onMoveGroupColumn,
@@ -3337,7 +3456,7 @@ var TableCore = ({
     onRowClick,
     onSortColumn,
     onToggleGroup,
-    menuBuilder,
+    rowClassNameGenerator,
     scrollProps,
     tableAttributes,
     tableConfig,
@@ -3381,7 +3500,7 @@ var TableCore = ({
     "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
     "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
     "--header-height": `${headerHeight}px`,
-    "--row-height": `${rowHeight}px`,
+    "--row-height-prop": `${rowHeight}px`,
     "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
     "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
     "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
@@ -3434,6 +3553,7 @@ var TableCore = ({
                     Row2,
                     {
                       "aria-rowindex": data2[0] + 1,
+                      classNameGenerator: rowClassNameGenerator,
                       columnMap,
                       columns: scrollProps.columnsWithinViewport,
                       highlighted: highlightedIndex === data2[IDX3],
@@ -3457,7 +3577,7 @@ var TableCore = ({
     }
   );
 };
-var Table = forwardRef(function TableNext({
+var Table = forwardRef2(function TableNext({
   Row: Row2,
   allowDragDrop,
   availableColumns,
@@ -3478,7 +3598,7 @@ var Table = forwardRef(function TableNext({
   onSelect,
   onSelectionChange,
   renderBufferSize,
-  rowHeight,
+  rowHeight: rowHeightProp,
   scrollingApiRef,
   selectionModel,
   showColumnHeaders,
@@ -3486,8 +3606,9 @@ var Table = forwardRef(function TableNext({
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = useRef15(null);
-  const [size, setSize] = useState8();
+  const containerRef = useRef16(null);
+  const [size, setSize] = useState9();
+  const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });
   if (config === void 0) {
     throw Error(
       "vuu Table requires config prop. Minimum config is list of Column Descriptors"
@@ -3496,7 +3617,7 @@ var Table = forwardRef(function TableNext({
   if (dataSource === void 0) {
     throw Error("vuu Table requires dataSource prop");
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs9(
     MeasuredContainer,
     {
       ...htmlAttributes,
@@ -3504,47 +3625,50 @@ var Table = forwardRef(function TableNext({
       id,
       onResize: setSize,
       ref: useForkRef(containerRef, forwardedRef),
-      children: size ? /* @__PURE__ */ jsx12(
-        TableCore,
-        {
-          Row: Row2,
-          allowDragDrop,
-          availableColumns,
-          config,
-          containerRef,
-          dataSource,
-          disableFocus,
-          headerHeight,
-          highlightedIndex,
-          id,
-          navigationStyle,
-          onAvailableColumnsChange,
-          onConfigChange,
-          onDragStart,
-          onDrop,
-          onFeatureInvocation,
-          onHighlight,
-          onRowClick,
-          onSelect,
-          onSelectionChange,
-          renderBufferSize,
-          rowHeight,
-          scrollingApiRef,
-          selectionModel,
-          showColumnHeaders,
-          size
-        }
-      ) : null
+      children: [
+        /* @__PURE__ */ jsx12(RowProxy, { ref: rowRef, height: rowHeightProp }),
+        size && rowHeight ? /* @__PURE__ */ jsx12(
+          TableCore,
+          {
+            Row: Row2,
+            allowDragDrop,
+            availableColumns,
+            config,
+            containerRef,
+            dataSource,
+            disableFocus,
+            headerHeight,
+            highlightedIndex,
+            id,
+            navigationStyle,
+            onAvailableColumnsChange,
+            onConfigChange,
+            onDragStart,
+            onDrop,
+            onFeatureInvocation,
+            onHighlight,
+            onRowClick,
+            onSelect,
+            onSelectionChange,
+            renderBufferSize,
+            rowHeight,
+            scrollingApiRef,
+            selectionModel,
+            showColumnHeaders,
+            size
+          }
+        ) : null
+      ]
     }
   );
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-import { memo as memo3, useCallback as useCallback20 } from "react";
+import { memo as memo3, useCallback as useCallback21 } from "react";
 import { CheckboxIcon, WarnCommit } from "@vuu-ui/vuu-ui-controls";
 import { Checkbox } from "@salt-ds/core";
 import {
-  dataAndColumnUnchanged,
+  dataColumnAndKeyUnchanged,
   dispatchCustomEvent,
   registerComponent
 } from "@vuu-ui/vuu-utils";
@@ -3552,8 +3676,8 @@ import { jsx as jsx13 } from "react/jsx-runtime";
 var CheckboxCell = memo3(
   ({ column, columnMap, onCommit = WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
-    const isChecked = row[dataIdx];
-    const handleCommit = useCallback20(
+    const isChecked = !!row[dataIdx];
+    const handleCommit = useCallback21(
       (value) => async (evt) => {
         const res = await onCommit(value);
         if (res === true) {
@@ -3565,7 +3689,7 @@ var CheckboxCell = memo3(
     );
     return column.editable ? /* @__PURE__ */ jsx13(Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ jsx13(CheckboxIcon, { checked: isChecked, disabled: true });
   },
-  dataAndColumnUnchanged
+  dataColumnAndKeyUnchanged
 );
 CheckboxCell.displayName = "CheckboxCell";
 registerComponent("checkbox-cell", CheckboxCell, "cell-renderer", {
@@ -3592,9 +3716,10 @@ var InputCell = ({
   row
 }) => {
   const dataIdx = columnMap[column.name];
+  const dataValue = row[dataIdx];
   const { align = "left", clientSideEditValidationCheck } = column;
   const { warningMessage, ...editProps } = useEditableText({
-    initialValue: row[dataIdx],
+    initialValue: dataValue,
     onCommit,
     clientSideEditValidationCheck
   });
@@ -3612,19 +3737,21 @@ var InputCell = ({
     }
   );
 };
-registerComponent2("input-cell", InputCell, "cell-renderer", {});
+registerComponent2("input-cell", InputCell, "cell-renderer", {
+  userCanAssign: false
+});
 
 // src/cell-renderers/toggle-cell/ToggleCell.tsx
 import { WarnCommit as WarnCommit3 } from "@vuu-ui/vuu-ui-controls";
 import {
-  dataAndColumnUnchanged as dataAndColumnUnchanged2,
+  dataColumnAndKeyUnchanged as dataColumnAndKeyUnchanged2,
   dispatchCustomEvent as dispatchCustomEvent2,
   isTypeDescriptor,
   isValueListRenderer,
   registerComponent as registerComponent3
 } from "@vuu-ui/vuu-utils";
 import cx11 from "clsx";
-import { memo as memo4, useCallback as useCallback21 } from "react";
+import { memo as memo4, useCallback as useCallback22 } from "react";
 import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var classBase9 = "vuuTableToggleCell";
@@ -3647,7 +3774,7 @@ var ToggleCell = memo4(
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];
-    const handleCommit = useCallback21(
+    const handleCommit = useCallback22(
       (evt, value2) => {
         return onCommit(value2).then((response) => {
           if (response === true) {
@@ -3670,18 +3797,20 @@ var ToggleCell = memo4(
       }
     );
   },
-  dataAndColumnUnchanged2
+  dataColumnAndKeyUnchanged2
 );
-registerComponent3("toggle-cell", ToggleCell, "cell-renderer", {});
+registerComponent3("toggle-cell", ToggleCell, "cell-renderer", {
+  userCanAssign: false
+});
 
 // src/useControlledTableNavigation.ts
 import { useStateRef } from "@vuu-ui/vuu-ui-controls";
 import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback22, useRef as useRef16 } from "react";
+import { useCallback as useCallback23, useRef as useRef17 } from "react";
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = useRef16(null);
+  const tableRef = useRef17(null);
   const [highlightedIndexRef, setHighlightedIndex] = useStateRef(initialValue);
-  const handleKeyDown = useCallback22(
+  const handleKeyDown = useCallback23(
     (e) => {
       var _a;
       if (e.key === "ArrowDown") {
@@ -3700,7 +3829,7 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
     },
     [highlightedIndexRef, rowCount, setHighlightedIndex]
   );
-  const handleHighlight = useCallback22(
+  const handleHighlight = useCallback23(
     (idx) => {
       setHighlightedIndex(idx);
     },