@economic/taco 2.68.0 → 2.69.1

package/dist/taco.d.ts

@@ -3046,7 +3046,9 @@ export declare interface Table3CommonProps<TType = unknown> extends Table3Featur
 
 export declare type Table3EditingChangeHandler<TType = unknown> = (accessor: string, value: unknown, row: TType, prevRow: TType) => Promise<Partial<TType>> | undefined;
 
-export declare type Table3EditingCreateHandler<TType = unknown> = () => Promise<Partial<TType>>;
+export declare type Table3EditingCreateHandler<TType = unknown> = ({ activeRow, }?: {
+    activeRow: TType | undefined;
+}) => Promise<Partial<TType>>;
 
 declare type Table3EditingDiscardHandler = () => void;
 

package/dist/taco.js

@@ -11391,22 +11391,22 @@ const getButtonClasses$1 = () => {
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case "primary":
-      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
+      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
     case "danger":
-      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
+      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
     case "ghost":
-      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
+      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
     case "discrete": {
       if (icon) {
-        return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;
+        return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] focus-visible:bg-[#000]/[0.08] aria-disabled:text-black/30`;
       }
-      return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;
+      return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50`;
     }
     case "transparent": {
-      return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;
+      return `bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;
     }
     default:
-      return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;
+      return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 focus-visible:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -18244,7 +18244,7 @@ const ScrollableList = React.forwardRef(function ScrollableList2(props, ref) {
     role: options.length <= 0 || loading ? "presentation" : "listbox",
     tabIndex: otherProps.tabIndex || 0
   };
-  return /* @__PURE__ */ React.createElement("ul", { ...list, "data-taco": "scrollable-list" }, loading ? /* @__PURE__ */ React.createElement("li", { className: "yt-list__empty" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(Spinner, { delay: 0 })), /* @__PURE__ */ React.createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({ children, icon, ...optionProps }) => /* @__PURE__ */ React.createElement("li", { ...optionProps }, icon, /* @__PURE__ */ React.createElement("span", { className: "flex-grow truncate text-left" }, children), multiselect && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("ul", { ...list, "data-taco": "scrollable-list" }, loading ? /* @__PURE__ */ React.createElement("li", { className: "yt-list__empty" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(Spinner, { delay: 0 })), /* @__PURE__ */ React.createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({ children, icon, ...optionProps }) => /* @__PURE__ */ React.createElement("li", { ...optionProps }, icon, /* @__PURE__ */ React.createElement("span", { "data-taco": "list-option", className: "flex-grow truncate text-left" }, children), multiselect && /* @__PURE__ */ React.createElement(
     Checkbox$2,
     {
       "aria-hidden": true,
@@ -38481,7 +38481,16 @@ const useResizeObserver$1 = (ref, enabled = true) => {
 const DisplayRow = React__default.memo(
   React__default.forwardRef(function DisplayRow2(props, externalRef) {
     var _a, _b, _c;
-    const { children, cellRenderer: CellRenderer, index: index2, measureRow, row, table, ...otherAttributes } = props;
+    const {
+      children,
+      cellRenderer: CellRenderer,
+      index: index2,
+      measureRow,
+      row,
+      table,
+      remeasureDependencies = [],
+      ...otherAttributes
+    } = props;
     const tableMeta = table.options.meta;
     const attributes = {
       ...otherAttributes,
@@ -38577,7 +38586,7 @@ const DisplayRow = React__default.memo(
       const rowHeight = ((_a2 = ref.current) == null ? void 0 : _a2.getBoundingClientRect().height) ?? 0;
       const expansionHeight = ((_b2 = expansionRef.current) == null ? void 0 : _b2.getBoundingClientRect().height) ?? 0;
       measureRow(rowHeight + expansionHeight);
-    }, [expansionRef.current, expandedRowSize == null ? void 0 : expandedRowSize.height]);
+    }, [expansionRef.current, expandedRowSize == null ? void 0 : expandedRowSize.height, ...remeasureDependencies]);
     const className = clsx("group/row", otherAttributes.className, {
       "hover:cursor-grab": tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== "function",
       "hover:cursor-pointer": typeof attributes.onClick === "function"
@@ -44223,7 +44232,7 @@ const Option = React__default.forwardRef(function Select2Option(props, ref) {
       value: props.value
     }
   ) : void 0;
-  return /* @__PURE__ */ React__default.createElement(Option$1, { ...otherProps, className, onClick: handleClick, onKeyDown: handleKeyDown, ref }, hasValue2 ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: "tick", className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible" }) : null, typeof children === "string" ? isTag ? /* @__PURE__ */ React__default.createElement(Tag, { className: "pointer-events-none my-1", color: color2, icon: prefix2 }, children) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, prefix2 ? typeof prefix2 === "string" ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: prefix2, className: "!h-5 !w-5" }) : prefix2 : null, /* @__PURE__ */ React__default.createElement("span", { className: "flex w-full justify-between" }, /* @__PURE__ */ React__default.createElement("span", { className: "flex flex-col" }, /* @__PURE__ */ React__default.createElement("span", null, children), description ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700 -mt-1.5 mb-1.5 text-xs", "data-taco": "description" }, description) : null), /* @__PURE__ */ React__default.createElement("span", { className: "flex flex-col self-center" }, postfix ? typeof postfix === "string" ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: postfix, className: "!h-5 !w-5" }) : postfix : null))) : /* @__PURE__ */ React__default.createElement("span", null, children), popover ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Option$1, { ...otherProps, className, onClick: handleClick, onKeyDown: handleKeyDown, ref }, hasValue2 ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: "tick", className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible" }) : null, typeof children === "string" ? isTag ? /* @__PURE__ */ React__default.createElement(Tag, { className: "pointer-events-none my-1", color: color2, icon: prefix2 }, children) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, prefix2 ? typeof prefix2 === "string" ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: prefix2, className: "!h-5 !w-5" }) : prefix2 : null, /* @__PURE__ */ React__default.createElement("span", { className: "flex w-full justify-between" }, /* @__PURE__ */ React__default.createElement("span", { className: "flex flex-col" }, /* @__PURE__ */ React__default.createElement("span", null, children), description ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700 -mt-1.5 mb-1.5 text-xs", "data-taco": "description" }, description) : null), /* @__PURE__ */ React__default.createElement("span", { className: "flex flex-col self-center" }, postfix ? typeof postfix === "string" ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: postfix, className: "!h-5 !w-5" }) : postfix : null))) : /* @__PURE__ */ React__default.createElement("span", { className: "w-full" }, children), popover ? /* @__PURE__ */ React__default.createElement(
     IconButton,
     {
       icon: "ellipsis-vertical",
@@ -45231,11 +45240,11 @@ function guessComparatorsBasedOnControl(column) {
 }
 const FilterContext = React__default.createContext([]);
 const FilterColumn = React__default.forwardRef((props, ref) => {
-  const { allHeaders, onChange: handleChange, value = null, ...attributes } = props;
+  const { allColumns, onChange: handleChange, value = null, ...attributes } = props;
   const { texts } = useLocalization();
   const filters = React__default.useContext(FilterContext);
-  const selectedColumn = allHeaders.find((header) => header.id === value);
-  const warning2 = selectedColumn && !selectedColumn.column.getIsVisible();
+  const selectedColumn = allColumns.find((column) => column.id === value);
+  const warning2 = selectedColumn && !selectedColumn.getIsVisible();
   return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__default.createElement(
     Field,
     {
@@ -45253,23 +45262,22 @@ const FilterColumn = React__default.forwardRef((props, ref) => {
         onChange: handleChange,
         value
       },
-      allHeaders.map((header) => {
+      allColumns.map((column) => {
         var _a, _b;
         return /* @__PURE__ */ React__default.createElement(
           Select22.Option,
           {
-            key: header.column.id,
-            value: header.column.id,
-            postfix: !header.column.getIsVisible() || header.column.getIsGrouped() ? /* @__PURE__ */ React__default.createElement(
-              Tooltip$3,
-              {
-                title: header.column.getIsGrouped() ? texts.table.filters.hiddenGroupedColumn : texts.table.filters.hiddenColumn
-              },
-              /* @__PURE__ */ React__default.createElement(Icon$1, { name: "eye-off", className: "text-grey-500 !h-5 !w-5" })
-            ) : void 0,
-            disabled: header.column.id !== value && (!header.column.getCanFilter() || !!filters.some((f2) => f2.id === header.column.id))
+            key: column.id,
+            value: column.id,
+            disabled: column.id !== value && (!column.getCanFilter() || !!filters.some((f2) => f2.id === column.id))
           },
-          /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, flexRender(header.column.columnDef.header, header.getContext()), header.column.parent ? ` (${flexRender((_b = (_a = header.column.parent) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.header, header.getContext())})` : "")
+          /* @__PURE__ */ React__default.createElement("span", { className: "flex w-full justify-between" }, /* @__PURE__ */ React__default.createElement("span", { className: "flex flex-col" }, flexRender(column.columnDef.header, { column }), column.parent ? flexRender((_b = (_a = column.parent) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.header, { column }) : ""), /* @__PURE__ */ React__default.createElement("span", { className: "flex flex-col self-center" }, !column.getIsVisible() || column.getIsGrouped() ? /* @__PURE__ */ React__default.createElement(
+            Tooltip$3,
+            {
+              title: column.getIsGrouped() ? texts.table.filters.hiddenGroupedColumn : texts.table.filters.hiddenColumn
+            },
+            /* @__PURE__ */ React__default.createElement(Icon$1, { name: "eye-off", className: "text-grey-500 !h-5 !w-5" })
+          ) : void 0))
         );
       })
     )
@@ -45440,9 +45448,9 @@ function Control(props) {
   );
 }
 function Filter(props) {
-  const { allHeaders, filter: filter2, onChange: handleChange, onRemove, position } = props;
+  const { allColumns, filter: filter2, onChange: handleChange, onRemove, position } = props;
   const { texts } = useLocalization();
-  const column = allHeaders.find((header) => header.column.id === filter2.id);
+  const column = allColumns.find((column2) => column2.id === filter2.id);
   const ref = React__default.useRef(null);
   const {
     id: id2,
@@ -45450,13 +45458,13 @@ function Filter(props) {
   } = filter2;
   const handleChangeColumn = (columnId) => {
     var _a, _b, _c;
-    const previousColumn = allHeaders.find((header) => header.column.id === id2);
-    const nextColumn = allHeaders.find((header) => header.column.id === columnId);
-    if (((_a = previousColumn == null ? void 0 : previousColumn.column.columnDef.meta) == null ? void 0 : _a.dataType) && ((_b = previousColumn == null ? void 0 : previousColumn.column.columnDef.meta) == null ? void 0 : _b.dataType) === ((_c = nextColumn == null ? void 0 : nextColumn.column.columnDef.meta) == null ? void 0 : _c.dataType)) {
+    const previousColumn = allColumns.find((column2) => column2.id === id2);
+    const nextColumn = allColumns.find((column2) => column2.id === columnId);
+    if (((_a = previousColumn == null ? void 0 : previousColumn.columnDef.meta) == null ? void 0 : _a.dataType) && ((_b = previousColumn == null ? void 0 : previousColumn.columnDef.meta) == null ? void 0 : _b.dataType) === ((_c = nextColumn == null ? void 0 : nextColumn.columnDef.meta) == null ? void 0 : _c.dataType)) {
       handleChange(position, { id: columnId, value: filter2.value });
       return;
     }
-    const validComparators = guessComparatorsBasedOnControl(nextColumn == null ? void 0 : nextColumn.column);
+    const validComparators = guessComparatorsBasedOnControl(nextColumn);
     const value2 = {
       comparator: validComparators[0],
       value: void 0
@@ -45479,13 +45487,13 @@ function Filter(props) {
       ref.current.focus();
     }
   }, [id2]);
-  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);
+  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, { allColumns, onChange: handleChangeColumn, value: id2, ref }), /* @__PURE__ */ React__default.createElement(FilterComparator, { column, onChange: handleChangeComparator, value: comparator }), /* @__PURE__ */ React__default.createElement(FilterValue, { 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) {
   const { length, table, ...popoverProps } = props;
   const { locale: locale2, texts } = useLocalization();
-  const allHeaders = table.getLeafHeaders().filter((column) => !isInternalColumn(column.id)).sort((headerA, headerB) => sortByHeader(headerA.column, headerB.column));
+  const allColumns = table.getAllLeafColumns().filter((column) => !isInternalColumn(column.id)).sort(sortByHeader);
   const columnFilters = table.getState().columnFilters;
   const tableMeta = table.options.meta;
   const [filters, setFilters] = React__default.useState(columnFilters.length ? columnFilters : [placeholderFilter]);
@@ -45524,7 +45532,7 @@ function ManageFiltersPopover(props) {
         if (f2.id === null || f2.id === "") {
           return false;
         }
-        const controlRenderer = (_b = (_a = allHeaders.find((header) => header.column.id === f2.id)) == null ? void 0 : _a.column.columnDef.meta) == null ? void 0 : _b.control;
+        const controlRenderer = (_b = (_a = allColumns.find((column) => column.id === f2.id)) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.control;
         if (f2.value.comparator === TableFilterComparator.IsEmpty || f2.value.comparator === TableFilterComparator.IsNotEmpty || controlRenderer === "switch") {
           return true;
         }
@@ -45554,7 +45562,7 @@ function ManageFiltersPopover(props) {
     Filter,
     {
       key: `filter_${index2}`,
-      allHeaders,
+      allColumns,
       filter: filter2,
       position: index2,
       onChange: handleChangeFilter,
@@ -55635,6 +55643,7 @@ function useTableEditing(isEnabled = false, defaultToggleEditing = false, handle
     pendingChangesFns.saveChanges(table);
   }
   async function createRow2(table, row) {
+    var _a, _b;
     if (!handleCreate) {
       return;
     }
@@ -55645,7 +55654,10 @@ function useTableEditing(isEnabled = false, defaultToggleEditing = false, handle
         return;
       }
     }
-    const changeset = row ?? await handleCreate();
+    const currentRow = ((_a = table.options.meta) == null ? void 0 : _a.rowActive.rowActiveIndex) !== void 0 ? table.getRowModel().flatRows[(_b = table.options.meta) == null ? void 0 : _b.rowActive.rowActiveIndex] : void 0;
+    const changeset = row ?? await handleCreate({
+      activeRow: currentRow ? { ...currentRow.original, ...tableMeta.editing.getRowValue(currentRow.id) } : void 0
+    });
     try {
       if (changeset) {
         const temporaryRows = tableMeta.editing.temporaryRows;
@@ -55654,10 +55666,10 @@ function useTableEditing(isEnabled = false, defaultToggleEditing = false, handle
         requestAnimationFrame(() => {
           const newRowId = pendingChangesFns.insertTemporaryRow(changeset, nextRowIndex);
           table.setRowPinning((currentState) => {
-            var _a;
+            var _a2;
             return {
               ...currentState,
-              bottom: (_a = currentState.bottom ?? []) == null ? void 0 : _a.concat(newRowId)
+              bottom: (_a2 = currentState.bottom ?? []) == null ? void 0 : _a2.concat(newRowId)
             };
           });
           toggleDetailedMode(false);
@@ -56205,16 +56217,11 @@ function DiscardChangesConfirmationDialog(props) {
   ));
 }
 function Row(props) {
-  const { row, index: index2, table, measureRow } = props;
+  const { row, index: index2, table } = props;
   const focusManager = useAugmentedFocusManager();
   const tableMeta = table.options.meta;
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === index2;
-  const rowRef = React__default.useRef(null);
   const hasErrors = tableMeta.editing.hasRowErrors(row.id);
-  React__default.useLayoutEffect(() => {
-    if (!measureRow || !rowRef.current) return;
-    measureRow(rowRef.current.getBoundingClientRect().height);
-  }, [hasErrors, measureRow, row.id]);
   React__default.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === void 0) {
       const element = focusManager.focusFirst();
@@ -56271,7 +56278,7 @@ function Row(props) {
     onFocus: handleFocus,
     onKeyDown: handleKeyDown
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DisplayRow, { ...props, ...attributes, ref: rowRef }, rowStatus === "saving" || rowStatus === "saved" ? /* @__PURE__ */ React__default.createElement(SaveStatus, { rowId: row.id, table }) : null), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DisplayRow, { ...props, ...attributes, remeasureDependencies: [hasErrors] }, rowStatus === "saving" || rowStatus === "saved" ? /* @__PURE__ */ React__default.createElement(SaveStatus, { rowId: row.id, table }) : null), /* @__PURE__ */ React__default.createElement(
     DiscardChangesConfirmationDialog,
     {
       open: showDiscardDialog,