@infinite-table/infinite-react 4.3.4 → 4.3.6

package/index.dev.mjs

@@ -6913,6 +6913,7 @@ function reorderColumnsOnDrag(params) {
     infiniteDOMNode,
     brain,
     dragColumnHeaderTargetRect,
+    draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
     api: imperativeApi
@@ -6941,8 +6942,9 @@ function reorderColumnsOnDrag(params) {
     const scrollLeft2 = brain.getScrollPosition().scrollLeft;
     return col.computedOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
   }
-  const getBreakPoints = (columns) => {
-    const breakpoints = [];
+  const getBreakPoints = (columns, options) => {
+    const { restrictToParentGroup, dragColumn: dragColumn2 } = options;
+    let breakpoints = [];
     columns.forEach((c) => {
       const b = {
         columnId: c.id,
@@ -6956,6 +6958,26 @@ function reorderColumnsOnDrag(params) {
         breakpoints.push(b);
       }
     });
+    if (restrictToParentGroup) {
+      let checkAllowedColumnsInDirection2 = function(colIndex, dir2, disallowedTargets2) {
+        const col = columns[colIndex];
+        if (!col) {
+          return;
+        }
+        if (col.columnGroup !== dragColumn2.columnGroup) {
+          disallowedTargets2.add(col.id);
+        }
+        checkAllowedColumnsInDirection2(colIndex + dir2, dir2, disallowedTargets2);
+      };
+      var checkAllowedColumnsInDirection = checkAllowedColumnsInDirection2;
+      const dragColIndex = dragColumn2.computedVisibleIndex;
+      const disallowedTargets = /* @__PURE__ */ new Set();
+      checkAllowedColumnsInDirection2(dragColIndex - 1, -1, disallowedTargets);
+      checkAllowedColumnsInDirection2(dragColIndex + 1, 1, disallowedTargets);
+      breakpoints = breakpoints.filter((b) => {
+        return !disallowedTargets.has(b.columnId);
+      });
+    }
     return breakpoints;
   };
   const initialPinnedStartCount = computedPinnedStartColumns.length;
@@ -7134,7 +7156,10 @@ function reorderColumnsOnDrag(params) {
           imperativeApi.scrollLeft = value;
         }
       });
-      const breakpoints = getBreakPoints(computedVisibleColumns);
+      const breakpoints = getBreakPoints(computedVisibleColumns, {
+        dragColumn,
+        restrictToParentGroup: draggableColumnsRestrictTo === "group"
+      });
       let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
       let idx = (0, import_binary_search2.default)(
         breakpoints,
@@ -7293,7 +7318,7 @@ var useColumnPointerEvents = ({
       if (((_a2 = e.target) == null ? void 0 : _a2.tagName) === "INPUT") {
         return;
       }
-      const { brain } = getState();
+      const { brain, draggableColumnsRestrictTo } = getState();
       const {
         computedVisibleColumns,
         computedVisibleColumnsMap,
@@ -7315,6 +7340,7 @@ var useColumnPointerEvents = ({
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        draggableColumnsRestrictTo,
         columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
         columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
@@ -9923,6 +9949,7 @@ function InfiniteTableHeaderFn(props) {
   } = props;
   const {
     computed,
+    getState,
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
@@ -9975,7 +10002,8 @@ function InfiniteTableHeaderFn(props) {
           computedWidth: colGroupItem.computedWidth,
           groupOffset: colGroupItem.groupOffset
         });
-        return /* @__PURE__ */ React46.createElement(
+        const visible = getState().columnGroupVisibility[colGroupItem.id] !== false;
+        return visible ? /* @__PURE__ */ React46.createElement(
           InfiniteTableHeaderGroup,
           {
             bodyBrain,
@@ -9986,7 +10014,7 @@ function InfiniteTableHeaderFn(props) {
             height,
             columnGroup: computedColumnGroup
           }
-        );
+        ) : null;
       }
       return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
@@ -14851,136 +14879,6 @@ function useDataSourceInternal(props) {
   };
 }
 
-// src/utils/FixedSizeMap.ts
-var _FixedSizeMap = class {
-  constructor(clone, size) {
-    this.keysInOrder = [];
-    if (typeof clone === "number") {
-      this.maxSize = clone;
-      this.currentMap = /* @__PURE__ */ new Map();
-    } else {
-      this.maxSize = size != null ? size : _FixedSizeMap.DEFAULT_SIZE;
-      if (clone) {
-        const arr = Array.from(clone);
-        if (this.maxSize < arr.length) {
-          arr.slice(arr.length - this.maxSize);
-        }
-        this.currentMap = /* @__PURE__ */ new Map();
-        arr.forEach(([k, v]) => {
-          this.set(k, v);
-        });
-      } else {
-        this.currentMap = /* @__PURE__ */ new Map();
-      }
-    }
-  }
-  values() {
-    return this.currentMap.values();
-  }
-  get size() {
-    return this.currentMap.size;
-  }
-  delete(key) {
-    if (this.currentMap.has(key)) {
-      this.currentMap.delete(key);
-      this.keysInOrder = this.keysInOrder.filter((k) => k !== key);
-      return true;
-    }
-    return false;
-  }
-  has(key) {
-    return this.currentMap.has(key);
-  }
-  get(key) {
-    return this.currentMap.get(key);
-  }
-  set(key, el) {
-    if (this.has(key)) {
-      this.delete(key);
-    }
-    const canAddCount = this.maxSize - this.currentMap.size;
-    if (canAddCount <= 0) {
-      const [removedKey] = this.keysInOrder.splice(0, 1);
-      if (removedKey != void 0) {
-        this.currentMap.delete(removedKey);
-      }
-    }
-    this.keysInOrder.push(key);
-    this.currentMap.set(key, el);
-    return this;
-  }
-};
-var FixedSizeMap = _FixedSizeMap;
-FixedSizeMap.DEFAULT_SIZE = 10;
-
-// src/components/DataSource/RowDetailCache.ts
-var RowDetailNoCacheStorage = class {
-  add(_key, _value) {
-    return;
-  }
-  get(_key) {
-    return void 0;
-  }
-  delete(_key) {
-    return;
-  }
-  has(_key) {
-    return false;
-  }
-};
-var RowDetailFixedSizeCacheStorage = class {
-  constructor(maxSize) {
-    this.storage = new FixedSizeMap(maxSize);
-  }
-  add(key, value) {
-    this.storage.set(key, value);
-  }
-  get(key) {
-    return this.storage.get(key);
-  }
-  delete(key) {
-    this.storage.delete(key);
-  }
-  has(key) {
-    return this.storage.has(key);
-  }
-};
-var RowDetailFullCacheStorage = class {
-  constructor() {
-    this.storage = /* @__PURE__ */ new Map();
-  }
-  add(key, value) {
-    this.storage.set(key, value);
-  }
-  get(key) {
-    return this.storage.get(key);
-  }
-  delete(key) {
-    this.storage.delete(key);
-  }
-  has(key) {
-    return this.storage.has(key);
-  }
-};
-var RowDetailCache = class {
-  // public instanceIndex: number = 0;
-  constructor(cache) {
-    this.cacheStorage = cache === false ? new RowDetailNoCacheStorage() : cache === true ? new RowDetailFullCacheStorage() : typeof cache === "number" ? new RowDetailFixedSizeCacheStorage(cache) : new RowDetailFixedSizeCacheStorage(5);
-  }
-  add(key, value) {
-    this.cacheStorage.add(key, value);
-  }
-  get(key) {
-    return this.cacheStorage.get(key);
-  }
-  delete(key) {
-    this.cacheStorage.delete(key);
-  }
-  has(key) {
-    return this.cacheStorage.has(key);
-  }
-};
-
 // src/components/DataSource/BooleanCollectionState.ts
 var BooleanCollectionState = class {
   constructor(state) {
@@ -15178,6 +15076,136 @@ var RowDetailState = class extends BooleanCollectionState {
   }
 };
 
+// src/utils/FixedSizeMap.ts
+var _FixedSizeMap = class {
+  constructor(clone, size) {
+    this.keysInOrder = [];
+    if (typeof clone === "number") {
+      this.maxSize = clone;
+      this.currentMap = /* @__PURE__ */ new Map();
+    } else {
+      this.maxSize = size != null ? size : _FixedSizeMap.DEFAULT_SIZE;
+      if (clone) {
+        const arr = Array.from(clone);
+        if (this.maxSize < arr.length) {
+          arr.slice(arr.length - this.maxSize);
+        }
+        this.currentMap = /* @__PURE__ */ new Map();
+        arr.forEach(([k, v]) => {
+          this.set(k, v);
+        });
+      } else {
+        this.currentMap = /* @__PURE__ */ new Map();
+      }
+    }
+  }
+  values() {
+    return this.currentMap.values();
+  }
+  get size() {
+    return this.currentMap.size;
+  }
+  delete(key) {
+    if (this.currentMap.has(key)) {
+      this.currentMap.delete(key);
+      this.keysInOrder = this.keysInOrder.filter((k) => k !== key);
+      return true;
+    }
+    return false;
+  }
+  has(key) {
+    return this.currentMap.has(key);
+  }
+  get(key) {
+    return this.currentMap.get(key);
+  }
+  set(key, el) {
+    if (this.has(key)) {
+      this.delete(key);
+    }
+    const canAddCount = this.maxSize - this.currentMap.size;
+    if (canAddCount <= 0) {
+      const [removedKey] = this.keysInOrder.splice(0, 1);
+      if (removedKey != void 0) {
+        this.currentMap.delete(removedKey);
+      }
+    }
+    this.keysInOrder.push(key);
+    this.currentMap.set(key, el);
+    return this;
+  }
+};
+var FixedSizeMap = _FixedSizeMap;
+FixedSizeMap.DEFAULT_SIZE = 10;
+
+// src/components/DataSource/RowDetailCache.ts
+var RowDetailNoCacheStorage = class {
+  add(_key, _value) {
+    return;
+  }
+  get(_key) {
+    return void 0;
+  }
+  delete(_key) {
+    return;
+  }
+  has(_key) {
+    return false;
+  }
+};
+var RowDetailFixedSizeCacheStorage = class {
+  constructor(maxSize) {
+    this.storage = new FixedSizeMap(maxSize);
+  }
+  add(key, value) {
+    this.storage.set(key, value);
+  }
+  get(key) {
+    return this.storage.get(key);
+  }
+  delete(key) {
+    this.storage.delete(key);
+  }
+  has(key) {
+    return this.storage.has(key);
+  }
+};
+var RowDetailFullCacheStorage = class {
+  constructor() {
+    this.storage = /* @__PURE__ */ new Map();
+  }
+  add(key, value) {
+    this.storage.set(key, value);
+  }
+  get(key) {
+    return this.storage.get(key);
+  }
+  delete(key) {
+    this.storage.delete(key);
+  }
+  has(key) {
+    return this.storage.has(key);
+  }
+};
+var RowDetailCache = class {
+  // public instanceIndex: number = 0;
+  constructor(cache) {
+    this.cacheStorage = cache === false ? new RowDetailNoCacheStorage() : cache === true ? new RowDetailFullCacheStorage() : typeof cache === "number" ? new RowDetailFixedSizeCacheStorage(cache) : new RowDetailFixedSizeCacheStorage(5);
+  }
+  add(key, value) {
+    this.cacheStorage.add(key, value);
+  }
+  get(key) {
+    return this.cacheStorage.get(key);
+  }
+  delete(key) {
+    this.cacheStorage.delete(key);
+  }
+  has(key) {
+    return this.cacheStorage.has(key);
+  }
+};
+
 // src/components/DataSource/types.ts
 var DataSourceActionType = /* @__PURE__ */ ((DataSourceActionType2) => {
   DataSourceActionType2["INIT"] = "INIT";
@@ -17305,12 +17333,18 @@ var ScrollListener = class {
 };
 
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
-function computeColumnGroupsDepths(columnGroups) {
+function computeColumnGroupsDepths(columnGroups, columnGroupVisibility) {
   const map2 = /* @__PURE__ */ new Map();
+  function isVisible(colGroupId) {
+    return columnGroupVisibility[colGroupId] !== false;
+  }
   Object.keys(columnGroups).forEach((colGroupId) => {
     const colGroup = columnGroups[colGroupId];
     let parentGroupId = colGroup.columnGroup;
     let depth = 0;
+    if (!isVisible(colGroupId)) {
+      depth = -1;
+    }
     while (parentGroupId) {
       const parent = columnGroups[parentGroupId];
       if (!parent) {
@@ -17319,7 +17353,9 @@ function computeColumnGroupsDepths(columnGroups) {
         }
         break;
       }
-      depth++;
+      if (isVisible(parentGroupId)) {
+        depth++;
+      }
       parentGroupId = parent.columnGroup;
     }
     map2.set(colGroupId, depth);
@@ -17336,6 +17372,7 @@ function getRowDetailRendererFromComponent(RowDetail) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+var EMPTY_OBJECT = {};
 function createRenderer2(brain) {
   const renderer = new ReactHeadlessTableRenderer(brain);
   const onRenderUpdater = buildSubscriptionCallback();
@@ -17483,6 +17520,7 @@ var forwardProps4 = (_setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     columnDefaultFlex: 1,
+    draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
     columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
@@ -17521,7 +17559,8 @@ var forwardProps4 = (_setupState) => {
     rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: 1,
-    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
+    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : EMPTY_OBJECT,
+    columnGroupVisibility: (columnGroupVisibility) => columnGroupVisibility != null ? columnGroupVisibility : EMPTY_OBJECT,
     // TODO check if columnPinning works when the value for a pinned col is `true` instead of `"start"`
     columnSizing: (columnSizing) => columnSizing || {},
     columnTypes: (columnTypes) => columnTypes || {},
@@ -17602,7 +17641,10 @@ var mapPropsToState = (params) => {
   var _a, _b, _c, _d, _e;
   const { props, state, oldState, parentState } = params;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
-  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
+  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.columnGroups && state.columnGroupVisibility != (oldState == null ? void 0 : oldState.columnGroupVisibility) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(
+    computedColumnGroups,
+    state.columnGroupVisibility
+  ) : state.columnGroupsDepthsMap;
   const groupBy = parentState == null ? void 0 : parentState.groupBy;
   const groupRenderStrategy = getGroupRenderStrategy({
     groupRenderStrategy: props.groupRenderStrategy,
@@ -17657,7 +17699,11 @@ var mapPropsToState = (params) => {
     keyboardNavigation: (_c = props.keyboardNavigation) != null ? _c : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
     columnHeaderCssEllipsis: (_e = (_d = props.columnHeaderCssEllipsis) != null ? _d : props.columnCssEllipsis) != null ? _e : true,
     columnGroupsDepthsMap,
-    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
+    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? (
+      // was 0, but after implementing columnGroupVisibility
+      // it can be -1, to denote that no column group is visible
+      Math.max(...columnGroupsDepthsMap.values(), -1)
+    ) : state.columnGroupsMaxDepth,
     computedColumnGroups,
     rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
     rowDetailHeightCSSVar: typeof props.rowDetailHeight === "string" ? props.rowDetailHeight : "",
@@ -18583,7 +18629,11 @@ function useComputed() {
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
   const [multiRowSelector] = useState17(() => {
     const multiRowSelector2 = new MultiRowSelector({
-      getIdForIndex: (index) => getDataSourceState().dataArray[index].id
+      getIdForIndex: (index) => {
+        var _a2;
+        const dataItem = getDataSourceState().dataArray[index];
+        return (_a2 = dataItem == null ? void 0 : dataItem.id) != null ? _a2 : -1;
+      }
     });
     return multiRowSelector2;
   });
@@ -18815,7 +18865,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.4"
+      version: "4.3.6"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -22542,7 +22592,8 @@ function InfiniteTableBody() {
     components: components2,
     bodySize,
     activeCellIndex,
-    rowDetailRenderer
+    rowDetailRenderer,
+    showHoverRows
   } = componentState;
   const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
   const computed = getComputed();
@@ -22610,7 +22661,7 @@ function InfiniteTableBody() {
       activeCellRowHeight,
       renderCell,
       renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
-      cellHoverClassNames: HOVERED_CLASS_NAMES,
+      cellHoverClassNames: showHoverRows ? HOVERED_CLASS_NAMES : void 0,
       scrollerDOMRef
     }
   ), /* @__PURE__ */ React68.createElement(LoadMaskCmp, { visible: loading }, loadingText));