@infinite-table/infinite-react 0.0.2-canary.5 → 0.0.4

package/index.esm.js

@@ -658,7 +658,7 @@ function computeColumnGroupsDepths(columnGroups) {
     while (parentGroupId) {
       const parent = columnGroups.get(parentGroupId);
       if (!parent) {
-        if (false) {
+        if (true) {
           console.warn(`Cannot find column group ${parentGroupId}`);
         }
         break;
@@ -1075,7 +1075,7 @@ var Logger = class {
   constructor(channelName) {
     this.debug = emptyLogFn;
     this.error = emptyLogFn;
-    if (false) {
+    if (true) {
       this.debug = dbg(channelName);
       this.error = err(channelName);
     }
@@ -1677,16 +1677,16 @@ function getComponentStateRoot(config) {
             return [__spreadProps(__spreadValues({}, initialArg), { props: props2 })];
           }
         });
-        propsToStateSetRef.current = new Set([
-          ...propsToStateSetRef.current,
-          ...propertyReads
-        ]);
         const stateFromProps = mapPropsToState3({
           props,
           state: state2,
           oldState: null,
           parentState
         });
+        propsToStateSetRef.current = new Set([
+          ...propsToStateSetRef.current,
+          ...propertyReads
+        ]);
         return __spreadValues(__spreadValues({}, state2), stateFromProps);
       }
       return state2;
@@ -1708,16 +1708,16 @@ function getComponentStateRoot(config) {
             return [__spreadProps(__spreadValues({}, initialArg), { props: props2 })];
           }
         });
-        propsToStateSetRef.current = new Set([
-          ...propsToStateSetRef.current,
-          ...propertyReads
-        ]);
         const stateFromProps = mapPropsToState3({
           props: getProps(),
           state: newState,
           oldState: previousState,
           parentState: parentState2
         });
+        propsToStateSetRef.current = new Set([
+          ...propsToStateSetRef.current,
+          ...propertyReads
+        ]);
         Object.assign(newState, stateFromProps);
       }
       const result = config.concludeReducer ? config.concludeReducer({
@@ -1919,31 +1919,28 @@ import {
 import { useState as useState3 } from "react";
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iwz", stretch: "_16lm1iw10" };
-var cssEllipsisClassName = "_16lm1iw18 _16lm1iw19 _16lm1iw14";
-var cursor = { pointer: "_16lm1iw9" };
-var display = { flex: "_16lm1iwh", block: "_16lm1iwi", inlineBlock: "_16lm1iwj" };
+var alignItems = { center: "_16lm1iw11", stretch: "_16lm1iw12" };
+var cssEllipsisClassName = "_16lm1iw1a _16lm1iw1b _16lm1iw16";
+var cursor = { pointer: "_16lm1iwb" };
+var display = { flex: "_16lm1iwj", block: "_16lm1iwk", inlineBlock: "_16lm1iwl" };
 var fill = { currentColor: "_16lm1iw5", accentColor: "_16lm1iw6" };
-var flex = { "1": "_16lm1iwa", none: "_16lm1iwb" };
-var flexFlow = { column: "_16lm1iwx", row: "_16lm1iwy" };
-var justifyContent = { center: "_16lm1iw11", start: "_16lm1iw12", end: "_16lm1iw13" };
-var left = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
+var flex = { "1": "_16lm1iwc", none: "_16lm1iwd" };
+var flexFlow = { column: "_16lm1iwz", row: "_16lm1iw10" };
+var justifyContent = { center: "_16lm1iw13", start: "_16lm1iw14", end: "_16lm1iw15" };
+var left = { "0": "_16lm1iwt", "100%": "_16lm1iwu" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwp", "100%": "_16lm1iwq" };
+var top = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
+var transform = { translateZero: "_16lm1iw9", rotate90: "_16lm1iwa" };
 var transformTranslateZero = "_16lm1iw8";
-var userSelect = { none: "_16lm1iwk" };
-var willChange = { transform: "_16lm1iw17" };
-var zIndex = { "1": "_16lm1iwc", "10": "_16lm1iwd", "1000": "_16lm1iwe", "10000": "_16lm1iwf", "100000": "_16lm1iwg" };
+var userSelect = { none: "_16lm1iwm" };
+var willChange = { transform: "_16lm1iw19" };
+var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const style = __spreadValues({}, props.style);
   const [expanded, setExpanded] = useState3((_a = props.expanded) != null ? _a : props.defaultExpanded);
-  if (expanded) {
-    style.transform = `rotate(90deg)`;
-  }
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -1962,14 +1959,53 @@ function ExpanderIcon(props) {
     height: `${size}px`,
     viewBox: "0 0 24 24",
     width: `${size}px`,
-    style,
+    style: props.style,
     onClick,
-    className: join(props.className, fill.currentColor, flex.none, cursor.pointer, expanded ? fill.accentColor : "", "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
+    className: join(props.className, fill.accentColor, flex.none, cursor.pointer, expanded ? fill.accentColor : "", expanded ? transform.rotate90 : "", "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
   }, /* @__PURE__ */ createElement3("path", {
     d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
   }));
 }
 
+// node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js
+var shouldApplyCompound = (compoundCheck, selections) => {
+  for (const key of Object.keys(compoundCheck)) {
+    if (compoundCheck[key] !== selections[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+var createRuntimeFn = (config) => (options) => {
+  let className = config.defaultClassName;
+  const selections = {
+    ...config.defaultVariants,
+    ...options
+  };
+  for (const variantName in selections) {
+    var _selections$variantNa;
+    const variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+    if (variantSelection != null) {
+      let selection = variantSelection;
+      if (typeof selection === "boolean") {
+        selection = selection === true ? "true" : "false";
+      }
+      className += " " + config.variantClassNames[variantName][selection];
+    }
+  }
+  for (const [compoundCheck, compoundClassName] of config.compoundVariants) {
+    if (shouldApplyCompound(compoundCheck, selections)) {
+      className += " " + compoundClassName;
+    }
+  }
+  return className;
+};
+
+// src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
+var GroupRowExpanderCls = "_7pupv0b";
+var RowClsRecipe = createRuntimeFn({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
+var RowHoverCls = "_7pupv01";
+
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
 function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params) {
   if (!pivotColumns) {
@@ -2021,10 +2057,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
         }
         const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupRowsBy2.length;
         return /* @__PURE__ */ createElement4("div", {
-          className: join(display.flex, alignItems.center),
-          style: {
-            paddingInlineStart: `calc(${rowInfo.groupNesting - 1} * var(--ITableRow-group-column-nesting))`
-          }
+          className: join(display.flex, alignItems.center, GroupRowExpanderCls)
         }, showExpanderIcon ? /* @__PURE__ */ createElement4(ExpanderIcon, {
           expanded: !rowInfo.collapsed,
           onChange: () => {
@@ -2049,49 +2082,8 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
 import {
   createElement as createElement5
 } from "react";
-
-// node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js
-var shouldApplyCompound = (compoundCheck, selections) => {
-  for (const key of Object.keys(compoundCheck)) {
-    if (compoundCheck[key] !== selections[key]) {
-      return false;
-    }
-  }
-  return true;
-};
-var createRuntimeFn = (config) => (options) => {
-  let className = config.defaultClassName;
-  const selections = {
-    ...config.defaultVariants,
-    ...options
-  };
-  for (const variantName in selections) {
-    var _selections$variantNa;
-    const variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
-    if (variantSelection != null) {
-      let selection = variantSelection;
-      if (typeof selection === "boolean") {
-        selection = selection === true ? "true" : "false";
-      }
-      className += " " + config.variantClassNames[variantName][selection];
-    }
-  }
-  for (const [compoundCheck, compoundClassName] of config.compoundVariants) {
-    if (shouldApplyCompound(compoundCheck, selections)) {
-      className += " " + compoundClassName;
-    }
-  }
-  return className;
-};
-
-// src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
-var GroupRowExpanderCls = "_7pupv0b";
-var RowClsRecipe = createRuntimeFn({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
-var RowHoverCls = "_7pupv01";
-
-// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 function getGroupColumnRender({
-  groupIndex,
+  groupIndexForColumn,
   groupRenderStrategy,
   toggleGroupRow
 }) {
@@ -2101,7 +2093,7 @@ function getGroupColumnRender({
     if (column.renderValue) {
       value = column.renderValue(renderOptions);
     }
-    let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndex]) || rowInfo;
+    let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndexForColumn]) || rowInfo;
     if (!groupRowInfo) {
       return null;
     }
@@ -2111,14 +2103,14 @@ function getGroupColumnRender({
       if (groupRowInfo.groupCount === 1) {
         return value;
       }
-      if (groupRowInfo.groupNesting === groupIndex && collapsed) {
+      if (groupRowInfo.groupNesting === groupIndexForColumn && collapsed) {
         return null;
       }
     } else {
       if (!groupRowInfo.isGroupRow) {
         return null;
       }
-      if (groupIndex + 1 !== groupRowInfo.groupNesting) {
+      if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting) {
         return null;
       }
     }
@@ -2135,17 +2127,21 @@ function getGroupColumnRender({
   };
 }
 function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
-  const { groupBy, groupIndex, groupRenderStrategy } = options;
+  const {
+    groupByForColumn,
+    groupIndexForColumn,
+    groupRenderStrategy
+  } = options;
   let generatedGroupColumn = __spreadValues({
-    header: `Group by ${groupBy.field}`,
-    groupByField: groupBy.field,
+    header: `Group by ${groupByForColumn.field}`,
+    groupByField: groupByForColumn.field,
     sortable: false,
     render: getGroupColumnRender({
-      groupIndex,
+      groupIndexForColumn,
       toggleGroupRow,
       groupRenderStrategy
     })
-  }, groupBy.column);
+  }, groupByForColumn.column);
   if (groupColumnFromProps) {
     if (typeof groupColumnFromProps === "function") {
       generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps(options, toggleGroupRow));
@@ -3193,7 +3189,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (false) {
+  if (true) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -3297,7 +3293,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
             return rowspan;
           },
           render: getGroupColumnRender({
-            groupIndex,
+            groupIndexForColumn: groupIndex,
             groupRenderStrategy: groupRenderStrategy2,
             toggleGroupRow: toggleGroupRow2
           })
@@ -3360,7 +3356,7 @@ function useColumnsWhenGrouping() {
       return;
     }
     const update = () => {
-      componentActions.columnsWhenGrouping = getColumnsWhenGrouping({
+      const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
         groupRenderStrategy,
@@ -3368,6 +3364,7 @@ function useColumnsWhenGrouping() {
         pivotColumns,
         toggleGroupRow
       });
+      componentActions.columnsWhenGrouping = columnsWhenGrouping;
     };
     update();
     return interceptMap(columns, {
@@ -3455,11 +3452,11 @@ function getColumnsWhenGrouping(params) {
   }
   const computedColumns = new Map();
   if (groupRenderStrategy === "multi-column") {
-    groupRowsBy.forEach((groupBy, index, arr) => {
-      computedColumns.set(`group-by-${groupBy.field}`, getColumnForGroupBy({
-        groupBy,
+    groupRowsBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
+      computedColumns.set(`group-by-${groupByForColumn.field}`, getColumnForGroupBy({
+        groupByForColumn,
         groupRowsBy,
-        groupIndex: index,
+        groupIndexForColumn,
         groupCount: arr.length,
         groupRenderStrategy
       }, toggleGroupRow, groupColumn));
@@ -3467,7 +3464,8 @@ function getColumnsWhenGrouping(params) {
   } else if (groupRenderStrategy === "single-column") {
     computedColumns.set("group-by", getSingleGroupColumn({
       groupCount: groupRowsBy.length,
-      groupRowsBy
+      groupRowsBy,
+      groupRenderStrategy
     }, toggleGroupRow, groupColumn));
   }
   columns.forEach((col, colId) => {
@@ -3679,15 +3677,15 @@ function VerticalScrollbarPlaceholderFn(props) {
 var VerticalScrollbarPlaceholder = memo2(VerticalScrollbarPlaceholderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var CellCls = "_1eexc2a5 _16lm1iwh _16lm1iwy _16lm1iwz _16lm1iw2 _16lm1iw17 _16lm1iw18";
+var CellCls = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var HeaderCellProxy = "_12zfob10";
 var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
-var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "_12zfob12 _16lm1iwy", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
-var HeaderGroupCls = "_16lm1iwx _16lm1iwh";
-var HeaderGroup_Children = "_16lm1iwh _16lm1iwy _16lm1iw10 _16lm1iwa";
-var HeaderGroup_Header = "_12zfob1x _16lm1iwh _16lm1iwy _16lm1iwz";
+var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "_12zfob12 _16lm1iw10", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
+var HeaderGroupCls = "_16lm1iwz _16lm1iwj";
+var HeaderGroup_Children = "_16lm1iwj _16lm1iw10 _16lm1iw12 _16lm1iwc";
+var HeaderGroup_Header = "_12zfob1x _16lm1iwj _16lm1iw10 _16lm1iw11";
 var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
-var HeaderWrapperCls = "_12zfob1v _16lm1iw14 _16lm1iw1 _16lm1iwh _16lm1iwy";
+var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
@@ -3718,9 +3716,9 @@ var useInfiniteTableState = () => {
 };
 
 // src/components/InfiniteTable/components/cell.css.ts
-var CellCls2 = "_1eexc2a5 _16lm1iwh _16lm1iwy _16lm1iwz _16lm1iw2 _16lm1iw17 _16lm1iw18";
+var CellCls2 = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "_16lm1iw2 _16lm1iwm _16lm1iw7 _16lm1iwp", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
+var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
 var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
@@ -4247,7 +4245,7 @@ var MappedItems = class extends Logger {
     this.init();
   }
   renderItemAtElement(itemIndex, elementIndex, renderNode) {
-    if (false) {
+    if (true) {
       this.debug(`Render item ${itemIndex} at element ${elementIndex}`);
     }
     const currentItemIndex = this.elementIndexToItemIndex[elementIndex];
@@ -4306,7 +4304,7 @@ var ReactVirtualRenderer = class extends Logger {
       }
       const { mappedItems } = this;
       const { renderStartIndex, renderEndIndex } = range;
-      if (false) {
+      if (true) {
         this.debug(`Render range ${renderStartIndex}-${renderEndIndex}. Force ${force}`);
       }
       const renderCount = renderEndIndex === -1 ? 0 : renderEndIndex - renderStartIndex + 1;
@@ -4319,7 +4317,7 @@ var ReactVirtualRenderer = class extends Logger {
             delete this.updaters[elementIndex];
           }
           delete this.items[elementIndex];
-          if (false) {
+          if (true) {
             this.debug(`Discard element ${elementIndex}`);
           }
         });
@@ -4341,7 +4339,7 @@ var ReactVirtualRenderer = class extends Logger {
         }
         const elementIndex = elementsOutsideItemRange.pop();
         if (elementIndex == null) {
-          if (false) {
+          if (true) {
             this.error(`Cannot find element to render item ${i}`);
           }
           continue;
@@ -4363,7 +4361,7 @@ var ReactVirtualRenderer = class extends Logger {
       const itemIndex = this.mappedItems.getItemRenderedAtElementIndex(elementIndex);
       const options = this.brain.getOptions();
       if (itemIndex == null) {
-        if (false) {
+        if (true) {
           this.error(`Cannot find item for element ${elementIndex}`);
         }
         return;
@@ -4373,7 +4371,7 @@ var ReactVirtualRenderer = class extends Logger {
         return;
       }
       if (itemElement) {
-        if (false) {
+        if (true) {
           itemElement.dataset.elementIndex = elementIndex;
           itemElement.dataset.itemIndex = itemIndex;
         }
@@ -4387,6 +4385,9 @@ var ReactVirtualRenderer = class extends Logger {
       }
     };
     this.destroy = () => {
+      if (true) {
+        return;
+      }
       this.destroyed = true;
       this.mappedItems.destroy();
       this.itemDOMElements = [];
@@ -4446,7 +4447,7 @@ var ReactVirtualRenderer = class extends Logger {
       return;
     }
     this.mappedItems.renderItemAtElement(itemIndex, elementIndex, renderedNode);
-    if (false) {
+    if (true) {
       this.debug(`Render item ${itemIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
@@ -4509,7 +4510,7 @@ function InfiniteTableHeaderFn(props) {
   const renderColumn = useCallback8(({ domRef: domRef2, itemIndex: columnIndex }) => {
     const column = columns[columnIndex];
     if (!column) {
-      if (false) {
+      if (true) {
         debug3("Cannot find column to render at ", columnIndex);
       }
       return null;
@@ -4954,7 +4955,7 @@ var getScrollableClassName = (scrollable) => {
 };
 
 // src/components/VirtualScrollContainer/index.tsx
-var rootClassName6 = "Infinite-VirtualScrollContainer";
+var rootClassName6 = "InfiniteVirtualScrollContainer";
 var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props, ref) {
   const {
     children,
@@ -4988,8 +4989,8 @@ function SpacePlaceholderFn(props) {
   };
   return /* @__PURE__ */ createElement21("div", {
     "data-count": count,
-    "data-width": width,
-    "data-height": height,
+    "data-placeholder-width": true ? width : void 0,
+    "data-placeholder-height": true ? height : void 0,
     "data-name": "SpacePlaceholder",
     style
   });
@@ -5066,7 +5067,7 @@ var VirtualList = (props) => {
   useEffect15(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
-      if (false) {
+      if (true) {
         debug4.extend(mainAxis)(`Render count change ${renderCount}`);
       }
       rerender();
@@ -5094,7 +5095,7 @@ var VirtualList = (props) => {
   const domProps = __spreadProps(__spreadValues({}, restDOMProps), {
     className: join(props.className, rootClassName7, `${rootClassName7}--${mainAxis}`, VirtualListCls, VirtualListClsOrientation[mainAxis])
   });
-  if (false) {
+  if (true) {
     domProps["data-cmp-name"] = `VirtualList`;
   }
   return /* @__PURE__ */ createElement22(Fragment4, null, /* @__PURE__ */ createElement22("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement22(VirtualScrollContainer, {
@@ -5336,7 +5337,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     const rows = parentNode.querySelectorAll(hoverSelector.join(","));
     rows.forEach((row) => row.classList.remove(InfiniteTableRowClassName__hover, RowHoverCls));
   }, [initialMouseLeave, showHoverRows]);
-  if (rowInfo.isGroupRow && groupRenderStrategy === "single-column") {
+  if (rowInfo.isGroupRow) {
     style = style || {};
     style[stripVar(ThemeVars.components.Row.groupNesting)] = rowInfo.groupNesting - 1;
   }
@@ -5408,7 +5409,7 @@ function InfiniteTableRowFn(props) {
   if (renderCellRef.current !== renderCell) {
     renderCellRef.current = renderCell;
   }
-  if (false) {
+  if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
   return /* @__PURE__ */ createElement25("div", __spreadProps(__spreadValues({}, domProps), {
@@ -5555,10 +5556,10 @@ import { useCallback as useCallback13, useEffect as useEffect16, useRef as useRe
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var FooterCls = "_16lm1iw1";
-var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwh _16lm1iwx _16lm1iw0";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwj _16lm1iwz _16lm1iw0";
 var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
 var InfiniteClsScrolling = "_1yeub2v1";
-var InfiniteClsShiftingColumns = "_16lm1iwk";
+var InfiniteClsShiftingColumns = "_16lm1iwm";
 var PinnedRowsClsVariants = { pinnedStart: "_1yeub2ve", pinnedEnd: "_1yeub2vf", overflow: "_1yeub2vg" };
 var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
 
@@ -5684,7 +5685,7 @@ var rootClassName10 = InfiniteListRootClassName;
 var defaultClasses = [
   willChange.transform,
   position.relative,
-  transformTranslateZero
+  transform.translateZero
 ];
 var RowListWithExternalScrolling = (props) => {
   const {
@@ -5711,7 +5712,7 @@ var RowListWithExternalScrolling = (props) => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
-        if (false) {
+        if (true) {
           const { renderStartIndex, renderEndIndex } = brain.getRenderRange();
           node.dataset.renderStartIndex = renderStartIndex;
           node.dataset.renderEndIndex = renderEndIndex;
@@ -5733,7 +5734,7 @@ var RowListWithExternalScrolling = (props) => {
     style,
     className: join(className, rootClassName10, `${rootClassName10}--vertical`, VirtualListCls, VirtualListClsOrientation.vertical, ...defaultClasses)
   };
-  if (false) {
+  if (true) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
   return /* @__PURE__ */ createElement28("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement28(RawList, {
@@ -5959,7 +5960,7 @@ var VirtualBrain = class extends Logger {
     this.availableSize = { width: 0, height: 0 };
     this.setAvailableSize = (size) => {
       this.availableSize = size;
-      if (false) {
+      if (true) {
         this.debug("New available size %d", size[this.options.mainAxis === "vertical" ? "height" : "width"]);
       }
       this.updateRenderCount();
@@ -5996,7 +5997,7 @@ var VirtualBrain = class extends Logger {
         this.notifyTotalSizeChange();
         return;
       }
-      if (false) {
+      if (true) {
         this.debug("set renderCount to %d", renderCount);
       }
       this.renderCount = renderCount;
@@ -6070,7 +6071,7 @@ var VirtualBrain = class extends Logger {
           return;
         }
       }
-      if (false) {
+      if (true) {
         if (itemSizeChange && countChange) {
           this.debug(`Reset brain: reason itemSize changed and count changed (old ${count}, new ${newCount})`, {
             oldItemSize: itemSize,
@@ -6110,7 +6111,7 @@ var VirtualBrain = class extends Logger {
           if (cache[i] === void 0) {
             ItemIndexBag.itemIndex = i;
             let spanValue = itemSpan(ItemIndexBag);
-            if (false) {
+            if (spanValue < 1) {
               this.debug("itemSpan cannot be less than 1 - got %d for index %d", spanValue, i);
             }
             cache[i] = i;
@@ -6310,7 +6311,7 @@ var VirtualBrain = class extends Logger {
     const { renderStartIndex, renderEndIndex } = this.renderRange;
     if (renderEndIndex !== renderRange.renderEndIndex || renderStartIndex !== renderRange.renderStartIndex) {
       this.renderRange = renderRange;
-      if (false) {
+      if (true) {
         this.debug("Set renderRange to %d-%d", renderRange.renderStartIndex, renderRange.renderEndIndex);
       }
       this.notifyRenderRangeChange();
@@ -6827,9 +6828,9 @@ var useLicense = (licenseKey) => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.2-canary.5"
+      version: "0.0.4"
     });
-    if (!valid2 && isInsideSandbox) {
+    if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
     }
     return valid2;
@@ -6983,8 +6984,8 @@ import {
 } from "react";
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt" };
-var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt";
+var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
@@ -7016,7 +7017,8 @@ var InfiniteTableRoot = getComponentStateRoot({
     rowHeight: true,
     headerHeight: true
   },
-  getParentState: () => useDataSource()
+  getParentState: () => useDataSource(),
+  debugName: "InfiniteTable"
 });
 var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
   var _a;
@@ -7094,7 +7096,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  if (false) {
+  if (true) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }