@infinite-table/infinite-react 9.1.1 → 9.1.3

package/index.dev.js

@@ -2720,6 +2720,27 @@ function resizeClamp(value, min, max, direction) {
   }
   return { value, clamped: false, diff: 0 };
 }
+function hasFlexDeficit(items, availableSize, reservedWidth) {
+  let hasFlex = false;
+  let totalWidth = 0;
+  for (const item of items) {
+    if (item.computedFlex) {
+      hasFlex = true;
+    }
+    totalWidth += item.computedWidth;
+  }
+  return hasFlex && Math.round(totalWidth) > Math.round(availableSize - reservedWidth);
+}
+function getResizeSizingProperty(item, flexDeficit) {
+  return item.computedFlex && !flexDeficit ? "flex" : "width";
+}
+function withResizedSize(entry, property, size) {
+  if (property === "width") {
+    const { flex: _flex, ...rest } = entry ?? {};
+    return { ...rest, width: size };
+  }
+  return { ...entry, flex: size };
+}
 var computeResize = (params) => {
   const { availableSize, reservedWidth = 0 } = params;
   const columnSizing = Object.keys(
@@ -2738,14 +2759,19 @@ var computeResize = (params) => {
   const secondItem = params.items[secondIndex];
   const firstId = firstItem.id;
   const secondId = secondItem?.id;
+  const flexDeficit = hasFlexDeficit(
+    params.items,
+    availableSize,
+    reservedWidth
+  );
   const firstSize = firstItem.computedWidth;
   const firstMinSize = firstItem.computedMinWidth;
   const firstMaxSize = firstItem.computedMaxWidth;
-  const firstPropertyToAdjust = firstItem.computedFlex ? "flex" : "width";
+  const firstPropertyToAdjust = getResizeSizingProperty(firstItem, flexDeficit);
   const secondSize = secondItem?.computedWidth;
   const secondMinSize = secondItem?.computedMinWidth;
   const secondMaxSize = secondItem?.computedMaxWidth;
-  const secondPropertyToAdjust = secondItem?.computedFlex ? "flex" : "width";
+  const secondPropertyToAdjust = secondItem ? getResizeSizingProperty(secondItem, flexDeficit) : "width";
   let maxReached = false;
   let minReached = false;
   const direction = dragHandleOffset > 0 ? 1 : -1;
@@ -2754,17 +2780,18 @@ var computeResize = (params) => {
     clamped: firstClamped,
     diff: firstDiff
   } = resizeClamp(
-    firstSize + dragHandleOffset,
+    Math.round(firstSize + dragHandleOffset),
     firstMinSize,
     firstMaxSize,
     direction
   );
   if (params.shareSpaceOnResize) {
     if (secondItem == null) {
-      columnSizing[firstId] = {
-        ...columnSizing[firstId],
-        [firstPropertyToAdjust]: firstAdjustedSize
-      };
+      columnSizing[firstId] = withResizedSize(
+        columnSizing[firstId],
+        firstPropertyToAdjust,
+        firstAdjustedSize
+      );
       minReached = firstClamped === "min";
       maxReached = firstClamped === "max";
       const adjustedDiff2 = firstAdjustedSize - firstSize;
@@ -2782,7 +2809,7 @@ var computeResize = (params) => {
       clamped: secondClamped,
       diff: secondDiff
     } = resizeClamp(
-      secondSize - dragHandleOffset,
+      Math.round(secondSize - dragHandleOffset),
       secondMinSize,
       secondMaxSize,
       direction
@@ -2797,7 +2824,7 @@ var computeResize = (params) => {
     if (!firstClamped && !secondClamped) {
     } else if (firstClamped) {
       const clampResultForSecond = resizeClamp(
-        secondSize - dragHandleOffset - firstDiff,
+        Math.round(secondSize - dragHandleOffset - firstDiff),
         secondMinSize,
         secondMaxSize,
         direction
@@ -2807,7 +2834,7 @@ var computeResize = (params) => {
       secondDiff = clampResultForSecond.diff;
     } else if (secondClamped) {
       const clampResultForFirst = resizeClamp(
-        firstSize + dragHandleOffset + secondDiff,
+        Math.round(firstSize + dragHandleOffset + secondDiff),
         firstMinSize,
         firstMaxSize,
         direction
@@ -2816,28 +2843,31 @@ var computeResize = (params) => {
       firstClamped = clampResultForFirst.clamped;
       firstDiff = clampResultForFirst.diff;
     }
-    columnSizing[firstId] = {
-      ...columnSizing[firstId],
-      [firstPropertyToAdjust]: firstAdjustedSize
-    };
-    columnSizing[secondId] = {
-      ...columnSizing[secondId],
-      [secondPropertyToAdjust]: secondAdjustedSize
-    };
+    columnSizing[firstId] = withResizedSize(
+      columnSizing[firstId],
+      firstPropertyToAdjust,
+      firstAdjustedSize
+    );
+    columnSizing[secondId] = withResizedSize(
+      columnSizing[secondId],
+      secondPropertyToAdjust,
+      secondAdjustedSize
+    );
     minReached = firstClamped === "min" || secondClamped === "min";
     maxReached = firstClamped === "max" || secondClamped === "max";
   } else {
-    columnSizing[firstId] = {
-      ...columnSizing[firstId],
-      [firstPropertyToAdjust]: firstAdjustedSize
-    };
+    columnSizing[firstId] = withResizedSize(
+      columnSizing[firstId],
+      firstPropertyToAdjust,
+      firstAdjustedSize
+    );
     minReached = firstClamped === "min";
     maxReached = firstClamped === "max";
   }
   const adjustedDiff = firstAdjustedSize - firstSize;
   return {
     adjustedDiff,
-    reservedWidth: !params.shareSpaceOnResize ? reservedWidth - adjustedDiff : reservedWidth,
+    reservedWidth: !params.shareSpaceOnResize ? Math.round(reservedWidth - adjustedDiff) : reservedWidth,
     columnSizing,
     minReached,
     maxReached,
@@ -2871,8 +2901,13 @@ var computeGroupResize = (params) => {
   const beforeIndexes = [...new Array(params.columnGroupSize)].map((_, index) => params.dragHandlePositionAfter - index).reverse();
   const beforeItems = beforeIndexes.map((i) => params.items[i]);
   const beforeSizes = beforeItems.map((item) => item.computedWidth);
+  const flexDeficit = hasFlexDeficit(
+    params.items,
+    availableSize,
+    reservedWidth
+  );
   const beforePropertiesToAdjust = beforeItems.map(
-    (item) => item.computedFlex ? "flex" : "width"
+    (item) => getResizeSizingProperty(item, flexDeficit)
   );
   let unresizableWidth = 0;
   const { computedSizes } = computeFlex({
@@ -2921,10 +2956,11 @@ var computeGroupResize = (params) => {
         columnSizing: currentColumnSizing
       }
     );
-    columnSizing[item.id] = {
-      ...currentColumnSizing[item.id],
-      [propertyToAdjust]: itemSize + adjustedDiff2
-    };
+    columnSizing[item.id] = withResizedSize(
+      currentColumnSizing[item.id],
+      propertyToAdjust,
+      Math.round(itemSize + adjustedDiff2)
+    );
     adjustedDiffs.push(adjustedDiff2);
     if (!maxReached) {
       groupMaxReached = false;
@@ -2944,7 +2980,7 @@ var computeGroupResize = (params) => {
     adjustedDiffs,
     adjustedDiff,
     columnSizing,
-    reservedWidth: reservedWidth - adjustedDiff
+    reservedWidth: Math.round(reservedWidth - adjustedDiff)
   };
 };
 
@@ -3187,15 +3223,20 @@ var getComputedColumns = ({
       width: colType?.defaultWidth,
       flex: colType?.defaultFlex
     };
-    let colSizing = assignNonNull(
-      {
-        width: column?.defaultWidth,
-        flex: column?.defaultFlex,
-        minWidth: column?.minWidth,
-        maxWidth: column?.maxWidth
-      },
-      columnSizing[colId]
-    );
+    const colDefaultSizing = {
+      width: column?.defaultWidth,
+      flex: column?.defaultFlex,
+      minWidth: column?.minWidth,
+      maxWidth: column?.maxWidth
+    };
+    const colSizingFromProp = columnSizing[colId];
+    if (colSizingFromProp?.width != null && colSizingFromProp.flex == null) {
+      delete colDefaultSizing.flex;
+    }
+    if (colSizingFromProp?.flex != null && colSizingFromProp.width == null) {
+      delete colDefaultSizing.width;
+    }
+    let colSizing = assignNonNull(colDefaultSizing, colSizingFromProp);
     if (colSizing.width != null) {
       delete colTypeSizing.flex;
     }
@@ -8111,6 +8152,9 @@ var React30 = __toESM(require("react"));
 var import_react23 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizeShared.ts
+function getResizeAvailableSize(bodySize) {
+  return Math.max(bodySize.width - getScrollbarWidth(), 0);
+}
 function computeColumnResizeForDiff(options) {
   const { context, column, diff, shareSpaceOnResize } = options;
   const state = context.getState();
@@ -8133,7 +8177,7 @@ function computeColumnResizeForDiff(options) {
   } : columnSizing;
   return computeResize({
     shareSpaceOnResize,
-    availableSize: bodySize.width,
+    availableSize: getResizeAvailableSize(bodySize),
     reservedWidth: viewportReservedWidth || 0,
     dragHandleOffset: diff,
     dragHandlePositionAfter: column.computedVisibleIndex,
@@ -8362,6 +8406,7 @@ function ResizeHandleFn(props) {
       const diff = Math.round(e2.clientX - initialX);
       const adjustedDiff = resizeDiff(diff, { done: true });
       restoreRenderRange();
+      resizer.resize(0);
       props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
     };
     target.addEventListener("pointermove", onPointerMove);
@@ -13771,6 +13816,7 @@ function GroupResizeHandleFn(props) {
       target.removeEventListener("pointerup", onPointerUp);
       const diff = Math.round(e2.clientX - initialX);
       const adjustedDiffs = resizeDiff(diff);
+      resizer.resize(props.groupColumns.map(() => 0));
       props.onResize(adjustedDiffs);
     };
     target.addEventListener("pointermove", onPointerMove);
@@ -13840,7 +13886,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
         ...columnSizingWithFlex
       } : columnSizing;
       const result = computeGroupResize({
-        availableSize: bodySize.width,
+        availableSize: getResizeAvailableSize(bodySize),
         reservedWidth: viewportReservedWidth || 0,
         dragHandleOffset: diff,
         dragHandlePositionAfter: lastColumnInGroup.computedVisibleIndex,
@@ -22388,6 +22434,23 @@ function computeFilterValueForRemote(filterValue, {
     }
   );
 }
+function createRemoteFilterValueMemo() {
+  let prev;
+  return (filterValue, filterTypes, filterMode) => {
+    if (prev && prev.filterValue === filterValue && prev.filterTypes === filterTypes && prev.filterMode === filterMode) {
+      return prev.result;
+    }
+    let result = computeFilterValueForRemote(filterValue, {
+      filterTypes,
+      filterMode
+    });
+    if (prev && prev.filterValue === filterValue && JSON.stringify(prev.result) === JSON.stringify(result)) {
+      result = prev.result;
+    }
+    prev = { filterValue, filterTypes, filterMode, result };
+    return result;
+  };
+}
 var getRafPromise = () => new Promise((resolve) => {
   raf(resolve);
 });
@@ -22400,6 +22463,10 @@ function getDetailReady(masterContext, getDataSourceState) {
     isDetailReady
   };
 }
+function isFirstLazyBatchRequested(componentState) {
+  const { lazyLoad, lazyLoadBatchSize, lazyLoadCacheOfLoadedBatches } = componentState;
+  return !!lazyLoad && !!lazyLoadBatchSize && lazyLoadBatchSize > 0 && lazyLoadCacheOfLoadedBatches.has([0]);
+}
 function lazyLoadRange(options, cache) {
   const {
     startIndex,
@@ -24996,12 +25063,15 @@ function useLoadData(options) {
       }
     }
   }, [scrollbars.vertical]);
-  const computedFilterValue = (0, import_react41.useMemo)(() => {
-    return computeFilterValueForRemote(filterValue, {
-      filterTypes,
-      filterMode
-    });
-  }, [filterValue, filterMode, filterTypes]);
+  const getRemoteFilterValue = (0, import_react41.useMemo)(
+    () => createRemoteFilterValueMemo(),
+    []
+  );
+  const computedFilterValue = getRemoteFilterValue(
+    filterValue,
+    filterTypes,
+    filterMode
+  );
   const depsObject = {
     // #sortMode_vs_shouldReloadData.sortInfo
     sortInfo: shouldReloadData.sortInfo ? sortInfo : null,
@@ -25012,14 +25082,19 @@ function useLoadData(options) {
     cursorId: livePagination ? stateCursorId : null
   };
   const initialRef = (0, import_react41.useRef)(true);
-  useLazyLoadRange(options, {
-    sortInfo,
-    groupBy,
-    pivotBy,
-    filterValue,
-    refetchKey,
-    cursorId: livePagination ? stateCursorId : null
-  });
+  const lazyRangeReloadedRef = (0, import_react41.useRef)(false);
+  useLazyLoadRange(
+    options,
+    {
+      sortInfo,
+      groupBy,
+      pivotBy,
+      filterValue,
+      refetchKey,
+      cursorId: livePagination ? stateCursorId : null
+    },
+    lazyRangeReloadedRef
+  );
   const getMasterContext = useGetMasterDetailContext();
   const dataChangeTimestampsRef = (0, import_react41.useRef)([]);
   useEffectWithChanges(
@@ -25083,6 +25158,9 @@ function useLoadData(options) {
       }
       const componentState = getDataSourceState();
       if (typeof componentState.data === "function") {
+        if (lazyRangeReloadedRef.current && !appendWhenLivePagination && isFirstLazyBatchRequested(componentState)) {
+          return;
+        }
         let marker;
         if (componentState.debugId) {
           marker = getMarker(
@@ -25104,6 +25182,9 @@ function useLoadData(options) {
     },
     { ...depsObject, data }
   );
+  (0, import_react41.useEffect)(() => {
+    lazyRangeReloadedRef.current = false;
+  });
   useEffectWithChanges(() => {
     const componentState = getDataSourceState();
     if (initialRef.current) {
@@ -25117,7 +25198,7 @@ function useLoadData(options) {
     }
   }, depsObject);
 }
-function useLazyLoadRange(options, dependencies) {
+function useLazyLoadRange(options, dependencies, reloadedRef) {
   const { getDataSourceState, dataSourceActions, dataSourceState } = options;
   (0, import_react41.useEffect)(() => {
     dataSourceActions.lazyLoadCacheOfLoadedBatches = new DeepMap();
@@ -25173,6 +25254,7 @@ function useLazyLoadRange(options, dependencies) {
           loadRange(notifyRenderRangeChange.get(), {
             dismissLoadedRows: true
           });
+          reloadedRef.current = true;
         } else {
           if (changes.originalLazyGroupDataChangeDetect || changes.groupRowsState) {
             loadRange(notifyRenderRangeChange.get());
@@ -27811,7 +27893,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "9.1.1"
+      version: "9.1.3"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;