@economic/taco 1.21.6 → 1.21.8

package/dist/taco.cjs.development.js

@@ -10431,6 +10431,57 @@ const useTableRowCreation = (data, tableRef) => {
   };
 };
 
+const RowContext = /*#__PURE__*/React__default.createContext({
+  isActive: false,
+  editMode: {
+    validationErrors: null,
+    setValidationErrors: () => {},
+    rowMoveReason: {},
+    setRowMoveReason: () => {}
+  },
+  isHovered: false,
+  setIsHovered: () => {}
+});
+const RowContextProvider = ({
+  isActiveRow,
+  children,
+  meta
+}) => {
+  // we use non-css hovered state to determine whether to render actions or not, for performance
+  const [isHovered, setIsHovered] = React__default.useState(false);
+  // editing specific functionality
+  const [validationErrors, setValidationErrors] = React__default.useState(null);
+  const [rowMoveReason, setRowMoveReason] = React__default.useState({});
+  // This effect aims to focus the first focussable cell when edit mode is turned on.
+  React__default.useEffect(() => {
+    var _meta$tableRef$curren;
+    const isFocusInsideTable = (_meta$tableRef$curren = meta.tableRef.current) === null || _meta$tableRef$curren === void 0 ? void 0 : _meta$tableRef$curren.contains(document.activeElement);
+    // If the foucs is outside the table i.e., table action popups, search etc., then don't focus the first cell.
+    if (isActiveRow && isFocusInsideTable) {
+      meta.editMode.moveToFirstColumn(meta.focussableColumnIndexes);
+    }
+    // We are intentionally not adding activeRow to the depency variable so that everytime active row is changed,
+    // first focussable cell is not focussed.
+  }, [meta.editMode.isEditing, meta.focussableColumnIndexes]);
+  const context = React__default.useMemo(() => {
+    return {
+      isActive: isActiveRow,
+      editMode: {
+        validationErrors,
+        setValidationErrors,
+        rowMoveReason,
+        setRowMoveReason
+      },
+      isHovered,
+      setIsHovered
+    };
+  }, [isActiveRow, isHovered, rowMoveReason, validationErrors]);
+  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
+    value: context
+  }, children);
+};
+const useRowContext = () => React__default.useContext(RowContext);
+
 const COLUMN_ID_FOR_DRAGGABLE = '__draggable';
 const COLUMN_ID_FOR_SELECTION = '__select';
 const COLUMN_ID_FOR_EXPANSION = '__expansion';
@@ -10676,6 +10727,13 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
   table,
   texts
 }) => {
+  const {
+    isActive,
+    isHovered
+  } = useRowContext();
+  if (!isHovered && !isActive) {
+    return null;
+  }
   const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(row.original) : action.visible : true;
   const visibleActions = actions.filter(isVisible);
   const visibleMoreActions = moreActions.filter(isVisible);
@@ -11074,28 +11132,6 @@ const getNextIndex = (direction, currentIndex, focussableColumnIndexes) => {
   return currentIndexPosition + 1 < length ? currentIndexPosition + 1 : currentIndexPosition;
 };
 
-const RowContext = /*#__PURE__*/React__default.createContext({
-  validationErrors: null,
-  setValidationErrors: () => undefined,
-  rowMoveReason: {},
-  setRowMoveReason: () => undefined
-});
-const useRowContext = () => {
-  const context = React__default.useContext(RowContext);
-  if (context === undefined) {
-    throw new Error('useRowContext must be used within a RowProvider');
-  }
-  return context;
-};
-const RowProvider = ({
-  children,
-  ...providerProps
-}) => {
-  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
-    value: providerProps
-  }, children);
-};
-
 var IndicatorReason;
 (function (IndicatorReason) {
   IndicatorReason["SEARCH"] = "SEARCH";
@@ -11130,7 +11166,8 @@ const useIndicatorText = reason => {
 const Indicator = ({
   reason,
   columnName,
-  mountNode
+  mountNode,
+  validationErrors
 }) => {
   const container = React__default.useMemo(() => {
     const element = document.createElement('div');
@@ -11138,9 +11175,6 @@ const Indicator = ({
     return element;
   }, []);
   const indicatorText = useIndicatorText(reason);
-  const {
-    validationErrors
-  } = useRowContext();
   const hasValidationErrorsInRow = !!validationErrors;
   React__default.useEffect(() => {
     // mountNode could be null when rows are filtered
@@ -11255,8 +11289,11 @@ const Cell = function Cell(props) {
     focussableColumnIndexes: allFocussableColumnIndexes
   } = meta;
   const {
-    validationErrors,
-    rowMoveReason
+    editMode: {
+      validationErrors,
+      rowMoveReason
+    },
+    isHovered: isHoveredRow
   } = useRowContext();
   const hasValidationErrorsInRow = !!validationErrors;
   const internalRef = React__default.useRef(null);
@@ -11264,7 +11301,6 @@ const Cell = function Cell(props) {
   const disableTruncation = (_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.disableTruncation;
   const cellClassName = (_cell$column$columnDe2 = cell.column.columnDef.meta) === null || _cell$column$columnDe2 === void 0 ? void 0 : _cell$column$columnDe2.className;
   const isActiveRow = meta.activeRowIndex === rowIndex;
-  const isHoveredRow = meta.hoveredRowIndex === rowIndex;
   const isPinned = !!cell.column.getIsPinned();
   const isDragging = meta.dragging[cell.row.id];
   const isSelected = cell.row.getIsSelected();
@@ -11276,7 +11312,7 @@ const Cell = function Cell(props) {
   const isEditingThisRow = meta.editMode.isEditing && isActiveRow;
   const canEditThisCell = isEditingThisRow && isDataColumn;
   const isEditingThisCell = canEditThisCell && meta.editMode.columnIndex === index;
-  const isHoveringThisRowWhileEditing = meta.editMode.isEditing && isHoveredRow;
+  const isHoveringThisRowWhileEditing = meta.editMode.isEditing && isHoveredRow && !meta.shouldPauseHoverState;
   const isIndicatorVisible = Object.keys(rowMoveReason).length > 0;
   React__default.useEffect(() => {
     // Adds padding to the table so that indicator doesn't get cropped
@@ -11293,8 +11329,8 @@ const Cell = function Cell(props) {
     'border-b': !isLastRow,
     'sticky z-[1]': isPinned,
     // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
-    'bg-white': !isActiveRow && !isSelected && !isHoveredRow,
-    'bg-grey-100': !isActiveRow && !isSelected && isHoveredRow,
+    'bg-white': !isActiveRow && !isSelected,
+    'group-hover/row:bg-grey-100': !isActiveRow && !isSelected && !meta.shouldPauseHoverState,
     'bg-grey-200 group-hover/row:bg-grey-200': isActiveRow && !isSelected,
     'bg-blue-100': isSelected,
     '!wcag-blue-500': isDragging,
@@ -11475,7 +11511,7 @@ const Cell = function Cell(props) {
           } else {
             moveRow(MOVE_DIR.PREV);
           }
-          meta.setHoveredRowIndex(undefined);
+          meta.setShouldPauseHoverState(true);
           return;
         }
         if (!detailModeEditing && event.key === 'ArrowDown') {
@@ -11491,7 +11527,7 @@ const Cell = function Cell(props) {
           } else {
             moveRow(MOVE_DIR.NEXT);
           }
-          meta.setHoveredRowIndex(undefined);
+          meta.setShouldPauseHoverState(true);
           return;
         }
       };
@@ -11505,6 +11541,7 @@ const Cell = function Cell(props) {
       onSave: meta.editMode.onSave,
       rowIndex: rowIndex,
       table: table,
+      tableRef: tableRef,
       ref: controlRef,
       rowValues: rows[rowIndex].original,
       rowsLength: rows.length
@@ -11525,7 +11562,7 @@ const Cell = function Cell(props) {
   }, reactTable$1.flexRender(cell.column.columnDef.cell, cell.getContext())));
 };
 const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var _cell$column$columnDe4, _cell$column$columnDe5, _cellRef$current, _cellRef$current$pare, _rowMoveReason$cellId;
+  var _cell$column$columnDe4, _cell$column$columnDe5, _cellRef$current2, _cellRef$current2$par, _rowMoveReason$cellId;
   const {
     cell,
     cellRef,
@@ -11535,13 +11572,17 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     onSave: handleSave,
     rowIndex,
     rowValues,
-    table
+    table,
+    tableRef
   } = props;
   const {
-    validationErrors,
-    setValidationErrors,
-    rowMoveReason,
-    setRowMoveReason
+    editMode: {
+      validationErrors,
+      setValidationErrors,
+      rowMoveReason,
+      setRowMoveReason
+    },
+    isHovered
   } = useRowContext();
   const controlRef = useMergedRef(ref);
   const cellId = cell.column.id;
@@ -11553,7 +11594,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     globalFilter
   } = table.getState();
   const [state, setState] = React__default.useState(value);
-  const isHoveringAnotherRowWhileEditing = meta.editMode.isEditing && meta.activeRowIndex !== rowIndex && meta.hoveredRowIndex === rowIndex;
+  const isHoveringAnotherRowWhileEditing = meta.editMode.isEditing && meta.activeRowIndex !== rowIndex && isHovered;
   const hasValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;
   // On each save, the initialValue will be set to the new value of the cell
   const initialValue = React__default.useRef(value);
@@ -11614,14 +11655,32 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
       (_controlRef$current = controlRef.current) === null || _controlRef$current === void 0 ? void 0 : (_controlRef$current$f = _controlRef$current.focus) === null || _controlRef$current$f === void 0 ? void 0 : _controlRef$current$f.call(_controlRef$current);
     }
   }, [isEditingThisCell, controlRef.current]);
-  // make sure the cell becomes active if the field is focused
+  const pinnedColumnsWidth = React__default.useMemo(() => {
+    const pinnedColumns = table.getState().columnPinning.left;
+    if (Array.isArray(pinnedColumns) && pinnedColumns.length > 0) {
+      const lastPinnedColumn = pinnedColumns[pinnedColumns.length - 1];
+      const lastPinnedColumnOffset = meta.columnOffsets[lastPinnedColumn];
+      if (lastPinnedColumnOffset !== undefined) {
+        var _table$getState$colum;
+        return lastPinnedColumnOffset + ((_table$getState$colum = table.getState().columnSizing[lastPinnedColumn]) !== null && _table$getState$colum !== void 0 ? _table$getState$colum : 0);
+      }
+    }
+    return 0;
+  }, [meta.columnOffsets, table.getState().columnSizing]);
   const handleFocus = event => {
-    var _event$target;
+    var _event$target, _cellRef$current;
     meta.editMode.setColumn(columnIndex);
     if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
       var _event$target2;
       (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.select();
     }
+    // ensure the field is always visible (e.g. not hidden behind the pinned columns)
+    const rect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
+    const leftOffset = meta.columnOffsets[cellId];
+    if (rect && leftOffset && rect.left < pinnedColumnsWidth) {
+      var _tableRef$current4;
+      (_tableRef$current4 = tableRef.current) === null || _tableRef$current4 === void 0 ? void 0 : _tableRef$current4.scrollTo(leftOffset - pinnedColumnsWidth, tableRef.current.scrollTop);
+    }
   };
   React__default.useEffect(() => {
     if (hasChanged(initialValue.current, state)) {
@@ -11677,7 +11736,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     'data-inline-editing-component': 'true'
   };
   const className = cn(getCellAlignmentClasses((_cell$column$columnDe5 = cell.column.columnDef.meta) === null || _cell$column$columnDe5 === void 0 ? void 0 : _cell$column$columnDe5.align));
-  const indicatorMountNode = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : (_cellRef$current$pare = _cellRef$current.parentElement) === null || _cellRef$current$pare === void 0 ? void 0 : _cellRef$current$pare.querySelector(':first-child');
+  const indicatorMountNode = (_cellRef$current2 = cellRef.current) === null || _cellRef$current2 === void 0 ? void 0 : (_cellRef$current2$par = _cellRef$current2.parentElement) === null || _cellRef$current2$par === void 0 ? void 0 : _cellRef$current2$par.querySelector(':first-child');
   let controlComponent;
   if (cellControl) {
     if (typeof cellControl === 'function') {
@@ -11734,7 +11793,8 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, indicatorReason !== null && /*#__PURE__*/React__default.createElement(Indicator, {
     reason: indicatorReason,
     columnName: String(cell.column.columnDef.header),
-    mountNode: indicatorMountNode
+    mountNode: indicatorMountNode,
+    validationErrors: validationErrors
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "relative flex-grow"
   }, controlComponent, hasValidationError && /*#__PURE__*/React__default.createElement(ValidationError, null, String(cellValidationError))));
@@ -12016,44 +12076,24 @@ const getSortingFn = dataType => {
   return 'auto';
 };
 
-const isResizingPinnedColumn = (columnId, table) => {
-  var _table$getState$colum, _table$getState$colum2;
-  return !!columnId && ((_table$getState$colum = table.getState().columnPinning.left) === null || _table$getState$colum === void 0 ? void 0 : _table$getState$colum.includes((_table$getState$colum2 = table.getState().columnSizingInfo) === null || _table$getState$colum2 === void 0 ? void 0 : _table$getState$colum2.isResizingColumn));
-};
-const getOffsetsFromSize = (pinning, visibility, sizing) => {
-  const pinned = pinning.left.filter(c => visibility[c] !== false);
-  const offsets = {};
-  let leftOffset = 0;
-  for (const k of pinned) {
-    if (!Number.isInteger(sizing[k])) {
-      break;
-    }
-    offsets[k] = leftOffset;
-    leftOffset += sizing[k];
-  }
-  return offsets;
-};
 // pinned columns have position sticky, and because we support more than one of them
 // we must set a 'left' css value. this hook listens to changes on state that will
 // affect the left offset (resize, visibility, pinning) and updates offsets based on width
 const useColumnOffsetStateListener = (table, setColumnOffsets) => {
   const {
-    columnPinning,
-    columnSizing,
+    columnOrder,
     columnSizingInfo,
     columnVisibility
   } = table.getState();
   React__default.useEffect(() => {
-    if (isResizingPinnedColumn(columnSizingInfo.isResizingColumn, table)) {
-      setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
-    }
-  }, [columnSizingInfo]);
-  React__default.useEffect(() => {
-    setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
-  }, [columnVisibility]);
-  React__default.useEffect(() => {
-    setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
-  }, [columnPinning.left]);
+    const offsets = {};
+    // store left offsets for each visible column
+    table.getVisibleLeafColumns().reduce((offset, column) => {
+      offsets[column.id] = offset;
+      return offset + column.getSize();
+    }, 0);
+    setColumnOffsets(offsets);
+  }, [columnOrder, columnSizingInfo, columnVisibility]);
 };
 
 const useRowSelectionListener = (table, onRowSelect) => {
@@ -12134,6 +12174,21 @@ const useActiveRowStateListener = (table, rows, activeRowIndex) => {
   }, [table.getState().columnFilters, rows.length]);
 };
 
+const useShouldPauseHoverState = () => {
+  const [shouldPauseHoverState, setShouldPauseHoverState] = React__default.useState(false);
+  // as soon as the mouse starts moving again, unpause hover state
+  React__default.useEffect(() => {
+    const move = () => setShouldPauseHoverState(false);
+    if (shouldPauseHoverState) {
+      document.addEventListener('mousemove', move);
+    }
+    return () => {
+      document.removeEventListener('mousemove', move);
+    };
+  }, [shouldPauseHoverState]);
+  return [shouldPauseHoverState, setShouldPauseHoverState];
+};
+
 function useTable$1(children, props, ref) {
   var _settings$columnOrder, _ref, _settings$columnPinni, _settings$columnPinni2, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
   const {
@@ -12200,9 +12255,9 @@ function useTable$1(children, props, ref) {
   const dataColumnEndOffset = actionsForRow.length ? 1 : 0;
   // custom
   const activeRow = useActiveRow(defaultActiveRowIndex);
-  const [hoveredRowIndex, setHoveredRowIndex] = React__default.useState(undefined);
+  const [shouldPauseHoverState, setShouldPauseHoverState] = useShouldPauseHoverState();
   const editMode = useEditMode(onSave);
-  const [columnOffsets, setColumnOffsets] = React__default.useState(getOffsetsFromSize(initialState.columnPinning, initialState.columnVisibility, initialState.columnSizing));
+  const [columnOffsets, setColumnOffsets] = React__default.useState({});
   const [rowDensity, setRowDensity] = React__default.useState((_settings$rowDensity = settings === null || settings === void 0 ? void 0 : settings.rowDensity) !== null && _settings$rowDensity !== void 0 ? _settings$rowDensity : 'normal');
   const [dragging, setDragging] = React__default.useState({});
   const [shouldPauseSortingAndFiltering, setShouldPauseSortingAndFiltering] = React__default.useState(false);
@@ -12273,17 +12328,18 @@ function useTable$1(children, props, ref) {
       rowDensity,
       setRowDensity,
       // dragging
+      enableRowDragging: !!onRowDrag,
       dragging,
       setDragging,
       // computed
       enableColumnReordering: !disableColumnReordering,
+      shouldPauseHoverState,
+      setShouldPauseHoverState,
       // resorting
       shouldPauseSortingAndFiltering,
       setShouldPauseSortingAndFiltering,
       // other
       onRowClick,
-      hoveredRowIndex,
-      setHoveredRowIndex,
       // data column positions
       dataColumnStartOffset,
       dataColumnEndOffset,
@@ -12894,58 +12950,37 @@ function BatchActionsMenu({
   }, content));
 }
 
-const HOVER_THRESHOLD_MS = 50;
-const Row$1 = ({
+const InternalRow = ({
   row,
   rowIndex,
   table,
   ...props
 }) => {
+  const {
+    setIsHovered
+  } = useRowContext();
   const meta = table.options.meta;
   const isActiveRow = meta.activeRowIndex === rowIndex;
   const isDragging = meta.dragging[row.id];
-  const [validationErrors, setValidationErrors] = React__default.useState(null);
-  const [rowMoveReason, setRowMoveReason] = React__default.useState({});
-  // This effect aims to focus the first focussable cell when edit mode is turned on.
-  React__default.useEffect(() => {
-    var _meta$tableRef$curren;
-    const isFocusInsideTable = (_meta$tableRef$curren = meta.tableRef.current) === null || _meta$tableRef$curren === void 0 ? void 0 : _meta$tableRef$curren.contains(document.activeElement);
-    // If the foucs is outside the table i.e., table action popups, search etc., then don't focus the first cell.
-    if (meta.editMode.isEditing && isActiveRow && isFocusInsideTable) {
-      meta.editMode.moveToFirstColumn(meta.focussableColumnIndexes);
-    }
-    // We are intentionally not adding activeRow to the depency variable so that everytime active row is changed,
-    // first focussable cell is not focussed.
-  }, [meta.editMode.isEditing, meta.focussableColumnIndexes]);
-  const handleSetValidationErrors = errors => {
-    if (errors !== null) {
-      meta.setShouldDisableTableActions(true);
-    }
-    setValidationErrors(errors);
-  };
-  const hoverTimerRef = React__default.useRef();
-  const handleEnter = () => {
-    hoverTimerRef.current = setTimeout(() => meta.setHoveredRowIndex(rowIndex), HOVER_THRESHOLD_MS);
-  };
-  const handleLeave = () => {
-    clearTimeout(hoverTimerRef.current);
-    hoverTimerRef.current = undefined;
-    meta.setHoveredRowIndex(undefined);
-  };
-  return /*#__PURE__*/React__default.createElement(RowProvider, {
-    validationErrors: validationErrors,
-    setValidationErrors: handleSetValidationErrors,
-    rowMoveReason: rowMoveReason,
-    setRowMoveReason: setRowMoveReason
-  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
-    "aria-current": isActiveRow ? 'true' : undefined,
-    "aria-grabbed": isDragging ? 'true' : undefined,
-    "data-row-index": rowIndex,
-    draggable: true,
-    onMouseEnter: handleEnter,
-    onMouseLeave: handleLeave,
-    role: "row"
-  })));
+  const attributes = {
+    ...props,
+    'aria-current': isActiveRow ? true : undefined,
+    'aria-grabbed': isDragging ? true : undefined,
+    'data-row-index': rowIndex,
+    draggable: meta.enableRowDragging ? true : undefined,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    role: 'row'
+  };
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes));
+};
+const Row$1 = props => {
+  const meta = props.table.options.meta;
+  const isActiveRow = meta.activeRowIndex === props.rowIndex;
+  return /*#__PURE__*/React__default.createElement(RowContextProvider, {
+    isActiveRow: isActiveRow,
+    meta: props.table.options.meta
+  }, /*#__PURE__*/React__default.createElement(InternalRow, Object.assign({}, props)));
 };
 
 const Column$1 = ({
@@ -13355,7 +13390,7 @@ const Search$2 = props => {
     (_props$onSearch3 = props.onSearch) === null || _props$onSearch3 === void 0 ? void 0 : _props$onSearch3.call(props, value);
   };
   useGlobalKeyboardShortcut(event => {
-    if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
+    if (event.key === 'f' && (event.ctrlKey || event.metaKey) && !event.shiftKey) {
       if (document.activeElement !== ref.current) {
         var _ref$current;
         event.preventDefault();
@@ -13601,7 +13636,10 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
           meta.setActiveRowIndex(0);
           virtualiser.scrollToOffset(0);
         } else {
-          meta.moveToPreviousRow(rows, nextIndex => virtualiser.scrollToIndex(nextIndex - 1));
+          meta.moveToPreviousRow(rows, nextIndex => {
+            meta.setShouldPauseHoverState(true);
+            virtualiser.scrollToIndex(nextIndex - 1);
+          });
         }
         return;
       } else if (event.key === 'ArrowDown') {
@@ -13611,6 +13649,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
           virtualiser.scrollToOffset(virtualiser.totalSize + 1);
         } else {
           meta.moveToNextRow(rows, nextIndex => {
+            meta.setShouldPauseHoverState(true);
             // the virtualiser doesn't always scroll right to the bottom for the last row
             if (nextIndex === rows.length - 1) {
               var _tableRef$current;
@@ -13752,9 +13791,9 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     }
   };
   let handleMouseLeave;
-  if (meta.hoveredRowIndex !== undefined) {
+  if (meta.shouldPauseHoverState) {
     // sometimes the row's onMouseLeave doesn't trigger, this adds some extra redundancy
-    handleMouseLeave = () => meta.setHoveredRowIndex(undefined);
+    handleMouseLeave = () => meta.setShouldPauseHoverState(false);
   }
   const className = cn('bg-white border border-grey-300 focus:yt-focus focus:border-blue-500 grid auto-rows-max overflow-auto relative rounded group', props.className);
   const enableSettingsButton = table.options.enablePinning || table.options.enableHiding || meta.enableColumnReordering;