@infinite-table/infinite-react 0.2.11 → 0.2.14

package/index.esm.js

@@ -616,6 +616,20 @@ var require_vanilla_extract_recipes_createRuntimeFn_cjs = __commonJS({
   }
 });
 
+// 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
 import {
   StrictMode,
@@ -1460,7 +1474,7 @@ var useInfiniteTable = () => {
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
 import { useMemo as useMemo2 } from "react";
 
-// src/components/flexbox/index.tsx
+// src/components/flexbox/index.ts
 var computeFlex = (params) => {
   const {
     availableSize,
@@ -1731,7 +1745,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,
@@ -2100,6 +2113,7 @@ var useComputedVisibleColumns = ({
     pinnedEndMaxWidth,
     pinnedStartMaxWidth,
     columnSizing,
+    columnTypes,
     columnPinning,
     columnsRenderId,
     pinningRenderId
@@ -2130,7 +2144,7 @@ var sortAscending = (a, b) => a - b;
 // src/components/InfiniteTable/hooks/useComputed.ts
 import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo6, useState as useState5 } from "react";
 
-// src/components/hooks/useComponentState.tsx
+// src/components/hooks/useComponentState/index.tsx
 import {
   createElement as createElement2,
   memo,
@@ -2203,7 +2217,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`;
@@ -2833,6 +2847,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));
     };
@@ -2844,13 +2859,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);
@@ -2858,7 +2879,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) => {
@@ -2877,7 +2904,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];
@@ -2903,7 +2930,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];
@@ -2938,10 +2965,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;
@@ -2994,7 +3022,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];
@@ -3018,7 +3046,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) => {
@@ -3034,7 +3062,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;
   }
@@ -3120,7 +3153,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)) {
@@ -3144,7 +3177,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;
@@ -3166,9 +3199,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,
@@ -3180,7 +3215,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();
   });
@@ -3196,6 +3233,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,
@@ -3210,6 +3278,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++) {
@@ -3226,38 +3304,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);
@@ -3476,20 +3526,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);
@@ -3515,7 +3551,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) {
@@ -3546,7 +3582,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;
@@ -3612,10 +3648,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 {
@@ -3701,7 +3741,8 @@ function useLoadData() {
     const componentState2 = getComponentState();
     if (initialRef.current) {
       initialRef.current = false;
-      actions.dataParams = buildDataSourceDataParams(componentState2);
+      const dataParams = buildDataSourceDataParams(componentState2);
+      actions.dataParams = dataParams;
     }
   }, depsObject);
 }
@@ -3714,7 +3755,6 @@ function useLazyLoadRange() {
   const loadingCache = useMemo4(() => {
     return new Map();
   }, [componentState.data]);
-  globalThis.loadingCache = loadingCache;
   const {
     lazyLoadBatchSize,
     notifyRenderRangeChange,
@@ -3722,13 +3762,13 @@ function useLazyLoadRange() {
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = useRef6(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;
     }
@@ -3743,9 +3783,9 @@ function useLazyLoadRange() {
   const debouncedLoadRange = useMemo4(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
   useEffect8(() => {
     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;
@@ -4156,7 +4196,7 @@ function getInterceptActions() {
     },
     cursorId: (cursorId, { actions, state }) => {
       const dataParams = buildDataSourceDataParams(state, {
-        cursorId
+        __cursorId: cursorId
       });
       actions.dataParams = dataParams;
     },
@@ -4181,7 +4221,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 }));
@@ -4189,6 +4229,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) {
@@ -4319,7 +4366,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`,
@@ -4851,7 +4898,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,
@@ -4861,7 +4908,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;
       }
@@ -4877,6 +4931,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);
@@ -7315,8 +7373,8 @@ function PinnedRowsContainer(props) {
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
+  const dataArray = getData();
   const renderPinnedRow = useCallback15((rowParams) => {
-    const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
     const rowProps = __spreadValues({
@@ -7333,7 +7391,7 @@ function useRenderPinnedRow(params) {
       columns
     }, rowParams);
     return /* @__PURE__ */ createElement28(TableRowUnvirtualized, __spreadValues({}, rowProps));
-  }, [columnsWidth, columns, verticalBrain]);
+  }, [columnsWidth, columns, verticalBrain, dataArray]);
   return renderPinnedRow;
 }
 function usePinnedRenderingForSide(side, params) {
@@ -7371,6 +7429,7 @@ function usePinnedRenderingForSide(side, params) {
   const renderRowPinned = useRenderPinnedRow({
     getData,
     getState,
+    repaintId,
     toggleGroupRow,
     rowSpan,
     verticalBrain: verticalVirtualBrain,
@@ -7516,7 +7575,7 @@ function useListRendering(param) {
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
   const repaintIdRef = useRef17(0);
-  if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
+  if (prevDataSourceTimestamp !== dataSourceState.updatedAt || !shallowEqualObjects(prevComputed, computed)) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
@@ -7861,7 +7920,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.11"
+      version: "0.2.14"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -8350,6 +8409,7 @@ export {
   InfiniteTable,
   InfiniteTableClassName,
   InfiniteTableComponent,
+  debounce,
   flatten,
   getComponentStateRoot,
   group,