@infinite-table/infinite-react 9.1.1 → 9.1.2

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,
@@ -27811,7 +27857,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "9.1.1"
+      version: "9.1.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.dev.mjs

@@ -2647,6 +2647,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(
@@ -2665,14 +2686,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;
@@ -2681,17 +2707,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;
@@ -2709,7 +2736,7 @@ var computeResize = (params) => {
       clamped: secondClamped,
       diff: secondDiff
     } = resizeClamp(
-      secondSize - dragHandleOffset,
+      Math.round(secondSize - dragHandleOffset),
       secondMinSize,
       secondMaxSize,
       direction
@@ -2724,7 +2751,7 @@ var computeResize = (params) => {
     if (!firstClamped && !secondClamped) {
     } else if (firstClamped) {
       const clampResultForSecond = resizeClamp(
-        secondSize - dragHandleOffset - firstDiff,
+        Math.round(secondSize - dragHandleOffset - firstDiff),
         secondMinSize,
         secondMaxSize,
         direction
@@ -2734,7 +2761,7 @@ var computeResize = (params) => {
       secondDiff = clampResultForSecond.diff;
     } else if (secondClamped) {
       const clampResultForFirst = resizeClamp(
-        firstSize + dragHandleOffset + secondDiff,
+        Math.round(firstSize + dragHandleOffset + secondDiff),
         firstMinSize,
         firstMaxSize,
         direction
@@ -2743,28 +2770,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,
@@ -2798,8 +2828,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({
@@ -2848,10 +2883,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;
@@ -2871,7 +2907,7 @@ var computeGroupResize = (params) => {
     adjustedDiffs,
     adjustedDiff,
     columnSizing,
-    reservedWidth: reservedWidth - adjustedDiff
+    reservedWidth: Math.round(reservedWidth - adjustedDiff)
   };
 };
 
@@ -3114,15 +3150,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;
     }
@@ -8045,6 +8086,9 @@ import * as React30 from "react";
 import { useCallback as useCallback15 } from "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();
@@ -8067,7 +8111,7 @@ function computeColumnResizeForDiff(options) {
   } : columnSizing;
   return computeResize({
     shareSpaceOnResize,
-    availableSize: bodySize.width,
+    availableSize: getResizeAvailableSize(bodySize),
     reservedWidth: viewportReservedWidth || 0,
     dragHandleOffset: diff,
     dragHandlePositionAfter: column.computedVisibleIndex,
@@ -8296,6 +8340,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);
@@ -13705,6 +13750,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);
@@ -13774,7 +13820,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
         ...columnSizingWithFlex
       } : columnSizing;
       const result = computeGroupResize({
-        availableSize: bodySize.width,
+        availableSize: getResizeAvailableSize(bodySize),
         reservedWidth: viewportReservedWidth || 0,
         dragHandleOffset: diff,
         dragHandlePositionAfter: lastColumnInGroup.computedVisibleIndex,
@@ -27750,7 +27796,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "9.1.1"
+      version: "9.1.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;