@infinite-table/infinite-react 0.2.6 → 0.2.9

package/index.js

@@ -198,11 +198,11 @@ var require_common = __commonJS({
         let enableOverride = null;
         let namespacesCache;
         let enabledCache;
-        function debug6(...args) {
-          if (!debug6.enabled) {
+        function debug7(...args) {
+          if (!debug7.enabled) {
             return;
           }
-          const self = debug6;
+          const self = debug7;
           const curr = Number(new Date());
           const ms = curr - (prevTime || curr);
           self.diff = ms;
@@ -232,12 +232,12 @@ var require_common = __commonJS({
           const logFn = self.log || createDebug.log;
           logFn.apply(self, args);
         }
-        debug6.namespace = namespace;
-        debug6.useColors = createDebug.useColors();
-        debug6.color = createDebug.selectColor(namespace);
-        debug6.extend = extend;
-        debug6.destroy = createDebug.destroy;
-        Object.defineProperty(debug6, "enabled", {
+        debug7.namespace = namespace;
+        debug7.useColors = createDebug.useColors();
+        debug7.color = createDebug.selectColor(namespace);
+        debug7.extend = extend;
+        debug7.destroy = createDebug.destroy;
+        Object.defineProperty(debug7, "enabled", {
           enumerable: true,
           configurable: false,
           get: () => {
@@ -255,9 +255,9 @@ var require_common = __commonJS({
           }
         });
         if (typeof createDebug.init === "function") {
-          createDebug.init(debug6);
+          createDebug.init(debug7);
         }
-        return debug6;
+        return debug7;
       }
       function extend(namespace, delimiter) {
         const newDebug = createDebug(this.namespace + (typeof delimiter === "undefined" ? ":" : delimiter) + namespace);
@@ -2843,6 +2843,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     id: `${groupKeys}`,
     collapsed,
     parents,
+    flatRowInfoList: [],
     collapsedChildrenCount: 0,
     collapsedGroupsCount: 0,
     indexInParentGroups: options.indexInParentGroups,
@@ -2905,9 +2906,14 @@ function enhancedFlatten(param) {
     }
     if (collapsed) {
       parents.forEach((parent) => {
+        parent.flatRowInfoList.push(enhancedGroupData);
         parent.collapsedChildrenCount += enhancedGroupData.groupCount;
         parent.collapsedGroupsCount += 1;
       });
+    } else {
+      parents.forEach((parent) => {
+        parent.flatRowInfoList.push(enhancedGroupData);
+      });
     }
     indexInParentGroups.push(indexInGroup);
     parents.push(enhancedGroupData);
@@ -2916,7 +2922,7 @@ function enhancedFlatten(param) {
         if (!pivot) {
           const startIndex = result.length;
           result.push(...items.map((item, index) => {
-            return {
+            const rowInfo = {
               id: item ? toPrimaryKey(item) : `${groupKeys}-${index}`,
               data: item,
               isGroupRow: false,
@@ -2930,6 +2936,10 @@ function enhancedFlatten(param) {
               groupNesting,
               groupCount: enhancedGroupData.groupCount
             };
+            parents.forEach((parent) => {
+              parent.flatRowInfoList.push(rowInfo);
+            });
+            return rowInfo;
           }));
         }
       } else {
@@ -4208,13 +4218,43 @@ function useHideColumns(groupByMap) {
     componentState: {
       columnTypes,
       computedColumns,
-      columnsWhenGrouping: generatedColumns,
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
   } = useComponentState();
+  const prevHideEmptyGroupColumns = usePrevious(hideEmptyGroupColumns);
   (0, import_react17.useEffect)(() => {
-    if (groupRenderStrategy !== "multi-column" || !hideEmptyGroupColumns) {
+    if (groupRenderStrategy !== "multi-column") {
+      return;
+    }
+    const currentState = getComponentState();
+    const computedGroupColumns = new Map();
+    computedColumns.forEach((column, colId) => {
+      if (typeof column.groupByField !== "string") {
+        return;
+      }
+      const { groupByField } = column;
+      const field = groupByField;
+      const groupInfoForColumn = groupByMap.get(field);
+      if (!groupInfoForColumn) {
+        return;
+      }
+      computedGroupColumns.set(colId, column);
+    });
+    if (!hideEmptyGroupColumns) {
+      if (prevHideEmptyGroupColumns) {
+        let updated2 = false;
+        const columnVisibility2 = __spreadValues({}, currentState.columnVisibility);
+        computedGroupColumns.forEach((_column, colId) => {
+          if (columnVisibility2[colId] === false) {
+            updated2 = true;
+            delete columnVisibility2[colId];
+          }
+        });
+        if (updated2) {
+          componentActions.columnVisibility = columnVisibility2;
+        }
+      }
       return;
     }
     const groupsLength = groupBy.length;
@@ -4227,23 +4267,24 @@ function useHideColumns(groupByMap) {
         break;
       }
     }
-    const currentState = getComponentState();
-    const { computedColumns: computedColumns2 } = currentState;
     let updated = false;
     const columnVisibility = __spreadValues({}, currentState.columnVisibility);
-    const cols = computedColumns2;
-    groupBy.forEach(({ field, column: groupColumn }, index) => {
-      const colId = (groupColumn == null ? void 0 : groupColumn.id) || `group-by-${field}`;
-      let col = cols.get(colId);
-      if (!col) {
-        return;
-      }
+    computedGroupColumns.forEach((column, colId) => {
+      const { groupByField } = column;
+      const field = groupByField;
+      const groupInfoForColumn = groupByMap.get(field);
+      const index = groupInfoForColumn.groupIndex;
       const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
-      updated = true;
       if (shouldBeHidden) {
-        columnVisibility[colId] = false;
+        if (columnVisibility[colId] !== false) {
+          updated = true;
+          columnVisibility[colId] = false;
+        }
       } else {
-        delete columnVisibility[colId];
+        if (columnVisibility.hasOwnProperty(colId)) {
+          updated = true;
+          delete columnVisibility[colId];
+        }
       }
     });
     if (updated) {
@@ -4252,9 +4293,10 @@ function useHideColumns(groupByMap) {
   }, [
     getDataSourceState,
     groupRenderStrategy,
-    generatedColumns,
     originalLazyGroupDataChangeDetect,
     groupBy,
+    groupByMap,
+    computedColumns,
     hideEmptyGroupColumns ? dataArray : null,
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
@@ -4434,6 +4476,31 @@ function useComputed() {
     columnSizing,
     columnTypes
   });
+  const rowSpan = (0, import_react18.useMemo)(() => {
+    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
+    return colsWithRowspan.length ? ({ itemIndex }) => {
+      let maxSpan = 1;
+      const dataArray = getDataSourceState().dataArray;
+      const rowInfo = dataArray[itemIndex];
+      const data = rowInfo.data;
+      colsWithRowspan.forEach((column) => {
+        if (!column.rowspan) {
+          return;
+        }
+        const span = column.rowspan({
+          column,
+          data,
+          dataArray,
+          rowInfo,
+          rowIndex: itemIndex
+        });
+        if (span > maxSpan) {
+          maxSpan = span;
+        }
+      });
+      return maxSpan;
+    } : void 0;
+  }, [computedVisibleColumns]);
   const unpinnedColumnWidths = computedUnpinnedColumns.map((c) => c.computedWidth);
   let sortedUnpinnedColumnWidths = [...unpinnedColumnWidths].sort(sortAscending);
   let unpinnedColumnRenderCount = 0;
@@ -4460,6 +4527,7 @@ function useComputed() {
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   return {
+    rowSpan,
     toggleGroupRow,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
@@ -6064,7 +6132,6 @@ function InfiniteTableColumnCellFn(props) {
       dataArray: getData(),
       column,
       rowInfo,
-      groupRowInfo,
       rowIndex,
       data: rowInfo.data
     });
@@ -6112,7 +6179,8 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     showHoverRows = false,
     rowIndex,
     domRef: domRefFromProps,
-    rowInfo
+    rowInfo,
+    rowSpan
   } = props;
   const domRef = (0, import_react31.useRef)(null);
   const rowDOMRef = (0, import_react31.useCallback)((node) => {
@@ -6132,7 +6200,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
   if (rowStyle) {
     style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
   }
-  if (inlineGroupRoot) {
+  if (inlineGroupRoot || rowSpan) {
     style = style || {};
     style.zIndex = 2e6 - rowInfo.indexInAll;
   }
@@ -6316,6 +6384,7 @@ function useUnpinnedRendering(params) {
     computedPinnedStartWidth,
     computedPinnedEndWidth,
     computedUnpinnedColumns,
+    rowSpan,
     getState
   } = params;
   const { virtualizeColumns } = getState();
@@ -6329,6 +6398,7 @@ function useUnpinnedRendering(params) {
       showZebraRows,
       showHoverRows,
       getData,
+      rowSpan,
       toggleGroupRow,
       virtualizeColumns: shouldVirtualizeColumns,
       brain: null,
@@ -6345,6 +6415,7 @@ function useUnpinnedRendering(params) {
   }, [
     repaintId,
     rowHeight,
+    rowSpan,
     computedUnpinnedColumns,
     computedUnpinnedColumnsWidth,
     shouldVirtualizeColumns,
@@ -6667,7 +6738,7 @@ function PinnedRowsContainer(props) {
   return /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
-  const { getData, getState, columnsWidth, columns, verticalBrain } = params;
+  const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
   const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
     const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
@@ -6681,6 +6752,7 @@ function useRenderPinnedRow(params) {
       virtualizeColumns: false,
       verticalBrain,
       brain: null,
+      rowSpan,
       rowWidth: columnsWidth,
       columns
     }, rowParams);
@@ -6705,6 +6777,7 @@ function usePinnedRenderingForSide(side, params) {
     computedPinnedStartOverflow,
     pinnedStartScrollListener,
     pinnedEndScrollListener,
+    rowSpan,
     repaintId,
     toggleGroupRow,
     scrollbars: {
@@ -6723,6 +6796,7 @@ function usePinnedRenderingForSide(side, params) {
     getData,
     getState,
     toggleGroupRow,
+    rowSpan,
     verticalBrain: verticalVirtualBrain,
     columns,
     columnsWidth
@@ -7086,7 +7160,7 @@ var VirtualBrain = class extends Logger {
         this.computeCacheFor(lastSizeIndex);
         _prev = lastOffset;
         lastOffset = this.itemOffsetCache[lastSizeIndex];
-        if (_prev === lastOffset) {
+        if (_prev === lastOffset && _prev != 0) {
           return count - 1;
         }
       }
@@ -7230,11 +7304,12 @@ var VirtualBrain = class extends Logger {
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
 var import_react39 = __toModule(require("react"));
+var debug5 = dbg("useColumnSizeFn");
 function useColumnSizeFn(computedUnpinnedColumns) {
   const columnSize = (0, import_react39.useCallback)((index) => {
     const column = computedUnpinnedColumns[index];
     if (!column) {
-      console.log("cannot find column at index", index, computedUnpinnedColumns);
+      debug5("cannot find column at index", index, computedUnpinnedColumns);
     }
     return column ? column.computedWidth : 0;
   }, [computedUnpinnedColumns]);
@@ -7278,6 +7353,10 @@ function useYourBrain(param) {
   }, []);
   horizontalVirtualBrain.update(computedUnpinnedColumns.length, columnSize);
   verticalVirtualBrain.update(dataArray.length, rowHeight, rowSpan);
+  if (true) {
+    globalThis.verticalVirtualBrain = verticalVirtualBrain;
+    globalThis.horizontalVirtualBrain = horizontalVirtualBrain;
+  }
   (0, import_react40.useEffect)(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
@@ -7309,7 +7388,7 @@ function useListRendering(param) {
     computedUnpinnedColumnsWidth,
     computedPinnedStartOverflow,
     computedPinnedEndOverflow,
-    computedVisibleColumns,
+    rowSpan,
     toggleGroupRow
   } = computed;
   const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
@@ -7328,32 +7407,6 @@ function useListRendering(param) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
-  const rowSpan = (0, import_react41.useMemo)(() => {
-    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
-    return colsWithRowspan.length ? ({ itemIndex }) => {
-      let maxSpan = 1;
-      const dataArray2 = getData();
-      const rowInfo = dataArray2[itemIndex];
-      const data = rowInfo.data;
-      colsWithRowspan.forEach((column) => {
-        if (!column.rowspan) {
-          return;
-        }
-        const span = column.rowspan({
-          column,
-          data,
-          dataArray: dataArray2,
-          groupRowInfo: null,
-          rowInfo,
-          rowIndex: itemIndex
-        });
-        if (span > maxSpan) {
-          maxSpan = span;
-        }
-      });
-      return maxSpan;
-    } : void 0;
-  }, [computedVisibleColumns]);
   const { horizontalVirtualBrain, verticalVirtualBrain } = useYourBrain({
     computedPinnedStartWidth: computed.computedPinnedStartWidth,
     computedPinnedEndWidth: computed.computedPinnedEndWidth,
@@ -7414,7 +7467,8 @@ function useListRendering(param) {
     rowHeight,
     verticalVirtualBrain,
     pinnedStartScrollListener,
-    pinnedEndScrollListener
+    pinnedEndScrollListener,
+    rowSpan
   };
   const centerRenderingParams = __spreadProps(__spreadValues({}, pinnedRenderingParams), {
     columnShifts,
@@ -7670,17 +7724,25 @@ var decode = (licenseKey) => {
 };
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var SANDBOX_REGEX = /(https):\/\/\d+\-\d+\-\d\-(sandpack\.codesandbox\.io)/g;
+var SANDPACK_REGEX = /(https):\/\/\d+\-\d+\-\d+\-(sandpack\.codesandbox\.io)/g;
+var SANDBOX_REGEX = /(https):\/\/\S+(\.csb\.app)/g;
 var origin = typeof window !== "undefined" ? window.location.origin : "";
-var [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
-var isInsideSandbox = protocol === "https" && sandboxUrl === "sandpack.codesandbox.io";
+var isInsideSandpack = () => {
+  const [_fullUrl, protocol, sandpackUrl] = Array.from(SANDPACK_REGEX.exec(origin) || []);
+  return protocol === "https" && sandpackUrl === "sandpack.codesandbox.io";
+};
+var isInsideSandbox = () => {
+  const [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
+  return protocol === "https" && sandboxUrl === ".csb.app";
+};
+var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.6"
+      version: "0.2.9"
     });
-    if (!licenseKey && !valid2 && isInsideSandbox) {
+    if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
     }
     return valid2;
@@ -7692,7 +7754,7 @@ var useLicense = (licenseKey = "") => {
 var React32 = __toModule(require("react"));
 var import_react44 = __toModule(require("react"));
 var error = err("CSSVariableWatch");
-var debug5 = dbg("CSSVariableWatch");
+var debug6 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
   position: "absolute",
   pointerEvents: "none",
@@ -7715,7 +7777,7 @@ var useCSSVariableWatch = (params) => {
     const value = params.ref.current.getBoundingClientRect().height;
     if (value) {
       lastValueRef.current = value;
-      debug5(`Variable ${params.varName} found and equals ${value}.`);
+      debug6(`Variable ${params.varName} found and equals ${value}.`);
       params.onChange(value);
     } else {
       error(`Specified variable ${params.varName} not found or does not have a numeric value.`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "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": 1644931690394
+  "publishedAt": 1646311895842
 }