@economic/taco 2.67.0 → 2.67.1-alpha.0

package/dist/taco.cjs

@@ -26978,7 +26978,7 @@ const Content$4 = React__namespace.forwardRef(function HangerContent(props, ref)
   const context = React__namespace.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) => {
@@ -37880,6 +37880,8 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
   });
   const expandedState = table.getState().expanded;
   const previousExpandedStateRef = React.useRef(false);
+  const sortingState = table.getState().sorting;
+  const previousSortingStateRef = React.useRef(JSON.stringify(sortingState));
   React.useEffect(() => {
     const isEmpty = JSON.stringify(expandedState) === "{}";
     if (expandedState === true || isEmpty && previousExpandedStateRef.current === true) {
@@ -37887,6 +37889,13 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
       virtualiser.measure();
     }
   }, [expandedState]);
+  React.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.useCallback(
@@ -37939,10 +37948,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.createElement(
           SkeletonRow,
           {
-            key: virtualRow.index,
+            key: skeletonKey,
             index: virtualRow.index,
             scrollDirection: virtualiser.scrollDirection ?? void 0,
             table
@@ -39030,6 +39040,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) => {
@@ -39080,6 +39093,7 @@ const MemoedHeader = React.memo(function MemoedHeader2(props) {
     hasMenu,
     id: id2,
     index: index2,
+    isExpanded,
     isFiltered,
     isGroup: isGroup2,
     isPinned,
@@ -39119,6 +39133,7 @@ const MemoedHeader = React.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
     },
@@ -39313,10 +39328,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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("strong", null, new Intl.NumberFormat(locale2).format(currentLength)), " ", texts.table.footer.summary.count, " ", /* @__PURE__ */ React.createElement("strong", null, new Intl.NumberFormat(locale2).format(length)));
+    count2 = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("strong", { "data-taco": "table-footer-current-count" }, new Intl.NumberFormat(locale2).format(currentLength)), " ", texts.table.footer.summary.count, " ", /* @__PURE__ */ React.createElement("strong", { "data-taco": "table-footer-total-count" }, new Intl.NumberFormat(locale2).format(length)));
   } else {
     label = texts.table.footer.summary.records;
-    count2 = /* @__PURE__ */ React.createElement("strong", null, new Intl.NumberFormat(locale2).format(length));
+    count2 = /* @__PURE__ */ React.createElement("strong", { "data-taco": "table-footer-total-count" }, new Intl.NumberFormat(locale2).format(length));
   }
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -45167,6 +45182,7 @@ function Print(props) {
     {
       icon: "print",
       "aria-label": texts.table.print.tooltip,
+      id: `${tableId}-toolbar-print`,
       dialog: (dialogProps) => /* @__PURE__ */ React.createElement(
         PrintDialog,
         {
@@ -45503,7 +45519,7 @@ function Filter(props) {
       ref.current.focus();
     }
   }, [id2]);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2" }, /* @__PURE__ */ React.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.createElement(FilterColumn, { allHeaders, onChange: handleChangeColumn, value: id2, ref }), /* @__PURE__ */ React.createElement(FilterComparator, { column: column == null ? void 0 : column.column, onChange: handleChangeComparator, value: comparator }), /* @__PURE__ */ React.createElement(FilterValue, { column: column == null ? void 0 : column.column, comparator, onChange: handleChangeValue, value }), onRemove ? /* @__PURE__ */ React.createElement(IconButton, { appearance: "discrete", className: "ml-auto", icon: "close", onClick: handleRemove }) : null);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2", "data-taco": "filter-row" }, /* @__PURE__ */ React.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.createElement(FilterColumn, { allHeaders, onChange: handleChangeColumn, value: id2, ref }), /* @__PURE__ */ React.createElement(FilterComparator, { column: column == null ? void 0 : column.column, onChange: handleChangeComparator, value: comparator }), /* @__PURE__ */ React.createElement(FilterValue, { column: column == null ? void 0 : column.column, comparator, onChange: handleChangeValue, value }), onRemove ? /* @__PURE__ */ React.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) {
@@ -45584,10 +45600,10 @@ function ManageFiltersPopover(props) {
       onChange: handleChangeFilter,
       onRemove: filters.length > 0 && filters.some((f2) => f2.id) || filters.length > 1 ? handleRemoveFilter : void 0
     }
-  )), /* @__PURE__ */ React.createElement("div", { className: "justify-start" }, /* @__PURE__ */ React.createElement(Button$4, { appearance: "discrete", onClick: handleCreate }, "+ ", texts.table.filters.buttons.addFilter))), /* @__PURE__ */ React.createElement(Group$6, { className: "ml-auto" }, /* @__PURE__ */ React.createElement(Popover.Close, null, /* @__PURE__ */ React.createElement(Button$4, null, texts.table.filters.buttons.cancel)), /* @__PURE__ */ React.createElement(Button$4, { onClick: handleClear }, texts.table.filters.buttons.clear), /* @__PURE__ */ React.createElement(Button$4, { appearance: "primary", onClick: handleApply }, texts.table.filters.buttons.apply))))));
+  )), /* @__PURE__ */ React.createElement("div", { className: "justify-start" }, /* @__PURE__ */ React.createElement(Button$4, { appearance: "discrete", onClick: handleCreate, name: "add-filter" }, "+ ", texts.table.filters.buttons.addFilter))), /* @__PURE__ */ React.createElement(Group$6, { className: "ml-auto" }, /* @__PURE__ */ React.createElement(Popover.Close, null, /* @__PURE__ */ React.createElement(Button$4, { name: "close-filters" }, texts.table.filters.buttons.cancel)), /* @__PURE__ */ React.createElement(Button$4, { name: "clear-filters", onClick: handleClear }, texts.table.filters.buttons.clear), /* @__PURE__ */ React.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;
@@ -45600,7 +45616,8 @@ function Filters(props) {
     popover: (popoverProps) => /* @__PURE__ */ React.createElement(ManageFiltersPopover, { ...popoverProps, length, table }),
     shortcut: shortcut2,
     ref,
-    tooltip: /* @__PURE__ */ React.createElement(React.Fragment, null, texts.table.filters.tooltip, /* @__PURE__ */ React.createElement(Shortcut, { className: "ml-2", keys: shortcut2 }))
+    tooltip: /* @__PURE__ */ React.createElement(React.Fragment, null, texts.table.filters.tooltip, /* @__PURE__ */ React.createElement(Shortcut, { className: "ml-2", keys: shortcut2 })),
+    id: `${tableId}-toolbar-filters`
   };
   React.useEffect(() => {
     var _a;
@@ -45633,7 +45650,7 @@ function TableToolbar(props) {
       "data-taco": "table-toolbar"
     },
     table.props.toolbarLeft,
-    /* @__PURE__ */ React.createElement(Group$6, { className: "ml-auto flex-shrink-0 items-center print:hidden" }, customTools, canFilter ? /* @__PURE__ */ React.createElement(Filters, { length: table.meta.length, table: table.instance }) : null, table.props.toolbarRight, canPrint ? /* @__PURE__ */ React.createElement(Print, { table: table.instance, tableId: table.id, tableRef: table.ref }) : null, canSettings ? /* @__PURE__ */ React.createElement(Settings, { customSettings: table.props.customSettings, id: `${id2}-settings`, table: table.instance }) : null, canSearch ? /* @__PURE__ */ React.createElement(Search$1, { scrollToIndex: table.renderer.scrollToIndex, table: table.instance, tableRef: table.ref }) : null)
+    /* @__PURE__ */ React.createElement(Group$6, { className: "ml-auto flex-shrink-0 items-center print:hidden" }, customTools, canFilter ? /* @__PURE__ */ React.createElement(Filters, { length: table.meta.length, tableId: table.id, table: table.instance }) : null, table.props.toolbarRight, canPrint ? /* @__PURE__ */ React.createElement(Print, { table: table.instance, tableId: table.id, tableRef: table.ref }) : null, canSettings ? /* @__PURE__ */ React.createElement(Settings, { customSettings: table.props.customSettings, id: `${id2}-settings`, table: table.instance }) : null, canSearch ? /* @__PURE__ */ React.createElement(Search$1, { scrollToIndex: table.renderer.scrollToIndex, table: table.instance, tableRef: table.ref }) : null)
   ), table.props.toolbarPanel ? /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, table.props.toolbarPanel) : void 0);
 }
 function canChangeSettings(table, customSettings) {