@economic/taco 1.38.2 → 1.40.0

package/dist/taco.cjs.development.js

@@ -3684,7 +3684,7 @@ function createShortcutKeyDownHandler(key, handler) {
     if (typeof key === 'string') {
       condition = event.key.toLowerCase() === key.toLowerCase();
     } else {
-      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
         return;
       }
       if (key.shift && !event.shiftKey || key.shift === false && event.shiftKey) {
@@ -4016,7 +4016,7 @@ const defaultLocalisationTexts = {
     filters: {
       button: 'Filters',
       buttons: {
-        addFilter: 'Add Filter',
+        addNewFilter: 'Add new filter',
         clearFilters: 'Clear all filters'
       },
       comparators: {
@@ -4033,9 +4033,23 @@ const defaultLocalisationTexts = {
         isEmpty: 'Is empty',
         isNotEmpty: 'Is not empty'
       },
+      conditions: {
+        and: 'And',
+        where: 'Where'
+      },
+      emptyFilter: {
+        condition: 'Condition',
+        value: 'Value'
+      },
       tooltip: 'Apply filters',
       total: 'Viewing [CURRENT] of [TOTAL]'
     },
+    footer: {
+      summary: {
+        records: 'Records:',
+        selected: 'Records selected:'
+      }
+    },
     rowDensity: {
       tooltip: 'Row density',
       compact: 'compact',
@@ -6285,15 +6299,15 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     ref: contentRef,
     "data-taco": "drawer",
     className: containerClassName
-  }, /*#__PURE__*/React__default.createElement("div", Object.assign({
+  }, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: dragHandlerClassName
   }, dragHandleProps, {
     "data-testid": "resize-handler",
     ref: dragHandlerRef
-  })), output, showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
+  })), showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     "aria-label": texts.drawer.close,
-    className: "absolute top-0 right-0 mt-4 mr-2",
+    className: "absolute right-0 top-0 mr-2 mt-4",
     icon: "close"
   })) : null);
   const styleProp = {
@@ -7042,7 +7056,7 @@ const replaceWithShortform = key => {
     case ' ':
       return '␣';
     default:
-      return key;
+      return String(key).toLocaleUpperCase();
   }
 };
 const getShortcutText = key => {
@@ -11593,6 +11607,7 @@ function createRowDraggableColumn(onRowDrag, texts) {
         className: "text-grey-darkest invisible w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed]]/row:text-white"
       }));
     },
+    footer: () => /*#__PURE__*/React__default.createElement("span", null),
     meta: {
       align: 'center',
       className: 'items-center !px-0',
@@ -11709,6 +11724,7 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
     id: COLUMN_ID_FOR_SELECTION,
     header,
     cell,
+    footer: () => /*#__PURE__*/React__default.createElement("span", null),
     meta: {
       align: 'center',
       className: onRowDrag ? '!pl-0 !pr-3' : '!px-3',
@@ -11778,6 +11794,7 @@ function createRowExpansionColumn(expandedRowRenderer, texts) {
       row: row,
       texts: texts
     }),
+    footer: () => /*#__PURE__*/React__default.createElement("span", null),
     meta: {
       align: 'center',
       className: 'items-center !p-0',
@@ -11856,6 +11873,7 @@ function createRowActionsColumn(rowActions, rowActionsLength, texts) {
         shouldPauseHoverState: !!((_table$options$meta2 = table.options.meta) !== null && _table$options$meta2 !== void 0 && _table$options$meta2.shouldPauseHoverState)
       });
     },
+    footer: () => /*#__PURE__*/React__default.createElement("span", null),
     meta: {
       align: 'right',
       className: (row, table) => {
@@ -11950,6 +11968,7 @@ const ColumnBase = /*#__PURE__*/React__default.forwardRef(function Table2ColumnB
   var _column$columnDef$met;
   const {
     column,
+    frozenColumnIds,
     scrolled,
     style,
     table,
@@ -11958,8 +11977,7 @@ const ColumnBase = /*#__PURE__*/React__default.forwardRef(function Table2ColumnB
   const isFrozenColumn = !!column.getIsPinned();
   const meta = table.options.meta;
   const left = meta.columnOffsets[column.id];
-  const columnFreezing = table.getLeftVisibleLeafColumns().map(c => c.id);
-  const className = cn('border-grey-300', getFrozenShadowClasses(column, columnFreezing, scrolled), getCellAlignmentClasses((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.align), {
+  const className = cn('border-grey-300', getCellAlignmentClasses((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.align), getFrozenShadowClasses(column, frozenColumnIds, scrolled), {
     'cursor-pointer': !!attributes.onClick
   }, attributes.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
@@ -13145,8 +13163,9 @@ const Footer$3 = function Footer(props) {
     ...columnProps
   } = props;
   const isFrozen = !!footer.column.getIsPinned();
-  const className = cn('group/header sticky bottom-0 bg-white border-t-2 relative', getCellSizingClasses('normal'), {
-    'z-[1]': isFrozen
+  const className = cn('group/header sticky bottom-0 bg-white border-t-2 relative z-[1] h-[calc(theme(spacing.10)+2px)]', getCellSizingClasses('normal'), {
+    '!z-[2]': isFrozen,
+    '!shadow-none': isInternalColumn(footer.id)
   }, props.className);
   return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
     // base props
@@ -13231,7 +13250,9 @@ function useColumnDefinitions(children, options, tableRef) {
           size: child.props.defaultWidth,
           // sorting
           enableSorting: !child.props.disableSorting,
-          sortingFn: getSortingFn(child.props.dataType, child.props.sortFn)
+          sortingFn: getSortingFn(child.props.dataType, child.props.sortFn),
+          sortDescFirst: false,
+          sortUndefined: 1
         });
       }
     });
@@ -13261,9 +13282,12 @@ function useColumnDefinitions(children, options, tableRef) {
   }, [children]);
 }
 function getSortingFn(dataType, customFn) {
-  if (customFn) {
+  if (typeof customFn === 'function') {
     return (rowA, rowB, columnId) => customFn(rowA.original, rowB.original, columnId);
   }
+  if (customFn) {
+    return customFn;
+  }
   if (dataType && dataType !== 'boolean') {
     return dataType;
   }
@@ -13298,10 +13322,11 @@ const useRowSelectionListener = (table, onRowSelect) => {
   React__default.useEffect(() => {
     if (onRowSelect) {
       if (table.options.enableMultiRowSelection) {
-        onRowSelect(table.getSelectedRowModel().rows.map(row => row.original));
+        const rows = table.getSelectedRowModel().rows.map(row => row.original);
+        onRowSelect(rows, table.getIsAllRowsSelected());
       } else {
         var _table$getSelectedRow, _table$getSelectedRow2;
-        onRowSelect((_table$getSelectedRow = (_table$getSelectedRow2 = table.getSelectedRowModel().rows[0]) === null || _table$getSelectedRow2 === void 0 ? void 0 : _table$getSelectedRow2.original) !== null && _table$getSelectedRow !== void 0 ? _table$getSelectedRow : undefined);
+        onRowSelect((_table$getSelectedRow = (_table$getSelectedRow2 = table.getSelectedRowModel().rows[0]) === null || _table$getSelectedRow2 === void 0 ? void 0 : _table$getSelectedRow2.original) !== null && _table$getSelectedRow !== void 0 ? _table$getSelectedRow : undefined, false);
       }
     }
   }, [table.getState().rowSelection]);
@@ -13380,9 +13405,50 @@ const useFilterStateListener = (table, onRowSelect) => {
   }, [table.getState().columnFilters, table.getState().globalFilter]);
 };
 
+function useTableShortcuts(shortcuts, activeRow) {
+  React__default.useEffect(() => {
+    const shortcutKeys = Object.keys(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {});
+    const globalHandlers = [];
+    // convert the shortcut into the correct format to register it
+    if (shortcuts && shortcutKeys.length) {
+      shortcutKeys.forEach(key => {
+        const handler = shortcuts[key];
+        let keyDownHandler;
+        let keyDownHandlerOptions;
+        if (typeof handler === 'function') {
+          keyDownHandler = handler;
+          keyDownHandlerOptions = {
+            key
+          };
+        } else {
+          const handlerObject = handler;
+          keyDownHandler = handlerObject.handler;
+          keyDownHandlerOptions = {
+            key,
+            meta: handlerObject.meta,
+            shift: handlerObject.shift
+          };
+        }
+        globalHandlers.push(createShortcutKeyDownHandler(keyDownHandlerOptions, event => {
+          event.preventDefault();
+          keyDownHandler(activeRow);
+        }));
+      });
+    }
+    globalHandlers.forEach(handler => {
+      document.addEventListener('keydown', handler);
+    });
+    return () => {
+      globalHandlers.forEach(handler => {
+        document.removeEventListener('keydown', handler);
+      });
+    };
+  }, [shortcuts, activeRow]);
+}
+
 const ACTIONS_ON_ROW_LENGTH = 4;
 function useTable$1(children, props, ref) {
-  var _settings$frozenColum, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
+  var _settings$frozenColum, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity, _tableRows$activeRow$;
   const {
     actionsForRow = [],
     actionsForRowLength = ACTIONS_ON_ROW_LENGTH,
@@ -13409,6 +13475,7 @@ function useTable$1(children, props, ref) {
     onRowSelect,
     onSave,
     settings = {},
+    shortcuts,
     // experimental
     _experimentalActionsForTable
   } = props;
@@ -13576,6 +13643,7 @@ function useTable$1(children, props, ref) {
   useFilterStateListener(table, onRowSelect);
   useRowSelectionListener(table, onRowSelect);
   useSettingsStateListener(table, onChangeSettings);
+  useTableShortcuts(shortcuts, (_tableRows$activeRow$ = tableRows[activeRow.activeRowIndex]) === null || _tableRows$activeRow$ === void 0 ? void 0 : _tableRows$activeRow$.original);
   return {
     rows,
     table,
@@ -14262,18 +14330,22 @@ const InferredControl = ({
 };
 
 const ColumnFilter = props => {
-  var _column$columnDef$hea, _column$columnDef$met, _control;
+  var _column$columnDef$hea, _column$columnDef$met;
   const {
     allColumns,
     column,
     index,
-    table
+    table,
+    onRemove
   } = props;
   const {
     comparator,
     value
   } = column.getFilterValue();
   const ariaLabel = String((_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : '');
+  const {
+    texts
+  } = useLocalization();
   const ref = React__default.useRef(null);
   let control;
   const controlType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
@@ -14318,13 +14390,16 @@ const ColumnFilter = props => {
       }))
     });
   }
-  const handleRemove = () => column.setFilterValue(undefined);
+  const handleRemove = () => {
+    column.setFilterValue(undefined);
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+  };
   const comparators = guessComparatorsBasedOnControl(control, controlType);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-2 flex gap-2"
+    className: "flex gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
-  }, index === 0 ? 'Where' : 'And'), /*#__PURE__*/React__default.createElement(Column$2, {
+  }, index === 0 ? texts.table2.filters.conditions.where : texts.table2.filters.conditions.and), /*#__PURE__*/React__default.createElement(Column$2, {
     className: "!w-32 flex-shrink-0",
     allColumns: allColumns,
     column: column,
@@ -14337,7 +14412,7 @@ const ColumnFilter = props => {
     validComparators: comparators
   }), comparator !== undefined ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-grow items-center"
-  }, (_control = control) !== null && _control !== void 0 ? _control : /*#__PURE__*/React__default.createElement(InferredControl, {
+  }, /*#__PURE__*/React__default.createElement(InferredControl, {
     column: column,
     comparator: comparator,
     value: value
@@ -14370,6 +14445,61 @@ const guessComparatorsBasedOnControl = (instance, control) => {
   }
 };
 
+const EmptyFilter = props => {
+  const {
+    texts
+  } = useLocalization();
+  const {
+    onChange,
+    onRemove,
+    allColumns,
+    table,
+    index,
+    filteredColumns,
+    emptyFilterCount
+  } = props;
+  const handleChange = value => {
+    if (value) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, filteredColumns.length > 0 || filteredColumns.length === 0 && index > 0 ? texts.table2.filters.conditions.and : texts.table2.filters.conditions.where), /*#__PURE__*/React__default.createElement(Select2, {
+    className: "!w-32 flex-shrink-0",
+    emptyValue: null,
+    autoFocus: true,
+    onChange: handleChange,
+    value: null
+  }, allColumns.map(c => /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: c.id,
+    value: c.id,
+    disabled: !c.getCanFilter() || !!table.getState().columnFilters.find(f => f.id === c.id)
+  }, String(c.columnDef.header)))), /*#__PURE__*/React__default.createElement(Select2, {
+    className: "!w-32 flex-shrink-0",
+    value: 1,
+    autoFocus: true,
+    disabled: true
+  }, /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: 'condition1',
+    value: 1
+  }, texts.table2.filters.emptyFilter.condition), /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: 'condition2',
+    value: 2
+  }, "Condition2")), /*#__PURE__*/React__default.createElement(Input, {
+    "aria-label": 'Value',
+    className: "flex-grow items-center",
+    disabled: true,
+    value: texts.table2.filters.emptyFilter.value
+  }), (emptyFilterCount > 1 || filteredColumns.length > 0) && /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "close",
+    onClick: onRemove
+  }));
+};
+
 const FiltersButton = ({
   length,
   table
@@ -14378,7 +14508,10 @@ const FiltersButton = ({
     texts
   } = useLocalization();
   const ref = React__default.useRef(null);
-  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
+  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id)).sort((a, b) => {
+    var _a$columnDef, _b$columnDef;
+    return (_a$columnDef = a.columnDef) === null || _a$columnDef === void 0 ? void 0 : _a$columnDef.header.localeCompare((_b$columnDef = b.columnDef) === null || _b$columnDef === void 0 ? void 0 : _b$columnDef.header);
+  });
   const {
     shouldDisableTableActions
   } = table.options.meta;
@@ -14390,17 +14523,11 @@ const FiltersButton = ({
     }
     return columns;
   }, []);
-  const handleAdd = () => {
-    const firstFilterableColumn = allColumns.find(c => c.getCanFilter() && !columnFilters.find(f => f.id === c.id));
-    if (firstFilterableColumn) {
-      firstFilterableColumn.setFilterValue({
-        comparator: undefined,
-        value: undefined
-      });
-    }
-  };
+  const [emptyFilterCount, setEmptyFilterCount] = React__default.useState(1);
+  const handleAdd = () => setEmptyFilterCount(emptyFilterCount + 1);
   const handleReset = () => {
     table.resetColumnFilters();
+    setEmptyFilterCount(1);
   };
   useGlobalKeyDown({
     key: 'f',
@@ -14411,37 +14538,94 @@ const FiltersButton = ({
     event.preventDefault();
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
+  const handleEmptyFilterChange = columnId => {
+    // create an actual filter on that column that the user selected
+    const column = allColumns.find(c => c.getCanFilter() && c.id === columnId);
+    if (column) {
+      column.setFilterValue({
+        comparator: undefined,
+        value: undefined
+      });
+    }
+    // hide the empty filter row because we now have a real filter
+    setEmptyFilterCount(emptyFilterCount - 1);
+  };
+  const handleRemove = () => {
+    if (filteredColumns.length === 1 && emptyFilterCount === 0) {
+      setEmptyFilterCount(1);
+    }
+  };
+  const handleRemoveEmptyFilter = () => {
+    setEmptyFilterCount(emptyFilterCount - 1);
+  };
+  const handleOpenChange = () => {
+    const emptyFilterCount = filteredColumns.length === 0 ? 1 : 0;
+    setEmptyFilterCount(emptyFilterCount);
+  };
+  const filters = filteredColumns.length > 0 && filteredColumns.filter(column => {
+    var _column$columnDef$met;
+    const controlType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
+    const value = column.getFilterValue().value;
+    const comparator = column.getFilterValue().comparator;
+    if (Array.isArray(value)) {
+      if (value.length > 0 && value.find(item => item !== undefined)) {
+        return true;
+      }
+    } else if (value) {
+      return true;
+    } else if ([Table2FilterComparator.IsEmpty, Table2FilterComparator.IsNotEmpty].includes(comparator)) {
+      if (!controlType) {
+        return true;
+      }
+    }
+    return false;
+  });
+  const filtersApplied = filters && filters.length;
   return /*#__PURE__*/React__default.createElement(Button$1, {
     "aria-label": texts.table2.filters.tooltip,
-    appearance: columnFilters.length ? 'primary' : 'default',
+    appearance: filtersApplied ? 'primary' : 'default',
     className: cn({
-      '!wcag-blue-100': columnFilters.length
+      '!wcag-blue-100': filtersApplied
     }),
     disabled: shouldDisableTableActions,
-    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+      onChange: handleOpenChange
+    }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
       className: "flex w-[40rem] flex-col gap-4"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex h-8"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex w-full items-center gap-2"
     }, /*#__PURE__*/React__default.createElement("h4", {
       className: "mb-0 inline-flex"
-    }, "Filter"), /*#__PURE__*/React__default.createElement("p", {
+    }, texts.table2.filters.button), /*#__PURE__*/React__default.createElement("p", {
       className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
-    }, texts.table2.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(length)))), /*#__PURE__*/React__default.createElement("div", {
+    }, texts.table2.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(length)))), columnFilters.length || emptyFilterCount > 1 ? /*#__PURE__*/React__default.createElement(Button$1, {
+      onClick: handleReset
+    }, texts.table2.filters.buttons.clearFilters) : null), /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2"
     }, filteredColumns.map((column, index) => /*#__PURE__*/React__default.createElement(ColumnFilter, {
       key: `${column.id}_${index}`,
       allColumns: allColumns,
       index: index,
       column: column,
-      table: table
-    }))), /*#__PURE__*/React__default.createElement(Group, {
-      className: "justify-between"
+      table: table,
+      onRemove: handleRemove
+    })), [...Array(emptyFilterCount)].map((_, index) => /*#__PURE__*/React__default.createElement(EmptyFilter, {
+      key: `emptyFilter_${index}`,
+      index: index,
+      allColumns: allColumns,
+      table: table,
+      onChange: value => handleEmptyFilterChange(value),
+      emptyFilterCount: emptyFilterCount,
+      filteredColumns: filteredColumns,
+      onRemove: handleRemoveEmptyFilter
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "justify-start"
     }, /*#__PURE__*/React__default.createElement(Button$1, {
       appearance: "discrete",
       onClick: handleAdd
-    }, "+ ", texts.table2.filters.buttons.addFilter), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button$1, {
-      onClick: handleReset
-    }, texts.table2.filters.buttons.clearFilters) : null)))),
+    }, "+ ", texts.table2.filters.buttons.addNewFilter)))))),
     ref: ref,
     tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
@@ -14452,8 +14636,8 @@ const FiltersButton = ({
       }
     }))
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: columnFilters.length ? 'filter-solid' : 'filter'
-  }), texts.table2.filters.button, " ", columnFilters.length ? `(${columnFilters.length})` : '');
+    name: filtersApplied ? 'filter-solid' : 'filter'
+  }), texts.table2.filters.button, " ", filtersApplied ? `(${filtersApplied})` : '');
 };
 
 const Search$2 = props => {
@@ -14619,7 +14803,8 @@ const BaseTable2 = /*#__PURE__*/React__default.forwardRef(function BaseTable2(pr
         resetFiltering: () => table.resetColumnFilters(),
         resetRowExpansion: () => table.resetExpanded(),
         resetRowSelection: () => table.resetRowSelection(),
-        resetSorting: () => table.resetSorting()
+        resetSorting: () => table.resetSorting(),
+        toggleEditing: () => meta.editMode.toggleEditing()
       };
     }
   }, [table, tableRef.current]);
@@ -14830,11 +15015,7 @@ const BaseTable2 = /*#__PURE__*/React__default.forwardRef(function BaseTable2(pr
   const enableSettingsButton = table.options.enableHiding || meta.enableColumnReordering;
   const hasInternalToolbar = enableSettingsButton || meta.editMode.enableEditMode || table.options.enableColumnFilters || meta.enableRowDensity || table.options.enableGlobalFilter;
   const hasToolbar = hasInternalToolbar || !!toolbarLeft || !toolbarRight;
-  const hasFooters = React__default.useMemo(() => {
-    const summaryIds = Object.keys(footers);
-    const visibleIds = Object.keys(columnVisibility).filter(c => !columnVisibility[c]);
-    return summaryIds.length && summaryIds.some(v => !visibleIds.includes(v));
-  }, [footers, columnVisibility]);
+  const frozenColumnIds = table.getLeftVisibleLeafColumns().map(c => c.id);
   return /*#__PURE__*/React__default.createElement("div", {
     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", {
@@ -14883,6 +15064,7 @@ const BaseTable2 = /*#__PURE__*/React__default.forwardRef(function BaseTable2(pr
     key: headerGroup.id,
     role: "row"
   }, headerGroup.headers.map((header, columnIndex) => /*#__PURE__*/React__default.createElement(Header$1, {
+    frozenColumnIds: frozenColumnIds,
     key: header.id,
     header: header,
     index: columnIndex,
@@ -14912,6 +15094,7 @@ const BaseTable2 = /*#__PURE__*/React__default.forwardRef(function BaseTable2(pr
       table: table
     }, row.getVisibleCells().map((cell, columnIndex) => /*#__PURE__*/React__default.createElement(Cell, {
       cell: cell,
+      frozenColumnIds: frozenColumnIds,
       key: `${cell.id}_${cell.getValue()}`,
       index: columnIndex,
       isLastRow: virtualRow.index === rows.length - 1,
@@ -14933,27 +15116,46 @@ const BaseTable2 = /*#__PURE__*/React__default.forwardRef(function BaseTable2(pr
     className: "col-span-full"
   }) : null) : /*#__PURE__*/React__default.createElement("div", {
     className: "col-span-full min-h-[theme(spacing.8)]"
-  }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null), hasFooters ? /*#__PURE__*/React__default.createElement("div", {
-    role: "rowgroup",
+  }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null), /*#__PURE__*/React__default.createElement("div", {
     className: "contents",
-    "data-taco": "table2-footer"
-  }, table.getFooterGroups().map(footerGroup => /*#__PURE__*/React__default.createElement("div", {
-    key: footerGroup.id,
+    "data-taco": "table2-footer",
+    role: "rowgroup"
+  }, /*#__PURE__*/React__default.createElement("div", {
     role: "row",
     className: "contents"
-  }, footerGroup.headers.map((footer, cellIndex) => /*#__PURE__*/React__default.createElement(Footer$3, {
+  }, table.getFooterGroups().map(footerGroup => footerGroup.headers.map((footer, cellIndex) => /*#__PURE__*/React__default.createElement(Footer$3, {
     key: footer.id,
     footer: footer,
+    frozenColumnIds: frozenColumnIds,
     index: cellIndex,
     scrolled: scrolled,
     table: table
-  }, footers[footer.id] ? footers[footer.id](rows.map(row => row.original[footer.id])) : null))))) : null), !!_experimentalActionsForTable && table.options.enableRowSelection && (table.getIsSomeRowsSelected() || table.getIsAllRowsSelected()) ? /*#__PURE__*/React__default.createElement(BatchActionsMenu, {
+  }, footers[footer.id] ? footers[footer.id](rows.map(row => row.original[footer.id])) : null)))))), /*#__PURE__*/React__default.createElement(Summary, {
+    length: length !== null && length !== void 0 ? length : rows.length,
+    table: table
+  }), !!_experimentalActionsForTable && table.options.enableRowSelection && (table.getIsSomeRowsSelected() || table.getIsAllRowsSelected()) ? /*#__PURE__*/React__default.createElement(BatchActionsMenu, {
     className: "fixed-center-x bottom-0 z-50 mb-4 print:hidden",
     actionsForTable: _experimentalActionsForTable,
     summary: _experimentalActionsForTableSummary,
     table: table
   }) : null);
 });
+const Summary = ({
+  length,
+  table
+}) => {
+  const {
+    texts
+  } = useLocalization();
+  const selectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;
+  const label = selectedLength > 0 ? texts.table2.footer.summary.selected : texts.table2.footer.summary.records;
+  const total = selectedLength > 0 ? selectedLength : length;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "z-10 -mt-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('-mt-10 ml-px h-7 w-fit rounded-bl bg-white !pr-2 shadow-[6px_0px_6px_theme(colors.white)]', getCellSizingClasses('normal'))
+  }, label, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, total)));
+};
 const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref) {
   const key = React__default.useMemo(() => String('tableKey_' + String(props.children)), [props.children]);
   return /*#__PURE__*/React__default.createElement(BaseTable2, Object.assign({}, props, {