@economic/taco 2.55.1-footer.0 → 2.56.0

package/dist/taco.d.ts

@@ -3105,6 +3105,7 @@ export declare type TableCommonProps<TType = unknown> = TableFeatureProps<TType>
     defaultRowGroupColumnId?: keyof TType;
     defaultSettings?: TableSettings;
     emptyState?: TableEmptyStateRenderer;
+    enableLocalKeyboardShortcuts?: boolean;
     preset?: TablePreset;
     rowActions?: TableRowActionRenderer<TType>[];
     rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];

package/dist/taco.js

@@ -31994,10 +31994,9 @@ function useTableDataLoader(fetchPage, fetchAll, options = { pageSize: DEFAULT_P
   const _lastUsedSearch = React__default.useRef();
   const _lastUsedHiddenColumns = React__default.useRef([]);
   const _lastUsedPageIndex = React__default.useRef();
-  const _forceReset = React__default.useRef(false);
   const loadPage = async (pageIndex, sorting, filters, hiddenColumns) => {
     let reset = false;
-    if (_forceReset.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
+    if (JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
       _pendingPageRequests.current = {};
       reset = true;
     }
@@ -32006,7 +32005,6 @@ function useTableDataLoader(fetchPage, fetchAll, options = { pageSize: DEFAULT_P
     } else {
       _pendingPageRequests.current[pageIndex] = true;
     }
-    _forceReset.current = false;
     _lastUsedPageIndex.current = pageIndex;
     _lastUsedSorting.current = sorting;
     _lastUsedFilters.current = filters;
@@ -32050,12 +32048,41 @@ function useTableDataLoader(fetchPage, fetchAll, options = { pageSize: DEFAULT_P
     } catch {
     }
   };
+  const reloadCurrentPages = async (pageIndex, sorting, filters, hiddenColumns) => {
+    _lastUsedPageIndex.current;
+    const pageIndexes = pageIndex === 0 ? [0, 1] : [pageIndex - 1, pageIndex];
+    if (length.current !== void 0) {
+      const pageCount = Math.ceil(length.current / pageSize);
+      if (pageIndex + 1 < pageCount) {
+        pageIndexes.push(pageIndex + 1);
+      }
+    }
+    _pendingPageRequests.current = pageIndexes.reduce((accum, index2) => ({ ...accum, [index2]: true }), {});
+    _lastUsedPageIndex.current = pageIndex;
+    _lastUsedSorting.current = sorting;
+    _lastUsedFilters.current = filters;
+    _lastUsedHiddenColumns.current = hiddenColumns;
+    try {
+      const responses = await Promise.all(
+        pageIndexes.map((pageIndex2) => fetchPage(pageIndex2, pageSize, sorting, filters, hiddenColumns))
+      );
+      length.current = responses[0].length;
+      const nextData = Array(length.current).fill(void 0);
+      responses.forEach((response, index2) => {
+        const startIndex = pageIndexes[index2] * pageSize;
+        nextData.splice(startIndex, pageSize, ...response.data);
+      });
+      setData(nextData);
+    } catch {
+    } finally {
+      _pendingPageRequests.current = {};
+    }
+  };
   const invalidate = async () => {
-    _forceReset.current = true;
     if (_lastUsedSearch.current) {
       return loadAll(_lastUsedSorting.current, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
     } else {
-      return loadPage(
+      return reloadCurrentPages(
         _lastUsedPageIndex.current ?? 0,
         _lastUsedSorting.current,
         _lastUsedFilters.current,
@@ -32067,7 +32094,12 @@ function useTableDataLoader(fetchPage, fetchAll, options = { pageSize: DEFAULT_P
     if (_lastUsedSearch.current) {
       return loadAll(sorting, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
     } else {
-      return loadPage(_lastUsedPageIndex.current ?? 0, sorting, _lastUsedFilters.current, _lastUsedHiddenColumns.current);
+      return reloadCurrentPages(
+        _lastUsedPageIndex.current ?? 0,
+        sorting,
+        _lastUsedFilters.current,
+        _lastUsedHiddenColumns.current
+      );
     }
   };
   const handleFilter = async (filters) => {
@@ -32361,9 +32393,10 @@ function useTableSettingsListener(table, onChangeSettings) {
     state.sorting
   ]);
 }
-function useTableShortcutsListener(table, shortcuts) {
+function useTableShortcutsListener(table, tableRef, shortcuts, localShortcuts = false) {
   const meta = table.options.meta;
   const rows = table.getRowModel().rows;
+  const listenerTarget = localShortcuts ? tableRef.current : document;
   React__default.useEffect(() => {
     const shortcutKeys = Object.keys(shortcuts ?? {});
     const globalHandlers = [];
@@ -32396,18 +32429,38 @@ function useTableShortcutsListener(table, shortcuts) {
       });
     }
     globalHandlers.forEach((handler) => {
-      document.addEventListener("keydown", handler);
+      listenerTarget == null ? void 0 : listenerTarget.addEventListener("keydown", handler);
     });
     return () => {
       globalHandlers.forEach((handler) => {
-        document.removeEventListener("keydown", handler);
+        listenerTarget == null ? void 0 : listenerTarget.removeEventListener("keydown", handler);
       });
     };
   }, [shortcuts, meta.rowActive.rowActiveIndex, rows.length]);
 }
+function useLazyDebouncedEffect(effect, deps, ms = 200) {
+  const readyRef = React__default.useRef(false);
+  const timeoutRef = React__default.useRef();
+  React__default.useEffect(() => {
+    if (readyRef.current) {
+      timeoutRef.current = setTimeout(effect, ms);
+    } else {
+      readyRef.current = true;
+    }
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, deps);
+  React__default.useEffect(
+    () => () => {
+      readyRef.current = false;
+    },
+    []
+  );
+}
 function useTableSortingListener$1(table, onSort) {
   const sorting = table.getState().sorting;
-  useLazyEffect(() => {
+  useLazyDebouncedEffect(() => {
     if (table.options.enableSorting && typeof onSort === "function") {
       onSort(sorting);
       if (table.options.enableRowSelection) {
@@ -32425,6 +32478,9 @@ function useTableServerLoadingListener(table, loadPage) {
       const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
       const search = meta.search.enableGlobalFilter ? table.getState().globalFilter : void 0;
       loadPage(0, sorting, columnFilters, hiddenColumns, search);
+      if (meta.server._experimentalDataLoader2) {
+        loadPage(1, sorting, columnFilters, hiddenColumns, search);
+      }
     }
   }, []);
 }
@@ -32444,7 +32500,7 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
   };
 }
 const DEFAULT_EMPTY_ARRAY = [];
-function useTableManager(props, meta, internalColumns) {
+function useTableManager(props, ref, meta, internalColumns) {
   var _a;
   const localization = useLocalization();
   const safeId = props.id.replace(".", "_");
@@ -32543,7 +32599,7 @@ function useTableManager(props, meta, internalColumns) {
   useTableSearchListener(instance);
   useTableServerLoadingListener(instance, server.loadPage);
   useTableSettingsListener(instance, setSettings);
-  useTableShortcutsListener(instance, props.shortcuts);
+  useTableShortcutsListener(instance, ref, props.shortcuts, props.enableLocalKeyboardShortcuts);
   useTableSortingListener$1(instance, props.onChangeSort);
   return {
     id: safeId,
@@ -32733,9 +32789,10 @@ function getCellWidthPadding(fontSize) {
       return "16px";
   }
 }
-function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
+function useTableGlobalShortcuts(table, tableRef, scrollToIndex, localShortcuts = false) {
   const tableMeta = table.options.meta;
   const rows = table.getRowModel().rows;
+  const listenerTarget = localShortcuts ? tableRef.current : document;
   React__default.useEffect(
     () => {
       const handleKeyDown = (event) => {
@@ -32750,9 +32807,9 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
           tableMeta.rowClick.handleKeyDown(event, (_a = rows[tableMeta.rowActive.rowActiveIndex]) == null ? void 0 : _a.original);
         }
       };
-      document.addEventListener("keydown", handleKeyDown);
+      listenerTarget == null ? void 0 : listenerTarget.addEventListener("keydown", handleKeyDown);
       return () => {
-        document.removeEventListener("keydown", handleKeyDown);
+        listenerTarget == null ? void 0 : listenerTarget.removeEventListener("keydown", handleKeyDown);
       };
     },
     // scrollToIndex function changes when row count changes, so it is important to update handlers
@@ -33596,7 +33653,7 @@ function RowWithServerLoading(props) {
 }
 const Skeleton = React__default.forwardRef(function Skeleton2(props, ref) {
   const { cellsCount, index: index2 } = props;
-  return /* @__PURE__ */ React__default.createElement("tr", { "data-row-index": index2, ref }, Array(cellsCount).fill(null).map((_, index22) => /* @__PURE__ */ React__default.createElement("td", { key: index22 }, /* @__PURE__ */ React__default.createElement("span", { className: "bg-grey-100 text-grey-700 h-4 w-full text-center text-xs" }))));
+  return /* @__PURE__ */ React__default.createElement("tr", { "data-row-index": index2, "data-row-id": index2, ref }, Array(cellsCount).fill(null).map((_, index22) => /* @__PURE__ */ React__default.createElement("td", { key: index22 }, /* @__PURE__ */ React__default.createElement("span", { className: "bg-grey-100 text-grey-700 h-4 w-full text-center text-xs" }))));
 });
 function getScrollPaddingEndOffset(table) {
   const tableMeta = table.options.meta;
@@ -34058,7 +34115,7 @@ const INTERNAL_RENDERERS = {
 };
 function useTable$1(props, externalRef, renderers, meta, options) {
   const ref = useMergedRef(externalRef);
-  const manager = useTableManager(props, meta, INTERNAL_RENDERERS);
+  const manager = useTableManager(props, ref, meta, INTERNAL_RENDERERS);
   const renderer2 = useTableRenderer(
     renderers,
     manager.instance,
@@ -34068,7 +34125,7 @@ function useTable$1(props, externalRef, renderers, meta, options) {
     options
   );
   const { style, stylesheet } = useTableStyle(manager.id, manager.instance);
-  useTableGlobalShortcuts(manager.instance, ref, renderer2.scrollToIndex);
+  useTableGlobalShortcuts(manager.instance, ref, renderer2.scrollToIndex, props.enableLocalKeyboardShortcuts);
   useTableRef(manager.instance, ref);
   useTableRowActiveListener(manager.instance, ref);
   return {
@@ -83989,43 +84046,57 @@ Navigation24.Link = Link3;
 Navigation24.Section = Section;
 Navigation24.Content = Content;
 const DATASET_SIZE_MULTIPLIER = 15;
+function getDataKey(sorting, filters, hiddenColumns, search) {
+  return [JSON.stringify(sorting), JSON.stringify(filters), JSON.stringify(hiddenColumns), JSON.stringify(search)].join("_");
+}
 function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_PAGE_SIZE$1 }) {
   const { pageSize } = options;
   const DATASET_SIZE = DATASET_SIZE_MULTIPLIER * pageSize;
   const length = React__default.useRef(0);
   const [data, setData] = React__default.useState({ rows: [], pages: [], cache: {}, lastFetchedPage: void 0 });
   const _pendingPageRequests = React__default.useRef({});
-  const _lastRequestId = React__default.useRef();
   const _lastUsedSorting = React__default.useRef([]);
   const _lastUsedFilters = React__default.useRef([]);
-  const _lastUsedSearch = React__default.useRef();
   const _lastUsedHiddenColumns = React__default.useRef([]);
-  async function loadPage(pageIndex, sorting, filters, hiddenColumns, search, reset = false) {
-    if (_pendingPageRequests.current[pageIndex] && !reset) {
-      return;
-    }
-    const hasChangedData = JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) || search !== _lastUsedSearch.current;
-    if (data.cache[pageIndex] && data.cache[pageIndex][0] && !hasChangedData && !reset) {
-      return;
+  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;
+    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 requestId = nanoid();
-    _pendingPageRequests.current[pageIndex] = true;
+    const dataKey = getDataKey(sorting, filters, hiddenColumns, search);
+    _pendingPageRequests.current[pageIndex] = dataKey;
     try {
-      _lastRequestId.current = requestId;
       const response = await fetchPage(pageIndex, pageSize, sorting, filters, hiddenColumns, search);
+      if (dataKey !== _pendingPageRequests.current[pageIndex]) {
+        return;
+      }
       length.current = response.length;
       setData((currentData) => {
-        if (_lastRequestId.current !== requestId) {
-          return currentData;
-        }
         const direction = getDirection(pageIndex, currentData.pages);
-        const nextPages = getPages(pageIndex, currentData.lastFetchedPage, reset ? [] : currentData.pages, direction);
+        const nextPages = getPages(
+          pageIndex,
+          currentData.lastFetchedPage,
+          hasDataChanged ? [] : currentData.pages,
+          direction
+        );
         _lastUsedSorting.current = sorting;
         _lastUsedFilters.current = filters;
         _lastUsedSearch.current = search;
         _lastUsedHiddenColumns.current = hiddenColumns;
         let nextCache;
-        if (reset || hasChangedData || !direction) {
+        if (hasDataChanged || !direction) {
           nextCache = nextPages.reduce((acc, p2) => ({ ...acc, [p2]: Array(pageSize).fill(void 0) }), {});
         } else {
           nextCache = { ...currentData.cache };
@@ -84044,7 +84115,9 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
           lastFetchedPage: pageIndex
         };
       });
-      delete _pendingPageRequests.current[pageIndex];
+      requestAnimationFrame(() => {
+        delete _pendingPageRequests.current[pageIndex];
+      });
     } catch {
     }
   }
@@ -84075,35 +84148,61 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
       _pendingPageRequests.current = {};
     }
   };
+  async function reloadCurrentPages(currentPageIndex, sorting, filters, hiddenColumns, search) {
+    const index2 = data.pages.indexOf(currentPageIndex);
+    const pageIndexes = [data.pages[index2 - 1], currentPageIndex, data.pages[index2 + 1]].filter((x3) => x3 !== void 0);
+    const dataKey = getDataKey(sorting, filters, hiddenColumns, search);
+    _pendingPageRequests.current = pageIndexes.reduce((accum, index22) => ({ ...accum, [index22]: dataKey }), {});
+    try {
+      const responses = await Promise.all(
+        pageIndexes.map((pageIndex) => fetchPage(pageIndex, pageSize, sorting, filters, hiddenColumns, search))
+      );
+      length.current = responses[0].length;
+      const nextPages = pageIndexes;
+      _lastUsedSorting.current = sorting;
+      _lastUsedFilters.current = filters;
+      _lastUsedSearch.current = search;
+      _lastUsedHiddenColumns.current = hiddenColumns;
+      const nextCache = nextPages.reduce(
+        (acc, p2, index22) => ({ ...acc, [p2]: responses[index22].data }),
+        {}
+      );
+      const rows = Object.values(nextCache).reduce((acc, p2) => acc.concat(p2), []);
+      setData({
+        cache: nextCache,
+        pages: nextPages,
+        rows,
+        lastFetchedPage: pageIndexes[pageIndexes.length - 1]
+      });
+      requestAnimationFrame(() => {
+        _pendingPageRequests.current = {};
+      });
+    } catch {
+    }
+  }
   const invalidate = async () => {
-    _pendingPageRequests.current = {};
-    return loadPage(
+    return reloadCurrentPages(
       getCurrentPage(data.pages),
       _lastUsedSorting.current,
       _lastUsedFilters.current,
       _lastUsedHiddenColumns.current,
-      _lastUsedSearch.current,
-      true
+      _lastUsedSearch.current
     );
   };
   const handleSort = async (sorting) => {
-    _pendingPageRequests.current = {};
-    return loadPage(
+    return reloadCurrentPages(
       getCurrentPage(data.pages),
       sorting,
       _lastUsedFilters.current,
       _lastUsedHiddenColumns.current,
-      _lastUsedSearch.current,
-      true
+      _lastUsedSearch.current
     );
   };
   const handleFilter = async (filters, hiddenColumns) => {
-    _pendingPageRequests.current = {};
-    return loadPage(0, _lastUsedSorting.current, filters, hiddenColumns, _lastUsedSearch.current, true);
+    return loadPage(0, _lastUsedSorting.current, filters, hiddenColumns, _lastUsedSearch.current);
   };
   const handleSearch = async (search, hiddenColumns) => {
-    _pendingPageRequests.current = {};
-    return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, hiddenColumns, search, true);
+    return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, hiddenColumns, search);
   };
   return [
     {