@economic/taco 2.64.1-table-flickering.0 → 2.64.1-test-1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/taco.cjs CHANGED
@@ -37836,6 +37836,15 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
37836
37836
  virtualiser.measure();
37837
37837
  }
37838
37838
  }, [expandedState]);
37839
+ React.useEffect(() => {
37840
+ const totalSize2 = virtualiser.getTotalSize();
37841
+ console.log("before measuring totalSize", totalSize2);
37842
+ virtualiser.measure();
37843
+ setTimeout(() => {
37844
+ const totalSize3 = virtualiser.getTotalSize();
37845
+ console.log("after measuring totalSize", totalSize3);
37846
+ }, 1e3);
37847
+ }, [tableMeta.fontSize.size, tableMeta.rowHeight.height, JSON.stringify(table.getState().sorting), rows.length]);
37839
37848
  const totalSize = virtualiser.getTotalSize();
37840
37849
  const virtualItems = virtualiser.getVirtualItems();
37841
37850
  const scrollToIndex = React.useCallback(
@@ -38446,6 +38455,21 @@ function Cell$2(props) {
38446
38455
  }
38447
38456
  return /* @__PURE__ */ React.createElement(CellRenderer, { ...cellProps });
38448
38457
  }
38458
+ const useResizeObserver$1 = (ref, enabled = true) => {
38459
+ const [size2, setSize] = React.useState();
38460
+ React.useEffect(() => {
38461
+ if (!ref.current || !enabled) {
38462
+ return () => void 0;
38463
+ }
38464
+ const observer = new ResizeObserver((entries) => {
38465
+ const entry = entries[0];
38466
+ setSize({ height: entry.contentRect.height, width: entry.contentRect.width });
38467
+ });
38468
+ observer.observe(ref.current);
38469
+ return () => observer.disconnect();
38470
+ }, [enabled]);
38471
+ return size2;
38472
+ };
38449
38473
  const DisplayRow = React.memo(function DisplayRow2(props) {
38450
38474
  var _a, _b, _c;
38451
38475
  const { children, cellRenderer: CellRenderer, index: index2, measureRow, row, table, ...otherAttributes } = props;
@@ -38540,12 +38564,14 @@ const DisplayRow = React.memo(function DisplayRow2(props) {
38540
38564
  }
38541
38565
  const ref = React.useRef(null);
38542
38566
  const expansionRef = React.useRef(null);
38567
+ const rowSize = useResizeObserver$1(ref, true);
38568
+ const expandedRowSize = useResizeObserver$1(expansionRef, !!expandedRow);
38543
38569
  React.useEffect(() => {
38544
38570
  var _a2, _b2;
38545
38571
  const rowHeight = ((_a2 = ref.current) == null ? void 0 : _a2.getBoundingClientRect().height) ?? 0;
38546
38572
  const expansionHeight = ((_b2 = expansionRef.current) == null ? void 0 : _b2.getBoundingClientRect().height) ?? 0;
38547
38573
  measureRow(rowHeight + expansionHeight);
38548
- }, [expansionRef.current]);
38574
+ }, [rowSize, expandedRowSize, measureRow]);
38549
38575
  const className = clsx("group/row", otherAttributes.className, {
38550
38576
  "hover:cursor-grab": tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== "function",
38551
38577
  "hover:cursor-pointer": typeof attributes.onClick === "function"
@@ -88413,16 +88439,19 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
88413
88439
  const _lastUsedSearch = React.useRef();
88414
88440
  async function loadPage(pageIndex, sorting, filters, hiddenColumns, search) {
88415
88441
  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;
88416
- const isAlreadyLoadedOrLoading = _pendingPageRequests.current[pageIndex] || data.cache[pageIndex] && data.cache[pageIndex][0];
88417
- if (!hasDataChanged && isAlreadyLoadedOrLoading) {
88418
- return;
88419
- }
88420
88442
  if (hasDataChanged) {
88421
88443
  _lastUsedSorting.current = sorting;
88422
88444
  _lastUsedFilters.current = filters;
88423
88445
  _lastUsedSearch.current = search;
88424
88446
  _lastUsedHiddenColumns.current = hiddenColumns;
88425
88447
  _pendingPageRequests.current = {};
88448
+ } else {
88449
+ if (_pendingPageRequests.current[pageIndex]) {
88450
+ return;
88451
+ }
88452
+ if (data.cache[pageIndex] && data.cache[pageIndex][0]) {
88453
+ return;
88454
+ }
88426
88455
  }
88427
88456
  const dataKey = getDataKey(sorting, filters, hiddenColumns, search);
88428
88457
  _pendingPageRequests.current[pageIndex] = dataKey;
@@ -88468,7 +88497,6 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
88468
88497
  delete _pendingPageRequests.current[pageIndex];
88469
88498
  });
88470
88499
  } catch {
88471
- delete _pendingPageRequests.current[pageIndex];
88472
88500
  }
88473
88501
  }
88474
88502
  const loadAll = async (sorting, filters, hiddenColumns, search) => {
@@ -88578,14 +88606,12 @@ function getCurrentPage(currentPages) {
88578
88606
  return currentPages[middle];
88579
88607
  }
88580
88608
  function getDirection(pageIndex, currentPages) {
88581
- if (!currentPages.length) {
88582
- return void 0;
88583
- }
88584
- if (pageIndex === currentPages[currentPages.length - 1] + 1) {
88585
- return "forward";
88586
- }
88587
- if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
88588
- return "backward";
88609
+ if (currentPages.length) {
88610
+ if (pageIndex === currentPages[currentPages.length - 1] + 1) {
88611
+ return "forward";
88612
+ } else if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
88613
+ return "backward";
88614
+ }
88589
88615
  }
88590
88616
  return void 0;
88591
88617
  }