@infinite-table/infinite-react 0.2.11 → 0.2.14

package/index.js

@@ -629,6 +629,7 @@ __export(exports, {
   InfiniteTable: () => InfiniteTable,
   InfiniteTableClassName: () => InfiniteTableClassName,
   InfiniteTableComponent: () => InfiniteTableComponent,
+  debounce: () => debounce,
   flatten: () => flatten,
   getComponentStateRoot: () => getComponentStateRoot,
   group: () => group,
@@ -639,6 +640,20 @@ __export(exports, {
   useEffectWithChanges: () => useEffectWithChanges
 });
 
+// src/components/utils/debounce.ts
+function debounce(fn, { wait }) {
+  let timeout = null;
+  return function(...args) {
+    const context = this;
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      fn.apply(context, args);
+    }, wait);
+  };
+}
+
 // src/components/InfiniteTable/index.tsx
 var React34 = __toModule(require("react"));
 
@@ -1469,7 +1484,7 @@ var useInfiniteTable = () => {
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
 var import_react8 = __toModule(require("react"));
 
-// src/components/flexbox/index.tsx
+// src/components/flexbox/index.ts
 var computeFlex = (params) => {
   const {
     availableSize,
@@ -1740,7 +1755,6 @@ var getComputedVisibleColumns = ({
     }
     return acc;
   }, {});
-  console.log(columnSizing, "columnSizing");
   const flexResult = computeFlex({
     availableSize: Math.max(bodySize.width - (viewportReservedWidth != null ? viewportReservedWidth : 0) - getScrollbarWidth(), 0),
     maxSize: columnMaxWidth,
@@ -2109,6 +2123,7 @@ var useComputedVisibleColumns = ({
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
     columnSizing,
+    columnTypes,
     columnPinning,
     columnsRenderId,
     pinningRenderId
@@ -2139,7 +2154,7 @@ var sortAscending = (a, b) => a - b;
 // src/components/InfiniteTable/hooks/useComputed.ts
 var import_react18 = __toModule(require("react"));
 
-// src/components/hooks/useComponentState.tsx
+// src/components/hooks/useComponentState/index.tsx
 var React2 = __toModule(require("react"));
 var import_react11 = __toModule(require("react"));
 
@@ -2201,7 +2216,7 @@ var usePrevious = (value, initialValue) => {
   return ref.current;
 };
 
-// src/components/hooks/useComponentState.tsx
+// src/components/hooks/useComponentState/index.tsx
 var notifyChange = (props, propName, newValue) => {
   const upperPropName = toUpperFirst(propName);
   const callbackPropName = `on${upperPropName}Change`;
@@ -2819,6 +2834,7 @@ var DeepMap = class {
     this.map = new Map();
     this.length = 0;
     this.revision = 0;
+    this.emptyKey = Symbol("emptyKey");
     this.visit = (fn) => {
       this.map.forEach((_, k) => this.visitKey(k, this.map, [], fn));
     };
@@ -2830,13 +2846,19 @@ var DeepMap = class {
         return;
       }
       let i = 0;
-      currentMap.forEach((_, key) => {
+      const hasEmptyKey = currentMap.has(this.emptyKey);
+      let allowEmptyKey = true;
+      const iterator = (_, key) => {
         const pair = currentMap.get(key);
         if (!pair) {
           return;
         }
         const { map: map2 } = pair;
-        const keys = [...parentKeys, key];
+        const isEmptyKey = key === this.emptyKey;
+        if (isEmptyKey && !allowEmptyKey) {
+          return;
+        }
+        const keys = isEmptyKey ? [] : [...parentKeys, key];
         const next = map2 ? () => this.visitWithNext(keys, fn, map2) : void 0;
         if (pair.hasOwnProperty("value")) {
           fn(pair.value, keys, i, next);
@@ -2844,7 +2866,13 @@ var DeepMap = class {
         } else {
           next == null ? void 0 : next();
         }
-      });
+      };
+      if (hasEmptyKey) {
+        iterator(void 0, this.emptyKey);
+        allowEmptyKey = false;
+        i = 0;
+      }
+      currentMap.forEach(iterator);
     };
     if (initial) {
       initial.forEach((entry) => {
@@ -2863,7 +2891,7 @@ var DeepMap = class {
   set(keys, value) {
     let currentMap = this.map;
     if (!keys.length) {
-      throw `Cannot set given keys - please provide a non-empty keys array.`;
+      keys = [this.emptyKey];
     }
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
@@ -2889,7 +2917,7 @@ var DeepMap = class {
     var _a;
     let currentMap = this.map;
     if (!keys.length) {
-      throw `Cannot get given keys - please provide a non-empty keys array.`;
+      keys = [this.emptyKey];
     }
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
@@ -2924,10 +2952,11 @@ var DeepMap = class {
     this.revision = 0;
   }
   delete(keys) {
-    keys = [...keys];
     let currentMap = this.map;
     if (!keys.length) {
-      throw `Cannot delete given keys - please provide a non-empty keys array.`;
+      keys = [this.emptyKey];
+    } else {
+      keys = [...keys];
     }
     let maps = [currentMap];
     let result = false;
@@ -2980,7 +3009,7 @@ var DeepMap = class {
   has(keys) {
     let currentMap = this.map;
     if (!keys.length) {
-      throw `Cannot find existing given keys - please provide a non-empty keys array.`;
+      keys = [this.emptyKey];
     }
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
@@ -3004,7 +3033,7 @@ var DeepMap = class {
       return;
     }
     const { map: map2 } = pair;
-    const keys = [...parentKeys, key];
+    const keys = key === this.emptyKey ? [] : [...parentKeys, key];
     const next = once(() => {
       if (map2) {
         map2.forEach((_, k) => {
@@ -3020,7 +3049,12 @@ var DeepMap = class {
   getArray(fn) {
     const result = [];
     this.visit((pair, keys) => {
-      result.push(fn(__spreadProps(__spreadValues({}, pair), { keys })));
+      const res = fn(__spreadProps(__spreadValues({}, pair), { keys }));
+      if (keys.length === 0) {
+        result.splice(0, 0, res);
+      } else {
+        result.push(res);
+      }
     });
     return result;
   }
@@ -3106,7 +3140,7 @@ function lazyGroup(groupParams, rootData) {
   } = groupParams;
   const deepMap = new DeepMap();
   function traverseValues(pivotDeepMap, container, pivot2, pivotIndex = 0, currentPivotKeys2 = []) {
-    const last = pivotIndex === pivot2.length - 1;
+    const last = !pivot2.length || pivotIndex === pivot2.length - 1;
     const values = container[(mappings == null ? void 0 : mappings.values) || "values"] || {};
     for (var k in values)
       if (values.hasOwnProperty(k)) {
@@ -3130,7 +3164,7 @@ function lazyGroup(groupParams, rootData) {
   rootData.visitDepthFirst((lazyGroupRowInfo, keys, _index, next) => {
     const [_rootKey, ...currentGroupKeys] = keys;
     const dataArray = lazyGroupRowInfo.items;
-    if (currentGroupKeys.length == groupBy.length) {
+    if (currentGroupKeys.length == groupBy.length && groupBy.length) {
       const deepMapGroupValue = deepMap.get(currentGroupKeys);
       if (deepMapGroupValue) {
         deepMapGroupValue.items = dataArray;
@@ -3152,9 +3186,11 @@ function lazyGroup(groupParams, rootData) {
       const dataObject = dataArray[i].data;
       const dataKeys = dataArray[i].keys;
       let item = dataObject;
-      const { field: groupByProperty } = groupBy[dataKeys.length - 1];
-      const key = item[groupByProperty];
-      currentGroupKeys.push(key);
+      if (dataKeys.length) {
+        const { field: groupByProperty } = groupBy[dataKeys.length - 1];
+        const key = item[groupByProperty];
+        currentGroupKeys.push(key);
+      }
       const deepMapGroupValue = {
         items: [],
         commonData: dataObject,
@@ -3166,7 +3202,9 @@ function lazyGroup(groupParams, rootData) {
         const pivotContainer = dataArray[i].pivot;
         traverseValues(pivotDeepMap, pivotContainer, pivot, 0, currentPivotKeys);
       }
-      currentGroupKeys.pop();
+      if (dataKeys.length) {
+        currentGroupKeys.pop();
+      }
     }
     next == null ? void 0 : next();
   });
@@ -3182,6 +3220,37 @@ function lazyGroup(groupParams, rootData) {
   }
   return result;
 }
+function processGroup(deepMap, currentGroupKeys, currentPivotKeys, item, pivot, reducers, topLevelPivotColumns, initialReducerValue, defaultToKey = DEFAULT_TO_KEY) {
+  const {
+    items: currentGroupItems,
+    reducerResults,
+    pivotDeepMap
+  } = deepMap.get(currentGroupKeys);
+  currentGroupItems.push(item);
+  if (reducers) {
+    computeReducersFor(item, reducers, reducerResults);
+  }
+  if (pivot) {
+    for (let pivotIndex = 0, pivotLength = pivot.length; pivotIndex < pivotLength; pivotIndex++) {
+      const { field: pivotField, toKey: pivotToKey } = pivot[pivotIndex];
+      const pivotKey = (pivotToKey || defaultToKey)(item[pivotField], item);
+      currentPivotKeys.push(pivotKey);
+      if (!pivotDeepMap.has(currentPivotKeys)) {
+        topLevelPivotColumns.set(currentPivotKeys, true);
+        pivotDeepMap == null ? void 0 : pivotDeepMap.set(currentPivotKeys, {
+          reducerResults: __spreadValues({}, initialReducerValue),
+          items: []
+        });
+      }
+      const { reducerResults: pivotReducerResults, items: pivotGroupItems } = pivotDeepMap.get(currentPivotKeys);
+      pivotGroupItems.push(item);
+      if (reducers) {
+        computeReducersFor(item, reducers, pivotReducerResults);
+      }
+    }
+    currentPivotKeys.length = 0;
+  }
+}
 function group(groupParams, data) {
   const {
     groupBy,
@@ -3196,6 +3265,16 @@ function group(groupParams, data) {
   let currentPivotKeys = [];
   const initialReducerValue = initReducers(reducers);
   const globalReducerResults = __spreadValues({}, initialReducerValue);
+  if (!groupByLength) {
+    const deepMapGroupValue = {
+      items: [],
+      reducerResults: __spreadValues({}, initialReducerValue)
+    };
+    if (pivot) {
+      deepMapGroupValue.pivotDeepMap = new DeepMap();
+    }
+    deepMap.set(currentGroupKeys, deepMapGroupValue);
+  }
   for (let i = 0, len = data.length; i < len; i++) {
     let item = data[i];
     for (let groupByIndex = 0; groupByIndex < groupByLength; groupByIndex++) {
@@ -3212,38 +3291,10 @@ function group(groupParams, data) {
         }
         deepMap.set(currentGroupKeys, deepMapGroupValue);
       }
-      const {
-        items: currentGroupItems,
-        reducerResults,
-        pivotDeepMap
-      } = deepMap.get(currentGroupKeys);
-      currentGroupItems.push(item);
-      if (reducers) {
-        computeReducersFor(item, reducers, reducerResults);
-      }
-      if (pivot) {
-        for (let pivotIndex = 0, pivotLength = pivot.length; pivotIndex < pivotLength; pivotIndex++) {
-          const { field: pivotField, toKey: pivotToKey } = pivot[pivotIndex];
-          const pivotKey = (pivotToKey || defaultToKey)(item[pivotField], item);
-          currentPivotKeys.push(pivotKey);
-          if (!pivotDeepMap.has(currentPivotKeys)) {
-            topLevelPivotColumns.set(currentPivotKeys, true);
-            pivotDeepMap == null ? void 0 : pivotDeepMap.set(currentPivotKeys, {
-              reducerResults: __spreadValues({}, initialReducerValue),
-              items: []
-            });
-          }
-          const {
-            reducerResults: pivotReducerResults,
-            items: pivotGroupItems
-          } = pivotDeepMap.get(currentPivotKeys);
-          pivotGroupItems.push(item);
-          if (reducers) {
-            computeReducersFor(item, reducers, pivotReducerResults);
-          }
-        }
-        currentPivotKeys.length = 0;
-      }
+      processGroup(deepMap, currentGroupKeys, currentPivotKeys, item, pivot, reducers, topLevelPivotColumns, initialReducerValue, defaultToKey);
+    }
+    if (!groupByLength) {
+      processGroup(deepMap, currentGroupKeys, currentPivotKeys, item, pivot, reducers, topLevelPivotColumns, initialReducerValue, defaultToKey);
     }
     if (reducers) {
       computeReducersFor(item, reducers, globalReducerResults);
@@ -3462,20 +3513,6 @@ function useEffectWithChanges(fn, deps) {
   }, useEffectDeps);
 }
 
-// src/components/utils/debounce.ts
-function debounce(fn, { wait }) {
-  let timeout = null;
-  return function(...args) {
-    const context = this;
-    if (timeout !== null) {
-      clearTimeout(timeout);
-    }
-    timeout = setTimeout(() => {
-      fn.apply(context, args);
-    }, wait);
-  };
-}
-
 // src/components/DataSource/privateHooks/useLoadData.ts
 var getRafPromise = () => new Promise((resolve) => {
   requestAnimationFrame(resolve);
@@ -3501,7 +3538,7 @@ function buildDataSourceDataParams(componentState, overrides) {
   };
   if (componentState.livePagination !== void 0) {
     dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
-    dataSourceParams.cursorId = componentState.cursorId;
+    dataSourceParams.__cursorId = componentState.cursorId;
   }
   if (componentState.lazyLoad) {
     if (componentState.lazyLoadBatchSize != null && componentState.lazyLoadBatchSize > 0) {
@@ -3532,7 +3569,7 @@ function loadData(data, componentState, actions, overrides) {
     const lazyGroupData = componentState.originalLazyGroupData;
     const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys || []];
     const existingGroupRowInfo = lazyGroupData.get(key);
-    if (existingGroupRowInfo && existingGroupRowInfo.cache) {
+    if (existingGroupRowInfo && existingGroupRowInfo.cache && key.length > 1) {
       const items = existingGroupRowInfo.items;
       const len = items.length;
       let allLoaded = true;
@@ -3598,10 +3635,14 @@ function loadData(data, componentState, actions, overrides) {
           lazyGroupData.set(key, newGroupRowInfo);
         }
         skipAssign = true;
-        actions.originalLazyGroupDataChangeDetect = getChangeDetect();
+        let skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = false;
         if (!dataParams.groupKeys || !dataParams.groupKeys.length) {
           const topLevelItems = lazyGroupData.get([LAZY_ROOT_KEY_FOR_GROUPS]);
           actions.originalDataArray = [...topLevelItems.items];
+          skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = true;
+        }
+        if (!skipTriggerChangeAsAlreadyOriginalArrayWasUpdated) {
+          actions.originalLazyGroupDataChangeDetect = getChangeDetect();
         }
       }
     } else {
@@ -3687,7 +3728,8 @@ function useLoadData() {
     const componentState2 = getComponentState();
     if (initialRef.current) {
       initialRef.current = false;
-      actions.dataParams = buildDataSourceDataParams(componentState2);
+      const dataParams = buildDataSourceDataParams(componentState2);
+      actions.dataParams = dataParams;
     }
   }, depsObject);
 }
@@ -3700,7 +3742,6 @@ function useLazyLoadRange() {
   const loadingCache = (0, import_react15.useMemo)(() => {
     return new Map();
   }, [componentState.data]);
-  globalThis.loadingCache = loadingCache;
   const {
     lazyLoadBatchSize,
     notifyRenderRangeChange,
@@ -3708,13 +3749,13 @@ function useLazyLoadRange() {
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = (0, import_react15.useRef)(null);
-  const loadRange = (param, cache = loadingCache) => {
+  const loadRange = (renderRange, cache = loadingCache) => {
     const componentState2 = getComponentState();
-    param = param || latestRenderRangeRef.current;
-    if (!param) {
+    renderRange = renderRange || latestRenderRangeRef.current;
+    if (!renderRange) {
       return;
     }
-    const { renderStartIndex: startIndex, renderEndIndex: endIndex } = param;
+    const { renderStartIndex: startIndex, renderEndIndex: endIndex } = renderRange;
     if (!lazyLoadBatchSize || lazyLoadBatchSize <= 0) {
       return;
     }
@@ -3729,9 +3770,9 @@ function useLazyLoadRange() {
   const debouncedLoadRange = (0, import_react15.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
   (0, import_react15.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
-      return notifyRenderRangeChange.onChange((param) => {
-        latestRenderRangeRef.current = param;
-        loadRange(param, loadingCache);
+      return notifyRenderRangeChange.onChange((renderRange) => {
+        latestRenderRangeRef.current = renderRange;
+        loadRange(renderRange, loadingCache);
       });
     }
     return;
@@ -4142,7 +4183,7 @@ function getInterceptActions() {
     },
     cursorId: (cursorId, { actions, state }) => {
       const dataParams = buildDataSourceDataParams(state, {
-        cursorId
+        __cursorId: cursorId
       });
       actions.dataParams = dataParams;
     },
@@ -4167,7 +4208,7 @@ function getInterceptActions() {
 
 // src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
 function prepareColumn(column) {
-  const { pivotByAtIndex: pivotByForColumn } = column;
+  const { pivotByAtIndex: pivotByForColumn, pivotAggregator } = column;
   if (pivotByForColumn == null ? void 0 : pivotByForColumn.column) {
     if (typeof pivotByForColumn.column === "function") {
       Object.assign(column, pivotByForColumn.column({ column }));
@@ -4175,6 +4216,13 @@ function prepareColumn(column) {
       Object.assign(column, pivotByForColumn.column);
     }
   }
+  if (pivotAggregator == null ? void 0 : pivotAggregator.pivotColumn) {
+    if (typeof pivotAggregator.pivotColumn === "function") {
+      Object.assign(column, pivotAggregator.pivotColumn({ column }));
+    } else {
+      Object.assign(column, pivotAggregator.pivotColumn);
+    }
+  }
   return column;
 }
 function prepareColumnGroup(columnGroup) {
@@ -4305,7 +4353,7 @@ function getPivotColumnsAndColumnGroups({
       next == null ? void 0 : next();
     }
   });
-  if (columns.size === 1) {
+  if (!pivotLength) {
     aggregationReducers.forEach((reducer, index) => {
       columns.set(`total:${reducer.id}`, prepareColumn({
         header: `${reducer.name || reducer.id} total`,
@@ -4837,7 +4885,7 @@ function getColumnsWhenGrouping(params) {
       }, toggleGroupRow, groupColumn);
       computedColumns.set(generatedGroupColumn.id || `group-by-${groupByForColumn.field}`, generatedGroupColumn);
     });
-  } else if (groupRenderStrategy === "single-column") {
+  } else if (groupRenderStrategy === "single-column" && groupBy.length) {
     const singleGroupColumn = getSingleGroupColumn({
       groupCount: groupBy.length,
       groupBy,
@@ -4847,7 +4895,14 @@ function getColumnsWhenGrouping(params) {
     computedColumns.set(singleGroupColumn.id || "group-by", singleGroupColumn);
   }
   if (pivotColumns) {
+    const columnsByField = {};
+    columns.forEach((col) => {
+      if (col.field) {
+        columnsByField[col.field] = col;
+      }
+    });
     pivotColumns.forEach((col, key) => {
+      var _a, _b;
       if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
         return;
       }
@@ -4863,6 +4918,10 @@ function getColumnsWhenGrouping(params) {
           column = __spreadValues(__spreadValues({}, column), pivotColumn);
         }
       }
+      if (column.inheritFromColumn !== false) {
+        const colToInheritFrom = typeof column.inheritFromColumn === "string" ? columns.get(column.inheritFromColumn) : ((_a = column.pivotAggregator) == null ? void 0 : _a.field) ? columnsByField[(_b = column.pivotAggregator) == null ? void 0 : _b.field] : void 0;
+        column = __spreadValues(__spreadValues({}, colToInheritFrom), column);
+      }
       if (!column.render && column.renderValue) {
         column.render = (renderOptions) => {
           return column.renderValue(renderOptions);
@@ -7227,8 +7286,8 @@ function PinnedRowsContainer(props) {
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
+  const dataArray = getData();
   const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
-    const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
     const rowProps = __spreadValues({
@@ -7245,7 +7304,7 @@ function useRenderPinnedRow(params) {
       columns
     }, rowParams);
     return /* @__PURE__ */ React30.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
-  }, [columnsWidth, columns, verticalBrain]);
+  }, [columnsWidth, columns, verticalBrain, dataArray]);
   return renderPinnedRow;
 }
 function usePinnedRenderingForSide(side, params) {
@@ -7283,6 +7342,7 @@ function usePinnedRenderingForSide(side, params) {
   const renderRowPinned = useRenderPinnedRow({
     getData,
     getState,
+    repaintId,
     toggleGroupRow,
     rowSpan,
     verticalBrain: verticalVirtualBrain,
@@ -7428,7 +7488,7 @@ function useListRendering(param) {
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
   const repaintIdRef = (0, import_react40.useRef)(0);
-  if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
+  if (prevDataSourceTimestamp !== dataSourceState.updatedAt || !shallowEqualObjects(prevComputed, computed)) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
@@ -7768,7 +7828,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react42.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.11"
+      version: "0.2.14"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.2.11",
+  "version": "0.2.14",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -14,5 +14,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1646691757916
+  "publishedAt": 1647350101044
 }