@economic/taco 2.64.1-table-flickering.0 → 2.65.0-alpha.0

package/dist/taco.css

@@ -1623,6 +1623,10 @@ table[data-taco^='table'] tbody tr[data-row-create] td {
 table[data-taco^='table'] tbody tr[data-row-create] td button {
         @apply -mt-[3px];
     }
+
+table[data-taco='table3'] td [data-taco='combobox'] {
+    display: inline;
+}
 [data-taco='card-content'] > [data-taco='chart-wrapper']:not(:has([data-taco='chart-donut'], [data-taco='chart-pie'])) {
     @apply w-full;
 }

package/dist/taco.d.ts

@@ -3064,7 +3064,7 @@ export declare type Table3Ref = TableRef & {
         editing?: {
             toggleEditing: (enabled: boolean | undefined) => void;
             createRow?: (row: unknown) => Promise<void>;
-            save: (rowId: string) => Promise<boolean>;
+            save: (rowId?: string) => Promise<boolean>;
             removeRowChanges: (rowId: string) => Promise<void>;
         };
     };
@@ -3295,6 +3295,7 @@ export declare type TableCommonProps<TType = unknown> = TableFeatureProps<TType>
     toolbarRight?: JSX.Element;
     toolbarPanel?: JSX.Element;
     onEvent?: TableEventHandler;
+    onRowActive?: TableRowActiveHandler<TType>;
     onRowClick?: TableRowClickHandler<TType>;
     onRowDrag?: TableRowDragHandler<TType>;
     onRowDrop?: TableRowDropHandler<TType>;
@@ -3418,6 +3419,8 @@ export declare type TableRowActionRenderer<TType = unknown> = (row: TType, helpe
     };
 }) => JSX.Element | null;
 
+export declare type TableRowActiveHandler<TType = unknown> = (row: TType | undefined) => void;
+
 export declare type TableRowClickHandler<TType = unknown> = (row: TType) => void;
 
 export declare type TableRowDragHandler<TType = unknown> = (rows: TType[], showPlaceholder: (text: string) => void, setDataTransfer: (data: string) => void) => void;

package/dist/taco.js

@@ -36605,6 +36605,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__default.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;
@@ -36705,6 +36716,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);
@@ -38428,6 +38440,21 @@ function Cell$2(props) {
   }
   return /* @__PURE__ */ React__default.createElement(CellRenderer, { ...cellProps });
 }
+const useResizeObserver$1 = (ref, enabled = true) => {
+  const [size2, setSize] = React__default.useState();
+  React__default.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__default.memo(function DisplayRow2(props) {
   var _a, _b, _c;
   const { children, cellRenderer: CellRenderer, index: index2, measureRow, row, table, ...otherAttributes } = props;
@@ -38522,12 +38549,13 @@ const DisplayRow = React__default.memo(function DisplayRow2(props) {
   }
   const ref = React__default.useRef(null);
   const expansionRef = React__default.useRef(null);
+  const expandedRowSize = useResizeObserver$1(expansionRef, !!expandedRow);
   React__default.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"
@@ -45143,11 +45171,11 @@ function guessComparatorsBasedOnControl(column) {
 }
 const FilterContext = React__default.createContext([]);
 const FilterColumn = React__default.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__default.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__default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__default.createElement(
     Field,
     {
@@ -45165,23 +45193,23 @@ const FilterColumn = React__default.forwardRef((props, ref) => {
         onChange: handleChange,
         value
       },
-      allColumns.map((column) => {
-        var _a, _b, _c;
+      allHeaders.map((header) => {
+        var _a, _b;
         return /* @__PURE__ */ React__default.createElement(
           Select22.Option,
           {
-            key: column.id,
-            value: column.id,
-            postfix: !column.getIsVisible() || column.getIsGrouped() ? /* @__PURE__ */ React__default.createElement(
+            key: header.column.id,
+            value: header.column.id,
+            postfix: !header.column.getIsVisible() || header.column.getIsGrouped() ? /* @__PURE__ */ React__default.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__default.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__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())})` : "")
         );
       })
     )
@@ -45350,9 +45378,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__default.useRef(null);
   const {
     id: id2,
@@ -45360,13 +45388,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
@@ -45389,13 +45417,13 @@ 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, { 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);
+  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);
 }
 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__default.useState(columnFilters.length ? columnFilters : [placeholderFilter]);
@@ -45434,7 +45462,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;
         }
@@ -45464,7 +45492,7 @@ function ManageFiltersPopover(props) {
     Filter,
     {
       key: `filter_${index2}`,
-      allColumns,
+      allHeaders,
       filter: filter2,
       position: index2,
       onChange: handleChangeFilter,
@@ -53904,14 +53932,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__default.useEffect(() => {
     function showUnsavedChangesWarning(event) {
@@ -55256,7 +55276,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();
@@ -55286,7 +55306,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) ?? {};
     }
@@ -55768,7 +55788,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));
         }
       }
     },
@@ -55781,7 +55801,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]
@@ -56077,6 +56097,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__default.useCallback(
     (event) => {
       var _a;
@@ -88395,16 +88420,19 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
   const _lastUsedSearch = React__default.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;
@@ -88450,7 +88478,6 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
         delete _pendingPageRequests.current[pageIndex];
       });
     } catch {
-      delete _pendingPageRequests.current[pageIndex];
     }
   }
   const loadAll = async (sorting, filters, hiddenColumns, search) => {
@@ -88560,14 +88587,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;
 }