@economic/taco 2.17.0 → 2.17.2

package/dist/taco.cjs.development.js

@@ -10090,7 +10090,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     disabled: disabled,
     onClick: handleClick,
     ref: ref,
-    role: "button",
+    role: "combobox",
     tabIndex: disabled || readOnly ? -1 : tabIndex,
     type: "button"
   }), children, /*#__PURE__*/React__default.createElement(Icon, {
@@ -12897,7 +12897,7 @@ function DisplayCell(props) {
       index,
       tableRef
     };
-  }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);
+  }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex, className]);
   return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, memoedProps, {
     highlighted: highlighted,
     highlightedAsCurrent: highlightedAsCurrent
@@ -13010,6 +13010,85 @@ function FontSize$1(props) {
   }, texts.table3.fontSize.sizes.large)));
 }
 
+var IndicatorReason;
+(function (IndicatorReason) {
+  IndicatorReason["SEARCH"] = "SEARCH";
+  IndicatorReason["SORTING"] = "SORTING";
+  IndicatorReason["FILTER"] = "FILTER";
+})(IndicatorReason || (IndicatorReason = {}));
+const useIndicatorText = reason => {
+  let title = '';
+  let description = '';
+  const {
+    texts
+  } = useLocalization();
+  switch (reason) {
+    case IndicatorReason.FILTER:
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
+      break;
+    case IndicatorReason.SEARCH:
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
+      break;
+    case IndicatorReason.SORTING:
+      title = texts.table3.editing.rowIndicator.rowWillMove;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
+      break;
+  }
+  return {
+    title,
+    description
+  };
+};
+const Indicator = ({
+  reason,
+  columnName,
+  mountNode,
+  validationErrors
+}) => {
+  const container = React__default.useMemo(() => {
+    const element = document.createElement('div');
+    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    return element;
+  }, []);
+  const indicatorText = useIndicatorText(reason);
+  const hasValidationErrorsInRow = !!validationErrors;
+  React__default.useEffect(() => {
+    // mountNode could be null when rows are filtered
+    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
+    return () => {
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
+    };
+  }, [hasValidationErrorsInRow, mountNode]);
+  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
+  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: indicatorText.description.replace('[COLUMN]', columnName)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex gap-1 hover:cursor-pointer"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "info",
+    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
+  }), indicatorText.title)), container);
+};
+/**
+ * Generates class names needed to highlight row cells, used when row has a move indicator
+ */
+function getIndicatorCellClassName(columnIndex, lastColumnIndex) {
+  return cn('!border-blue !border-y-2 border-x-0', {
+    'border-l-2 rounded-l': columnIndex === 0,
+    'border-r-2 rounded-r': columnIndex === lastColumnIndex
+  });
+}
+function isIndicatorVisible(rowIndex, rowActiveIndex, rowMoveReason) {
+  const isActiveRow = rowActiveIndex === rowIndex;
+  return isActiveRow && rowMoveReason;
+}
+
 const COLUMN_ID = '__actions';
 const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
@@ -13054,7 +13133,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
       // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
       '-mt-2': fontSize === FONT_SIZE.small,
       '-mt-1.5': fontSize !== FONT_SIZE.small
-    });
+    }, props.className);
     content = /*#__PURE__*/React__default.createElement("span", {
       className: className,
       ref: ref
@@ -13089,9 +13168,13 @@ function Cell(context) {
     rowIndex
   } = React__default.useContext(RowContext);
   const tableMeta = context.table.options.meta;
+  const allVisibleColumns = context.table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason) ? getIndicatorCellClassName(context.index, lastColumnIndex) : undefined;
   return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
     actions: tableMeta.rowActions.actionsForRow,
     actionsLength: tableMeta.rowActions.actionsForRowLength,
+    className: className,
     fontSize: tableMeta.fontSize.size,
     isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
     isEditing: tableMeta.editing.isEditing,
@@ -13526,8 +13609,9 @@ function useLazyEffect(effect, deps) {
 }
 
 function useTableRowSelectionListener(table, onRowSelect) {
-  const selectedRows = table.getSelectedRowModel().rows;
+  const rowSelection = table.getState().rowSelection;
   useLazyEffect(() => {
+    const selectedRows = table.getSelectedRowModel().rows;
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
       if (table.options.enableMultiRowSelection) {
         onRowSelect(selectedRows.map(row => row.original));
@@ -13536,7 +13620,11 @@ function useTableRowSelectionListener(table, onRowSelect) {
         onRowSelect((_ref = [(_selectedRows$ = selectedRows[0]) === null || _selectedRows$ === void 0 ? void 0 : _selectedRows$.original]) !== null && _ref !== void 0 ? _ref : []);
       }
     }
-  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, selectedRows]);
+    // It is important to stringify either rowSelection state or selectedRows, because we don't
+    // know if the array or object that is returned by react-table has the same reference or not.
+    // rowSelection state is used here because it will be more expensive to strigify selectedRows
+    // than rowSelection state.
+  }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, JSON.stringify(rowSelection)]);
 }
 
 function useRowDrag(isEnabled) {
@@ -13907,72 +13995,6 @@ function useRowDrop(isEnabled, handler) {
   };
 }
 
-var IndicatorReason;
-(function (IndicatorReason) {
-  IndicatorReason["SEARCH"] = "SEARCH";
-  IndicatorReason["SORTING"] = "SORTING";
-  IndicatorReason["FILTER"] = "FILTER";
-})(IndicatorReason || (IndicatorReason = {}));
-const useIndicatorText = reason => {
-  let title = '';
-  let description = '';
-  const {
-    texts
-  } = useLocalization();
-  switch (reason) {
-    case IndicatorReason.FILTER:
-      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
-      break;
-    case IndicatorReason.SEARCH:
-      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
-      break;
-    case IndicatorReason.SORTING:
-      title = texts.table3.editing.rowIndicator.rowWillMove;
-      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
-      break;
-  }
-  return {
-    title,
-    description
-  };
-};
-const Indicator = ({
-  reason,
-  columnName,
-  mountNode,
-  validationErrors
-}) => {
-  const container = React__default.useMemo(() => {
-    const element = document.createElement('div');
-    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
-    return element;
-  }, []);
-  const indicatorText = useIndicatorText(reason);
-  const hasValidationErrorsInRow = !!validationErrors;
-  React__default.useEffect(() => {
-    // mountNode could be null when rows are filtered
-    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
-    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
-    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
-    return () => {
-      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
-      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
-    };
-  }, [hasValidationErrorsInRow, mountNode]);
-  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
-  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: indicatorText.description.replace('[COLUMN]', columnName)
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "flex gap-1 hover:cursor-pointer"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: "info",
-    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
-  }), indicatorText.title)), container);
-};
-
 const focussableNodeNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS'];
 const focusableSelector = /*#__PURE__*/focussableNodeNames.join(', ');
 const hasChanged = (value, newValue) => {
@@ -14627,10 +14649,11 @@ const COLUMN_ID$1 = '__editing_actions';
 const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   var _column$columnDef$met;
   const {
+    className,
+    editing,
     hasChanges,
     isActiveRow,
     row,
-    editing,
     rowIdentifier,
     table
   } = props;
@@ -14724,7 +14747,7 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
     '-mb-2 -mt-2': isActiveRow
   });
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, {
-    className: cn({
+    className: cn(className, {
       '!sticky': !!content
     })
   }), content ? /*#__PURE__*/React__default.createElement("span", {
@@ -14737,10 +14760,14 @@ function Cell$1(props) {
   } = React__default.useContext(RowContext);
   const tableMeta = props.table.options.meta;
   const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];
+  const allVisibleColumns = props.table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason) ? getIndicatorCellClassName(props.index, lastColumnIndex) : undefined;
   return /*#__PURE__*/React__default.createElement(MemoedCell$1, Object.assign({}, props, {
+    className: className,
+    editing: tableMeta.editing,
     hasChanges: changeset.indexOf(props.row.id) >= 0,
-    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
-    editing: tableMeta.editing
+    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex
   }));
 }
 const EDITING_ACTIONS_WIDTH = 60;
@@ -15136,6 +15163,9 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     highlighted,
     highlightedAsCurrent
   } = props;
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
   const columnMeta = column.columnDef.meta;
   const cellRef = React__default.useRef(null);
   const controlRef = React__default.useRef(null);
@@ -15194,17 +15224,24 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   React__default.useEffect(() => {
     // To avoid reseting move reason on another row hover,
     // we need to check for changes only if value got changed in the current row.
-    if (!isActiveRow || error) {
+    if (!isActiveRow) {
+      return;
+    }
+    if (error) {
       if (tableMeta.editing.rowMoveReason) {
         removeMoveReason();
       }
       return;
     }
     if (hasChanged(getValue(), value)) {
-      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value, tableMeta.search.excludeUnmatchedResults);
-      tableMeta.editing.setRowMoveReason({
-        [cell.column.id]: moveReason
-      });
+      const moveReason = getRowMoveReason(table, rowIndex,
+      // cannot use row.index, as this is not kept in sync once a column is sorted.
+      row.original, cell, value, tableMeta.search.excludeUnmatchedResults);
+      if (moveReason) {
+        tableMeta.editing.setRowMoveReason({
+          [cell.column.id]: moveReason
+        });
+      }
     } else {
       removeMoveReason();
     }
@@ -15214,7 +15251,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   const className = cn('py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]', {
     // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative
     relative: controlRenderer === 'textarea' && columnMeta.enableTruncate
-  }, typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
+  }, props.className, typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
   const fieldClassName = cn('!min-h-0 w-full !pb-0', {
     '!pb-3': !!error
   });
@@ -15297,7 +15334,8 @@ function Cell$2(props) {
   } = props;
   const {
     isHovered: isHoveredRow,
-    hasError
+    hasError,
+    rowIndex
   } = useRowContext();
   const rows = table.getRowModel().rows;
   const tableMeta = table.options.meta;
@@ -15307,15 +15345,15 @@ function Cell$2(props) {
   const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;
   const isActiveRow = rowActiveIndex !== undefined && ((_rows$rowActiveIndex = rows[rowActiveIndex]) === null || _rows$rowActiveIndex === void 0 ? void 0 : _rows$rowActiveIndex.id) === row.id;
   let value = getValue();
+  const allVisibleColumns = table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  const className = isIndicatorVisible(rowIndex, rowActiveIndex, tableMeta.editing.rowMoveReason) ? getIndicatorCellClassName(index, lastColumnIndex) : undefined;
   // When row has changes we always need to show the editing state value, end revert it to original value only when row got saved successfully.
   // Otherwise it might confuse user because it will look like display value is getting reverted everytime user leaves the row.
   if (tableMeta.editing.isEditing) {
     const editingValue = tableMeta.editing.getCellValue(cell);
     value = editingValue !== null && editingValue !== void 0 ? editingValue : value;
   }
-  const {
-    rowIndex
-  } = React__default.useContext(RowContext);
   const memoedHighlight = React__default.useMemo(() => {
     var _tableMeta$search$que;
     if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
@@ -15343,10 +15381,13 @@ function Cell$2(props) {
   if (tableMeta.editing.isEditing && columnMeta.control && (isActiveRow || isHoveredRow && !tableMeta.rowActive.isHoverStatePaused ||
   // When cell has error, we renderimg it in edit mode (UX reqirement)
   isColumnError)) {
-    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props, highlightProps));
+    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props, highlightProps, {
+      className: className
+    }));
   }
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, highlightProps, {
-    value: value
+    value: value,
+    className: className
   }));
 }
 
@@ -18670,7 +18711,8 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     const handleKeyDown = event => {
       const target = event.target;
       const dialog = target.closest('[role="dialog"]');
-      const eventOriginatedFromCombobox = !!target.closest('[role="combobox"]');
+      // Select2 also have combobox role to align with W3C guidelines
+      const eventOriginatedFromCombobox = !!target.closest('[role="combobox"]:not([data-taco="Select2"])');
       // Don't trigger global shortcuts on the table if event originated from a combobox or if table is
       // outside the dialog
       if (eventOriginatedFromCombobox || dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current)) || tableMeta.shortcutsState.isPaused) {