@infinite-table/infinite-react 0.3.9 → 0.3.12

package/index.d.ts

@@ -1,4 +1,3 @@
-import * as _vanilla_extract_private from '@vanilla-extract/private';
 import * as React$1 from 'react';
 import { RefCallback, MutableRefObject, CSSProperties, HTMLProps } from 'react';
 
@@ -506,6 +505,7 @@ declare type InfiniteTablePropPivotGrandTotalColumnPosition = InfiniteTablePropP
 interface InfiniteTableMappedState<T> {
     scrollTopKey: InfiniteTableProps<T>['scrollTopKey'];
     viewportReservedWidth: InfiniteTableProps<T>['viewportReservedWidth'];
+    resizableColumns: InfiniteTableProps<T>['resizableColumns'];
     groupColumn: InfiniteTableProps<T>['groupColumn'];
     headerOptions: NonUndefined<InfiniteTableProps<T>['headerOptions']>;
     keyboardNavigation: NonUndefined<InfiniteTableProps<T>['keyboardNavigation']>;
@@ -621,6 +621,7 @@ declare type InfiniteTableColumnType<T> = {
     resizable?: InfiniteTableColumn<T>['resizable'];
     align?: InfiniteTableColumn<T>['align'];
     verticalAlign?: InfiniteTableColumn<T>['verticalAlign'];
+    columnGroup?: string;
     cssEllipsis?: boolean;
     headerCssEllipsis?: boolean;
     field?: keyof T;
@@ -1032,6 +1033,9 @@ declare type InfiniteTableComputedColumnBase<T> = {
     computedSortType: string;
     computedDataType: string;
     computedWidth: number;
+    computedFlex: number | null;
+    computedMinWidth: number | null;
+    computedMaxWidth: number | null;
     computedOffset: number;
     computedPinningOffset: number;
     computedAbsoluteOffset: number;
@@ -1048,6 +1052,7 @@ declare type InfiniteTableComputedColumnBase<T> = {
     computedFilterValue: DataSourceFilterValueItem<T> | null;
     computedPinned: InfiniteTableColumnPinnedValues;
     computedDraggable: boolean;
+    computedResizable: boolean;
     computedFirstInCategory: boolean;
     computedLastInCategory: boolean;
     computedFirst: boolean;
@@ -1605,7 +1610,7 @@ declare function InfiniteTable<T>(props: InfiniteTableProps<T>): JSX.Element;
 declare namespace InfiniteTable {
     var defaultProps: {
         rowHeight: number;
-        columnHeaderHeight: _vanilla_extract_private.CSSVarFunction;
+        columnHeaderHeight: string;
     };
 }
 
@@ -1643,6 +1648,7 @@ declare type ComponentStateRootConfig<T_PROPS, COMPONENT_MAPPED_STATE, COMPONENT
     }) => COMPONENT_MAPPED_STATE & COMPONENT_SETUP_STATE & COMPONENT_DERIVED_STATE;
     getReducerActions?: (dispatch: React$1.Dispatch<any>) => T_ACTIONS;
     getParentState?: () => T_PARENT_STATE;
+    cleanup?: (state: COMPONENT_MAPPED_STATE & COMPONENT_SETUP_STATE & COMPONENT_DERIVED_STATE) => void;
     onControlledPropertyChange?: (name: string, newValue: any, oldValue: any) => void | ((value: any, oldValue: any) => any);
 };
 declare function getComponentStateRoot<T_PROPS, COMPONENT_MAPPED_STATE extends object, COMPONENT_SETUP_STATE extends object = {}, COMPONENT_DERIVED_STATE extends object = {}, T_ACTIONS = {}, T_PARENT_STATE = {}>(config: ComponentStateRootConfig<T_PROPS, COMPONENT_MAPPED_STATE, COMPONENT_SETUP_STATE, COMPONENT_DERIVED_STATE, T_ACTIONS, T_PARENT_STATE>): React$1.NamedExoticComponent<T_PROPS & {

package/index.esm.js

@@ -672,7 +672,7 @@ var Logger = class {
   constructor(channelName) {
     this.debug = emptyLogFn;
     this.error = emptyLogFn;
-    if (true) {
+    if (false) {
       this.debug = dbg(channelName);
       this.error = err(channelName);
     }
@@ -892,8 +892,8 @@ function SpacePlaceholderFn(props) {
   };
   return /* @__PURE__ */ createElement3("div", {
     "data-count": count,
-    "data-placeholder-width": true ? width : void 0,
-    "data-placeholder-height": true ? height : void 0,
+    "data-placeholder-width": false ? width : void 0,
+    "data-placeholder-height": false ? height : void 0,
     "data-name": "SpacePlaceholder",
     style
   });
@@ -1174,7 +1174,7 @@ var MatrixBrain = class extends Logger {
       if (colWidthDefined) {
         this.colWidth = colWidth;
       }
-      if (true) {
+      if (false) {
         if (widthChanged) {
           this.debug("New available width %d (size is %d,%d)", this.width, this.width, this.height);
         }
@@ -1254,12 +1254,18 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.notifyScrollStart = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onScrollStartFns;
       for (let i = 0, len = fns.length; i < len; i++) {
         fns[i]();
       }
     };
     this.notifyScrollStop = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onScrollStopFns;
       const scrollPos = this.scrollPosition;
       const range = this.getRenderRange();
@@ -1282,37 +1288,61 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.notifyAvailableSizeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onAvailableSizeChangeFns;
       const range = this.getAvailableSize();
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i](range);
         });
       }
     };
     this.notifyRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onRenderRangeChangeFns;
       const range = this.getRenderRange();
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i](range);
         });
       }
     };
     this.notifyVerticalRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onVerticalRenderRangeChangeFns;
       const range = this.verticalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
     };
     this.notifyHorizontalRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onHorizontalRenderRangeChangeFns;
       const range = this.horizontalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
@@ -1668,7 +1698,7 @@ var MatrixBrain = class extends Logger {
           if (cache[i] === void 0) {
             cell[direction === "horizontal" ? "colIndex" : "rowIndex"] = i;
             let spanValue = itemSpan(cell);
-            if (spanValue < 1) {
+            if (false) {
               this.debug(`${direction === "horizontal" ? "colspan" : "rowspan"} cannot be less than 1 - got %d for index %d`, spanValue, i);
             }
             cache[i] = i;
@@ -1971,7 +2001,7 @@ var MatrixBrain = class extends Logger {
     }
     this.width = width;
     this.height = height;
-    if (true) {
+    if (false) {
       this.debug("New available size: width %d, height %d", this.width, this.height);
     }
     this.notifyAvailableSizeChange();
@@ -1989,6 +2019,9 @@ var MatrixBrain = class extends Logger {
     return totalSize.width - this.width;
   }
   notifyScrollChange() {
+    if (this.destroyed) {
+      return;
+    }
     const { scrollPosition } = this;
     const fns = this.onScrollFns;
     for (let i = 0, len = fns.length; i < len; i++) {
@@ -2005,6 +2038,9 @@ var MatrixBrain = class extends Logger {
     return direction === "horizontal" ? this.getFixedEndColsWidth() : this.getFixedEndRowsHeight();
   }
   notifyRenderCountChange() {
+    if (this.destroyed) {
+      return;
+    }
     const { horizontalRenderCount, verticalRenderCount } = this;
     const renderCount = {
       horizontal: horizontalRenderCount,
@@ -2013,6 +2049,9 @@ var MatrixBrain = class extends Logger {
     const fns = this.onRenderCountChangeFns;
     for (let i = 0, len = fns.length; i < len; i++) {
       raf2(() => {
+        if (this.destroyed) {
+          return;
+        }
         fns[i](renderCount);
       });
     }
@@ -2438,7 +2477,7 @@ var MappedCells = class extends Logger {
       return elementIndex != null ? elementIndex : null;
     };
     this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
-      if (true) {
+      if (false) {
         this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
       }
       const key = [rowIndex, colIndex];
@@ -2704,7 +2743,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         return [];
       }
       const { start, end } = range;
-      if (true) {
+      if (false) {
         this.debug(`Render range ${start}-${end}. Force ${force}`);
       }
       const { mappedCells } = this;
@@ -2723,7 +2762,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (this.updaters[elementIndex]) {
             this.updaters[elementIndex].destroy();
           }
-          if (true) {
+          if (false) {
             this.debug(`Discard element ${elementIndex}`);
           }
         });
@@ -2775,7 +2814,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
             }
             const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(elementsOutsideItemRange, col);
             if (elementIndex == null) {
-              if (true) {
+              if (false) {
                 this.error(`Cannot find element to render cell ${row}:${col}`);
               }
               continue;
@@ -2794,7 +2833,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
         const elementIndex = elementsOutsideItemRange.pop();
         if (elementIndex == null) {
-          if (true) {
+          if (false) {
             this.error(`Cannot find element to render cell ${rowIndex}-${colIndex}`);
           }
           return;
@@ -2993,7 +3032,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const itemElement = this.itemDOMElements[elementIndex];
       const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
       if (cell == null) {
-        if (true) {
+        if (false) {
           this.error(`Cannot find item for element ${elementIndex}`);
         }
         return;
@@ -3006,7 +3045,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const { x, y } = itemPosition;
       if (itemElement) {
         this.updateHoverClassNamesForRow(rowIndex);
-        if (true) {
+        if (false) {
           itemElement.dataset.rowIndex = rowIndex;
           itemElement.dataset.colIndex = colIndex;
         }
@@ -3015,7 +3054,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
-          itemElement.style.zIndex = hidden ? "-1" : "auto";
+          itemElement.style.zIndex = hidden ? "-1" : itemElement.dataset.zIndex || "auto";
         } else {
           itemElement.style.display = "";
           itemElement.style.left = `${x}px`;
@@ -3074,19 +3113,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
         node.style.transform = `translate3d(${coords.x}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
       }
       function adjustColStartRowStart(_rowIndex, _colIndex, node, { x, y }, scrollPosition2) {
-        node.style.zIndex = `10000`;
+        node.style.zIndex = `1000000`;
         node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${y + scrollPosition2.scrollTop}px, 0)`;
       }
       function adjustColStartRowEnd(_rowIndex, _colIndex, node, { x }, scrollPosition2) {
-        node.style.zIndex = `20000`;
+        node.style.zIndex = `2000000`;
         node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${fixedEndRowsOffsets[_rowIndex]}px, 0)`;
       }
       function adjustColEndRowStart(_rowIndex, colIndex, node, coords) {
-        node.style.zIndex = `30000`;
+        node.style.zIndex = `3000000`;
         node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${coords.y + scrollPosition.scrollTop}px, 0)`;
       }
       function adjustColEndRowEnd(rowIndex, colIndex, node) {
-        node.style.zIndex = `40000`;
+        node.style.zIndex = `4000000`;
         node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
       }
       if (fixedColsStart || fixedColsEnd) {
@@ -3149,6 +3188,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
     };
     this.destroy = () => {
+      if (this.destroyed) {
+        return;
+      }
       this.destroyed = true;
       this.reset();
       this.onDestroy();
@@ -3230,7 +3272,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return;
     }
     this.mappedCells.renderCellAtElement(rowIndex, colIndex, elementIndex, renderedNode);
-    if (true) {
+    if (false) {
       this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
@@ -3848,6 +3890,12 @@ function getComponentStateRoot(config) {
         }
       }
     });
+    useEffect8(() => {
+      return () => {
+        var _a2;
+        (_a2 = config.cleanup) == null ? void 0 : _a2.call(config, getComponentState());
+      };
+    }, []);
     return /* @__PURE__ */ createElement9(Context.Provider, {
       value: contextValue
     }, props.children);
@@ -4524,7 +4572,11 @@ function InfiniteTableHeaderCell(props) {
   };
   const domRef = useRef12(null);
   const {
-    computed: { computedRemainingSpace, showColumnFilters },
+    computed: {
+      computedRemainingSpace,
+      showColumnFilters,
+      computedVisibleColumns
+    },
     componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
   const {
@@ -4631,6 +4683,7 @@ function InfiniteTableHeaderCell(props) {
   ]);
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
+  const resizeHandle = null;
   return /* @__PURE__ */ createElement15(ContextProvider, {
     value: renderParam
   }, /* @__PURE__ */ createElement15(InfiniteTableCell, {
@@ -4639,6 +4692,7 @@ function InfiniteTableHeaderCell(props) {
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
+    "data-z-index": computedVisibleColumns.length * 10 - column.computedVisibleIndex * 10,
     style,
     width,
     onPointerDown,
@@ -4647,7 +4701,7 @@ function InfiniteTableHeaderCell(props) {
     contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
     className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false, rowActive: false }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
-    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilter, {
+    afterChildren: /* @__PURE__ */ createElement15(Fragment2, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -4655,7 +4709,7 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilterEmpty, null) : null,
+    }) : /* @__PURE__ */ createElement15(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
     renderChildren
   }), draggingProxy);
 }
@@ -5030,6 +5084,7 @@ function decamelize(str, options) {
 
 // src/components/InfiniteTable/theme.css.ts
 var ThemeVars = { color: { accent: "var(--infinite-accent-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)", 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: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-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)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)" }, 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)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", 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)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-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)", 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/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -5715,7 +5770,7 @@ function computeColumnGroupsDepths(columnGroups) {
     while (parentGroupId) {
       const parent = columnGroups.get(parentGroupId);
       if (!parent) {
-        if (true) {
+        if (false) {
           console.warn(`Cannot find column group ${parentGroupId}`);
         }
         break;
@@ -5832,7 +5887,7 @@ var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
   const columnSize = useCallback13((index) => {
     const column = columns[index];
-    if (!column) {
+    if (false) {
       debug4("cannot find column at index", index, columns);
     }
     return column ? column.computedWidth : 0;
@@ -7949,7 +8004,7 @@ function concludeReducer(params) {
   }
   state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
-  if (true) {
+  if (false) {
     globalThis.state = state;
   }
   return state;
@@ -7987,7 +8042,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (true) {
+  if (false) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -8438,10 +8493,14 @@ var computeFlex = (params) => {
   let totalFixedSize = 0;
   let totalFlex = 0;
   let totalFlexCount = 0;
+  const minSizes = [];
+  const maxSizes = [];
   items.forEach((item, i) => {
     var _a, _b, _c, _d, _e, _f;
     let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
     let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    minSizes.push(minSize);
+    maxSizes.push(maxSize);
     if (item.size != null) {
       if (maxSize != null && item.size > maxSize) {
         item.size = maxSize;
@@ -8551,6 +8610,8 @@ var computeFlex = (params) => {
   return {
     items: resultItems,
     flexSizes,
+    minSizes,
+    maxSizes,
     computedSizes,
     remainingSize: Math.round(availableSize - totalTakenSize)
   };
@@ -8623,6 +8684,7 @@ var getComputedVisibleColumns = ({
   setSortInfo,
   multiSort,
   viewportReservedWidth,
+  resizableColumns,
   draggableColumns,
   columnOrder,
   columnPinning,
@@ -8707,7 +8769,7 @@ var getComputedVisibleColumns = ({
       };
     })
   });
-  const { computedSizes } = flexResult;
+  const { computedSizes, flexSizes, minSizes, maxSizes } = flexResult;
   const computedPinnedStartColumns = [];
   const computedPinnedEndColumns = [];
   const computedUnpinnedColumns = [];
@@ -8735,7 +8797,7 @@ var getComputedVisibleColumns = ({
   });
   const firstPinnedEndAbsoluteOffset = bodySize.width - totalPinnedEndWidth;
   columnsArray.forEach((c, i) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
     const colType = getColumnComputedType(c, columnTypes);
@@ -8746,6 +8808,9 @@ var getComputedVisibleColumns = ({
     const computedSortedDesc = computedSorted && !computedSortedAsc;
     const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
     const computedWidth = computedSizes[i];
+    const computedFlex = flexSizes[i] || null;
+    const computedMinWidth = minSizes[i] || null;
+    const computedMaxWidth = maxSizes[i] || null;
     const computedPinned = getComputedPinned(id, columnPinning);
     const computedLast = i === visibleColumnOrder.length - 1;
     const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
@@ -8779,8 +8844,13 @@ var getComputedVisibleColumns = ({
       render: colType.render,
       style: colType.style,
       components: colType.components,
+      columnGroup: colType.columnGroup,
       field
     }, c), {
+      computedResizable: (_s = (_r = (_q = c.resizable) != null ? _q : colType.resizable) != null ? _r : resizableColumns) != null ? _s : true,
+      computedMinWidth,
+      computedMaxWidth,
+      computedFlex,
       computedDataType,
       computedSortType,
       computedFilterType,
@@ -8802,7 +8872,7 @@ var getComputedVisibleColumns = ({
       computedSortedDesc,
       computedVisibleIndex: i,
       computedPinned,
-      computedDraggable: (_r = (_q = c.draggable) != null ? _q : draggableColumns) != null ? _r : true,
+      computedDraggable: (_u = (_t = c.draggable) != null ? _t : draggableColumns) != null ? _u : true,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: i === 0,
@@ -8852,7 +8922,7 @@ var getComputedVisibleColumns = ({
         setSortInfo(finalSortInfo);
       },
       id,
-      header: (_u = (_t = (_s = c.header) != null ? _s : colType.header) != null ? _t : c.name) != null ? _u : c.field
+      header: (_x = (_w = (_v = c.header) != null ? _v : colType.header) != null ? _w : c.name) != null ? _x : c.field
     });
     computedOffset += computedWidth;
     computedVisibleColumnsMap.set(result2.id, result2);
@@ -8928,6 +8998,7 @@ var useComputedVisibleColumns = ({
   pinnedEndMaxWidth,
   pinnedStartMaxWidth,
   viewportReservedWidth,
+  resizableColumns,
   columnVisibility,
   columnVisibilityAssumeVisible,
   columnSizing
@@ -8959,6 +9030,7 @@ var useComputedVisibleColumns = ({
       columnCssEllipsis,
       columnHeaderCssEllipsis,
       viewportReservedWidth,
+      resizableColumns,
       filterValue,
       sortable,
       sortInfo,
@@ -9116,6 +9188,7 @@ function useComputed() {
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
     viewportReservedWidth: componentState.viewportReservedWidth,
+    resizableColumns: componentState.resizableColumns,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
@@ -9404,7 +9477,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.9"
+      version: "0.3.12"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9627,14 +9700,14 @@ function initSetupState2() {
       scrollTop: 0
     });
   });
-  if (true) {
+  if (false) {
     globalThis.brain = brain;
   }
   const { renderer, onRenderUpdater } = createRenderer2(brain);
   brain.onAvailableSizeChange((size) => {
     headerBrain.setAvailableSize({ width: size.width });
   });
-  if (true) {
+  if (false) {
     globalThis.renderer = renderer;
   }
   return {
@@ -9700,6 +9773,7 @@ var forwardProps3 = (setupState) => {
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     filterEditors: (filterEditors) => __spreadValues(__spreadValues({}, defaultFilterEditors), filterEditors),
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
+    resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
@@ -9747,6 +9821,19 @@ function getGroupRenderStrategy(options) {
   }
   return "multi-column";
 }
+var cleanupState = (state) => {
+  state.brain.destroy();
+  state.headerBrain.destroy();
+  state.renderer.destroy();
+  state.onRenderUpdater.destroy();
+  state.domRef.current = null;
+  state.scrollerDOMRef.current = null;
+  state.portalDOMRef.current = null;
+  state.onRowHeightCSSVarChange.destroy();
+  state.onColumnHeaderHeightCSSVarChange.destroy();
+  state.pinnedEndScrollListener.destroy();
+  state.pinnedStartScrollListener.destroy();
+};
 var mapPropsToState2 = (params) => {
   var _a, _b;
   const { props, state, oldState, parentState } = params;
@@ -9773,6 +9860,9 @@ var mapPropsToState2 = (params) => {
   };
 };
 
+// src/components/InfiniteTable/utils/toCSSVarName.ts
+var toCSSVarName = (value) => `--infinite-${value}`;
+
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
 var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
@@ -9780,6 +9870,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
   forwardProps: forwardProps3,
   mapPropsToState: mapPropsToState2,
+  cleanup: cleanupState,
   allowedControlledPropOverrides: {
     rowHeight: true,
     columnHeaderHeight: true
@@ -9915,7 +10006,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  if (true) {
+  if (false) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }
@@ -9957,7 +10048,7 @@ function InfiniteTable(props) {
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,
-  columnHeaderHeight: ThemeVars.components.Header.columnHeaderHeight
+  columnHeaderHeight: toCSSVarName(columnHeaderHeightName)
 };
 export {
   DataSource,

package/index.js

@@ -694,7 +694,7 @@ var Logger = class {
   constructor(channelName) {
     this.debug = emptyLogFn;
     this.error = emptyLogFn;
-    if (true) {
+    if (false) {
       this.debug = dbg(channelName);
       this.error = err(channelName);
     }
@@ -892,8 +892,8 @@ function SpacePlaceholderFn(props) {
   };
   return /* @__PURE__ */ React5.createElement("div", {
     "data-count": count,
-    "data-placeholder-width": true ? width : void 0,
-    "data-placeholder-height": true ? height : void 0,
+    "data-placeholder-width": false ? width : void 0,
+    "data-placeholder-height": false ? height : void 0,
     "data-name": "SpacePlaceholder",
     style
   });
@@ -1166,7 +1166,7 @@ var MatrixBrain = class extends Logger {
       if (colWidthDefined) {
         this.colWidth = colWidth;
       }
-      if (true) {
+      if (false) {
         if (widthChanged) {
           this.debug("New available width %d (size is %d,%d)", this.width, this.width, this.height);
         }
@@ -1246,12 +1246,18 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.notifyScrollStart = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onScrollStartFns;
       for (let i = 0, len = fns.length; i < len; i++) {
         fns[i]();
       }
     };
     this.notifyScrollStop = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onScrollStopFns;
       const scrollPos = this.scrollPosition;
       const range = this.getRenderRange();
@@ -1274,37 +1280,61 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.notifyAvailableSizeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onAvailableSizeChangeFns;
       const range = this.getAvailableSize();
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i](range);
         });
       }
     };
     this.notifyRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onRenderRangeChangeFns;
       const range = this.getRenderRange();
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i](range);
         });
       }
     };
     this.notifyVerticalRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onVerticalRenderRangeChangeFns;
       const range = this.verticalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
     };
     this.notifyHorizontalRenderRangeChange = () => {
+      if (this.destroyed) {
+        return;
+      }
       const fns = this.onHorizontalRenderRangeChangeFns;
       const range = this.horizontalRenderRange;
       for (let i = 0, len = fns.length; i < len; i++) {
         raf2(() => {
+          if (this.destroyed) {
+            return;
+          }
           fns[i]([range.startIndex, range.endIndex]);
         });
       }
@@ -1660,7 +1690,7 @@ var MatrixBrain = class extends Logger {
           if (cache[i] === void 0) {
             cell[direction === "horizontal" ? "colIndex" : "rowIndex"] = i;
             let spanValue = itemSpan(cell);
-            if (spanValue < 1) {
+            if (false) {
               this.debug(`${direction === "horizontal" ? "colspan" : "rowspan"} cannot be less than 1 - got %d for index %d`, spanValue, i);
             }
             cache[i] = i;
@@ -1963,7 +1993,7 @@ var MatrixBrain = class extends Logger {
     }
     this.width = width;
     this.height = height;
-    if (true) {
+    if (false) {
       this.debug("New available size: width %d, height %d", this.width, this.height);
     }
     this.notifyAvailableSizeChange();
@@ -1981,6 +2011,9 @@ var MatrixBrain = class extends Logger {
     return totalSize.width - this.width;
   }
   notifyScrollChange() {
+    if (this.destroyed) {
+      return;
+    }
     const { scrollPosition } = this;
     const fns = this.onScrollFns;
     for (let i = 0, len = fns.length; i < len; i++) {
@@ -1997,6 +2030,9 @@ var MatrixBrain = class extends Logger {
     return direction === "horizontal" ? this.getFixedEndColsWidth() : this.getFixedEndRowsHeight();
   }
   notifyRenderCountChange() {
+    if (this.destroyed) {
+      return;
+    }
     const { horizontalRenderCount, verticalRenderCount } = this;
     const renderCount = {
       horizontal: horizontalRenderCount,
@@ -2005,6 +2041,9 @@ var MatrixBrain = class extends Logger {
     const fns = this.onRenderCountChangeFns;
     for (let i = 0, len = fns.length; i < len; i++) {
       raf2(() => {
+        if (this.destroyed) {
+          return;
+        }
         fns[i](renderCount);
       });
     }
@@ -2430,7 +2469,7 @@ var MappedCells = class extends Logger {
       return elementIndex != null ? elementIndex : null;
     };
     this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
-      if (true) {
+      if (false) {
         this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
       }
       const key = [rowIndex, colIndex];
@@ -2696,7 +2735,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         return [];
       }
       const { start, end } = range;
-      if (true) {
+      if (false) {
         this.debug(`Render range ${start}-${end}. Force ${force}`);
       }
       const { mappedCells } = this;
@@ -2715,7 +2754,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (this.updaters[elementIndex]) {
             this.updaters[elementIndex].destroy();
           }
-          if (true) {
+          if (false) {
             this.debug(`Discard element ${elementIndex}`);
           }
         });
@@ -2767,7 +2806,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
             }
             const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(elementsOutsideItemRange, col);
             if (elementIndex == null) {
-              if (true) {
+              if (false) {
                 this.error(`Cannot find element to render cell ${row}:${col}`);
               }
               continue;
@@ -2786,7 +2825,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
         const elementIndex = elementsOutsideItemRange.pop();
         if (elementIndex == null) {
-          if (true) {
+          if (false) {
             this.error(`Cannot find element to render cell ${rowIndex}-${colIndex}`);
           }
           return;
@@ -2985,7 +3024,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const itemElement = this.itemDOMElements[elementIndex];
       const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
       if (cell == null) {
-        if (true) {
+        if (false) {
           this.error(`Cannot find item for element ${elementIndex}`);
         }
         return;
@@ -2998,7 +3037,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const { x, y } = itemPosition;
       if (itemElement) {
         this.updateHoverClassNamesForRow(rowIndex);
-        if (true) {
+        if (false) {
           itemElement.dataset.rowIndex = rowIndex;
           itemElement.dataset.colIndex = colIndex;
         }
@@ -3007,7 +3046,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
-          itemElement.style.zIndex = hidden ? "-1" : "auto";
+          itemElement.style.zIndex = hidden ? "-1" : itemElement.dataset.zIndex || "auto";
         } else {
           itemElement.style.display = "";
           itemElement.style.left = `${x}px`;
@@ -3066,19 +3105,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
         node.style.transform = `translate3d(${coords.x}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
       }
       function adjustColStartRowStart(_rowIndex, _colIndex, node, { x, y }, scrollPosition2) {
-        node.style.zIndex = `10000`;
+        node.style.zIndex = `1000000`;
         node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${y + scrollPosition2.scrollTop}px, 0)`;
       }
       function adjustColStartRowEnd(_rowIndex, _colIndex, node, { x }, scrollPosition2) {
-        node.style.zIndex = `20000`;
+        node.style.zIndex = `2000000`;
         node.style.transform = `translate3d(${x + scrollPosition2.scrollLeft}px, ${fixedEndRowsOffsets[_rowIndex]}px, 0)`;
       }
       function adjustColEndRowStart(_rowIndex, colIndex, node, coords) {
-        node.style.zIndex = `30000`;
+        node.style.zIndex = `3000000`;
         node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${coords.y + scrollPosition.scrollTop}px, 0)`;
       }
       function adjustColEndRowEnd(rowIndex, colIndex, node) {
-        node.style.zIndex = `40000`;
+        node.style.zIndex = `4000000`;
         node.style.transform = `translate3d(${fixedEndColsOffsets[colIndex]}px, ${fixedEndRowsOffsets[rowIndex]}px, 0)`;
       }
       if (fixedColsStart || fixedColsEnd) {
@@ -3141,6 +3180,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
     };
     this.destroy = () => {
+      if (this.destroyed) {
+        return;
+      }
       this.destroyed = true;
       this.reset();
       this.onDestroy();
@@ -3222,7 +3264,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return;
     }
     this.mappedCells.renderCellAtElement(rowIndex, colIndex, elementIndex, renderedNode);
-    if (true) {
+    if (false) {
       this.debug(`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
@@ -3823,6 +3865,12 @@ function getComponentStateRoot(config) {
         }
       }
     });
+    (0, import_react14.useEffect)(() => {
+      return () => {
+        var _a2;
+        (_a2 = config.cleanup) == null ? void 0 : _a2.call(config, getComponentState());
+      };
+    }, []);
     return /* @__PURE__ */ React13.createElement(Context.Provider, {
       value: contextValue
     }, props.children);
@@ -4475,7 +4523,11 @@ function InfiniteTableHeaderCell(props) {
   };
   const domRef = (0, import_react22.useRef)(null);
   const {
-    computed: { computedRemainingSpace, showColumnFilters },
+    computed: {
+      computedRemainingSpace,
+      showColumnFilters,
+      computedVisibleColumns
+    },
     componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
   const {
@@ -4582,6 +4634,7 @@ function InfiniteTableHeaderCell(props) {
   ]);
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
+  const resizeHandle = null;
   return /* @__PURE__ */ React20.createElement(ContextProvider, {
     value: renderParam
   }, /* @__PURE__ */ React20.createElement(InfiniteTableCell, {
@@ -4590,6 +4643,7 @@ function InfiniteTableHeaderCell(props) {
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
+    "data-z-index": computedVisibleColumns.length * 10 - column.computedVisibleIndex * 10,
     style,
     width,
     onPointerDown,
@@ -4598,7 +4652,7 @@ function InfiniteTableHeaderCell(props) {
     contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
     className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, { dragging, zebra: false, rowActive: false }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
-    afterChildren: showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilter, {
+    afterChildren: /* @__PURE__ */ React20.createElement(React20.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilter, {
       filterEditor: FilterEditor,
       filterTypes,
       onChange: debouncedOnFilterValueChange,
@@ -4606,7 +4660,7 @@ function InfiniteTableHeaderCell(props) {
       columnLabel: column.field || column.name || column.id,
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
-    }) : /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null,
+    }) : /* @__PURE__ */ React20.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
     renderChildren
   }), draggingProxy);
 }
@@ -4967,6 +5021,7 @@ function decamelize(str, options) {
 
 // src/components/InfiniteTable/theme.css.ts
 var ThemeVars = { color: { accent: "var(--infinite-accent-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)", 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: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-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)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)" }, 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)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", 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)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-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)", 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/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -5641,7 +5696,7 @@ function computeColumnGroupsDepths(columnGroups) {
     while (parentGroupId) {
       const parent = columnGroups.get(parentGroupId);
       if (!parent) {
-        if (true) {
+        if (false) {
           console.warn(`Cannot find column group ${parentGroupId}`);
         }
         break;
@@ -5758,7 +5813,7 @@ var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
   const columnSize = (0, import_react32.useCallback)((index) => {
     const column = columns[index];
-    if (!column) {
+    if (false) {
       debug4("cannot find column at index", index, columns);
     }
     return column ? column.computedWidth : 0;
@@ -7865,7 +7920,7 @@ function concludeReducer(params) {
   }
   state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
-  if (true) {
+  if (false) {
     globalThis.state = state;
   }
   return state;
@@ -7903,7 +7958,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (true) {
+  if (false) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -8354,10 +8409,14 @@ var computeFlex = (params) => {
   let totalFixedSize = 0;
   let totalFlex = 0;
   let totalFlexCount = 0;
+  const minSizes = [];
+  const maxSizes = [];
   items.forEach((item, i) => {
     var _a, _b, _c, _d, _e, _f;
     let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
     let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    minSizes.push(minSize);
+    maxSizes.push(maxSize);
     if (item.size != null) {
       if (maxSize != null && item.size > maxSize) {
         item.size = maxSize;
@@ -8467,6 +8526,8 @@ var computeFlex = (params) => {
   return {
     items: resultItems,
     flexSizes,
+    minSizes,
+    maxSizes,
     computedSizes,
     remainingSize: Math.round(availableSize - totalTakenSize)
   };
@@ -8539,6 +8600,7 @@ var getComputedVisibleColumns = ({
   setSortInfo,
   multiSort,
   viewportReservedWidth,
+  resizableColumns,
   draggableColumns,
   columnOrder,
   columnPinning,
@@ -8623,7 +8685,7 @@ var getComputedVisibleColumns = ({
       };
     })
   });
-  const { computedSizes } = flexResult;
+  const { computedSizes, flexSizes, minSizes, maxSizes } = flexResult;
   const computedPinnedStartColumns = [];
   const computedPinnedEndColumns = [];
   const computedUnpinnedColumns = [];
@@ -8651,7 +8713,7 @@ var getComputedVisibleColumns = ({
   });
   const firstPinnedEndAbsoluteOffset = bodySize.width - totalPinnedEndWidth;
   columnsArray.forEach((c, i) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
     const colType = getColumnComputedType(c, columnTypes);
@@ -8662,6 +8724,9 @@ var getComputedVisibleColumns = ({
     const computedSortedDesc = computedSorted && !computedSortedAsc;
     const computedSortIndex = (_c = sortingInfo == null ? void 0 : sortingInfo.index) != null ? _c : -1;
     const computedWidth = computedSizes[i];
+    const computedFlex = flexSizes[i] || null;
+    const computedMinWidth = minSizes[i] || null;
+    const computedMaxWidth = maxSizes[i] || null;
     const computedPinned = getComputedPinned(id, columnPinning);
     const computedLast = i === visibleColumnOrder.length - 1;
     const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
@@ -8695,8 +8760,13 @@ var getComputedVisibleColumns = ({
       render: colType.render,
       style: colType.style,
       components: colType.components,
+      columnGroup: colType.columnGroup,
       field
     }, c), {
+      computedResizable: (_s = (_r = (_q = c.resizable) != null ? _q : colType.resizable) != null ? _r : resizableColumns) != null ? _s : true,
+      computedMinWidth,
+      computedMaxWidth,
+      computedFlex,
       computedDataType,
       computedSortType,
       computedFilterType,
@@ -8718,7 +8788,7 @@ var getComputedVisibleColumns = ({
       computedSortedDesc,
       computedVisibleIndex: i,
       computedPinned,
-      computedDraggable: (_r = (_q = c.draggable) != null ? _q : draggableColumns) != null ? _r : true,
+      computedDraggable: (_u = (_t = c.draggable) != null ? _t : draggableColumns) != null ? _u : true,
       computedFirstInCategory,
       computedLastInCategory,
       computedFirst: i === 0,
@@ -8768,7 +8838,7 @@ var getComputedVisibleColumns = ({
         setSortInfo(finalSortInfo);
       },
       id,
-      header: (_u = (_t = (_s = c.header) != null ? _s : colType.header) != null ? _t : c.name) != null ? _u : c.field
+      header: (_x = (_w = (_v = c.header) != null ? _v : colType.header) != null ? _w : c.name) != null ? _x : c.field
     });
     computedOffset += computedWidth;
     computedVisibleColumnsMap.set(result2.id, result2);
@@ -8844,6 +8914,7 @@ var useComputedVisibleColumns = ({
   pinnedEndMaxWidth,
   pinnedStartMaxWidth,
   viewportReservedWidth,
+  resizableColumns,
   columnVisibility,
   columnVisibilityAssumeVisible,
   columnSizing
@@ -8875,6 +8946,7 @@ var useComputedVisibleColumns = ({
       columnCssEllipsis,
       columnHeaderCssEllipsis,
       viewportReservedWidth,
+      resizableColumns,
       filterValue,
       sortable,
       sortInfo,
@@ -9032,6 +9104,7 @@ function useComputed() {
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
     viewportReservedWidth: componentState.viewportReservedWidth,
+    resizableColumns: componentState.resizableColumns,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
@@ -9320,7 +9393,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.9"
+      version: "0.3.12"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9543,14 +9616,14 @@ function initSetupState2() {
       scrollTop: 0
     });
   });
-  if (true) {
+  if (false) {
     globalThis.brain = brain;
   }
   const { renderer, onRenderUpdater } = createRenderer2(brain);
   brain.onAvailableSizeChange((size) => {
     headerBrain.setAvailableSize({ width: size.width });
   });
-  if (true) {
+  if (false) {
     globalThis.renderer = renderer;
   }
   return {
@@ -9616,6 +9689,7 @@ var forwardProps3 = (setupState) => {
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     filterEditors: (filterEditors) => __spreadValues(__spreadValues({}, defaultFilterEditors), filterEditors),
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
+    resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
     columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
@@ -9663,6 +9737,19 @@ function getGroupRenderStrategy(options) {
   }
   return "multi-column";
 }
+var cleanupState = (state) => {
+  state.brain.destroy();
+  state.headerBrain.destroy();
+  state.renderer.destroy();
+  state.onRenderUpdater.destroy();
+  state.domRef.current = null;
+  state.scrollerDOMRef.current = null;
+  state.portalDOMRef.current = null;
+  state.onRowHeightCSSVarChange.destroy();
+  state.onColumnHeaderHeightCSSVarChange.destroy();
+  state.pinnedEndScrollListener.destroy();
+  state.pinnedStartScrollListener.destroy();
+};
 var mapPropsToState2 = (params) => {
   var _a, _b;
   const { props, state, oldState, parentState } = params;
@@ -9689,6 +9776,9 @@ var mapPropsToState2 = (params) => {
   };
 };
 
+// src/components/InfiniteTable/utils/toCSSVarName.ts
+var toCSSVarName = (value) => `--infinite-${value}`;
+
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
 var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
@@ -9696,6 +9786,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
   forwardProps: forwardProps3,
   mapPropsToState: mapPropsToState2,
+  cleanup: cleanupState,
   allowedControlledPropOverrides: {
     rowHeight: true,
     columnHeaderHeight: true
@@ -9831,7 +9922,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  if (true) {
+  if (false) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }
@@ -9873,5 +9964,5 @@ function InfiniteTable(props) {
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,
-  columnHeaderHeight: ThemeVars.components.Header.columnHeaderHeight
+  columnHeaderHeight: toCSSVarName(columnHeaderHeightName)
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.3.9",
+  "version": "0.3.12",
   "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": 1654635724571
+  "publishedAt": 1654765155370
 }