@economic/taco 2.64.1-test-1.0 → 2.65.0-alpha.0

package/dist/taco.cjs

@@ -36623,6 +36623,17 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
     handleDrop: isEnabled ? onRowDrop : void 0
   };
 }
+function useTableRowActiveListener$1(table, onRowActive) {
+  var _a;
+  const meta = table.options.meta;
+  const rows = table.getRowModel().flatRows;
+  const currentRow = meta.rowActive.rowActiveIndex !== void 0 ? (_a = rows[meta.rowActive.rowActiveIndex]) == null ? void 0 : _a.original : void 0;
+  React.useEffect(() => {
+    if (meta.rowActive.isEnabled && onRowActive) {
+      onRowActive(currentRow);
+    }
+  }, [meta.rowActive.isEnabled, currentRow, onRowActive]);
+}
 const DEFAULT_EMPTY_ARRAY = [];
 function useTableManager(props, ref, meta, internalColumns) {
   var _a;
@@ -36723,6 +36734,7 @@ function useTableManager(props, ref, meta, internalColumns) {
   useTableDataListener(instance, length);
   useTableFilterListener(instance, props.onChangeFilter);
   useTableFontSizeListener(instance);
+  useTableRowActiveListener$1(instance, props.onRowActive);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
   useTableSearchListener(instance);
@@ -37836,15 +37848,6 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
       virtualiser.measure();
     }
   }, [expandedState]);
-  React.useEffect(() => {
-    const totalSize2 = virtualiser.getTotalSize();
-    console.log("before measuring totalSize", totalSize2);
-    virtualiser.measure();
-    setTimeout(() => {
-      const totalSize3 = virtualiser.getTotalSize();
-      console.log("after measuring totalSize", totalSize3);
-    }, 1e3);
-  }, [tableMeta.fontSize.size, tableMeta.rowHeight.height, JSON.stringify(table.getState().sorting), rows.length]);
   const totalSize = virtualiser.getTotalSize();
   const virtualItems = virtualiser.getVirtualItems();
   const scrollToIndex = React.useCallback(
@@ -38564,14 +38567,13 @@ const DisplayRow = React.memo(function DisplayRow2(props) {
   }
   const ref = React.useRef(null);
   const expansionRef = React.useRef(null);
-  const rowSize = useResizeObserver$1(ref, true);
   const expandedRowSize = useResizeObserver$1(expansionRef, !!expandedRow);
   React.useEffect(() => {
     var _a2, _b2;
     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);
-  }, [rowSize, expandedRowSize, measureRow]);
+  }, [expansionRef.current, expandedRowSize == null ? void 0 : expandedRowSize.height]);
   const className = clsx("group/row", otherAttributes.className, {
     "hover:cursor-grab": tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== "function",
     "hover:cursor-pointer": typeof attributes.onClick === "function"
@@ -45187,11 +45189,11 @@ function guessComparatorsBasedOnControl(column) {
 }
 const FilterContext = React.createContext([]);
 const FilterColumn = React.forwardRef((props, ref) => {
-  const { allColumns, onChange: handleChange, value = null, ...attributes } = props;
+  const { allHeaders, onChange: handleChange, value = null, ...attributes } = props;
   const { texts } = useLocalization();
   const filters = React.useContext(FilterContext);
-  const selectedColumn = allColumns.find((column) => column.id === value);
-  const warning2 = selectedColumn && !selectedColumn.getIsVisible();
+  const selectedColumn = allHeaders.find((header) => header.id === value);
+  const warning2 = selectedColumn && !selectedColumn.column.getIsVisible();
   return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement(
     Field,
     {
@@ -45209,23 +45211,23 @@ const FilterColumn = React.forwardRef((props, ref) => {
         onChange: handleChange,
         value
       },
-      allColumns.map((column) => {
-        var _a, _b, _c;
+      allHeaders.map((header) => {
+        var _a, _b;
         return /* @__PURE__ */ React.createElement(
           Select22.Option,
           {
-            key: column.id,
-            value: column.id,
-            postfix: !column.getIsVisible() || column.getIsGrouped() ? /* @__PURE__ */ React.createElement(
+            key: header.column.id,
+            value: header.column.id,
+            postfix: !header.column.getIsVisible() || header.column.getIsGrouped() ? /* @__PURE__ */ React.createElement(
               Tooltip$3,
               {
-                title: column.getIsGrouped() ? texts.table.filters.hiddenGroupedColumn : texts.table.filters.hiddenColumn
+                title: header.column.getIsGrouped() ? texts.table.filters.hiddenGroupedColumn : texts.table.filters.hiddenColumn
               },
               /* @__PURE__ */ React.createElement(Icon$1, { name: "eye-off", className: "text-grey-500 !h-5 !w-5" })
             ) : void 0,
-            disabled: column.id !== value && (!column.getCanFilter() || !!filters.find((f2) => f2.id === column.id))
+            disabled: header.column.id !== value && (!header.column.getCanFilter() || !!filters.find((f2) => f2.id === header.column.id))
           },
-          ((_a = column.columnDef.meta) == null ? void 0 : _a.header) + (column.parent ? ` (${(_c = (_b = column.parent) == null ? void 0 : _b.columnDef.meta) == null ? void 0 : _c.header})` : "")
+          /* @__PURE__ */ React.createElement(React.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())})` : "")
         );
       })
     )
@@ -45394,9 +45396,9 @@ function Control(props) {
   );
 }
 function Filter(props) {
-  const { allColumns, filter: filter2, onChange: handleChange, onRemove, position } = props;
+  const { allHeaders, filter: filter2, onChange: handleChange, onRemove, position } = props;
   const { texts } = useLocalization();
-  const column = allColumns.find((c2) => c2.id === filter2.id);
+  const column = allHeaders.find((header) => header.column.id === filter2.id);
   const ref = React.useRef(null);
   const {
     id: id2,
@@ -45404,13 +45406,13 @@ function Filter(props) {
   } = filter2;
   const handleChangeColumn = (columnId) => {
     var _a, _b, _c;
-    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)) {
+    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)) {
       handleChange(position, { id: columnId, value: filter2.value });
       return;
     }
-    const validComparators = guessComparatorsBasedOnControl(nextColumn);
+    const validComparators = guessComparatorsBasedOnControl(nextColumn == null ? void 0 : nextColumn.column);
     const value2 = {
       comparator: validComparators[0],
       value: void 0
@@ -45433,13 +45435,13 @@ 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, { allColumns, onChange: handleChangeColumn, value: id2, ref }), /* @__PURE__ */ React.createElement(FilterComparator, { column, onChange: handleChangeComparator, value: comparator }), /* @__PURE__ */ React.createElement(FilterValue, { 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" }, /* @__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) {
   const { length, table, ...popoverProps } = props;
   const { locale: locale2, texts } = useLocalization();
-  const allColumns = table.getAllLeafColumns().filter((column) => !isInternalColumn(column.id)).sort(sortByHeader);
+  const allHeaders = table.getLeafHeaders().filter((column) => !isInternalColumn(column.id)).sort((headerA, headerB) => sortByHeader(headerA.column, headerB.column));
   const columnFilters = table.getState().columnFilters;
   const tableMeta = table.options.meta;
   const [filters, setFilters] = React.useState(columnFilters.length ? columnFilters : [placeholderFilter]);
@@ -45478,7 +45480,7 @@ function ManageFiltersPopover(props) {
         if (f2.id === null || f2.id === "") {
           return false;
         }
-        const controlRenderer = (_b = (_a = allColumns.find((c2) => c2.id === f2.id)) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.control;
+        const controlRenderer = (_b = (_a = allHeaders.find((header) => header.column.id === f2.id)) == null ? void 0 : _a.column.columnDef.meta) == null ? void 0 : _b.control;
         if (f2.value.comparator === TableFilterComparator.IsEmpty || f2.value.comparator === TableFilterComparator.IsNotEmpty || controlRenderer === "switch") {
           return true;
         }
@@ -45508,7 +45510,7 @@ function ManageFiltersPopover(props) {
     Filter,
     {
       key: `filter_${index2}`,
-      allColumns,
+      allHeaders,
       filter: filter2,
       position: index2,
       onChange: handleChangeFilter,
@@ -53948,14 +53950,6 @@ function isTableScrolled(ref) {
 function useTableEditingListener(table, tableRef, scrollToIndex) {
   const tableMeta = table.options.meta;
   const localization = useLocalization();
-  useLazyEffect(() => {
-    return () => {
-      var _a;
-      if (tableMeta.editing.isEditing && tableMeta.rowActive.rowActiveIndex !== void 0) {
-        tableMeta.editing.saveChanges(table, (_a = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex]) == null ? void 0 : _a.id);
-      }
-    };
-  }, [tableMeta.rowActive.rowActiveIndex, tableMeta.editing.isEditing]);
   const hasChanges = tableMeta.editing.hasChanges();
   React.useEffect(() => {
     function showUnsavedChangesWarning(event) {
@@ -55300,7 +55294,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     var _a, _b, _c;
     return (_c = (_b = (_a = state.changes.errors) == null ? void 0 : _a[cell.row.id]) == null ? void 0 : _b.cells) == null ? void 0 : _c[cell.column.id];
   }
-  async function onCellChanged(cell, rowIndex, nextValue, shouldRunUpdaters = true) {
+  async function onCellChanged(cell, rowIndex, nextValue, shouldRunUpdaters = true, shouldRunValidation = true) {
     var _a;
     const tableMeta = cell.getContext().table.options.meta;
     const state2 = tableMeta.editing.getState();
@@ -55330,7 +55324,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     const nextMoveReasons = { ...state2.changes.moveReasons[cell.row.id] };
     const nextCellErrors = { ...(_a = state2.changes.errors[cell.row.id]) == null ? void 0 : _a.cells };
     let validationErrors = {};
-    if (validator && Object.keys(nextChanges).length && original) {
+    if (validator && Object.keys(nextChanges).length && original && shouldRunValidation) {
       const nextRowValue = { ...original, ...changes, ...updatesForOtherCells };
       validationErrors = await validator(nextRowValue) ?? {};
     }
@@ -55812,7 +55806,7 @@ function EditingControlCell(props) {
       if (hasChanged) {
         tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
         if (hasNonTextControl) {
-          requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
+          requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue, true, false));
         }
       }
     },
@@ -55825,7 +55819,7 @@ function EditingControlCell(props) {
       }
       requestAnimationFrame(() => {
         tableMeta.editing.toggleDetailedMode(false);
-        tableMeta.editing.onCellChanged(cell, rowIndex, void 0, !hasNonTextControl);
+        tableMeta.editing.onCellChanged(cell, rowIndex, void 0, !hasNonTextControl, true);
       });
     },
     [hasNonTextControl, cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]
@@ -56121,6 +56115,11 @@ function Row(props) {
       }
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
+  useLazyEffect(() => {
+    if (tableMeta.editing.isEditing && !isActiveRow) {
+      tableMeta.editing.saveChanges(table, row.id);
+    }
+  }, [isActiveRow]);
   const handleFocus = React.useCallback(
     (event) => {
       var _a;