@economic/taco 2.64.1-table-flickering.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);
@@ -38446,6 +38458,21 @@ function Cell$2(props) {
   }
   return /* @__PURE__ */ React.createElement(CellRenderer, { ...cellProps });
 }
+const useResizeObserver$1 = (ref, enabled = true) => {
+  const [size2, setSize] = React.useState();
+  React.useEffect(() => {
+    if (!ref.current || !enabled) {
+      return () => void 0;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      setSize({ height: entry.contentRect.height, width: entry.contentRect.width });
+    });
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return size2;
+};
 const DisplayRow = React.memo(function DisplayRow2(props) {
   var _a, _b, _c;
   const { children, cellRenderer: CellRenderer, index: index2, measureRow, row, table, ...otherAttributes } = props;
@@ -38540,12 +38567,13 @@ const DisplayRow = React.memo(function DisplayRow2(props) {
   }
   const ref = React.useRef(null);
   const expansionRef = React.useRef(null);
+  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);
-  }, [expansionRef.current]);
+  }, [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"
@@ -45161,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,
     {
@@ -45183,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())})` : "")
         );
       })
     )
@@ -45368,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,
@@ -45378,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
@@ -45407,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]);
@@ -45452,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;
         }
@@ -45482,7 +45510,7 @@ function ManageFiltersPopover(props) {
     Filter,
     {
       key: `filter_${index2}`,
-      allColumns,
+      allHeaders,
       filter: filter2,
       position: index2,
       onChange: handleChangeFilter,
@@ -53922,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) {
@@ -55274,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();
@@ -55304,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) ?? {};
     }
@@ -55786,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));
         }
       }
     },
@@ -55799,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]
@@ -56095,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;
@@ -88413,16 +88438,19 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
   const _lastUsedSearch = React.useRef();
   async function loadPage(pageIndex, sorting, filters, hiddenColumns, search) {
     const hasDataChanged = JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) || JSON.stringify(hiddenColumns) !== JSON.stringify(_lastUsedHiddenColumns.current) || search !== _lastUsedSearch.current;
-    const isAlreadyLoadedOrLoading = _pendingPageRequests.current[pageIndex] || data.cache[pageIndex] && data.cache[pageIndex][0];
-    if (!hasDataChanged && isAlreadyLoadedOrLoading) {
-      return;
-    }
     if (hasDataChanged) {
       _lastUsedSorting.current = sorting;
       _lastUsedFilters.current = filters;
       _lastUsedSearch.current = search;
       _lastUsedHiddenColumns.current = hiddenColumns;
       _pendingPageRequests.current = {};
+    } else {
+      if (_pendingPageRequests.current[pageIndex]) {
+        return;
+      }
+      if (data.cache[pageIndex] && data.cache[pageIndex][0]) {
+        return;
+      }
     }
     const dataKey = getDataKey(sorting, filters, hiddenColumns, search);
     _pendingPageRequests.current[pageIndex] = dataKey;
@@ -88468,7 +88496,6 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
         delete _pendingPageRequests.current[pageIndex];
       });
     } catch {
-      delete _pendingPageRequests.current[pageIndex];
     }
   }
   const loadAll = async (sorting, filters, hiddenColumns, search) => {
@@ -88578,14 +88605,12 @@ function getCurrentPage(currentPages) {
   return currentPages[middle];
 }
 function getDirection(pageIndex, currentPages) {
-  if (!currentPages.length) {
-    return void 0;
-  }
-  if (pageIndex === currentPages[currentPages.length - 1] + 1) {
-    return "forward";
-  }
-  if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
-    return "backward";
+  if (currentPages.length) {
+    if (pageIndex === currentPages[currentPages.length - 1] + 1) {
+      return "forward";
+    } else if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
+      return "backward";
+    }
   }
   return void 0;
 }