@economic/taco 1.21.5 → 1.21.7

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';
@@ -10497,6 +10548,44 @@ function createRowDraggableColumn(onRowDrag, texts) {
     size: 10
   };
 }
+const SelectCell = /*#__PURE__*/React__default.memo(({
+  lastSelectedRowIndex,
+  rowIndex,
+  isSelected,
+  table,
+  tableRef,
+  texts,
+  toggleSelected
+}) => {
+  const meta = table.options.meta;
+  const handleClick = event => {
+    var _tableRef$current;
+    event.stopPropagation();
+    if (event.shiftKey) {
+      const [fromIndex, toIndex] = toggleBetween$1((lastSelectedRowIndex === null || lastSelectedRowIndex === void 0 ? void 0 : lastSelectedRowIndex.current) || 0, rowIndex);
+      table.getRowModel().rows.slice(fromIndex, toIndex + 1).forEach(row => row.toggleSelected(true));
+    } else {
+      toggleSelected();
+    }
+    lastSelectedRowIndex.current = rowIndex;
+    meta.setActiveRowIndex(rowIndex);
+    (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+  };
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSelected ? texts.table2.columns.select.select : texts.table2.columns.select.deselect, /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      className: "ml-2",
+      keys: ['Space']
+    }))
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    "aria-label": isSelected ? texts.table2.columns.select.select : texts.table2.columns.select.deselect,
+    className: "hover:border-blue !mt-[0.45rem]",
+    checked: isSelected,
+    onClick: handleClick,
+    // this is necessary to remove console spam from eslint
+    onChange: () => false,
+    tabIndex: -1
+  }));
+});
 function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowIndex, onRowDrag, tableRef, texts) {
   let header;
   let cell;
@@ -10515,44 +10604,23 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
       indeterminate: table.getIsSomePageRowsSelected(),
       onChange: checked => table.toggleAllPageRowsSelected(checked),
       onClick: () => {
-        var _tableRef$current;
-        (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+        var _tableRef$current2;
+        (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.focus();
       },
       tabIndex: -1
     }));
     cell = ({
       row,
       table
-    }) => {
-      const meta = table.options.meta;
-      const handleClick = event => {
-        var _tableRef$current2;
-        event.stopPropagation();
-        if (event.shiftKey) {
-          const [fromIndex, toIndex] = toggleBetween$1((lastSelectedRowIndex === null || lastSelectedRowIndex === void 0 ? void 0 : lastSelectedRowIndex.current) || 0, row.index);
-          table.getRowModel().rows.slice(fromIndex, toIndex + 1).forEach(row => row.toggleSelected(true));
-        } else {
-          row.toggleSelected();
-        }
-        lastSelectedRowIndex.current = row.index;
-        meta.setActiveRowIndex(row.index);
-        (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.focus();
-      };
-      return /*#__PURE__*/React__default.createElement(Tooltip, {
-        title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, row.getIsSelected() ? texts.table2.columns.select.select : texts.table2.columns.select.deselect, /*#__PURE__*/React__default.createElement(Shortcut$1, {
-          className: "ml-2",
-          keys: ['Space']
-        }))
-      }, /*#__PURE__*/React__default.createElement(Checkbox, {
-        "aria-label": row.getIsSelected() ? texts.table2.columns.select.select : texts.table2.columns.select.deselect,
-        className: "hover:border-blue !mt-[0.45rem]",
-        checked: row.getIsSelected(),
-        onClick: handleClick,
-        // this is necessary to remove console spam from eslint
-        onChange: () => false,
-        tabIndex: -1
-      }));
-    };
+    }) => /*#__PURE__*/React__default.createElement(SelectCell, {
+      lastSelectedRowIndex: lastSelectedRowIndex,
+      rowIndex: row.index,
+      isSelected: row.getIsSelected(),
+      table: table,
+      tableRef: tableRef,
+      texts: texts,
+      toggleSelected: row.toggleSelected
+    });
   } else {
     cell = ({
       row,
@@ -10594,6 +10662,27 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
     size: 46
   };
 }
+const ExpandCell = /*#__PURE__*/React__default.memo(({
+  isExpanded,
+  toggleExpanded,
+  texts
+}) => {
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isExpanded ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand, /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      className: "ml-2",
+      keys: ['Ctrl', isExpanded ? '←' : '→']
+    }))
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    title: isExpanded ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand,
+    appearance: "discrete",
+    icon: isExpanded ? 'chevron-down' : 'chevron-right',
+    onClick: event => {
+      event.stopPropagation();
+      toggleExpanded();
+    },
+    tabIndex: -1
+  }));
+});
 function createRowExpansionColumn(texts) {
   return {
     id: COLUMN_ID_FOR_EXPANSION,
@@ -10614,21 +10703,11 @@ function createRowExpansionColumn(texts) {
     })),
     cell: ({
       row
-    }) => /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, row.getIsExpanded() ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand, /*#__PURE__*/React__default.createElement(Shortcut$1, {
-        className: "ml-2",
-        keys: ['Ctrl', row.getIsExpanded() ? '←' : '→']
-      }))
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
-      title: row.getIsExpanded() ? texts.table2.columns.expansion.collapse : texts.table2.columns.expansion.expand,
-      appearance: "discrete",
-      icon: row.getIsExpanded() ? 'chevron-down' : 'chevron-right',
-      onClick: event => {
-        event.stopPropagation();
-        row.toggleExpanded();
-      },
-      tabIndex: -1
-    })),
+    }) => /*#__PURE__*/React__default.createElement(ExpandCell, {
+      isExpanded: row.getIsExpanded(),
+      toggleExpanded: row.toggleExpanded,
+      texts: texts
+    }),
     meta: {
       align: 'center',
       className: 'items-center !p-0',
@@ -10641,13 +10720,20 @@ function createRowExpansionColumn(texts) {
   };
 }
 const getActionPropertyValue = (property, row) => typeof property === 'function' ? property(row) : property;
-function RowActionCell({
+const RowActionsCell = /*#__PURE__*/React__default.memo(({
   row,
   actions,
   moreActions,
   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);
@@ -10695,7 +10781,7 @@ function RowActionCell({
     }, getActionPropertyValue(action.text, row.original))))),
     tooltip: texts.table2.columns.actions.tooltip
   }) : null);
-}
+});
 function createRowActionsColumn(rowActions, texts) {
   const actions = rowActions.length === 4 ? rowActions : rowActions.slice(0, 3);
   const moreActions = rowActions.slice(rowActions.length === 4 ? 4 : 3);
@@ -10704,7 +10790,7 @@ function createRowActionsColumn(rowActions, texts) {
     cell: ({
       row,
       table
-    }) => /*#__PURE__*/React__default.createElement(RowActionCell, {
+    }) => /*#__PURE__*/React__default.createElement(RowActionsCell, {
       row: row,
       actions: actions,
       moreActions: moreActions,
@@ -10714,7 +10800,7 @@ function createRowActionsColumn(rowActions, texts) {
     meta: {
       align: 'right',
       className: row => cn('items-center print:opacity-0 group-[[aria-current]]/row:sticky group-hover/row:sticky right-0 bg-transparent !px-1', {
-        'group-[[aria-current]]/row:!shadow-[-6px_0px_6px_theme(colors.grey.200)]': !row.getIsSelected(),
+        'group-[[aria-current]]/row:!shadow-[-6px_0px_6px_theme(colors.grey.200)] group-hover/row:!shadow-[-6px_0px_6px_theme(colors.grey.100)]': !row.getIsSelected(),
         'shadow-[-6px_0px_6px_theme(colors.blue.100)]': row.getIsSelected()
       }),
       disableTruncation: true,
@@ -11046,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";
@@ -11102,7 +11166,8 @@ const useIndicatorText = reason => {
 const Indicator = ({
   reason,
   columnName,
-  mountNode
+  mountNode,
+  validationErrors
 }) => {
   const container = React__default.useMemo(() => {
     const element = document.createElement('div');
@@ -11110,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
@@ -11227,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);
@@ -11236,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();
@@ -11248,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
@@ -11265,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,
@@ -11447,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') {
@@ -11463,7 +11527,7 @@ const Cell = function Cell(props) {
           } else {
             moveRow(MOVE_DIR.NEXT);
           }
-          meta.setHoveredRowIndex(undefined);
+          meta.setShouldPauseHoverState(true);
           return;
         }
       };
@@ -11510,10 +11574,13 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     table
   } = props;
   const {
-    validationErrors,
-    setValidationErrors,
-    rowMoveReason,
-    setRowMoveReason
+    editMode: {
+      validationErrors,
+      setValidationErrors,
+      rowMoveReason,
+      setRowMoveReason
+    },
+    isHovered
   } = useRowContext();
   const controlRef = useMergedRef(ref);
   const cellId = cell.column.id;
@@ -11525,7 +11592,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);
@@ -11682,7 +11749,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
           break;
         case 'switch':
           controlComponent = /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
-            className: cn('mx-2', detailModeClassName),
+            className: cn('mx-2 mt-1.5', detailModeClassName),
             checked: Boolean(state),
             onChange: setState,
             ref: controlRef
@@ -11706,7 +11773,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))));
@@ -12106,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 {
@@ -12172,7 +12255,7 @@ 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 [rowDensity, setRowDensity] = React__default.useState((_settings$rowDensity = settings === null || settings === void 0 ? void 0 : settings.rowDensity) !== null && _settings$rowDensity !== void 0 ? _settings$rowDensity : 'normal');
@@ -12245,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,
@@ -12324,8 +12408,7 @@ const useVirtualiser = ({
   const virtualiser = reactVirtual.useVirtual({
     parentRef: tableRef,
     size: rows.length,
-    estimateSize,
-    overscan: 10
+    estimateSize
   });
   const paddingTop = virtualiser.virtualItems.length > 0 ? ((_virtualiser$virtualI = virtualiser.virtualItems) === null || _virtualiser$virtualI === void 0 ? void 0 : (_virtualiser$virtualI2 = _virtualiser$virtualI[0]) === null || _virtualiser$virtualI2 === void 0 ? void 0 : _virtualiser$virtualI2.start) || 0 : 0;
   const paddingBottom = virtualiser.virtualItems.length > 0 ? virtualiser.totalSize - (((_virtualiser$virtualI3 = virtualiser.virtualItems) === null || _virtualiser$virtualI3 === void 0 ? void 0 : (_virtualiser$virtualI4 = _virtualiser$virtualI3[virtualiser.virtualItems.length - 1]) === null || _virtualiser$virtualI4 === void 0 ? void 0 : _virtualiser$virtualI4.end) || 0) : 0;
@@ -12867,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 = ({
@@ -13574,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') {
@@ -13584,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;
@@ -13725,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;
@@ -13739,7 +13805,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     return summaryIds.length && summaryIds.some(v => !visibleIds.includes(v));
   }, [footers, columnVisibility]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex h-full w-full flex-col gap-4 overflow-hidden"
+    className: "-m-0.5 flex h-full w-[calc(100%_+_0.25rem)] flex-col gap-4 overflow-hidden p-0.5"
   }, hasToolbar ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-wrap gap-2"
   }, toolbar, hasInternalToolbar ? /*#__PURE__*/React__default.createElement(Group, {