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

package/index.js

@@ -674,7 +674,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;
@@ -1083,7 +1083,7 @@ var Logger = class {
   constructor(channelName) {
     this.debug = emptyLogFn;
     this.error = emptyLogFn;
-    if (false) {
+    if (true) {
       this.debug = dbg(channelName);
       this.error = err(channelName);
     }
@@ -1670,16 +1670,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;
@@ -1701,16 +1701,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({
@@ -1905,31 +1905,28 @@ var React6 = __toModule(require("react"));
 var import_react14 = __toModule(require("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] = (0, import_react14.useState)((_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);
@@ -1948,14 +1945,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__ */ React6.createElement("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) {
@@ -2007,10 +2043,7 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
         }
         const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupRowsBy2.length;
         return /* @__PURE__ */ React7.createElement("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__ */ React7.createElement(ExpanderIcon, {
           expanded: !rowInfo.collapsed,
           onChange: () => {
@@ -2033,49 +2066,8 @@ function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params)
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 var React8 = __toModule(require("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
 }) {
@@ -2085,7 +2077,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;
     }
@@ -2095,14 +2087,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;
       }
     }
@@ -2119,17 +2111,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));
@@ -3174,7 +3170,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (false) {
+  if (true) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -3278,7 +3274,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
             return rowspan;
           },
           render: getGroupColumnRender({
-            groupIndex,
+            groupIndexForColumn: groupIndex,
             groupRenderStrategy: groupRenderStrategy2,
             toggleGroupRow: toggleGroupRow2
           })
@@ -3341,7 +3337,7 @@ function useColumnsWhenGrouping() {
       return;
     }
     const update = () => {
-      componentActions.columnsWhenGrouping = getColumnsWhenGrouping({
+      const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
         groupRenderStrategy,
@@ -3349,6 +3345,7 @@ function useColumnsWhenGrouping() {
         pivotColumns,
         toggleGroupRow
       });
+      componentActions.columnsWhenGrouping = columnsWhenGrouping;
     };
     update();
     return interceptMap(columns, {
@@ -3436,11 +3433,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));
@@ -3448,7 +3445,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) => {
@@ -3652,15 +3650,15 @@ function VerticalScrollbarPlaceholderFn(props) {
 var VerticalScrollbarPlaceholder = React11.memo(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
 var React18 = __toModule(require("react"));
@@ -3682,9 +3680,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
@@ -4199,7 +4197,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];
@@ -4254,7 +4252,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;
@@ -4267,7 +4265,7 @@ var ReactVirtualRenderer = class extends Logger {
             delete this.updaters[elementIndex];
           }
           delete this.items[elementIndex];
-          if (false) {
+          if (true) {
             this.debug(`Discard element ${elementIndex}`);
           }
         });
@@ -4289,7 +4287,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;
@@ -4311,7 +4309,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;
@@ -4321,7 +4319,7 @@ var ReactVirtualRenderer = class extends Logger {
         return;
       }
       if (itemElement) {
-        if (false) {
+        if (true) {
           itemElement.dataset.elementIndex = elementIndex;
           itemElement.dataset.itemIndex = itemIndex;
         }
@@ -4335,6 +4333,9 @@ var ReactVirtualRenderer = class extends Logger {
       }
     };
     this.destroy = () => {
+      if (true) {
+        return;
+      }
       this.destroyed = true;
       this.mappedItems.destroy();
       this.itemDOMElements = [];
@@ -4394,7 +4395,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);
@@ -4457,7 +4458,7 @@ function InfiniteTableHeaderFn(props) {
   const renderColumn = (0, import_react26.useCallback)(({ domRef: domRef2, itemIndex: columnIndex }) => {
     const column = columns[columnIndex];
     if (!column) {
-      if (false) {
+      if (true) {
         debug3("Cannot find column to render at ", columnIndex);
       }
       return null;
@@ -4890,7 +4891,7 @@ var getScrollableClassName = (scrollable) => {
 };
 
 // src/components/VirtualScrollContainer/index.tsx
-var rootClassName6 = "Infinite-VirtualScrollContainer";
+var rootClassName6 = "InfiniteVirtualScrollContainer";
 var VirtualScrollContainer = React23.forwardRef(function VirtualScrollContainer2(props, ref) {
   const {
     children,
@@ -4921,8 +4922,8 @@ function SpacePlaceholderFn(props) {
   };
   return /* @__PURE__ */ React24.createElement("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
   });
@@ -4991,7 +4992,7 @@ var VirtualList = (props) => {
   (0, import_react30.useEffect)(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
-      if (false) {
+      if (true) {
         debug4.extend(mainAxis)(`Render count change ${renderCount}`);
       }
       rerender();
@@ -5019,7 +5020,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__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React25.createElement(VirtualScrollContainer, {
@@ -5251,7 +5252,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;
   }
@@ -5323,7 +5324,7 @@ function InfiniteTableRowFn(props) {
   if (renderCellRef.current !== renderCell) {
     renderCellRef.current = renderCell;
   }
-  if (false) {
+  if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
   return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, domProps), {
@@ -5467,10 +5468,10 @@ var import_react34 = __toModule(require("react"));
 
 // 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: [] });
 
@@ -5591,7 +5592,7 @@ var rootClassName10 = InfiniteListRootClassName;
 var defaultClasses = [
   willChange.transform,
   position.relative,
-  transformTranslateZero
+  transform.translateZero
 ];
 var RowListWithExternalScrolling = (props) => {
   const {
@@ -5618,7 +5619,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;
@@ -5640,7 +5641,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__ */ React31.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React31.createElement(RawList, {
@@ -5866,7 +5867,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();
@@ -5903,7 +5904,7 @@ var VirtualBrain = class extends Logger {
         this.notifyTotalSizeChange();
         return;
       }
-      if (false) {
+      if (true) {
         this.debug("set renderCount to %d", renderCount);
       }
       this.renderCount = renderCount;
@@ -5977,7 +5978,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,
@@ -6017,7 +6018,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;
@@ -6217,7 +6218,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();
@@ -6729,9 +6730,9 @@ var useLicense = (licenseKey) => {
   const valid = (0, import_react42.useMemo)(() => {
     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;
@@ -6878,8 +6879,8 @@ function useDOMProps(initialDOMProps) {
 var React35 = __toModule(require("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
@@ -6911,7 +6912,8 @@ var InfiniteTableRoot = getComponentStateRoot({
     rowHeight: true,
     headerHeight: true
   },
-  getParentState: () => useDataSource()
+  getParentState: () => useDataSource(),
+  debugName: "InfiniteTable"
 });
 var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
   var _a;
@@ -6989,7 +6991,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
-  if (false) {
+  if (true) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.0.2-canary.5",
+  "version": "0.0.4",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -13,7 +13,7 @@
     "debug": "^4.3.1",
     "decamelize": "^5.0.0"
   },
-  "license": "Commercial",
+  "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1637762516100
+  "publishedAt": 1638307822158
 }