@economic/taco 2.66.1-test.0 → 2.67.1-alpha.0

package/dist/taco.d.ts

@@ -3066,6 +3066,7 @@ export declare type Table3Ref = TableRef & {
             createRow?: (row: unknown) => Promise<void>;
             save: (rowId?: string) => Promise<boolean>;
             removeRowChanges: (rowId: string) => Promise<void>;
+            forceValidate: () => Promise<string[]>;
         };
     };
 };
@@ -3382,7 +3383,7 @@ export declare enum TableFilterComparator {
     IsNoneOf = 15
 }
 
-export declare type TableFilterHandler = (filters: TableColumnFilter[], hiddenColumns: string[]) => Promise<void>;
+export declare type TableFilterHandler = (filters: TableColumnFilter[], hiddenColumns: string[]) => Promise<void> | void;
 
 export declare type TableFilterValue = {
     comparator: TableFilterComparator;
@@ -3455,7 +3456,7 @@ export declare type TableScrollToIndexHandler = (index: number, options?: {
     align: 'start' | 'center' | 'end' | 'auto';
 }) => void;
 
-export declare type TableSearchHandler = (search: string | undefined, hiddenColumns: string[]) => Promise<void>;
+export declare type TableSearchHandler = (search: string | undefined, hiddenColumns: string[]) => Promise<void> | void;
 
 export declare type TableServerLoadAllHandler = (sorting: TableColumnSort[], filters: TableColumnFilter[], hiddenColumns: string[], search: string | undefined) => Promise<void>;
 
@@ -3495,7 +3496,7 @@ export declare type TableShortcutHandlerObject<TType = unknown> = {
 
 export declare type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;
 
-export declare type TableSortHandler = (sorting: TableColumnSort[]) => Promise<void>;
+export declare type TableSortHandler = (sorting: TableColumnSort[]) => Promise<void> | void;
 
 export declare type TableTexts = {
     columns: {

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) => {
@@ -35633,7 +35633,7 @@ function useReactTableInitialState(props, columns, persistedSettings, defaults2)
         columnOrder
       );
     } else {
-      if (props.defaultColumnFreezingIndex) {
+      if (props.defaultColumnFreezingIndex !== void 0) {
         columnPinning.left = freezeUptoExternalColumn(props.defaultColumnFreezingIndex, columnOrder);
       } else {
         columnPinning.left = unfreezeAllExternalColumns(columnOrder);
@@ -37834,12 +37834,12 @@ function getScrollPaddingEndOffset(table) {
   }
   return height;
 }
-function getPaddingEndOffset(table, options) {
+function getPaddingEndOffset(table) {
   const bottomRows = table.getBottomRows() ?? [];
-  return ROW_HEIGHT_ESTIMATES.medium * 1 * bottomRows.length + ((options == null ? void 0 : options.virtualiserPaddingEndOffset) ?? 0);
+  return ROW_HEIGHT_ESTIMATES.medium * 1 * bottomRows.length;
 }
 const OVERSCAN_ROW_COUNT = 8;
-function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIndex, options) {
+function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIndex) {
   var _a, _b, _c, _d, _e;
   const tableMeta = table.options.meta;
   const isTableRowGrouped = !!((_a = table.getState().grouping) == null ? void 0 : _a.length);
@@ -37858,10 +37858,12 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
     // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
     scrollPaddingStart,
     scrollPaddingEnd: getScrollPaddingEndOffset(table),
-    paddingEnd: getPaddingEndOffset(table, options)
+    paddingEnd: getPaddingEndOffset(table)
   });
   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,18 +37871,25 @@ 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(
-    (index2, options2 = { align: "auto", behavior: "smooth" }) => {
-      const notSmooth = { ...options2, behavior: "auto" };
+    (index2, options = { align: "auto", behavior: "smooth" }) => {
+      const notSmooth = { ...options, behavior: "auto" };
       if (tableRef.current) {
         if (index2 === 0) {
           virtualiser.scrollToOffset(0, notSmooth);
         } else if (index2 === count2 - 1) {
           tableRef.current.scrollTop = tableRef.current.scrollHeight;
         } else {
-          virtualiser.scrollToIndex(index2, options2);
+          virtualiser.scrollToIndex(index2, options);
         }
       }
     },
@@ -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
@@ -38318,17 +38328,10 @@ const INTERNAL_RENDERERS = {
   rowExpansion: renderer$1,
   rowSelection: renderer
 };
-function useTable$1(props, externalRef, renderers, meta, options) {
+function useTable$1(props, externalRef, renderers, meta) {
   const ref = useMergedRef(externalRef);
   const manager = useTableManager(props, ref, meta, INTERNAL_RENDERERS);
-  const renderer2 = useTableRenderer(
-    renderers,
-    manager.instance,
-    ref,
-    manager.meta.length,
-    props.defaultRowActiveIndex,
-    options
-  );
+  const renderer2 = useTableRenderer(renderers, manager.instance, ref, manager.meta.length, props.defaultRowActiveIndex);
   const { style, stylesheet } = useTableStyle(manager.id, manager.instance);
   useTableGlobalShortcuts(manager.instance, ref, renderer2.scrollToIndex, props.enableLocalKeyboardShortcuts);
   useTableRef(manager.instance, ref);
@@ -39019,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) => {
@@ -39069,6 +39075,7 @@ const MemoedHeader = React__default.memo(function MemoedHeader2(props) {
     hasMenu,
     id: id2,
     index: index2,
+    isExpanded,
     isFiltered,
     isGroup: isGroup2,
     isPinned,
@@ -39108,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
     },
@@ -39302,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",
@@ -39464,7 +39472,7 @@ const SearchInput22 = React__default.forwardRef(function SearchInput222(props, r
       );
     }
     if (hasFind && isActive) {
-      postfix = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700 flex h-4 items-center" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React__default.createElement("span", { className: "border-r border-black/[0.25] pr-2" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      postfix = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700 flex h-4 items-center" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React__default.createElement("span", { className: "border-r border-black/[0.25] pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
         IconButton,
         {
           "aria-label": texts.searchInput.findPrevious,
@@ -45156,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,
         {
@@ -45492,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) {
@@ -45573,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;
@@ -45589,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;
@@ -45622,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) {
@@ -55267,6 +55277,13 @@ function reducer(state, action) {
         indexes: setWith(state.indexes, rowId, index2, Object)
       };
     }
+    case "forceValidate": {
+      const { newState } = payload;
+      return {
+        ...state,
+        ...newState
+      };
+    }
     default:
       return state;
   }
@@ -55426,6 +55443,46 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
       }
     });
   }
+  async function forceValidate(table) {
+    if (validator && table.getRowModel().rows.length) {
+      const newState = { ...state };
+      const returnIds = [];
+      await Promise.all(
+        table.getRowModel().rows.map(async (row, index2) => {
+          var _a, _b;
+          const rowWithChanges = { ...row.original, ...state.changes.rows[row.id] };
+          if (rowWithChanges) {
+            const cellErrors = await validator(rowWithChanges);
+            if (cellErrors) {
+              newState.changes.dirty[row.id] = true;
+              newState.changes.originals[row.id] = row.original;
+              newState.changes.moveReasons[row.id] = { ...newState.changes.moveReasons[row.id] };
+              newState.changes.rows[row.id] = { ...newState.changes.rows[row.id] };
+              newState.changes.status[row.id] = "errored";
+              newState.indexes[row.id] = index2;
+              newState.changes.errors[row.id] = {
+                cells: cellErrors,
+                row: ((_a = newState.changes.errors[row.id]) == null ? void 0 : _a.row) ?? void 0,
+                shouldShowErrorAlert: ((_b = newState.changes.errors[row.id]) == null ? void 0 : _b.shouldShowErrorAlert) ?? false
+              };
+              Object.keys(cellErrors).forEach((columnId) => {
+                newState.changes.rows[row.id][columnId] = rowWithChanges[columnId];
+              });
+              returnIds.push(row.id);
+            }
+          }
+        })
+      );
+      dispatch({
+        type: "forceValidate",
+        payload: {
+          newState
+        }
+      });
+      return returnIds;
+    }
+    return [];
+  }
   function getErrors() {
     return Object.keys(state.changes.errors);
   }
@@ -55554,6 +55611,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     hasTemporaryRowErrors,
     getRowStatus,
     setRowStatus,
+    forceValidate,
     // cells
     setCellValue,
     getCellValue,
@@ -56307,14 +56365,7 @@ function useTable3(props, ref) {
     ]) : props.rowActions
   };
   const meta = { editing };
-  const options = {
-    virtualiserPaddingEndOffset: 0
-  };
-  if (props.enableEditing) {
-    const validationErrorLabelHeight = 17;
-    options.virtualiserPaddingEndOffset = editing.getErrors().length * validationErrorLabelHeight;
-  }
-  const table = useTable$1(extendedProps, ref, RENDERERS, meta, options);
+  const table = useTable$1(extendedProps, ref, RENDERERS, meta);
   const toggleEditing = (enabled) => table.meta.editing.toggleEditing(enabled ?? ((editing2) => !editing2), table.instance, table.renderer.scrollToIndex);
   React__default.useEffect(() => {
     if (props.defaultToggleEditing) {
@@ -56337,6 +56388,14 @@ function useTable3(props, ref) {
       }
     }
   }, [table.ref.current, table.meta.editing.isEnabled]);
+  React__default.useEffect(() => {
+    if (table.ref.current) {
+      const instance = table.ref.current.instance;
+      if (table.meta.editing.isEnabled) {
+        instance.editing.forceValidate = async () => table.meta.editing.forceValidate(table.instance);
+      }
+    }
+  }, [table.meta.editing.forceValidate]);
   return table;
 }
 function Alert(props) {