@infinite-table/infinite-react 0.0.2 → 0.0.3

package/index.d.ts

@@ -147,6 +147,7 @@ declare module "components/hooks/useComponentState" {
         [propName in keyof TYPE_PROPS & keyof TYPE_RESULT]: 1 | ((value: TYPE_PROPS[propName]) => TYPE_RESULT[propName]);
     }>;
     type ComponentStateRootConfig<T_PROPS, COMPONENT_MAPPED_STATE, COMPONENT_SETUP_STATE = {}, COMPONENT_DERIVED_STATE = {}, T_ACTIONS = {}, T_PARENT_STATE = {}> = {
+        debugName?: string;
         initSetupState?: () => COMPONENT_SETUP_STATE;
         forwardProps?: () => ForwardPropsToStateFnResult<T_PROPS, COMPONENT_MAPPED_STATE>;
         allowedControlledPropOverrides?: Record<keyof T_PROPS, true>;
@@ -367,7 +368,7 @@ declare module "components/DataSource/GroupRowsState" {
 }
 declare module "components/types/Renderable" {
     import * as React from 'react';
-    export type Renderable = React.ReactNode | string | number | null;
+    export type Renderable = React.ReactNode;
 }
 declare module "components/InfiniteTable/types/Utility" {
     export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -405,6 +406,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
         groupRowsBy: DataSourceState<DATA_TYPE>['groupRowsBy'];
     }
+    export type InfiniteTableColumnRenderValueParam<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE>;
     export type InfiniteTableColumnRowspanFnParams<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = {
         data: DATA_TYPE | null;
         rowInfo: InfiniteTableRowInfo<DATA_TYPE>;
@@ -419,6 +421,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     }
     export type InfiniteTableColumnPinned = 'start' | 'end' | false;
     export type InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = ({ value, rowIndex, column, data, toggleGroupRow, toggleCurrentGroupRow, rowInfo, groupRowsBy, }: InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE>) => Renderable | null;
+    export type InfiniteTableColumnRenderValueFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE>;
     export type InfiniteTableColumnHeaderRenderFunction<T> = ({ columnSortInfo, column, }: InfiniteTableColumnHeaderRenderParams<T>) => Renderable;
     export type InfiniteTableColumnWithField<T> = {
         field: keyof T;
@@ -492,7 +495,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         pivotColumn?: true;
         pivotTotalColumn?: true;
         pivotGroupKeys?: any[];
-        renderValue?: InfiniteTableColumnRenderFunction<T>;
+        renderValue?: InfiniteTableColumnRenderValueFunction<T>;
     };
     type InfiniteTableComputedColumnBase<T> = {
         computedWidth: number;
@@ -854,10 +857,11 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         columns: string[];
         depth: number;
     };
-    export type GroupColumnGetterOptions<T> = {
-        groupIndex?: number;
+    export type InfiniteTableGroupColumnGetterOptions<T> = {
+        groupIndexForColumn?: number;
+        groupByForColumn?: DataSourceGroupRowsBy<T>;
+        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
         groupCount: number;
-        groupBy?: DataSourceGroupRowsBy<T>;
         groupRowsBy: DataSourceGroupRowsBy<T>[];
     };
     export type PivotColumnGetterOptions<T> = {
@@ -872,7 +876,8 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
     export type InfiniteTablePivotColumnBase<T> = InfiniteTableColumn<T> & InfiniteTableColumnWithSize & {
         renderValue?: InfiniteTableColumnRenderFunction<T>;
     };
-    export type InfiniteTablePropGroupColumn<T> = InfiniteTableGroupColumnBase<T> | ((options: GroupColumnGetterOptions<T>, toggleGroupRow: (groupKeys: any[]) => void) => InfiniteTableGroupColumnBase<T>);
+    export type InfiniteTablePropGroupColumn<T> = InfiniteTableGroupColumnBase<T> | InfiniteTableGroupColumnFunction<T>;
+    export type InfiniteTableGroupColumnFunction<T> = (options: InfiniteTableGroupColumnGetterOptions<T>, toggleGroupRow: (groupKeys: any[]) => void) => InfiniteTableGroupColumnBase<T>;
     export type InfiniteTablePropPivotColumn<T> = InfiniteTablePivotColumnBase<T> | ((options: PivotColumnGetterOptions<T>) => InfiniteTablePivotColumnBase<T>);
     export type InfiniteTablePropPivotRowLabelsColumn<T> = InfiniteTablePropPivotColumn<T>;
     export type InfiniteTablePropComponents = {
@@ -1134,12 +1139,12 @@ declare module "components/InfiniteTable/types/index" {
     import type { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     import type { InfiniteTableAction } from "components/InfiniteTable/types/InfiniteTableAction";
     import type { InfiniteTableActionType } from "components/InfiniteTable/types/InfiniteTableActionType";
-    import type { InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnAggregator, InfiniteTableColumnGroup, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTablePropRowStyle, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTablePropRowClassName, InfiniteTablePropColumns, InfiniteTablePropComponents } from "components/InfiniteTable/types/InfiniteTableProps";
-    import type { InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import type { InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnAggregator, InfiniteTableColumnGroup, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTablePropRowStyle, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTablePropRowClassName, InfiniteTablePropColumns, InfiniteTablePropComponents, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions } from "components/InfiniteTable/types/InfiniteTableProps";
+    import type { InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam } from "components/InfiniteTable/types/InfiniteTableColumn";
     import type { InfiniteTableComputedValues } from "components/InfiniteTable/types/InfiniteTableComputedValues";
     import type { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
     import type { InfiniteTableRowInfo } from "utils/groupAndPivot/index";
-    export type { InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTablePropColumns, InfiniteTableRowInfo, InfiniteTablePropColumnOrder, InfiniteTablePropComponents, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, };
+    export type { InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTablePropColumns, InfiniteTableRowInfo, InfiniteTableGroupColumnFunction, InfiniteTablePropColumnOrder, InfiniteTablePropComponents, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTableGroupColumnGetterOptions, };
 }
 declare module "components/InfiniteTable/InfiniteTableContext" {
     import { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
@@ -1175,7 +1180,7 @@ declare module "components/InfiniteTable/state/getInitialState" {
         pivotColumn: 1 | ((value: Partial<import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropPivotColumn<T>> | undefined) => Partial<import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropPivotColumn<T>> | undefined);
         components: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropComponents | undefined) => import("components/InfiniteTable/types").InfiniteTablePropComponents | undefined);
         groupColumn: 1 | ((value: Partial<InfiniteTablePropGroupColumn<T>> | undefined) => Partial<InfiniteTablePropGroupColumn<T>> | undefined);
-        loadingText: 1 | ((value: import("components/types/Renderable").Renderable) => import("components/types/Renderable").Renderable);
+        loadingText: 1 | ((value: import("react").ReactNode) => import("react").ReactNode);
         onReady: 1 | ((value: ((api: import("components/InfiniteTable/types").InfiniteTableImperativeApi<T>) => void) | undefined) => ((api: import("components/InfiniteTable/types").InfiniteTableImperativeApi<T>) => void) | undefined);
         onSelfFocus: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined);
         onSelfBlur: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined);
@@ -1483,21 +1488,21 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/row.css" {
     export const GroupRowExpanderCls: string;
 }
 declare module "components/InfiniteTable/utils/getColumnForGroupBy" {
+    import * as React from 'react';
     import { InfiniteTableColumnRenderParam } from "components/InfiniteTable/index";
     import { DataSourceGroupRowsBy } from "components/DataSource/index";
     import { InfiniteTableGeneratedGroupColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
-    import { GroupColumnGetterOptions, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy } from "components/InfiniteTable/types/InfiniteTableProps";
-    export function getGroupColumnRender<T>({ groupIndex, groupRenderStrategy, toggleGroupRow, }: {
+    import { InfiniteTableGroupColumnGetterOptions, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy } from "components/InfiniteTable/types/InfiniteTableProps";
+    export function getGroupColumnRender<T>({ groupIndexForColumn, groupRenderStrategy, toggleGroupRow, }: {
         toggleGroupRow: (groupRowKeys: any[]) => void;
         groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
-        groupIndex: number;
-    }): (renderOptions: InfiniteTableColumnRenderParam<T>) => import("components/types/Renderable").Renderable;
-    export function getColumnForGroupBy<T>(options: GroupColumnGetterOptions<T> & {
-        groupIndex: number;
-        groupBy: DataSourceGroupRowsBy<T>;
-        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
+        groupIndexForColumn: number;
+    }): (renderOptions: InfiniteTableColumnRenderParam<T>) => React.ReactNode;
+    export function getColumnForGroupBy<T>(options: InfiniteTableGroupColumnGetterOptions<T> & {
+        groupIndexForColumn: number;
+        groupByForColumn: DataSourceGroupRowsBy<T>;
     }, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
-    export function getSingleGroupColumn<T>(options: GroupColumnGetterOptions<T>, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
+    export function getSingleGroupColumn<T>(options: InfiniteTableGroupColumnGetterOptions<T>, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
 }
 declare module "components/InfiniteTable/hooks/useToggleGroupRow" {
     export type ToggleGrouRowFn = (groupKeys: any[]) => void;

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({
@@ -2091,7 +2091,7 @@ var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 function getGroupColumnRender({
-  groupIndex,
+  groupIndexForColumn,
   groupRenderStrategy,
   toggleGroupRow
 }) {
@@ -2101,7 +2101,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 +2111,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 +2135,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 +3197,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (false) {
+  if (true) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -3297,7 +3301,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
             return rowspan;
           },
           render: getGroupColumnRender({
-            groupIndex,
+            groupIndexForColumn: groupIndex,
             groupRenderStrategy: groupRenderStrategy2,
             toggleGroupRow: toggleGroupRow2
           })
@@ -3360,7 +3364,7 @@ function useColumnsWhenGrouping() {
       return;
     }
     const update = () => {
-      componentActions.columnsWhenGrouping = getColumnsWhenGrouping({
+      const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
         groupRenderStrategy,
@@ -3368,6 +3372,7 @@ function useColumnsWhenGrouping() {
         pivotColumns,
         toggleGroupRow
       });
+      componentActions.columnsWhenGrouping = columnsWhenGrouping;
     };
     update();
     return interceptMap(columns, {
@@ -3455,11 +3460,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 +3472,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) => {
@@ -4247,7 +4253,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 +4312,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 +4325,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 +4347,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 +4369,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 +4379,7 @@ var ReactVirtualRenderer = class extends Logger {
         return;
       }
       if (itemElement) {
-        if (false) {
+        if (true) {
           itemElement.dataset.elementIndex = elementIndex;
           itemElement.dataset.itemIndex = itemIndex;
         }
@@ -4387,6 +4393,9 @@ var ReactVirtualRenderer = class extends Logger {
       }
     };
     this.destroy = () => {
+      if (true) {
+        return;
+      }
       this.destroyed = true;
       this.mappedItems.destroy();
       this.itemDOMElements = [];
@@ -4446,7 +4455,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 +4518,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 +4963,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 +4997,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 +5075,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 +5103,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, {
@@ -5408,7 +5417,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), {
@@ -5711,7 +5720,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 +5742,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 +5968,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 +6005,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 +6079,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 +6119,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 +6319,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,7 +6836,7 @@ var useLicense = (licenseKey) => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.2"
+      version: "0.0.3"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7016,7 +7025,8 @@ var InfiniteTableRoot = getComponentStateRoot({
     rowHeight: true,
     headerHeight: true
   },
-  getParentState: () => useDataSource()
+  getParentState: () => useDataSource(),
+  debugName: "InfiniteTable"
 });
 var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
   var _a;
@@ -7094,7 +7104,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/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({
@@ -2075,7 +2075,7 @@ var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 function getGroupColumnRender({
-  groupIndex,
+  groupIndexForColumn,
   groupRenderStrategy,
   toggleGroupRow
 }) {
@@ -2085,7 +2085,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 +2095,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 +2119,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 +3178,7 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
-  if (false) {
+  if (true) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
@@ -3278,7 +3282,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
             return rowspan;
           },
           render: getGroupColumnRender({
-            groupIndex,
+            groupIndexForColumn: groupIndex,
             groupRenderStrategy: groupRenderStrategy2,
             toggleGroupRow: toggleGroupRow2
           })
@@ -3341,7 +3345,7 @@ function useColumnsWhenGrouping() {
       return;
     }
     const update = () => {
-      componentActions.columnsWhenGrouping = getColumnsWhenGrouping({
+      const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
         groupRenderStrategy,
@@ -3349,6 +3353,7 @@ function useColumnsWhenGrouping() {
         pivotColumns,
         toggleGroupRow
       });
+      componentActions.columnsWhenGrouping = columnsWhenGrouping;
     };
     update();
     return interceptMap(columns, {
@@ -3436,11 +3441,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 +3453,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) => {
@@ -4199,7 +4205,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 +4260,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 +4273,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 +4295,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 +4317,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 +4327,7 @@ var ReactVirtualRenderer = class extends Logger {
         return;
       }
       if (itemElement) {
-        if (false) {
+        if (true) {
           itemElement.dataset.elementIndex = elementIndex;
           itemElement.dataset.itemIndex = itemIndex;
         }
@@ -4335,6 +4341,9 @@ var ReactVirtualRenderer = class extends Logger {
       }
     };
     this.destroy = () => {
+      if (true) {
+        return;
+      }
       this.destroyed = true;
       this.mappedItems.destroy();
       this.itemDOMElements = [];
@@ -4394,7 +4403,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 +4466,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 +4899,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 +4930,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 +5000,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 +5028,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, {
@@ -5323,7 +5332,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), {
@@ -5618,7 +5627,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 +5649,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 +5875,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 +5912,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 +5986,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 +6026,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 +6226,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,7 +6738,7 @@ var useLicense = (licenseKey) => {
   const valid = (0, import_react42.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.2"
+      version: "0.0.3"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -6911,7 +6920,8 @@ var InfiniteTableRoot = getComponentStateRoot({
     rowHeight: true,
     headerHeight: true
   },
-  getParentState: () => useDataSource()
+  getParentState: () => useDataSource(),
+  debugName: "InfiniteTable"
 });
 var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
   var _a;
@@ -6989,7 +6999,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",
+  "version": "0.0.3",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -15,5 +15,5 @@
   },
   "license": "Commercial",
   "//": "will be updated at build time",
-  "publishedAt": 1637839347500
+  "publishedAt": 1638183704342
 }