@economic/taco 1.22.3 → 1.22.4

package/dist/taco.cjs.development.js

@@ -3656,9 +3656,9 @@ const defaultLocalisationTexts = {
       }
     },
     columnSettings: {
-      columnsOther: 'Pinned columns',
+      columnsOther: 'Other columns',
       columnsOtherDrop: 'Drop column here to unpin',
-      columnsPinned: 'Other columns',
+      columnsPinned: 'Pinned columns',
       columnsPinnedDrop: 'Drop column here to pin',
       search: 'Search column...',
       tooltip: 'Column settings'
@@ -7890,7 +7890,8 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }, color ? TAG_COLORS[color] : TAG_COLORS.grey, props.className);
   return /*#__PURE__*/React__default.createElement("span", Object.assign({}, otherProps, {
     className: className,
-    ref: ref
+    ref: ref,
+    "data-taco": "tag"
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "truncate px-2",
     ref: textRef
@@ -8173,7 +8174,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     name: "tick",
     className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible"
   }) : null, isTag ? /*#__PURE__*/React__default.createElement(Tag$1, {
-    className: "pointer-events-none",
+    className: "pointer-events-none my-1",
     color: color,
     icon: icon
   }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon ? typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
@@ -10568,7 +10569,6 @@ function createRowDraggableColumn(onRowDrag, texts) {
     meta: {
       align: 'center',
       className: 'items-center !px-0',
-      disableTruncation: true,
       headerClassName: 'items-center !px-0'
     },
     // sizing
@@ -10606,7 +10606,7 @@ const SelectCell = /*#__PURE__*/React__default.memo(({
     }))
   }, /*#__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]",
+    className: "hover:border-blue !mt-0",
     checked: isSelected,
     onClick: handleClick,
     // this is necessary to remove console spam from eslint
@@ -10682,7 +10682,6 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
     meta: {
       align: 'center',
       className: onRowDrag ? '!pl-0 !pr-3' : '!px-3',
-      disableTruncation: true,
       headerClassName: onRowDrag ? '!pl-0 !pr-3' : '!px-3'
     },
     // sizing
@@ -10744,7 +10743,6 @@ function createRowExpansionColumn(expandedRowRenderer, texts) {
     meta: {
       align: 'center',
       className: 'items-center !p-0',
-      disableTruncation: true,
       headerClassName: 'items-center hover:!bg-white !p-0'
     },
     // sizing
@@ -10757,6 +10755,8 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
   row,
   actions,
   moreActions,
+  isEditing,
+  shouldPauseHoverState,
   table,
   texts
 }) => {
@@ -10764,7 +10764,7 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
     isActive,
     isHovered
   } = useRowContext();
-  if (!isHovered && !isActive) {
+  if (!isActive && (!isHovered || shouldPauseHoverState) || isEditing) {
     return null;
   }
   const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(row.original) : action.visible : true;
@@ -10775,7 +10775,7 @@ const RowActionsCell = /*#__PURE__*/React__default.memo(({
   // only actions in the active row should be tabbable
   const tabIndex = table.options.meta.activeRowIndex === row.index ? 0 : -1;
   return /*#__PURE__*/React__default.createElement("span", {
-    className: "-mb-2 -mt-1.5 flex justify-end text-right"
+    className: "-mb-2 -mt-2 flex justify-end text-right"
   }, visibleActions.map((action, i) => /*#__PURE__*/React__default.createElement(IconButton, {
     key: i,
     className: actionClassName,
@@ -10823,20 +10823,28 @@ function createRowActionsColumn(rowActions, texts) {
     cell: ({
       row,
       table
-    }) => /*#__PURE__*/React__default.createElement(RowActionsCell, {
-      row: row,
-      actions: actions,
-      moreActions: moreActions,
-      texts: texts,
-      table: table
-    }),
+    }) => {
+      var _table$options$meta, _table$options$meta2;
+      return /*#__PURE__*/React__default.createElement(RowActionsCell, {
+        row: row,
+        actions: actions,
+        moreActions: moreActions,
+        texts: texts,
+        table: table,
+        isEditing: !!((_table$options$meta = table.options.meta) !== null && _table$options$meta !== void 0 && _table$options$meta.editMode.isEditing),
+        shouldPauseHoverState: !!((_table$options$meta2 = table.options.meta) !== null && _table$options$meta2 !== void 0 && _table$options$meta2.shouldPauseHoverState)
+      });
+    },
     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)] 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,
+      className: (row, table) => {
+        var _table$options$meta3;
+        return 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-hover/row:!shadow-[-6px_0px_6px_theme(colors.grey.100)]': !row.getIsSelected() && (!((_table$options$meta3 = table.options.meta) !== null && _table$options$meta3 !== void 0 && _table$options$meta3.shouldPauseHoverState) || table.options.meta.editMode.isEditing),
+          'shadow-[-6px_0px_6px_theme(colors.blue.100)]': row.getIsSelected()
+        });
+      },
       headerClassName: 'hover:!bg-white !px-1'
     },
     // sizing
@@ -10844,7 +10852,7 @@ function createRowActionsColumn(rowActions, texts) {
   };
 }
 
-const getDensityPadding = (density, editing = false) => {
+const getDensitySizing = (density, editing = false) => {
   switch (density) {
     case 'compact':
       return editing ? 'py-0' : 'py-1.5';
@@ -10857,7 +10865,7 @@ const getDensityPadding = (density, editing = false) => {
   }
 };
 const getCellSizingClasses = (density = 'normal', editing = false) => {
-  return cn('min-h-0 flex items-start', getDensityPadding(density, editing), editing ? 'px-[7px]' : 'px-4');
+  return cn('min-h-0 flex items-start', getDensitySizing(density, editing), editing ? 'px-[7px]' : 'px-4');
 };
 const getCellAlignmentClasses = (alignment = 'left') => ({
   'justify-start text-left': alignment === 'left',
@@ -11303,7 +11311,7 @@ const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc) => {
 };
 
 const Cell = function Cell(props) {
-  var _cell$column$columnDe, _cell$column$columnDe2, _cell$column$columnDe3, _table$options$meta;
+  var _cell$column$columnDe, _cell$column$columnDe2, _table$options$meta;
   const {
     cell,
     index,
@@ -11331,14 +11339,13 @@ const Cell = function Cell(props) {
   const hasValidationErrorsInRow = !!validationErrors;
   const internalRef = React__default.useRef(null);
   const controlRef = React__default.useRef(null);
-  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 cellClassName = (_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.className;
   const isActiveRow = meta.activeRowIndex === rowIndex;
   const isPinned = !!cell.column.getIsPinned();
   const isDragging = meta.dragging[cell.row.id];
   const isSelected = cell.row.getIsSelected();
   const isDataColumn = !isInternalColumn(cell.column.id);
-  const hasCellControl = !!((_cell$column$columnDe3 = cell.column.columnDef.meta) !== null && _cell$column$columnDe3 !== void 0 && _cell$column$columnDe3.control);
+  const hasCellControl = !!((_cell$column$columnDe2 = cell.column.columnDef.meta) !== null && _cell$column$columnDe2 !== void 0 && _cell$column$columnDe2.control);
   const allVisibleColumns = table.getVisibleLeafColumns();
   const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
   // editing
@@ -11358,7 +11365,7 @@ const Cell = function Cell(props) {
       return (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.classList.remove('pb-4');
     };
   }, [isIndicatorVisible, isLastRow]);
-  const className = cn({
+  const className = cn('[&>[data-taco="tag"]]:-my-0.5', {
     '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
@@ -11376,7 +11383,7 @@ const Cell = function Cell(props) {
     'border-blue !border-y-2 border-x-0': isIndicatorVisible,
     'border-l-2 rounded-l': isIndicatorVisible && index === 0,
     'border-r-2 rounded-r': isIndicatorVisible && index === lastColumnIndex
-  }, getCellSizingClasses((_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.rowDensity, (isEditingThisRow || isHoveringThisRowWhileEditing) && hasCellControl), typeof cellClassName === 'function' ? cellClassName(cell.row) : cellClassName);
+  }, getCellSizingClasses((_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.rowDensity, (isEditingThisRow || isHoveringThisRowWhileEditing) && hasCellControl), typeof cellClassName === 'function' ? cellClassName(cell.row, table) : cellClassName);
   const handleMouseDown = event => {
     // only detect left clicks
     if (event.button === 0) {
@@ -11590,12 +11597,10 @@ const Cell = function Cell(props) {
       };
     }
   }
-  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), /*#__PURE__*/React__default.createElement("div", {
-    className: disableTruncation ? '-my-[0.45rem]' : 'truncate'
-  }, reactTable$1.flexRender(cell.column.columnDef.cell, cell.getContext())));
+  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), 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$current2, _cellRef$current2$par, _rowMoveReason$cellId;
+  var _cell$column$columnDe3, _cell$column$columnDe4, _cellRef$current2, _cellRef$current2$par, _rowMoveReason$cellId;
   const {
     cell,
     cellRef,
@@ -11756,7 +11761,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
       return newState;
     });
   };
-  const cellControl = (_cell$column$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.control;
+  const cellControl = (_cell$column$columnDe3 = cell.column.columnDef.meta) === null || _cell$column$columnDe3 === void 0 ? void 0 : _cell$column$columnDe3.control;
   const attributes = {
     'aria-label': ariaLabel,
     onBlur: saveIfChanged,
@@ -11768,7 +11773,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     // keyboard shortcut works as expected.
     '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 className = cn(getCellAlignmentClasses((_cell$column$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.align));
   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) {
@@ -12018,7 +12023,7 @@ function useColumnDefinitions(children, options, tableRef) {
     const defaultColumnVisibility = {};
     const defaultSorting = [];
     const footers = {};
-    React__default.Children.toArray(children).forEach(child => {
+    React__default.Children.toArray(children).filter(child => !!child).forEach(child => {
       if ( /*#__PURE__*/React__default.isValidElement(child)) {
         var _child$props$minWidth;
         if (child.props.defaultPinned && options.enableColumnPinning) {
@@ -12043,13 +12048,16 @@ function useColumnDefinitions(children, options, tableRef) {
           accessorKey: child.props.accessor,
           id: child.props.accessor,
           cell: props => {
-            var _props$getValue;
+            const value = props.getValue();
             if (typeof child.props.renderer === 'function') {
-              return child.props.renderer(props.getValue(), props.row.original);
+              return child.props.renderer(value, props.row.original);
+            }
+            if (typeof value === 'string' || typeof value === 'number') {
+              return /*#__PURE__*/React__default.createElement("span", {
+                className: "truncate"
+              }, value);
             }
-            // If value is undefined then return null because cell is a react component, and undefined is not
-            // a valid child value.
-            return (_props$getValue = props.getValue()) !== null && _props$getValue !== void 0 ? _props$getValue : null;
+            return value !== null && value !== void 0 ? value : null;
           },
           header: child.props.header,
           meta: {
@@ -12059,7 +12067,6 @@ function useColumnDefinitions(children, options, tableRef) {
             dataType: child.props.dataType,
             defaultWidth: child.props.defaultWidth,
             disableReordering: child.props.disableReordering,
-            disableTruncation: child.props.disableTruncation,
             menu: child.props.menu,
             tooltip: child.props.tooltip
           },
@@ -12883,23 +12890,6 @@ const ExpandedRow = ({
   }));
 };
 
-const useSeparatedChildren$1 = initialChildren => {
-  return React__default.useMemo(() => {
-    const columns = [];
-    let toolbar;
-    React__default.Children.toArray(initialChildren).filter(child => !!child) // skip falsey columns
-    .forEach(child => {
-      var _child$type, _child$type2;
-      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Table2Column') {
-        columns.push(child);
-      } else if (((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Table2Toolbar') {
-        toolbar = child;
-      }
-    });
-    return [columns, toolbar];
-  }, [initialChildren]);
-};
-
 const useBoundaryOverflowDetection = (ref, dependencies = []) => {
   const [boundaryIndex, setBoundaryIndex] = React__default.useState();
   React__default.useEffect(() => {
@@ -13445,90 +13435,6 @@ const Search$2 = props => {
   }));
 };
 
-const ShortcutsGuideButton = ({
-  table
-}) => {
-  const meta = table.options.meta;
-  const {
-    texts
-  } = useLocalization();
-  const shortcuts = [];
-  if (table.options.enableGlobalFilter) {
-    shortcuts.push({
-      feature: texts.table2.shortcuts.search,
-      keys: ['Ctrl', 'F']
-    });
-  }
-  if (table.options.enableColumnFilters) {
-    shortcuts.push({
-      feature: texts.table2.shortcuts.filter,
-      keys: ['Ctrl', 'Shift', 'F']
-    });
-  }
-  shortcuts.push({
-    feature: texts.table2.shortcuts.previousRow,
-    keys: ['Up']
-  });
-  shortcuts.push({
-    feature: texts.table2.shortcuts.nextRow,
-    keys: ['Down']
-  });
-  if (meta.editMode.enableEditMode) {
-    shortcuts.push({
-      feature: texts.table2.shortcuts.editCell,
-      keys: ['Enter']
-    });
-    shortcuts.push({
-      feature: texts.table2.shortcuts.previousColumn,
-      keys: ['Arrow-Left']
-    });
-    shortcuts.push({
-      feature: texts.table2.shortcuts.nextColumn,
-      keys: ['Arrow-Right']
-    });
-  } else if (meta.onRowClick) {
-    shortcuts.push({
-      feature: texts.table2.shortcuts.rowClick,
-      keys: ['Enter']
-    });
-  }
-  if (table.options.enableRowSelection) {
-    shortcuts.push({
-      feature: texts.table2.shortcuts.selectRow,
-      keys: ['Space']
-    });
-    shortcuts.push({
-      feature: texts.table2.shortcuts.selectAllRows,
-      keys: ['Ctrl', 'A']
-    });
-  }
-  if (table.options.enableExpanding) {
-    shortcuts.push({
-      feature: texts.table2.shortcuts.expandRow,
-      keys: ['Ctrl', 'Right']
-    });
-    shortcuts.push({
-      feature: texts.table2.shortcuts.collapseRow,
-      keys: ['Ctrl', 'Left']
-    });
-  }
-  return /*#__PURE__*/React__default.createElement(IconButton, {
-    "aria-label": texts.table2.shortcuts.tooltip,
-    icon: "shortcuts",
-    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
-      align: "end"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col gap-y-1"
-    }, shortcuts.map(shortcut => /*#__PURE__*/React__default.createElement("span", {
-      className: "flex items-center justify-between gap-x-8",
-      key: shortcut.feature
-    }, /*#__PURE__*/React__default.createElement("span", null, shortcut.feature), /*#__PURE__*/React__default.createElement(Shortcut$1, {
-      keys: shortcut.keys
-    })))))),
-    rounded: true
-  });
-};
-
 const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeButton(props, ref) {
   const {
     scrollToIndex,
@@ -13599,13 +13505,6 @@ function Column$2(_) {
   return null;
 }
 Column$2.displayName = 'Table2Column';
-function Toolbar(props) {
-  const className = cn('flex-grow', props.className);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
-    className: className
-  }));
-}
-Toolbar.displayName = 'Table2Toolbar';
 const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref) {
   // dom
   const {
@@ -13614,18 +13513,19 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     length = props.data.length,
     loadMore,
     onRowClick,
+    toolbarLeft,
+    toolbarRight,
     _experimentalActionsForTable,
     _experimentalActionsForTableSummary
   } = props;
   const tableRef = useMergedRef(ref);
   const timeoutIdRef = React__default.useRef();
   // react-table
-  const [columns, toolbar] = useSeparatedChildren$1(props.children);
   const {
     rows,
     table,
     footers
-  } = useTable$1(columns, props, tableRef);
+  } = useTable$1(props.children, props, tableRef);
   const meta = table.options.meta;
   const {
     columnVisibility,
@@ -13732,11 +13632,9 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
         return;
       }
       if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-        if (event.key === 'a') {
-          if (table.options.enableRowSelection) {
-            table.toggleAllRowsSelected();
-          }
+        if (event.key === 'a' && table.options.enableRowSelection) {
+          event.preventDefault();
+          table.toggleAllRowsSelected();
         }
         return;
       }
@@ -13832,7 +13730,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
   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;
   const hasInternalToolbar = enableSettingsButton || meta.editMode.enableEditMode || table.options.enableColumnFilters || meta.enableRowDensity || table.options.enableGlobalFilter;
-  const hasToolbar = !!toolbar || hasInternalToolbar;
+  const hasToolbar = hasInternalToolbar || !!toolbarLeft || !toolbarRight;
   const hasFooters = React__default.useMemo(() => {
     const summaryIds = Object.keys(footers);
     const visibleIds = Object.keys(columnVisibility).filter(c => !columnVisibility[c]);
@@ -13842,7 +13740,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     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, {
+  }, toolbarLeft, hasInternalToolbar ? /*#__PURE__*/React__default.createElement(Group, {
     className: "ml-auto flex-shrink-0 print:hidden"
   }, meta.editMode.enableEditMode ? /*#__PURE__*/React__default.createElement(EditModeButton, {
     ref: editButtonRef,
@@ -13852,7 +13750,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
   }) : null, table.options.enableColumnFilters ? /*#__PURE__*/React__default.createElement(FiltersButton, {
     length: length,
     table: table
-  }) : null, meta.enableRowDensity ? /*#__PURE__*/React__default.createElement(RowDensityButton, {
+  }) : null, toolbarRight, meta.enableRowDensity ? /*#__PURE__*/React__default.createElement(RowDensityButton, {
     table: table
   }) : null, enableSettingsButton ? /*#__PURE__*/React__default.createElement(ColumnSettingsButton, {
     table: table
@@ -13860,9 +13758,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     disabled: meta.shouldDisableTableActions,
     onSearch: table.setGlobalFilter,
     value: globalFilter
-  }) : null) : null, /*#__PURE__*/React__default.createElement(ShortcutsGuideButton, {
-    table: table
-  })) : null, /*#__PURE__*/React__default.createElement("div", {
+  }) : null) : null) : null, /*#__PURE__*/React__default.createElement("div", {
     className: className,
     "data-taco": "table2",
     onBlur: handleBlur,
@@ -13959,7 +13855,6 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
   }) : null);
 });
 Table2.Column = Column$2;
-Table2.Toolbar = Toolbar;
 
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   const {