@infinite-table/infinite-react 9.1.0 → 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,
@@ -22491,6 +22537,40 @@ function lazyLoadRange(options, cache) {
   }, initialPromise);
 }
 
+// src/components/InfiniteTable/utils/getEditingCellContext.ts
+function resolveEditingCellRowIndex(context, editingCell) {
+  const { rowIndex, primaryKey } = editingCell;
+  const { dataArray } = context.getDataSourceState();
+  if (primaryKey !== void 0) {
+    const indexByKey = context.dataSourceApi.getIndexByPrimaryKey(primaryKey);
+    if (indexByKey !== -1) {
+      return indexByKey;
+    }
+    if (dataArray[rowIndex]?.id !== primaryKey) {
+      return -1;
+    }
+  }
+  return dataArray[rowIndex] ? rowIndex : -1;
+}
+function getEditingCellContext(context, editingCell) {
+  const rowIndex = resolveEditingCellRowIndex(context, editingCell);
+  if (rowIndex === -1) {
+    return null;
+  }
+  return getCellContext({
+    ...context,
+    rowIndex,
+    columnId: editingCell.columnId
+  });
+}
+function warnEditedRowGone(callbackName, editingCell) {
+  console.warn(
+    `Skipping "${callbackName}": the edited row (primaryKey: ${String(
+      editingCell.primaryKey
+    )}, rowIndex: ${editingCell.rowIndex}) is no longer in the data array.`
+  );
+}
+
 // src/components/InfiniteTable/api/realignColumnContextMenu.ts
 function realignColumnContextMenu(param) {
   const { getComputed, getState, actions } = param;
@@ -23367,9 +23447,28 @@ var InfiniteTableApiImpl = class {
           waiting: "persist"
         };
       }
+      const rowIndex = resolveEditingCellRowIndex(
+        { ...this.context, api: this },
+        editingCell
+      );
+      if (rowIndex === -1) {
+        const error4 = new Error(
+          `Cannot persist edit: the edited row (primaryKey: ${String(
+            editingCell.primaryKey
+          )}, rowIndex: ${editingCell.rowIndex}) is no longer in the data array.`
+        );
+        this.actions.editingCell = {
+          ...editingCell,
+          active: false,
+          accepted: false,
+          waiting: false,
+          persisted: error4
+        };
+        return Promise.resolve(error4);
+      }
       const params = {
         ...getCellContext({
-          rowIndex: editingCell.rowIndex,
+          rowIndex,
           columnId: editingCell.columnId,
           ...this.context,
           api: this
@@ -27758,7 +27857,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "9.1.0"
+      version: "9.1.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -30403,15 +30502,19 @@ function useOnEditCancelled() {
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
   (0, import_react61.useEffect)(() => {
     if (cancelled) {
-      const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
-      onEditCancelled?.({
-        ...getCellContext({
-          rowIndex,
-          columnId,
-          ...context
-        }),
-        initialValue
+      const editingCell2 = getState().editingCell;
+      if (!onEditCancelled) {
+        return;
+      }
+      const cellContext = getEditingCellContext(context, editingCell2);
+      if (!cellContext) {
+        warnEditedRowGone("onEditCancelled", editingCell2);
+        return;
+      }
+      onEditCancelled({
+        ...cellContext,
+        initialValue: editingCell2.initialValue
       });
     }
   }, [cancelled]);
@@ -30427,17 +30530,21 @@ function useOnEditRejected() {
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
   (0, import_react61.useEffect)(() => {
     if (rejected) {
-      const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
-      onEditRejected?.({
-        ...getCellContext({
-          rowIndex,
-          columnId,
-          ...context
-        }),
-        value,
+      const editingCell2 = getState().editingCell;
+      if (!onEditRejected) {
+        return;
+      }
+      const cellContext = getEditingCellContext(context, editingCell2);
+      if (!cellContext) {
+        warnEditedRowGone("onEditRejected", editingCell2);
+        return;
+      }
+      onEditRejected({
+        ...cellContext,
+        value: editingCell2.value,
         error: rejected,
-        initialValue
+        initialValue: editingCell2.initialValue
       });
     }
   }, [rejected]);
@@ -30468,18 +30575,17 @@ function useOnEditAccepted() {
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
   (0, import_react61.useEffect)(() => {
     if (accepted) {
-      const { editingCell: editingCell2 } = getState();
-      const { value, rowIndex, columnId, initialValue } = editingCell2;
-      const editParams = {
-        ...getCellContext({
-          rowIndex,
-          columnId,
-          ...context
-        }),
-        value,
-        initialValue
-      };
-      getState().onEditAccepted?.(editParams);
+      const { onEditAccepted } = getState();
+      const editingCell2 = getState().editingCell;
+      const { value, initialValue } = editingCell2;
+      if (onEditAccepted) {
+        const cellContext = getEditingCellContext(context, editingCell2);
+        if (cellContext) {
+          onEditAccepted({ ...cellContext, value, initialValue });
+        } else {
+          warnEditedRowGone("onEditAccepted", editingCell2);
+        }
+      }
       context.api.persistEdit({ value });
     }
   }, [accepted]);
@@ -30499,15 +30605,19 @@ function useOnEditPersisted() {
       if (!editingCell2) {
         return;
       }
-      const { rowIndex, columnId, value, initialValue } = editingCell2;
+      const callbackName = persisted instanceof Error ? "onEditPersistError" : "onEditPersistSuccess";
+      if (!getState()[callbackName]) {
+        return;
+      }
+      const cellContext = getEditingCellContext(context, editingCell2);
+      if (!cellContext) {
+        warnEditedRowGone(callbackName, editingCell2);
+        return;
+      }
       const params = {
-        ...getCellContext({
-          rowIndex,
-          columnId,
-          ...context
-        }),
-        value,
-        initialValue
+        ...cellContext,
+        value: editingCell2.value,
+        initialValue: editingCell2.initialValue
       };
       if (persisted instanceof Error) {
         onEditPersistError?.({ ...params, error: persisted });