@economic/taco 1.21.6 → 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';
@@ -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;
         }
       };
@@ -11538,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;
@@ -11553,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);
@@ -11734,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))));
@@ -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,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');
@@ -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 = ({
@@ -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;