@economic/taco 2.67.0 → 2.67.1-footer-fix.1

package/dist/taco.js

@@ -26960,7 +26960,7 @@ const Content$4 = React.forwardRef(function HangerContent(props, ref) {
   const context = React.useContext(HangerContext);
   const { texts } = useLocalization();
   const className = clsx(
-    "wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm",
+    "wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden",
     props.className
   );
   const handleInteractOutside = (event) => {
@@ -35546,7 +35546,7 @@ function configureReactTableOptions(options, props, localization) {
       if (originalRow) {
         return String(originalRow[props.rowIdentityAccessor]);
       }
-      return String(index2);
+      return `skeleton-${index2}-${Math.random().toString(36).substr(2, 9)}`;
     };
   }
   const tableOptions = {
@@ -37862,6 +37862,8 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
   });
   const expandedState = table.getState().expanded;
   const previousExpandedStateRef = React__default.useRef(false);
+  const sortingState = table.getState().sorting;
+  const previousSortingStateRef = React__default.useRef(JSON.stringify(sortingState));
   React__default.useEffect(() => {
     const isEmpty = JSON.stringify(expandedState) === "{}";
     if (expandedState === true || isEmpty && previousExpandedStateRef.current === true) {
@@ -37869,6 +37871,13 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
       virtualiser.measure();
     }
   }, [expandedState]);
+  React__default.useEffect(() => {
+    const currentSortingString = JSON.stringify(sortingState);
+    if (currentSortingString !== previousSortingStateRef.current) {
+      previousSortingStateRef.current = currentSortingString;
+      virtualiser.measure();
+    }
+  }, [sortingState]);
   const totalSize = virtualiser.getTotalSize();
   const virtualItems = virtualiser.getVirtualItems();
   const scrollToIndex = React__default.useCallback(
@@ -37921,10 +37930,11 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
         row = rows[virtualRow.index];
       }
       if (!(row == null ? void 0 : row.original)) {
+        const skeletonKey = `skeleton-${virtualRow.index}-${JSON.stringify(table.getState().sorting).slice(0, 8)}`;
         return /* @__PURE__ */ React__default.createElement(
           SkeletonRow,
           {
-            key: virtualRow.index,
+            key: skeletonKey,
             index: virtualRow.index,
             scrollDirection: virtualiser.scrollDirection ?? void 0,
             table
@@ -39012,6 +39022,9 @@ function Header$1(props) {
   if (canHide) {
     memoedProps.onHide = header.column.getToggleVisibilityHandler();
   }
+  if (header.id === "__expansion") {
+    memoedProps.isExpanded = table.getIsSomeRowsExpanded();
+  }
   if (canPin) {
     memoedProps.onPin = (index2) => {
       table.setColumnPinning((pinningState) => {
@@ -39062,6 +39075,7 @@ const MemoedHeader = React__default.memo(function MemoedHeader2(props) {
     hasMenu,
     id: id2,
     index: index2,
+    isExpanded,
     isFiltered,
     isGroup: isGroup2,
     isPinned,
@@ -39101,6 +39115,7 @@ const MemoedHeader = React__default.memo(function MemoedHeader2(props) {
       "data-cell-id": id2,
       "data-cell-pinned": isPinned ? isPinned : void 0,
       "data-taco": isGroup2 ? "grouped-column-header" : "column-header",
+      "data-rows-expanded": isExpanded ? isExpanded : void 0,
       style,
       ref: setRef
     },
@@ -39295,10 +39310,10 @@ function Summary(props) {
   } else if (!tableMeta.server.isEnabled && (((_a = table.getState().columnFilters) == null ? void 0 : _a.length) || // filtered data
   !!table.getState().globalFilter && table.options.enableGlobalFilter)) {
     label = texts.table.footer.summary.records;
-    count2 = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("strong", null, new Intl.NumberFormat(locale2).format(currentLength)), " ", texts.table.footer.summary.count, " ", /* @__PURE__ */ React__default.createElement("strong", null, new Intl.NumberFormat(locale2).format(length)));
+    count2 = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("strong", { "data-taco": "table-footer-current-count" }, new Intl.NumberFormat(locale2).format(currentLength)), " ", texts.table.footer.summary.count, " ", /* @__PURE__ */ React__default.createElement("strong", { "data-taco": "table-footer-total-count" }, new Intl.NumberFormat(locale2).format(length)));
   } else {
     label = texts.table.footer.summary.records;
-    count2 = /* @__PURE__ */ React__default.createElement("strong", null, new Intl.NumberFormat(locale2).format(length));
+    count2 = /* @__PURE__ */ React__default.createElement("strong", { "data-taco": "table-footer-total-count" }, new Intl.NumberFormat(locale2).format(length));
   }
   return /* @__PURE__ */ React__default.createElement(
     "div",
@@ -45149,6 +45164,7 @@ function Print(props) {
     {
       icon: "print",
       "aria-label": texts.table.print.tooltip,
+      id: `${tableId}-toolbar-print`,
       dialog: (dialogProps) => /* @__PURE__ */ React__default.createElement(
         PrintDialog,
         {
@@ -45485,7 +45501,7 @@ function Filter(props) {
       ref.current.focus();
     }
   }, [id2]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "flex items-start gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right" }, position > 0 ? texts.table.filters.conditions.and : texts.table.filters.conditions.where), /* @__PURE__ */ React__default.createElement(FilterColumn, { allHeaders, onChange: handleChangeColumn, value: id2, ref }), /* @__PURE__ */ React__default.createElement(FilterComparator, { column: column == null ? void 0 : column.column, onChange: handleChangeComparator, value: comparator }), /* @__PURE__ */ React__default.createElement(FilterValue, { column: column == null ? void 0 : column.column, comparator, onChange: handleChangeValue, value }), onRemove ? /* @__PURE__ */ React__default.createElement(IconButton, { appearance: "discrete", className: "ml-auto", icon: "close", onClick: handleRemove }) : null);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex items-start gap-2", "data-taco": "filter-row" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right" }, position > 0 ? texts.table.filters.conditions.and : texts.table.filters.conditions.where), /* @__PURE__ */ React__default.createElement(FilterColumn, { allHeaders, onChange: handleChangeColumn, value: id2, ref }), /* @__PURE__ */ React__default.createElement(FilterComparator, { column: column == null ? void 0 : column.column, onChange: handleChangeComparator, value: comparator }), /* @__PURE__ */ React__default.createElement(FilterValue, { column: column == null ? void 0 : column.column, comparator, onChange: handleChangeValue, value }), onRemove ? /* @__PURE__ */ React__default.createElement(IconButton, { appearance: "discrete", className: "ml-auto", icon: "close", onClick: handleRemove }) : null);
 }
 const placeholderFilter = { id: "", value: { comparator: TableFilterComparator.Contains, value: void 0 } };
 function ManageFiltersPopover(props) {
@@ -45566,10 +45582,10 @@ function ManageFiltersPopover(props) {
       onChange: handleChangeFilter,
       onRemove: filters.length > 0 && filters.some((f2) => f2.id) || filters.length > 1 ? handleRemoveFilter : void 0
     }
-  )), /* @__PURE__ */ React__default.createElement("div", { className: "justify-start" }, /* @__PURE__ */ React__default.createElement(Button$4, { appearance: "discrete", onClick: handleCreate }, "+ ", texts.table.filters.buttons.addFilter))), /* @__PURE__ */ React__default.createElement(Group$6, { className: "ml-auto" }, /* @__PURE__ */ React__default.createElement(Popover.Close, null, /* @__PURE__ */ React__default.createElement(Button$4, null, texts.table.filters.buttons.cancel)), /* @__PURE__ */ React__default.createElement(Button$4, { onClick: handleClear }, texts.table.filters.buttons.clear), /* @__PURE__ */ React__default.createElement(Button$4, { appearance: "primary", onClick: handleApply }, texts.table.filters.buttons.apply))))));
+  )), /* @__PURE__ */ React__default.createElement("div", { className: "justify-start" }, /* @__PURE__ */ React__default.createElement(Button$4, { appearance: "discrete", onClick: handleCreate, name: "add-filter" }, "+ ", texts.table.filters.buttons.addFilter))), /* @__PURE__ */ React__default.createElement(Group$6, { className: "ml-auto" }, /* @__PURE__ */ React__default.createElement(Popover.Close, null, /* @__PURE__ */ React__default.createElement(Button$4, { name: "close-filters" }, texts.table.filters.buttons.cancel)), /* @__PURE__ */ React__default.createElement(Button$4, { name: "clear-filters", onClick: handleClear }, texts.table.filters.buttons.clear), /* @__PURE__ */ React__default.createElement(Button$4, { appearance: "primary", name: "apply-filters", onClick: handleApply }, texts.table.filters.buttons.apply))))));
 }
 function Filters(props) {
-  const { length, table } = props;
+  const { length, tableId, table } = props;
   const { texts } = useLocalization();
   const isLargeScreen = useIsLargeScreen();
   const columnFilters = table.getState().columnFilters;
@@ -45582,7 +45598,8 @@ function Filters(props) {
     popover: (popoverProps) => /* @__PURE__ */ React__default.createElement(ManageFiltersPopover, { ...popoverProps, length, table }),
     shortcut: shortcut2,
     ref,
-    tooltip: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, texts.table.filters.tooltip, /* @__PURE__ */ React__default.createElement(Shortcut, { className: "ml-2", keys: shortcut2 }))
+    tooltip: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, texts.table.filters.tooltip, /* @__PURE__ */ React__default.createElement(Shortcut, { className: "ml-2", keys: shortcut2 })),
+    id: `${tableId}-toolbar-filters`
   };
   React__default.useEffect(() => {
     var _a;
@@ -45615,7 +45632,7 @@ function TableToolbar(props) {
       "data-taco": "table-toolbar"
     },
     table.props.toolbarLeft,
-    /* @__PURE__ */ React__default.createElement(Group$6, { className: "ml-auto flex-shrink-0 items-center print:hidden" }, customTools, canFilter ? /* @__PURE__ */ React__default.createElement(Filters, { length: table.meta.length, table: table.instance }) : null, table.props.toolbarRight, canPrint ? /* @__PURE__ */ React__default.createElement(Print, { table: table.instance, tableId: table.id, tableRef: table.ref }) : null, canSettings ? /* @__PURE__ */ React__default.createElement(Settings, { customSettings: table.props.customSettings, id: `${id2}-settings`, table: table.instance }) : null, canSearch ? /* @__PURE__ */ React__default.createElement(Search$1, { scrollToIndex: table.renderer.scrollToIndex, table: table.instance, tableRef: table.ref }) : null)
+    /* @__PURE__ */ React__default.createElement(Group$6, { className: "ml-auto flex-shrink-0 items-center print:hidden" }, customTools, canFilter ? /* @__PURE__ */ React__default.createElement(Filters, { length: table.meta.length, tableId: table.id, table: table.instance }) : null, table.props.toolbarRight, canPrint ? /* @__PURE__ */ React__default.createElement(Print, { table: table.instance, tableId: table.id, tableRef: table.ref }) : null, canSettings ? /* @__PURE__ */ React__default.createElement(Settings, { customSettings: table.props.customSettings, id: `${id2}-settings`, table: table.instance }) : null, canSearch ? /* @__PURE__ */ React__default.createElement(Search$1, { scrollToIndex: table.renderer.scrollToIndex, table: table.instance, tableRef: table.ref }) : null)
   ), table.props.toolbarPanel ? /* @__PURE__ */ React__default.createElement("div", { className: "mb-4" }, table.props.toolbarPanel) : void 0);
 }
 function canChangeSettings(table, customSettings) {