@infinite-table/infinite-react 0.3.8 → 0.3.11

package/index.js

@@ -626,17 +626,14 @@ var require_vanilla_extract_recipes_createRuntimeFn_cjs = __commonJS({
 
 // src/index.tsx
 __export(exports, {
-  DarkTheme: () => DarkTheme,
   DataSource: () => DataSource,
   DataSourceActionType: () => DataSourceActionType,
   GroupRowsState: () => GroupRowsState,
   InfiniteTable: () => InfiniteTable,
   InfiniteTableClassName: () => InfiniteTableClassName,
   InfiniteTableComponent: () => InfiniteTableComponent,
-  LightTheme: () => LightTheme,
   NumberFilterEditor: () => NumberFilterEditor,
   StringFilterEditor: () => StringFilterEditor,
-  ThemeVars: () => ThemeVars,
   debounce: () => debounce,
   defaultFilterEditors: () => defaultFilterEditors,
   defaultFilterTypes: () => defaultFilterTypes,
@@ -697,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);
     }
@@ -895,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
   });
@@ -1169,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);
         }
@@ -1249,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();
@@ -1277,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]);
         });
       }
@@ -1663,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;
@@ -1966,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();
@@ -1984,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++) {
@@ -2000,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,
@@ -2008,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);
       });
     }
@@ -2433,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];
@@ -2699,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;
@@ -2718,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}`);
           }
         });
@@ -2770,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;
@@ -2789,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;
@@ -2988,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;
@@ -3001,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;
         }
@@ -3010,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`;
@@ -3069,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) {
@@ -3225,7 +3261,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);
@@ -4478,7 +4514,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 {
@@ -4585,6 +4625,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, {
@@ -4593,6 +4634,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,
@@ -4601,7 +4643,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,
@@ -4609,7 +4651,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);
 }
@@ -4969,9 +5011,8 @@ function decamelize(str, options) {
 }
 
 // src/components/InfiniteTable/theme.css.ts
-var DarkTheme = { "var(--infinite-background)": "#101419", "var(--infinite-cell-border)": "1px solid #2a323d", "var(--infinite-header-color)": "#c3c3c3", "var(--infinite-header-cell-background)": "#1b2129", "var(--infinite-header-background)": "var(--infinite-header-cell-background)", "var(--infinite-row-hover-background)": "#3b4754", "var(--infinite-row-background)": "var(--infinite-background)", "var(--infinite-row-odd-background)": "#242a31", "var(--infinite-cell-color)": "#c3c3c3" };
-var LightTheme = { "var(--infinite-space-0)": "0rem", "var(--infinite-space-1)": "0.125rem", "var(--infinite-space-2)": "0.25rem", "var(--infinite-space-3)": "0.5rem", "var(--infinite-space-4)": "0.75rem", "var(--infinite-space-5)": "1rem", "var(--infinite-space-6)": "1.25rem", "var(--infinite-space-7)": "1.5rem", "var(--infinite-space-8)": "2.25rem", "var(--infinite-space-9)": "3rem", "var(--infinite-space-10)": "4rem", "var(--infinite-font-size-0)": "0.5rem", "var(--infinite-font-size-1)": "0.625rem", "var(--infinite-font-size-2)": "0.75rem", "var(--infinite-font-size-3)": "0.875rem", "var(--infinite-font-size-4)": "1rem", "var(--infinite-font-size-5)": "1.25rem", "var(--infinite-font-size-6)": "1.5rem", "var(--infinite-font-size-7)": "2.25rem", "var(--infinite-font-family)": "inherit", "var(--infinite-color)": "#484848", "var(--infinite-accent-color)": "#ff7043", "var(--infinite-border-radius)": "var(--infinite-space-2)", "var(--infinite-background)": "white", "var(--infinite-min-height)": "100px", "var(--infinite-load-mask-text-background)": "rgba(255,255,255,0.8)", "var(--infinite-load-mask-overlay-background)": "gray", "var(--infinite-load-mask-overlay-opacity)": "0.3", "var(--infinite-load-mask-color)": "inherit", "var(--infinite-load-mask-padding)": "var(--infinite-space-5)", "var(--infinite-load-mask-border-radius)": "var(--infinite-border-radius)", "var(--infinite-header-cell-background)": "#ededed", "var(--infinite-header-cell-padding-x)": "var(--infinite-space-3)", "var(--infinite-header-cell-padding-y)": "var(--infinite-space-3)", "var(--infinite-header-cell-padding)": "var(--infinite-header-cell-padding-y) var(--infinite-header-cell-padding-x) ", "var(--infinite-header-cell-dragging-background)": "#d4d3d3", "var(--infinite-header-cell-icon-size)": "16px", "var(--infinite-header-cell-sort-icon-margin)": "16px", "var(--infinite-header-background)": "var(--infinite-header-cell-background)", "var(--infinite-header-color)": "#6f6f6f", "var(--infinite-column-header-height)": "30px", "var(--infinite-cell-color)": "currentColor", "var(--infinite-cell-border-width)": "1px", "var(--infinite-cell-padding)": "var(--infinite-space-2) var(--infinite-space-3)", "var(--infinite-cell-border)": "var(--infinite-cell-border-width) solid #c6c6c6", "var(--infinite-cell-border-invisible)": "none", "var(--infinite-cell-border-radius)": "var(--infinite-space-2)", "var(--infinite-active-cell-border-style)": "dashed", "var(--infinite-active-cell-border-width)": "1px", "var(--infinite-active-cell-border-color--r)": "77", "var(--infinite-active-cell-border-color--g)": "149", "var(--infinite-active-cell-border-color--b)": "215", "var(--infinite-active-cell-background-alpha)": "0.25", "var(--infinite-active-cell-background-alpha--table-unfocused)": "0.1", "var(--infinite-row-background)": "var(--infinite-background)", "var(--infinite-row-odd-background)": "#f6f6f6", "var(--infinite-group-row-background)": "#cbc5c5", "var(--infinite-group-row-column-nesting)": "30px", "var(--infinite-row-hover-background)": "#dbdbdb", "var(--infinite-row-pointer-events-while-scrolling)": "auto" };
 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());
@@ -5646,7 +5687,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;
@@ -5763,7 +5804,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;
@@ -7870,7 +7911,7 @@ function concludeReducer(params) {
   }
   state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
-  if (true) {
+  if (false) {
     globalThis.state = state;
   }
   return state;
@@ -7908,7 +7949,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (true) {
+  if (false) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -8359,10 +8400,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;
@@ -8472,6 +8517,8 @@ var computeFlex = (params) => {
   return {
     items: resultItems,
     flexSizes,
+    minSizes,
+    maxSizes,
     computedSizes,
     remainingSize: Math.round(availableSize - totalTakenSize)
   };
@@ -8544,6 +8591,7 @@ var getComputedVisibleColumns = ({
   setSortInfo,
   multiSort,
   viewportReservedWidth,
+  resizableColumns,
   draggableColumns,
   columnOrder,
   columnPinning,
@@ -8628,7 +8676,7 @@ var getComputedVisibleColumns = ({
       };
     })
   });
-  const { computedSizes } = flexResult;
+  const { computedSizes, flexSizes, minSizes, maxSizes } = flexResult;
   const computedPinnedStartColumns = [];
   const computedPinnedEndColumns = [];
   const computedUnpinnedColumns = [];
@@ -8656,7 +8704,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);
@@ -8667,6 +8715,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;
@@ -8700,8 +8751,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,
@@ -8723,7 +8779,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,
@@ -8773,7 +8829,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);
@@ -8849,6 +8905,7 @@ var useComputedVisibleColumns = ({
   pinnedEndMaxWidth,
   pinnedStartMaxWidth,
   viewportReservedWidth,
+  resizableColumns,
   columnVisibility,
   columnVisibilityAssumeVisible,
   columnSizing
@@ -8880,6 +8937,7 @@ var useComputedVisibleColumns = ({
       columnCssEllipsis,
       columnHeaderCssEllipsis,
       viewportReservedWidth,
+      resizableColumns,
       filterValue,
       sortable,
       sortInfo,
@@ -9037,6 +9095,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,
@@ -9325,7 +9384,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.8"
+      version: "0.3.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -9548,14 +9607,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 {
@@ -9621,6 +9680,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,
@@ -9694,6 +9754,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"];
@@ -9836,7 +9899,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  if (true) {
+  if (false) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }
@@ -9878,5 +9941,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.8",
+  "version": "0.3.11",
   "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": 1654613192511
+  "publishedAt": 1654702620822
 }