@economic/taco 2.40.2 → 2.41.1

package/dist/taco.cjs.development.js

@@ -3765,7 +3765,7 @@ const BadgeIcon = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     small,
     ...otherProps
   } = props;
-  const className = cn(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full`, {
+  const className = cn(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`, {
     'w-5 h-5': !small
   }, {
     'w-4 h-4 text-xs': small
@@ -8941,6 +8941,7 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
   var _moreButton;
   const {
     moreButton,
+    wrapChild,
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
@@ -8974,7 +8975,9 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
   })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(MoreButton, {
     className: cn('sticky right-0 order-[99]', MoreButton.props.className),
     'data-observer-ignore': true,
-    menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem)))),
+    menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map((child, index) => wrapChild ? (/*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      key: index
+    }, child)) : sanitizeButtonPropsForMenuItem(child, index))))),
     ref: buttonRefCallback
   }) : null);
 });
@@ -10079,6 +10082,7 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       aggregationFn,
       defaultHidden,
       defaultWidth,
+      enableEditing = !!child.props.control,
       enableFiltering: enableColumnFilter = true,
       enableGrouping = false,
       enableHiding = true,
@@ -10130,6 +10134,7 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
         enableOrdering: isGrouped ? false : enableOrdering,
         enablePrinting,
         enableTruncate,
+        enableEditing,
         header,
         renderer
       }
@@ -10228,6 +10233,9 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
 function configureReactTableOptions(options, props) {
   var _options$enableFilter, _options$enableColumn, _options$enableRowExp, _options$enableColumn2, _options$enableColumn3, _options$enableSortin;
   const enableRowSelection = options.enableRowSelection || options.enableRowSelectionSingle;
+  // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
+  // which receives the React Table Row object and passes row.original to a callback.
+  const reactTableEnableRowSelection = typeof enableRowSelection === 'function' ? row => enableRowSelection(row.original) : enableRowSelection;
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10246,8 +10254,8 @@ function configureReactTableOptions(options, props) {
     enableGrouping: true,
     enableHiding: (_options$enableColumn2 = options.enableColumnHiding) !== null && _options$enableColumn2 !== void 0 ? _options$enableColumn2 : false,
     enablePinning: (_options$enableColumn3 = options.enableColumnFreezing) !== null && _options$enableColumn3 !== void 0 ? _options$enableColumn3 : false,
-    enableRowSelection: enableRowSelection !== null && enableRowSelection !== void 0 ? enableRowSelection : false,
-    enableMultiRowSelection: options.enableRowSelectionSingle === true ? false : enableRowSelection,
+    enableRowSelection: reactTableEnableRowSelection !== null && reactTableEnableRowSelection !== void 0 ? reactTableEnableRowSelection : false,
+    enableMultiRowSelection: !options.enableRowSelectionSingle && reactTableEnableRowSelection,
     enableSorting: (_options$enableSortin = options.enableSorting) !== null && _options$enableSortin !== void 0 ? _options$enableSortin : false,
     // models for default features
     getExpandedRowModel: reactTable.getExpandedRowModel(),
@@ -10447,8 +10455,8 @@ function getTableFeaturePreset(props) {
     enableColumnHiding: (_props$enableColumnHi = props.enableColumnHiding) !== null && _props$enableColumnHi !== void 0 ? _props$enableColumnHi : presetOptions.enableColumnHiding,
     enableColumnResizing: (_props$enableColumnRe = props.enableColumnResizing) !== null && _props$enableColumnRe !== void 0 ? _props$enableColumnRe : presetOptions.enableColumnResizing,
     enableRowExpansion: enableRowExpansion && !!props.rowExpansionRenderer,
-    enableRowSelection: enableRowSelection && !!props.onRowSelect,
-    enableRowSelectionSingle: enableRowSelectionSingle && !!props.onRowSelect,
+    enableRowSelection: !!props.onRowSelect && enableRowSelection,
+    enableRowSelectionSingle: !!props.onRowSelect && enableRowSelectionSingle,
     // custom -- common between all table types
     enableColumnOrdering: (_props$enableColumnOr = props.enableColumnOrdering) !== null && _props$enableColumnOr !== void 0 ? _props$enableColumnOr : presetOptions.enableColumnOrdering,
     enableFontSize: (_props$enableFontSize = props.enableFontSize) !== null && _props$enableFontSize !== void 0 ? _props$enableFontSize : presetOptions.enableFontSize,
@@ -10745,11 +10753,12 @@ function useTableRowSelection(isEnabled = false) {
     const rows = table.getRowModel().rows;
     const tableMeta = table.options.meta;
     if (event.key === ' ') {
+      var _rows$rowActiveIndex;
       event.preventDefault();
       const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;
-      if (rowActiveIndex !== undefined) {
-        var _rows$rowActiveIndex;
-        (_rows$rowActiveIndex = rows[rowActiveIndex]) === null || _rows$rowActiveIndex === void 0 ? void 0 : _rows$rowActiveIndex.toggleSelected();
+      if (rowActiveIndex !== undefined && (_rows$rowActiveIndex = rows[rowActiveIndex]) !== null && _rows$rowActiveIndex !== void 0 && _rows$rowActiveIndex.getCanSelect()) {
+        var _rows$rowActiveIndex2;
+        (_rows$rowActiveIndex2 = rows[rowActiveIndex]) === null || _rows$rowActiveIndex2 === void 0 ? void 0 : _rows$rowActiveIndex2.toggleSelected();
       }
       return;
     } else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
@@ -11365,22 +11374,24 @@ function useTableRowHeightListener(table) {
 }
 
 function useTableRowSelectionListener(table, onRowSelect) {
-  const rowSelection = table.getState().rowSelection;
+  const rows = table.getSelectedRowModel().flatRows;
+  const rowSelection = React__default.useMemo(() => rows.map(row => row.original), [rows]);
   useLazyEffect(() => {
-    const selectedRows = table.getSelectedRowModel().rows;
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
       if (table.options.enableMultiRowSelection) {
-        onRowSelect(selectedRows.map(row => row.original));
+        onRowSelect(rowSelection);
       } else {
-        var _ref, _selectedRows$;
-        onRowSelect((_ref = [(_selectedRows$ = selectedRows[0]) === null || _selectedRows$ === void 0 ? void 0 : _selectedRows$.original]) !== null && _ref !== void 0 ? _ref : []);
+        var _ref;
+        onRowSelect((_ref = [rowSelection[0]]) !== null && _ref !== void 0 ? _ref : []);
       }
     }
-    // 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)]);
+    /**
+     * Casting to a boolean, since enableRowSelection and enableMultiRowSelection can be a functions,
+     * and setting a function as depoendency will lead to infinity loop. And in case of row selection useEffect,
+     * we only need to know if selection was enabled or disabled, because enableRowSelection/enableMultiRowSelection functions
+     * will be applied directly to particular rows.
+     */
+  }, [!!table.options.enableRowSelection, !!table.options.enableMultiRowSelection, rowSelection]);
 }
 
 function resetHighlightedColumnIndexes(value, table) {
@@ -11445,7 +11456,7 @@ function useTableSearchListener(table, onChangeSearch) {
         onChangeSearch(query);
       }
     }
-  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility), onChangeSearch]);
+  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows, table.getState().globalFilter, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility), onChangeSearch]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -11556,14 +11567,19 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
   };
 }
 
+// Placed this array outside the hook to avoid creating a new array reference on each hook re-render
+const DEFAULT_EMPTY_ARRAY = [];
 function useTableManager(props, meta, internalColumns) {
-  var _props$data, _props$length, _instance$options$met;
+  var _props$data, _props$length, _meta$editing, _instance$options$met;
   // CSS.escape would be best here, but it doesn't seem to work very well
   const safeId = props.id.replace('.', '_');
   // configure table options, merging props with presets
   const options = getTableFeaturePreset(props);
   // load any persisted table settings and merge them with any defaults
   const [settings, setSettings] = useTableSettings(options.enableSaveSettings, safeId, props.defaultSettings, props.onChangeSettings);
+  // ensure data is always valid
+  const data = (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : DEFAULT_EMPTY_ARRAY;
+  const length = (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : data.length;
   // configure common custom features
   const columnFreezing = useTableColumnFreezing(options.enableColumnFreezing);
   const columnOrdering = useTableColumnOrdering(options.enableColumnOrdering);
@@ -11573,13 +11589,13 @@ function useTableManager(props, meta, internalColumns) {
   const rowActive = useTableRowActive(options.enableRowActive, props.defaultRowActiveIndex);
   const rowActions = useTableRowActions(options.enableRowActions, props.rowActions, props.rowActionsLength);
   const rowClick = useTableRowClick(options.enableRowClick, props.onRowClick);
-  const rowDrag = useTableRowDrag(options.enableRowDrag, props.onRowDrag);
+  const rowDrag = useTableRowDrag(options.enableRowDrag && !(meta !== null && meta !== void 0 && (_meta$editing = meta.editing) !== null && _meta$editing !== void 0 && _meta$editing.isEditing), props.onRowDrag);
   const rowDrop = useTableRowDrop(options.enableRowDrop, props.onRowDrop);
   const rowExpansion = useTableRowExpansion(options.enableRowExpansion, props.rowExpansionRenderer);
   const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
   const rowGroups = useTableRowGroups(props.rowActionsForGroup);
   const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
-  const rowSelection = useTableRowSelection(options.enableRowSelection);
+  const rowSelection = useTableRowSelection(!!options.enableRowSelection);
   const search = useTableSearch(options.enableSearch, settings.excludeUnmatchedRecordsInSearch);
   const server = useTableServerLoading(props.loadPage, props.loadAll, props.pageSize);
   // TODO: memoise
@@ -11590,9 +11606,6 @@ function useTableManager(props, meta, internalColumns) {
   } = mapTableChildrenToColumns(props, settings, options, internalColumns);
   // configure initial table state
   const initialState = useReactTableInitialState(props, columns, settings, defaultState);
-  // ensure data is always valid
-  const data = (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : [];
-  const length = (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : data.length;
   // create a react-table instance
   const instance = reactTable.useReactTable({
     data,
@@ -11705,8 +11718,9 @@ function useTableStyleGrid(tableId, table, fontSize) {
     // printing grid
     // we have to be specific so that nested tables don't inherit the same css
     const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
+    // Ensure that tfoot cells are not hidden so that the summary and footer cells appear in the printed document
     const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: repeat(${printGridTemplateColumns}, auto) !important; }
-        table[data-taco^='table']#${tableId} [data-cell-id^='__']${hiddenColumns ? `, ${hiddenColumns}` : ''} { display: none; }}`;
+        table[data-taco^='table']#${tableId} &:not(tfoot) [data-cell-id^='__']${hiddenColumns ? `, ${hiddenColumns}` : ''} { display: none; } table[data-taco^='table']#${tableId} tr { page-break-inside: avoid; break-inside: avoid;}}`;
     return {
       style,
       stylesheet
@@ -12251,58 +12265,18 @@ const renderer = {
   }
 };
 
-const GHOST_ELEMENT_ID = 'taco_table_dragging';
 function Header$2() {
   return null;
 }
-function Cell$1(context) {
-  const {
-    row,
-    table
-  } = context;
+function Cell$1() {
   const {
     texts
   } = useLocalization();
-  const tableMeta = context.table.options.meta;
-  const onDragStart = event => {
-    var _tableMeta$rowDrag$se, _tableMeta$rowDrag, _tableMeta$rowDrag$ha, _tableMeta$rowDrag2;
-    let rows = [row];
-    if (table.options.enableRowSelection) {
-      rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];
-    }
-    const data = rows.map(row => row.original);
-    (_tableMeta$rowDrag$se = (_tableMeta$rowDrag = tableMeta.rowDrag).setDragging) === null || _tableMeta$rowDrag$se === void 0 ? void 0 : _tableMeta$rowDrag$se.call(_tableMeta$rowDrag, rows.reduce((dragging, rowBeingDragged) => ({
-      ...dragging,
-      [rowBeingDragged.id]: true
-    }), {}));
-    // set a default data value so that the consumer doesn't have to
-    event.dataTransfer.setData('text', JSON.stringify(data));
-    const showPlaceholder = text => {
-      const ghost = document.createElement('div');
-      ghost.id = GHOST_ELEMENT_ID;
-      ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';
-      ghost.innerText = text;
-      document.body.appendChild(ghost);
-      event.dataTransfer.setDragImage(ghost, 0, 0);
-    };
-    const setDataTransfer = text => event.dataTransfer.setData('text', text);
-    (_tableMeta$rowDrag$ha = (_tableMeta$rowDrag2 = tableMeta.rowDrag).handleRowDrag) === null || _tableMeta$rowDrag$ha === void 0 ? void 0 : _tableMeta$rowDrag$ha.call(_tableMeta$rowDrag2, data, showPlaceholder, setDataTransfer);
-  };
-  const handleDragEnd = () => {
-    var _document$getElementB, _tableMeta$rowDrag$se2, _tableMeta$rowDrag3;
-    (_document$getElementB = document.getElementById(GHOST_ELEMENT_ID)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
-    (_tableMeta$rowDrag$se2 = (_tableMeta$rowDrag3 = tableMeta.rowDrag).setDragging) === null || _tableMeta$rowDrag$se2 === void 0 ? void 0 : _tableMeta$rowDrag$se2.call(_tableMeta$rowDrag3, {});
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    draggable: true,
-    onDragStart: onDragStart,
-    onDragOver: event => event.preventDefault(),
-    onDragEnd: handleDragEnd
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  return /*#__PURE__*/React__default.createElement(Icon, {
     "aria-label": texts.table.columns.drag.tooltip,
     name: "drag",
-    className: "text-grey-darkest invisible -mt-1 ml-[2px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
-  }));
+    className: cn("text-grey-darkest invisible -mt-1 ml-[2px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white", '[[data-table-editing-mode]_&]:!invisible')
+  });
 }
 const renderer$1 = {
   header: Header$2,
@@ -12416,9 +12390,8 @@ function Header$4(context) {
     }, /*#__PURE__*/React__default.createElement(Checkbox, {
       "aria-label": title,
       className: "hover:border-blue !-mt-px",
-      key: String(`${isAllRowsSelected}_${isSomeRowsSelected}`),
       checked: isAllRowsSelected,
-      indeterminate: isSomeRowsSelected,
+      indeterminate: isSomeRowsSelected && !isAllRowsSelected,
       loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
       onChange: handleChange
     }));
@@ -12447,6 +12420,7 @@ function Cell$3(context) {
     return null;
   }
   const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();
+  const canSelect = row.getCanSelect();
   const title = isSelected ? texts.table.columns.select.deselect : texts.table.columns.select.select;
   if (table.options.enableMultiRowSelection) {
     const handleClick = function (event) {
@@ -12465,7 +12439,7 @@ function Cell$3(context) {
                 function _temp4() {
                   table.setRowSelection(currentRowSelection => ({
                     ...currentRowSelection,
-                    ...selectedRows.reduce((state, row) => ({
+                    ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({
                       ...state,
                       [row.id]: true
                     }), {})
@@ -12493,6 +12467,7 @@ function Cell$3(context) {
       }
     };
     return /*#__PURE__*/React__default.createElement(Tooltip, {
+      hidden: !canSelect,
       title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title, /*#__PURE__*/React__default.createElement(Shortcut, {
         className: "ml-2",
         keys: "Space"
@@ -12502,11 +12477,12 @@ function Cell$3(context) {
       className: "!mt-0",
       checked: isSelected,
       onClick: handleClick,
+      disabled: !canSelect,
       // this is necessary to remove console spam from eslint
       onChange: () => false
     }));
   } else {
-    const className = cn('!mt-0', getRadioClassnames());
+    const className = cn('!mt-0', getRadioClassnames(!canSelect));
     const handleClick = event => {
       event.stopPropagation();
       row.toggleSelected();
@@ -12514,7 +12490,8 @@ function Cell$3(context) {
     };
     return /*#__PURE__*/React__default.createElement("button", {
       className: className,
-      "aria-checked": isSelected,
+      "aria-checked": canSelect && isSelected,
+      disabled: !canSelect,
       onClick: handleClick,
       role: "radio",
       type: "button"
@@ -12767,6 +12744,37 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   // row drag
   if (tableMeta.rowDrag.isEnabled) {
     attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];
+    attributes.draggable = true;
+    const GHOST_ELEMENT_ID = 'taco_table_dragging';
+    attributes.onDragStart = event => {
+      var _tableMeta$rowDrag$se, _tableMeta$rowDrag, _tableMeta$rowDrag$ha, _tableMeta$rowDrag2;
+      let rows = [row];
+      if (row.getCanSelect()) {
+        rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];
+      }
+      const data = rows.map(row => row.original);
+      (_tableMeta$rowDrag$se = (_tableMeta$rowDrag = tableMeta.rowDrag).setDragging) === null || _tableMeta$rowDrag$se === void 0 ? void 0 : _tableMeta$rowDrag$se.call(_tableMeta$rowDrag, rows.reduce((dragging, rowBeingDragged) => ({
+        ...dragging,
+        [rowBeingDragged.id]: true
+      }), {}));
+      // set a default data value so that the consumer doesn't have to
+      event.dataTransfer.setData('text', JSON.stringify(data));
+      const showPlaceholder = text => {
+        const ghost = document.createElement('div');
+        ghost.id = GHOST_ELEMENT_ID;
+        ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';
+        ghost.innerText = text;
+        document.body.appendChild(ghost);
+        event.dataTransfer.setDragImage(ghost, 0, 0);
+      };
+      const setDataTransfer = text => event.dataTransfer.setData('text', text);
+      (_tableMeta$rowDrag$ha = (_tableMeta$rowDrag2 = tableMeta.rowDrag).handleRowDrag) === null || _tableMeta$rowDrag$ha === void 0 ? void 0 : _tableMeta$rowDrag$ha.call(_tableMeta$rowDrag2, data, showPlaceholder, setDataTransfer);
+    };
+    attributes.onDragEnd = () => {
+      var _document$getElementB, _tableMeta$rowDrag$se2, _tableMeta$rowDrag3;
+      (_document$getElementB = document.getElementById(GHOST_ELEMENT_ID)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+      (_tableMeta$rowDrag$se2 = (_tableMeta$rowDrag3 = tableMeta.rowDrag).setDragging) === null || _tableMeta$rowDrag$se2 === void 0 ? void 0 : _tableMeta$rowDrag$se2.call(_tableMeta$rowDrag3, {});
+    };
   }
   // row drop
   const [isDraggedOver, dropTargetProps] = useDropTarget(event => {
@@ -12785,7 +12793,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
     attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;
   }
   // row selection
-  if (table.options.enableRowSelection) {
+  if (row.getCanSelect()) {
     attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;
   }
   // row expansion
@@ -12806,6 +12814,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   const isExpanded = !!attributes['data-row-expanded'];
   useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);
   const className = cn('group/row', {
+    'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
     'hover:cursor-pointer': typeof attributes.onClick === 'function'
   });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", Object.assign({}, attributes, {
@@ -12956,7 +12965,7 @@ function Resizer(props) {
     }
   };
   const handle = /*#__PURE__*/React__default.createElement("div", {
-    className: cn('invisible absolute right-0 top-0 z-10 -mr-2 flex h-full w-4 cursor-col-resize touch-none select-none justify-center rounded py-0.5', 'group-hover/header:visible', '[th:last-child>&]:!mr-0 [th:last-child>&]:w-2', {
+    className: cn('invisible absolute right-0 top-0 z-10 -mr-2 flex h-full w-4 cursor-col-resize touch-none select-none justify-center rounded py-0.5', 'group-hover/header:visible print:hidden', '[th:last-child>&]:!mr-0 [th:last-child>&]:w-2', {
       '!visible': isResizing
     }),
     onClick: handleClick,
@@ -13191,7 +13200,9 @@ function HeaderMenu(props) {
   // visible - expanded
   'aria-expanded:!w-6 aria-expanded:!min-w-[theme(spacing.6)]',
   // visible - focus
-  'focus:!w-6 focus:!min-w-[theme(spacing.6)]', {
+  'focus:!w-6 focus:!min-w-[theme(spacing.6)]',
+  // print styles
+  'print:!hidden', {
     '!w-6 !min-w-[theme(spacing.6)]': !!popoverElement
   }, props.className);
   return /*#__PURE__*/React__default.createElement(IconButton, {
@@ -13591,7 +13602,8 @@ function Summary(props) {
     count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sticky left-0 z-20 flex h-full w-fit items-center whitespace-nowrap bg-white pr-1 shadow-[12px_0px_6px_white]",
+    // translate-y-1 is used to prevent the summary cell's box shadow from clipping the border
+    className: "sticky left-0 z-20 flex h-full w-fit items-center whitespace-nowrap bg-white pr-1 shadow-[12px_0px_6px_white] print:!translate-y-1",
     "data-taco": "table-footer-summary"
   }, label, "\u00A0", count);
 }
@@ -15331,7 +15343,6 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     invalid: !!validationError,
     message: validationError === null || validationError === void 0 ? void 0 : validationError.message
   }, /*#__PURE__*/React__default.createElement(Input, Object.assign({}, otherProps, {
-    "aria-hidden": true,
     autoFocus: true,
     invalid: !!validationError,
     onChange: handleChange,
@@ -19208,7 +19219,7 @@ function Cell$5(props) {
   const tableMeta = cell.getContext().table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
   if (tableMeta.editing.isEditing) {
-    if (columnMeta.control) {
+    if (columnMeta.control && columnMeta.enableEditing) {
       const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
       const cellError = tableMeta.editing.getCellError(cell);
       const hasErrorAndIsEditing = cellError ? tableMeta.editing.isEditing : true;
@@ -19602,7 +19613,7 @@ function CreateNewRowButton(props) {
   }, [rowCreated]);
   return /*#__PURE__*/React__default.createElement("tr", {
     onClick: handleCreate,
-    className: "border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t"
+    className: "border-grey-300 hover:bg-grey-100 group !sticky bottom-10 left-0 z-[21] !block cursor-pointer border-t print:!hidden"
   }, /*#__PURE__*/React__default.createElement("td", {
     className: "!border-t-0 !bg-transparent"
   }, /*#__PURE__*/React__default.createElement(Button$1, {
@@ -19726,11 +19737,23 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const {
+    children
+  } = props;
   const className = cn('border-grey-300 flex flex-row m-0 mb-4 print:hidden', 'aria-orientation-horizontal:border-b', 'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref
-  }));
+  }), /*#__PURE__*/React.createElement(OverflowGroup, {
+    wrapChild: true,
+    className: 'w-full [[aria-orientation="vertical"]_&]:flex-col',
+    moreButton: text => /*#__PURE__*/React.createElement(Button$1, null, text)
+  }, React.Children.toArray(children).filter(child => {
+    if (/*#__PURE__*/React.isValidElement(child)) {
+      return !child.props.hidden;
+    }
+    return true;
+  })));
 });
 const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
   const {
@@ -19740,7 +19763,7 @@ const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     tooltip,
     ...otherProps
   } = props;
-  const triggerClassName = cn('group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  const triggerClassName = cn(props.className, 'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
   // horizontal
   '[[aria-orientation="horizontal"]_&]:pb-1',
   // horizontal