@infinite-table/infinite-react 3.2.1 → 3.2.3

package/index.dev.mjs

@@ -1367,7 +1367,7 @@ function stripVar(cssVariableWithVarString) {
 
 // src/components/InfiniteTable/theme.css.ts
 var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__1slvgu90)", y: "var(--y__1slvgu91)", activeCellRowOffset: "var(--activeCellRowOffset__1slvgu92)", activeCellRowHeight: "var(--activeCellRowHeight__1slvgu93)", activeCellOffsetX: "var(--activeCellOffsetX__1slvgu94)", activeCellOffsetY: "var(--activeCellOffsetY__1slvgu95)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__1slvgu96)", activeCellColWidth: "var(--activeCellColWidth__1slvgu97)", activeCellColOffset: "var(--activeCellColOffset__1slvgu98)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__1slvgu99)", columnWidthAtIndex: "var(--columnWidthAtIndex__1slvgu9a)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__1slvgu9b)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__1slvgu9c)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__1slvgu9d)", pinnedStartWidth: "var(--pinnedStartWidth__1slvgu9e)", pinnedEndWidth: "var(--pinnedEndWidth__1slvgu9f)", pinnedEndOffset: "var(--pinnedEndOffset__1slvgu9g)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__1slvgu9h)", baseZIndexForCells: "var(--baseZIndexForCells__1slvgu9i)", bodyWidth: "var(--bodyWidth__1slvgu9j)", bodyHeight: "var(--bodyHeight__1slvgu9k)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__1slvgu9l)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__1slvgu9m)", scrollLeft: "var(--scrollLeft__1slvgu9n)", scrollTop: "var(--scrollTop__1slvgu9o)" };
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetails: { background: "var(--infinite-rowdetails-background)", padding: "var(--infinite-rowdetails-padding)", gridHeight: "var(--infinite-rowdetails-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetails-background)", padding: "var(--infinite-rowdetails-padding)", gridHeight: "var(--infinite-rowdetails-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 var columnHeaderHeightName = "column-header-height";
 
 // src/utils/selectParent.ts
@@ -7838,10 +7838,10 @@ function getCellContext(context) {
   const {
     activeRowIndex,
     keyboardNavigation,
-    isRowDetailsEnabled
+    isRowDetailEnabled: isRowDetailsEnabled
   } = getState();
   const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
-  const rowDetailState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : api.rowDetailsApi.isRowDetailsExpanded(rowInfo.id) ? "expanded" : "collapsed";
+  const rowDetailState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : api.rowDetailApi.isRowDetailExpanded(rowInfo.id) ? "expanded" : "collapsed";
   const {
     formattedValue: value,
     formattedValueContext: { rawValue }
@@ -7978,10 +7978,10 @@ function getColumnRenderParam(options) {
     groupByColumn,
     selectionMode,
     api: imperativeApi,
-    toggleCurrentRowDetails: () => imperativeApi.rowDetailsApi.toggleRowDetails(rowInfo.id),
-    toggleRowDetails: imperativeApi.rowDetailsApi.toggleRowDetails,
-    expandRowDetails: imperativeApi.rowDetailsApi.expandRowDetails,
-    collapseRowDetails: imperativeApi.rowDetailsApi.collapseRowDetails,
+    toggleCurrentRowDetails: () => imperativeApi.rowDetailApi.toggleRowDetail(rowInfo.id),
+    toggleRowDetails: imperativeApi.rowDetailApi.toggleRowDetail,
+    expandRowDetails: imperativeApi.rowDetailApi.expandRowDetail,
+    collapseRowDetails: imperativeApi.rowDetailApi.collapseRowDetail,
     selectRow: imperativeApi.rowSelectionApi.selectRow,
     deselectRow: imperativeApi.rowSelectionApi.deselectRow,
     toggleRowSelection: imperativeApi.rowSelectionApi.toggleRowSelection,
@@ -8298,7 +8298,7 @@ function InfiniteTableColumnCellFn(props) {
     getData,
     cellStyle,
     cellClassName,
-    rowDetailState: rowDetailsState,
+    rowDetailState,
     width,
     column,
     onMouseLeave,
@@ -8344,7 +8344,7 @@ function InfiniteTableColumnCellFn(props) {
   const colRenderingParams = getColumnRenderingParams({
     column,
     rowInfo,
-    rowDetailState: rowDetailsState,
+    rowDetailState,
     columnsMap,
     visibleColumnsIds,
     fieldsToColumn,
@@ -8532,7 +8532,7 @@ function InfiniteTableColumnCellFn(props) {
       column,
       hidden,
       inEdit,
-      rowDetailsState,
+      rowDetailState,
       ...objectValuesExcept(renderParam, {
         renderBag: true,
         selectCell: true,
@@ -14688,8 +14688,8 @@ var _FixedSizeMap = class {
 var FixedSizeMap = _FixedSizeMap;
 FixedSizeMap.DEFAULT_SIZE = 10;
 
-// src/components/DataSource/RowDetailsCache.ts
-var RowDetailsNoCacheStorage = class {
+// src/components/DataSource/RowDetailCache.ts
+var RowDetailNoCacheStorage = class {
   add(_key, _value) {
     return;
   }
@@ -14703,7 +14703,7 @@ var RowDetailsNoCacheStorage = class {
     return false;
   }
 };
-var RowDetailsFixedSizeCacheStorage = class {
+var RowDetailFixedSizeCacheStorage = class {
   constructor(maxSize) {
     this.storage = new FixedSizeMap(maxSize);
   }
@@ -14720,7 +14720,7 @@ var RowDetailsFixedSizeCacheStorage = class {
     return this.storage.has(key);
   }
 };
-var RowDetailsFullCacheStorage = class {
+var RowDetailFullCacheStorage = class {
   constructor() {
     this.storage = /* @__PURE__ */ new Map();
   }
@@ -14737,10 +14737,10 @@ var RowDetailsFullCacheStorage = class {
     return this.storage.has(key);
   }
 };
-var RowDetailsCache = class {
+var RowDetailCache = class {
   // public instanceIndex: number = 0;
   constructor(cache) {
-    this.cacheStorage = cache === false ? new RowDetailsNoCacheStorage() : cache === true ? new RowDetailsFullCacheStorage() : typeof cache === "number" ? new RowDetailsFixedSizeCacheStorage(cache) : new RowDetailsFixedSizeCacheStorage(5);
+    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);
@@ -14756,6 +14756,203 @@ var RowDetailsCache = class {
   }
 };
 
+// src/components/DataSource/BooleanCollectionState.ts
+var BooleanCollectionState = class {
+  constructor(state) {
+    const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
+      //@ts-ignore
+      state.getState()
+    ) : state;
+    const positiveItems = this.getPositiveFromState(stateObject);
+    const negativeItems = this.getNegativeFromState(stateObject);
+    this.update({
+      negativeItems,
+      positiveItems
+    });
+  }
+  getInitialState() {
+    return this.initialState;
+  }
+  // protected getState(): BooleanCollectionStateObject<KeyType> {
+  //   return {
+  //     positiveItems: this.allPositive
+  //       ? true
+  //       : this.positiveMap?.topDownKeys() ?? [],
+  //     negativeItems: this.allNegative
+  //       ? true
+  //       : this.negativeMap?.topDownKeys() ?? [],
+  //   };
+  // }
+  destroy() {
+    var _a, _b;
+    (_a = this.positiveMap) == null ? void 0 : _a.clear();
+    (_b = this.negativeMap) == null ? void 0 : _b.clear();
+    delete this.positiveMap;
+    delete this.negativeMap;
+  }
+  update(state) {
+    const { positiveItems, negativeItems } = state;
+    this.allNegative = negativeItems === true;
+    this.allPositive = positiveItems === true;
+    if (this.allNegative && this.allPositive) {
+      throw `Cannot have both negativeItems and positiveItems be true!`;
+    }
+    if (negativeItems && negativeItems !== true) {
+      if (!this.negativeMap) {
+        this.negativeMap = /* @__PURE__ */ new Map();
+      }
+      this.negativeMap.clear();
+      for (let k of negativeItems) {
+        this.negativeMap.set(k, true);
+      }
+      if (this.positiveMap) {
+        this.positiveMap.clear();
+      }
+    }
+    if (positiveItems && positiveItems !== true) {
+      if (!this.positiveMap) {
+        this.positiveMap = /* @__PURE__ */ new Map();
+      }
+      this.positiveMap.clear();
+      for (let k of positiveItems) {
+        this.positiveMap.set(k, true);
+      }
+      if (this.negativeMap) {
+        this.negativeMap.clear();
+      }
+    }
+  }
+  isDefaultNegativeSelection() {
+    return this.allNegative;
+  }
+  isDefaultPositiveSelection() {
+    return this.allPositive;
+  }
+  areAllNegative() {
+    return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
+  }
+  areAllPositive() {
+    return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
+  }
+  makeAllNegative() {
+    this.update({
+      negativeItems: true,
+      positiveItems: []
+    });
+  }
+  makeAllPositive() {
+    this.update({
+      positiveItems: true,
+      negativeItems: []
+    });
+  }
+  isItemPositive(key) {
+    var _a, _b;
+    if (this.allPositive === true) {
+      if (this.allNegative === true) {
+        throw 'Cannot have both positiveItems and negativeItems be "true"';
+      }
+      return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
+    }
+    return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
+  }
+  isItemNegative(key) {
+    return !this.isItemPositive(key);
+  }
+  setItemValue(key, shouldMakePositive) {
+    var _a;
+    if (shouldMakePositive === this.isItemPositive(key)) {
+      return;
+    }
+    if (shouldMakePositive) {
+      if (this.allNegative === true) {
+        if (!this.positiveMap) {
+          throw `No positiveMap found when trying to set item ${key} be positive`;
+        }
+        this.positiveMap.set(key, true);
+      } else if (this.allPositive === true) {
+        if (!this.negativeMap) {
+          throw `No negativeMap found when trying to set item ${key} be positive`;
+        }
+        this.negativeMap.delete(key);
+      }
+    } else {
+      if (this.allPositive === true) {
+        if (!this.negativeMap) {
+          throw `No negativeMap found when trying to set item ${key} be negative`;
+        }
+        this.negativeMap.set(key, true);
+      } else if (this.allNegative === true) {
+        if (!this.positiveMap) {
+          throw `No positiveMap found when trying to set item ${key} be negative`;
+        }
+        (_a = this.positiveMap) == null ? void 0 : _a.delete(key);
+      }
+    }
+  }
+  makeItemNegative(key) {
+    this.setItemValue(key, false);
+  }
+  makeItemPositive(key) {
+    this.setItemValue(key, true);
+  }
+  toggleItem(key) {
+    this.setItemValue(key, !this.isItemPositive(key));
+  }
+};
+
+// src/components/DataSource/RowDetailState.ts
+var RowDetailState = class extends BooleanCollectionState {
+  constructor(state) {
+    super(state);
+    this.isRowDetailsExpanded = (key) => {
+      return !!this.isItemPositive(key);
+    };
+  }
+  getState() {
+    var _a, _b, _c, _d;
+    const expandedRows = this.allPositive ? true : [...(_b = (_a = this.positiveMap) == null ? void 0 : _a.keys()) != null ? _b : []];
+    const collapsedRows = this.allNegative ? true : [...(_d = (_c = this.negativeMap) == null ? void 0 : _c.keys()) != null ? _d : []];
+    return {
+      expandedRows,
+      collapsedRows
+    };
+  }
+  getPositiveFromState(state) {
+    return state.expandedRows;
+  }
+  getNegativeFromState(state) {
+    return state.collapsedRows;
+  }
+  areAllCollapsed() {
+    return this.areAllNegative();
+  }
+  areAllExpanded() {
+    return this.areAllPositive();
+  }
+  collapseAll() {
+    this.makeAllNegative();
+  }
+  expandAll() {
+    this.makeAllPositive();
+  }
+  isRowDetailsCollapsed(key) {
+    return !this.isRowDetailsExpanded(key);
+  }
+  setRowDetailsExpanded(key, shouldExpand) {
+    return this.setItemValue(key, shouldExpand);
+  }
+  collapseRowDetails(key) {
+    this.setRowDetailsExpanded(key, false);
+  }
+  expandRowDetails(key) {
+    this.setRowDetailsExpanded(key, true);
+  }
+  toggleRowDetails(key) {
+    this.toggleItem(key);
+  }
+};
+
 // src/components/DataSource/types.ts
 var DataSourceActionType = /* @__PURE__ */ ((DataSourceActionType2) => {
   DataSourceActionType2["INIT"] = "INIT";
@@ -15124,271 +15321,74 @@ function getCellSelectionApi(param) {
   return cellSelectionApi;
 }
 
-// src/components/DataSource/BooleanCollectionState.ts
-var BooleanCollectionState = class {
-  constructor(state) {
-    const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
-      //@ts-ignore
-      state.getState()
-    ) : state;
-    const positiveItems = this.getPositiveFromState(stateObject);
-    const negativeItems = this.getNegativeFromState(stateObject);
-    this.update({
-      negativeItems,
-      positiveItems
-    });
-  }
-  getInitialState() {
-    return this.initialState;
-  }
-  // protected getState(): BooleanCollectionStateObject<KeyType> {
-  //   return {
-  //     positiveItems: this.allPositive
-  //       ? true
-  //       : this.positiveMap?.topDownKeys() ?? [],
-  //     negativeItems: this.allNegative
-  //       ? true
-  //       : this.negativeMap?.topDownKeys() ?? [],
-  //   };
-  // }
-  destroy() {
-    var _a, _b;
-    (_a = this.positiveMap) == null ? void 0 : _a.clear();
-    (_b = this.negativeMap) == null ? void 0 : _b.clear();
-    delete this.positiveMap;
-    delete this.negativeMap;
-  }
-  update(state) {
-    const { positiveItems, negativeItems } = state;
-    this.allNegative = negativeItems === true;
-    this.allPositive = positiveItems === true;
-    if (this.allNegative && this.allPositive) {
-      throw `Cannot have both negativeItems and positiveItems be true!`;
-    }
-    if (negativeItems && negativeItems !== true) {
-      if (!this.negativeMap) {
-        this.negativeMap = /* @__PURE__ */ new Map();
-      }
-      this.negativeMap.clear();
-      for (let k of negativeItems) {
-        this.negativeMap.set(k, true);
-      }
-      if (this.positiveMap) {
-        this.positiveMap.clear();
-      }
-    }
-    if (positiveItems && positiveItems !== true) {
-      if (!this.positiveMap) {
-        this.positiveMap = /* @__PURE__ */ new Map();
-      }
-      this.positiveMap.clear();
-      for (let k of positiveItems) {
-        this.positiveMap.set(k, true);
-      }
-      if (this.negativeMap) {
-        this.negativeMap.clear();
-      }
-    }
-  }
-  isDefaultNegativeSelection() {
-    return this.allNegative;
-  }
-  isDefaultPositiveSelection() {
-    return this.allPositive;
-  }
-  areAllNegative() {
-    return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
-  }
-  areAllPositive() {
-    return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
-  }
-  makeAllNegative() {
-    this.update({
-      negativeItems: true,
-      positiveItems: []
-    });
-  }
-  makeAllPositive() {
-    this.update({
-      positiveItems: true,
-      negativeItems: []
-    });
-  }
-  isItemPositive(key) {
-    var _a, _b;
-    if (this.allPositive === true) {
-      if (this.allNegative === true) {
-        throw 'Cannot have both positiveItems and negativeItems be "true"';
-      }
-      return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
-    }
-    return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
-  }
-  isItemNegative(key) {
-    return !this.isItemPositive(key);
-  }
-  setItemValue(key, shouldMakePositive) {
-    var _a;
-    if (shouldMakePositive === this.isItemPositive(key)) {
-      return;
-    }
-    if (shouldMakePositive) {
-      if (this.allNegative === true) {
-        if (!this.positiveMap) {
-          throw `No positiveMap found when trying to set item ${key} be positive`;
-        }
-        this.positiveMap.set(key, true);
-      } else if (this.allPositive === true) {
-        if (!this.negativeMap) {
-          throw `No negativeMap found when trying to set item ${key} be positive`;
-        }
-        this.negativeMap.delete(key);
-      }
-    } else {
-      if (this.allPositive === true) {
-        if (!this.negativeMap) {
-          throw `No negativeMap found when trying to set item ${key} be negative`;
-        }
-        this.negativeMap.set(key, true);
-      } else if (this.allNegative === true) {
-        if (!this.positiveMap) {
-          throw `No positiveMap found when trying to set item ${key} be negative`;
-        }
-        (_a = this.positiveMap) == null ? void 0 : _a.delete(key);
-      }
-    }
-  }
-  makeItemNegative(key) {
-    this.setItemValue(key, false);
-  }
-  makeItemPositive(key) {
-    this.setItemValue(key, true);
-  }
-  toggleItem(key) {
-    this.setItemValue(key, !this.isItemPositive(key));
-  }
-};
-
-// src/components/DataSource/RowDetailsState.ts
-var RowDetailsState = class extends BooleanCollectionState {
-  constructor(state) {
-    super(state);
-    this.isRowDetailsExpanded = (key) => {
-      return !!this.isItemPositive(key);
-    };
-  }
-  getState() {
-    var _a, _b, _c, _d;
-    const expandedRows = this.allPositive ? true : [...(_b = (_a = this.positiveMap) == null ? void 0 : _a.keys()) != null ? _b : []];
-    const collapsedRows = this.allNegative ? true : [...(_d = (_c = this.negativeMap) == null ? void 0 : _c.keys()) != null ? _d : []];
-    return {
-      expandedRows,
-      collapsedRows
-    };
-  }
-  getPositiveFromState(state) {
-    return state.expandedRows;
-  }
-  getNegativeFromState(state) {
-    return state.collapsedRows;
-  }
-  areAllCollapsed() {
-    return this.areAllNegative();
-  }
-  areAllExpanded() {
-    return this.areAllPositive();
-  }
-  collapseAll() {
-    this.makeAllNegative();
-  }
-  expandAll() {
-    this.makeAllPositive();
-  }
-  isRowDetailsCollapsed(key) {
-    return !this.isRowDetailsExpanded(key);
-  }
-  setRowDetailsExpanded(key, shouldExpand) {
-    return this.setItemValue(key, shouldExpand);
-  }
-  collapseRowDetails(key) {
-    this.setRowDetailsExpanded(key, false);
-  }
-  expandRowDetails(key) {
-    this.setRowDetailsExpanded(key, true);
-  }
-  toggleRowDetails(key) {
-    this.toggleItem(key);
-  }
-};
-
-// src/components/InfiniteTable/api/getRowDetailsApi.ts
-function getRowDetailsApi(param) {
+// src/components/InfiniteTable/api/getRowDetailApi.ts
+function getRowDetailApi(param) {
   const {
     dataSourceApi,
     getState,
     actions
   } = param;
-  const rowDetailsApi = {
+  const rowDetailApi = {
     collapseAllDetails() {
-      actions.rowDetailsState = new RowDetailsState({
+      actions.rowDetailState = new RowDetailState({
         collapsedRows: true,
         expandedRows: []
       });
     },
     expandAllDetails() {
-      actions.rowDetailsState = new RowDetailsState({
+      actions.rowDetailState = new RowDetailState({
         expandedRows: true,
         collapsedRows: []
       });
     },
-    isRowDetailsCollapsed(pk) {
-      const isRowDetailsExpanded = getState().isRowDetailsExpanded;
-      if (!isRowDetailsExpanded) {
+    isRowDetailCollapsed(pk) {
+      const isRowDetailExpanded = getState().isRowDetailExpanded;
+      if (!isRowDetailExpanded) {
         return true;
       }
       const rowInfo = dataSourceApi.getRowInfoByPrimaryKey(pk);
       if (!rowInfo) {
         return true;
       }
-      const expanded = isRowDetailsExpanded(rowInfo);
+      const expanded = isRowDetailExpanded(rowInfo);
       return !expanded;
     },
-    isRowDetailsExpanded(pk) {
-      return !rowDetailsApi.isRowDetailsCollapsed(pk);
+    isRowDetailExpanded(pk) {
+      return !rowDetailApi.isRowDetailCollapsed(pk);
     },
-    collapseRowDetails(pk) {
-      const currentState = getState().rowDetailsState;
+    collapseRowDetail(pk) {
+      const currentState = getState().rowDetailState;
       if (!currentState) {
         console.error(
-          `Cannot collapse row details via rowDetailsState, as no props.rowDetailsState is provided.`
+          `Cannot collapse row details via rowDetailState, as no props.rowDetailState is provided.`
         );
         return;
       }
-      const state = new RowDetailsState(currentState);
+      const state = new RowDetailState(currentState);
       state.collapseRowDetails(pk);
-      actions.rowDetailsState = state;
+      actions.rowDetailState = state;
     },
-    expandRowDetails(pk) {
-      const currentState = getState().rowDetailsState;
+    expandRowDetail(pk) {
+      const currentState = getState().rowDetailState;
       if (!currentState) {
         console.error(
-          `Cannot expand row details via rowDetailsState, as no props.rowDetailsState is provided.`
+          `Cannot expand row details via rowDetailState, as no props.rowDetailState is provided.`
         );
         return;
       }
-      const state = new RowDetailsState(currentState);
+      const state = new RowDetailState(currentState);
       state.expandRowDetails(pk);
-      actions.rowDetailsState = state;
+      actions.rowDetailState = state;
     },
-    toggleRowDetails(pk) {
-      if (rowDetailsApi.isRowDetailsExpanded(pk)) {
-        rowDetailsApi.collapseRowDetails(pk);
+    toggleRowDetail(pk) {
+      if (rowDetailApi.isRowDetailExpanded(pk)) {
+        rowDetailApi.collapseRowDetail(pk);
       } else {
-        rowDetailsApi.expandRowDetails(pk);
+        rowDetailApi.expandRowDetail(pk);
       }
     }
   };
-  return rowDetailsApi;
+  return rowDetailApi;
 }
 
 // src/components/InfiniteTable/api/getImperativeApi.ts
@@ -15648,14 +15648,14 @@ var InfiniteTableApiImpl = class {
         return null;
       }
       const self = this;
-      const { isRowDetailsEnabled } = getState();
-      const rowDetailsState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : this.rowDetailsApi.isRowDetailsExpanded(rowInfo.id) ? "expanded" : "collapsed";
+      const { isRowDetailEnabled: isRowDetailsEnabled } = getState();
+      const rowDetailState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : this.rowDetailApi.isRowDetailExpanded(rowInfo.id) ? "expanded" : "collapsed";
       const valueContext = getFormattedValueContextForCell({
         column,
         rowInfo,
         columnsMap: computedColumnsMap,
         context: __spreadProps(__spreadValues({}, this.context), { api: self }),
-        rowDetailState: rowDetailsState
+        rowDetailState
       });
       return {
         value: valueContext.formattedValueContext.value,
@@ -15794,7 +15794,7 @@ var InfiniteTableApiImpl = class {
       dataSourceActions: context.dataSourceActions,
       getDataSourceState: context.getDataSourceState
     });
-    this.rowDetailsApi = getRowDetailsApi({
+    this.rowDetailApi = getRowDetailApi({
       getState: context.getState,
       actions: context.actions,
       dataSourceApi: context.dataSourceApi
@@ -16440,8 +16440,8 @@ function useYourBrain(param) {
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
 import * as React52 from "react";
 
-// src/components/InfiniteTable/components/rowDetails.css.ts
-var RowDetailsRecipe = createRuntimeFn({ defaultClassName: "rowDetails_RowDetailsRecipe__1qedcqn0", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
+// src/components/InfiniteTable/components/rowDetail.css.ts
+var RowDetailRecipe = createRuntimeFn({ defaultClassName: "rowDetail_RowDetailRecipe__evqes20", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRegisterDetail.ts
 import { useMemo as useMemo8, useRef as useRef23 } from "react";
@@ -16576,7 +16576,7 @@ function InfiniteTableDetailRowFn(props) {
     "div",
     {
       ref: domRef,
-      className: join(InfiniteTableRowDetailsClassName, RowDetailsRecipe({})),
+      className: join(InfiniteTableRowDetailsClassName, RowDetailRecipe({})),
       style: {
         position: "absolute",
         top: `${detailOffset}px`,
@@ -16624,12 +16624,12 @@ function useCellRendering(param) {
     brain,
     showZebraRows,
     rowDetailRenderer,
-    isRowDetailsExpanded,
-    isRowDetailsEnabled,
+    isRowDetailExpanded: isRowDetailsExpanded,
+    isRowDetailEnabled: isRowDetailsEnabled,
     cellClassName,
     cellStyle,
     rowStyle,
-    rowDetailsCache,
+    rowDetailCache: rowDetailsCache,
     rowClassName,
     onScrollToTop,
     onScrollToBottom,
@@ -17380,9 +17380,9 @@ var forwardProps4 = (setupState) => {
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
-    rowDetailsCache: (rowDetailsCache) => {
-      return new RowDetailsCache(
-        rowDetailsCache
+    rowDetailCache: (rowDetailCache) => {
+      return new RowDetailCache(
+        rowDetailCache
       );
     },
     hideColumnWhenGrouped: (hideColumnWhenGrouped) => hideColumnWhenGrouped != null ? hideColumnWhenGrouped : false,
@@ -17411,7 +17411,7 @@ var forwardProps4 = (setupState) => {
     showHoverRows: (showHoverRows) => showHoverRows != null ? showHoverRows : true,
     virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
     rowHeight: (rowHeight) => typeof rowHeight === "number" || typeof rowHeight === "function" ? rowHeight : 0,
-    rowDetailHeight: (rowHeight) => typeof rowHeight === "number" || typeof rowHeight === "function" ? rowHeight : 0,
+    rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
     columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
@@ -17487,34 +17487,34 @@ var mapPropsToState = (params) => {
     groupBy,
     groupColumn: props.groupColumn
   });
-  let rowDetailsState = void 0;
+  let rowDetailState = void 0;
   if (props.rowDetailRenderer) {
-    rowDetailsState = props.rowDetailsState || state.rowDetailsState || props.defaultRowDetailsState;
-    if (rowDetailsState && !(rowDetailsState instanceof RowDetailsState)) {
-      rowDetailsState = new RowDetailsState(rowDetailsState);
+    rowDetailState = props.rowDetailState || state.rowDetailState || props.defaultRowDetailState;
+    if (rowDetailState && !(rowDetailState instanceof RowDetailState)) {
+      rowDetailState = new RowDetailState(rowDetailState);
     }
-    rowDetailsState = rowDetailsState || new RowDetailsState({ expandedRows: [], collapsedRows: true });
+    rowDetailState = rowDetailState || new RowDetailState({ expandedRows: [], collapsedRows: true });
   }
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
-  let isRowDetailsExpanded = rowDetailsState ? props.isRowDetailsExpanded : void 0;
-  if (!isRowDetailsExpanded && rowDetailsState) {
-    isRowDetailsExpanded = weakMap.get(rowDetailsState);
-    if (!isRowDetailsExpanded) {
-      isRowDetailsExpanded = (rowInfo) => {
-        return rowDetailsState.isRowDetailsExpanded(
+  let isRowDetailExpanded = rowDetailState ? props.isRowDetailExpanded : void 0;
+  if (!isRowDetailExpanded && rowDetailState) {
+    isRowDetailExpanded = weakMap.get(rowDetailState);
+    if (!isRowDetailExpanded) {
+      isRowDetailExpanded = (rowInfo) => {
+        return rowDetailState.isRowDetailsExpanded(
           rowInfo.id
         );
       };
-      if (typeof rowDetailsState === "object") {
-        weakMap.set(rowDetailsState, isRowDetailsExpanded);
+      if (typeof rowDetailState === "object") {
+        weakMap.set(rowDetailState, isRowDetailExpanded);
       }
     }
   }
-  const isRowDetailsEnabled = !props.rowDetailRenderer ? false : props.isRowDetailsEnabled || true;
+  const isRowDetailEnabled = !props.rowDetailRenderer ? false : props.isRowDetailEnabled || true;
   return {
-    rowDetailsState,
-    isRowDetailsExpanded,
-    isRowDetailsEnabled,
+    rowDetailState,
+    isRowDetailExpanded,
+    isRowDetailEnabled,
     showColumnFilters: (_a = props.showColumnFilters) != null ? _a : !!parentState.filterValue,
     controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
@@ -18385,8 +18385,8 @@ function useComputed() {
     columnTypes,
     rowHeight,
     rowDetailHeight,
-    isRowDetailsExpanded,
-    isRowDetailsEnabled,
+    isRowDetailExpanded: isRowDetailsExpanded,
+    isRowDetailEnabled: isRowDetailsEnabled,
     brain,
     bodySize,
     showSeparatePivotColumnForSingleAggregation
@@ -18707,7 +18707,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo14(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.2.1"
+      version: "3.2.3"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19245,7 +19245,7 @@ var RETRIES3 = 10;
 var SORT_ASC2 = (a, b) => a - b;
 function isCellFocusable(cellPos, context) {
   const { getComputed, getDataSourceState, getState, api, dataSourceApi } = context;
-  const { editingCell, isRowDetailsEnabled } = getState();
+  const { editingCell, isRowDetailEnabled: isRowDetailsEnabled } = getState();
   const { dataArray } = getDataSourceState();
   const { computedVisibleColumns, computedColumnsMap } = getComputed();
   const column = computedVisibleColumns[cellPos.colIndex];
@@ -19262,7 +19262,7 @@ function isCellFocusable(cellPos, context) {
     return true;
   }
   const rowInfo = dataArray[cellPos.rowIndex];
-  const rowDetailState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : api.rowDetailsApi.isRowDetailsExpanded(rowInfo.id) ? "expanded" : "collapsed";
+  const rowDetailState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : api.rowDetailApi.isRowDetailExpanded(rowInfo.id) ? "expanded" : "collapsed";
   const columnApi = getColumnApiForColumn(column.id, context);
   return column.contentFocusable(__spreadProps(__spreadValues({
     column
@@ -22557,7 +22557,8 @@ export {
   InfiniteTableClassName,
   InfiniteTableComponent,
   Menu,
-  RowDetailsCache,
+  RowDetailCache,
+  RowDetailState,
   RowSelectionState,
   WeakFixedSizeSet,
   components,