@infinite-table/infinite-react 7.2.0 → 7.2.2

package/index.d.ts

@@ -42,6 +42,18 @@ type Pair<KeyType, ValueType> = {
     length: number;
     revision?: number;
 };
+type PairWithKeys<KeyType, ValueType> = Pair<KeyType, ValueType> & {
+    keys: KeyType[];
+};
+type StartingWithMethodOptions = {
+    excludeSelf?: boolean;
+    depthLimit?: number;
+};
+type StartingWithMethodOptionsWithOrder = {
+    excludeSelf?: boolean;
+    depthLimit?: number;
+    respectOrder?: boolean;
+};
 type DeepMapVisitFn<KeyType, ValueType, ReturnType = void> = (pair: Pair<KeyType, ValueType>, keys: KeyType[], next: VoidFn$1) => ReturnType;
 declare class DeepMap<KeyType, ValueType> {
     private map;
@@ -51,10 +63,19 @@ declare class DeepMap<KeyType, ValueType> {
     static clone<KeyType, ValueType>(map: DeepMap<KeyType, ValueType>): DeepMap<KeyType, ValueType>;
     constructor(initial?: [KeyType[], ValueType][]);
     fill(initial?: [KeyType[], ValueType][]): void;
-    getValuesStartingWith(keys: KeyType[], excludeSelf?: boolean, depthLimit?: number): ValueType[];
-    getEntriesStartingWith(keys: KeyType[], excludeSelf?: boolean, depthLimit?: number): [KeyType[], ValueType][];
-    getUnnestedKeysStartingWith(keys: KeyType[], excludeSelf?: boolean, depthLimit?: number): KeyType[][];
-    getKeysStartingWith(keys: KeyType[], excludeSelf?: boolean, depthLimit?: number): KeyType[][];
+    getValuesStartingWith(keys: KeyType[], options?: StartingWithMethodOptions): ValueType[];
+    getEntriesStartingWith(keys: KeyType[], options?: StartingWithMethodOptions): [KeyType[], ValueType][];
+    getLeafNodesStartingWith<T>(keys: KeyType[], withPair: (pair: PairWithKeys<KeyType, ValueType>) => T, options?: StartingWithMethodOptionsWithOrder): T[];
+    getKeysForLeafNodesStartingWith(keys: KeyType[], options?: StartingWithMethodOptionsWithOrder): KeyType[][];
+    getKeysAndValuesForLeafNodesStartingWith(keys: KeyType[], options?: StartingWithMethodOptionsWithOrder): [KeyType[], ValueType][];
+    /**
+     * @param keys - the keys of the node to start from
+     * @param excludeSelf - whether to exclude the start node
+     * @param depthLimit - the depth limit
+     * @returns the keys of the first child on each branch (starting from the node with the given keys)
+     */
+    getKeysOfFirstChildOnEachBranchStartingWith(keys: KeyType[], options?: StartingWithMethodOptionsWithOrder): KeyType[][];
+    getKeysStartingWith(keys: KeyType[], options?: StartingWithMethodOptions): KeyType[][];
     private getStartingWith;
     private getMapAt;
     getAllChildrenSizeFor(keys: KeyType[]): number;
@@ -244,6 +265,8 @@ declare class TreeSelectionState<T = any> {
     cache: DeepMap<NodePath, NodeSelectionState>;
     getConfig: GetTreeSelectionStateConfig<T>;
     getTreeDeepMap(): DeepMap<any, DeepMapTreeValueType<any, any>>;
+    getSelectedLeafNodePaths(rootNodePath?: NodePath, treeDeepMap?: DeepMap<any, any>): NodePath[];
+    getDeselectedLeafNodePaths(rootNodePath?: NodePath, treeDeepMap?: DeepMap<any, any>): NodePath[];
     isLeafNode(nodePath: NodePath): boolean;
     getLeafNodesCount(nodePath: NodePath): number;
     static from<T>(treeSelectionState: TreeSelectionStateObject, getConfig: GetTreeSelectionStateConfig<T>): TreeSelectionState<T>;
@@ -1430,7 +1453,7 @@ type TreeExpandStateApi<T> = {
     getNodeDataByPath(nodePath: any[]): T | null;
     getRowInfoByPath(nodePath: any[]): InfiniteTableRowInfo<T> | null;
 };
-type TreeSelectionApi<_T = any> = {
+type TreeSelectionApi<T = any> = {
     get allRowsSelected(): boolean;
     isNodeSelected(nodePath: NodePath$1): boolean | null;
     selectNode(nodePath: NodePath$1, options?: ForceOptions): void;
@@ -1441,6 +1464,18 @@ type TreeSelectionApi<_T = any> = {
     expandAll(): void;
     collapseAll(): void;
     deselectAll(): void;
+    getSelectedLeafNodePaths(config?: {
+        rootNodePath?: NodePath$1;
+        treeSelectionState?: TreeSelectionState<T>;
+    }): NodePath$1[];
+    getDeselectedLeafNodePaths(config?: {
+        rootNodePath?: NodePath$1;
+        treeSelectionState?: TreeSelectionState<T>;
+    }): NodePath$1[];
+    getSelectedLeafRowInfos(config?: {
+        rootNodePath?: NodePath$1;
+        treeSelectionState?: TreeSelectionState<T>;
+    }): InfiniteTable_Tree_RowInfoLeafNode<T>[];
 };
 type TreeApi<T> = TreeExpandStateApi<T> & TreeSelectionApi<T>;
 
@@ -1969,10 +2004,12 @@ type DataSourcePropCellSelection_SingleCell = null | CellSelectionPosition;
 type DataSourcePropCellSelection = DataSourcePropCellSelection_MultiCell | DataSourcePropCellSelection_SingleCell;
 type DataSourcePropSelectionMode = false | 'single-cell' | 'single-row' | 'multi-cell' | 'multi-row';
 type DataSourcePropOnRowSelectionChange_MultiRow = (rowSelection: DataSourcePropRowSelection_MultiRow, selectionMode: 'multi-row') => void;
-type DataSourcePropOnTreeSelectionChange_MultiNode<T = any> = (treeSelection: TreeSelectionStateObject, params: {
+type DataSourcePropOnTreeSelectionChange_MultiNode<T = any> = (treeSelectionStateObject: TreeSelectionStateObject, params: {
+    treeSelectionState: TreeSelectionState<T>;
     selectionMode: 'multi-row';
     lastUpdatedNodePath: NodePath$1 | null;
     dataSourceApi: DataSourceApi<T>;
+    treeApi: TreeApi<T>;
 }) => void;
 type DataSourcePropOnRowSelectionChange_SingleRow = (rowSelection: DataSourcePropRowSelection_SingleRow, selectionMode: 'single-row') => void;
 type DataSourcePropOnTreeSelectionChange_SingleNode = (treeSelection: DataSourcePropTreeSelection_SingleNode, params: {

package/index.dev.js

@@ -305,34 +305,76 @@ var DeepMap = class _DeepMap {
       });
     }
   }
-  getValuesStartingWith(keys, excludeSelf, depthLimit) {
+  getValuesStartingWith(keys, options) {
     const result = [];
     this.getStartingWith(
       keys,
       (_keys, value) => {
         result.push(value);
       },
-      excludeSelf,
-      depthLimit
+      options
     );
     return result;
   }
-  getEntriesStartingWith(keys, excludeSelf, depthLimit) {
+  getEntriesStartingWith(keys, options) {
     const result = [];
     this.getStartingWith(
       keys,
       (keys2, value) => {
         result.push([keys2, value]);
       },
-      excludeSelf,
-      depthLimit
+      options
     );
     return result;
   }
-  getUnnestedKeysStartingWith(keys, excludeSelf, depthLimit) {
+  getLeafNodesStartingWith(keys, withPair, options) {
+    const { respectOrder = false } = options || {};
     const pairs = [];
+    const result = [];
+    this.getStartingWith(
+      keys,
+      (_keys, _value, pair) => {
+        if (!pair.map && pair.hasOwnProperty("value")) {
+          if (respectOrder) {
+            pairs.push(pair);
+          } else {
+            result.push(withPair(pair));
+          }
+        }
+      },
+      options
+    );
+    if (respectOrder) {
+      return pairs.sort(SORT_ASC_REVISION).map(withPair);
+    }
+    return result;
+  }
+  getKeysForLeafNodesStartingWith(keys, options) {
+    return this.getLeafNodesStartingWith(keys, (pair) => pair.keys, options);
+  }
+  getKeysAndValuesForLeafNodesStartingWith(keys, options) {
+    return this.getLeafNodesStartingWith(
+      keys,
+      (pair) => [pair.keys, pair.value],
+      options
+    );
+  }
+  /**
+   * @param keys - the keys of the node to start from
+   * @param excludeSelf - whether to exclude the start node
+   * @param depthLimit - the depth limit
+   * @returns the keys of the first child on each branch (starting from the node with the given keys)
+   */
+  getKeysOfFirstChildOnEachBranchStartingWith(keys, options) {
+    const { excludeSelf, depthLimit, respectOrder = true } = options || {};
+    const pairs = [];
+    const result = [];
     const fn = (pair2) => {
-      pairs.push(pair2);
+      if (respectOrder) {
+        pairs.push(pair2);
+      } else {
+        result.push(pair2.keys);
+      }
     };
     let currentMap = this.map;
     let pair;
@@ -367,7 +409,10 @@ var DeepMap = class _DeepMap {
       }
     }
     if (stop) {
-      return pairs.sort(SORT_ASC_REVISION).map((pair2) => pair2.keys);
+      if (respectOrder) {
+        return pairs.sort(SORT_ASC_REVISION).map((pair2) => pair2.keys);
+      }
+      return result;
     }
     this.visitWithNext(
       keys,
@@ -379,21 +424,24 @@ var DeepMap = class _DeepMap {
       depthLimit,
       excludeSelf
     );
-    return pairs.sort(SORT_ASC_REVISION).map((pair2) => pair2.keys);
+    if (respectOrder) {
+      return pairs.sort(SORT_ASC_REVISION).map((pair2) => pair2.keys);
+    }
+    return result;
   }
-  getKeysStartingWith(keys, excludeSelf, depthLimit) {
+  getKeysStartingWith(keys, options) {
     const result = [];
     this.getStartingWith(
       keys,
       (keys2) => {
         result.push(keys2);
       },
-      excludeSelf,
-      depthLimit
+      options
     );
     return result;
   }
-  getStartingWith(keys, fn, excludeSelf, depthLimit) {
+  getStartingWith(keys, fn, options) {
+    const { excludeSelf, depthLimit } = options || {};
     let currentMap = this.map;
     let pair;
     let stop = false;
@@ -415,7 +463,7 @@ var DeepMap = class _DeepMap {
     }
     if (pair && pair.value !== void 0) {
       if (!excludeSelf) {
-        fn(keys, pair.value);
+        fn(keys, pair.value, { ...pair, keys });
       }
     }
     if (stop) {
@@ -423,8 +471,8 @@ var DeepMap = class _DeepMap {
     }
     this.visitWithNext(
       keys,
-      (value, keys2, _i, next) => {
-        fn(keys2, value);
+      (value, keys2, _i, next, pair2) => {
+        fn(keys2, value, { ...pair2, keys: keys2 });
         next?.();
       },
       false,
@@ -741,6 +789,7 @@ var DeepMap = class _DeepMap {
   //   return makeIterator();
   // }
 };
+globalThis.DeepMap = DeepMap;
 
 // src/utils/getGlobal.ts
 function getGlobal() {
@@ -870,7 +919,9 @@ function isChannelTargeted(channel, permissionToken) {
   const hasWildcard = new Set(tokenParts).has(CHANNEL_WILDCARD);
   const indexOfToken = tokenParts.indexOf(CHANNEL_WILDCARD);
   const storagePartsWithoutWildcard = hasWildcard ? tokenParts.slice(0, indexOfToken) : tokenParts;
-  if (partsMap.getKeysStartingWith(storagePartsWithoutWildcard, hasWildcard).length > 0) {
+  if (partsMap.getKeysStartingWith(storagePartsWithoutWildcard, {
+    excludeSelf: hasWildcard
+  }).length > 0) {
     const remainingParts = tokenParts.slice(indexOfToken + 1);
     if (remainingParts.length) {
       return channel.endsWith(remainingParts.join(CHANNEL_SEPARATOR));
@@ -3389,7 +3440,10 @@ var GridCellManager = class extends Logger {
     return this.matrix.rawKeysAt([]).sort(ASC_SORT);
   }
   getColumnsWithCells() {
-    const positions = this.matrix.getUnnestedKeysStartingWith([], true);
+    const positions = this.matrix.getKeysOfFirstChildOnEachBranchStartingWith(
+      [],
+      { excludeSelf: true }
+    );
     const columns = new Set(positions.map((pos) => pos[1]));
     return [...columns.values()].sort(ASC_SORT);
   }
@@ -6048,7 +6102,6 @@ var cursor = { pointer: "_16lm1iwk", "default": "_16lm1iwl", colResize: "_16lm1i
 var display = { flex: "_16lm1iw1p", contents: "_16lm1iw1q", none: "_16lm1iw1r", block: "_16lm1iw1s", grid: "_16lm1iw1t", inlineBlock: "_16lm1iw1u", inlineFlex: "_16lm1iw1v", inlineGrid: "_16lm1iw1w" };
 var flex = { "1": "_16lm1iw1c", none: "_16lm1iw1d" };
 var flexFlow = { column: "_16lm1iw2f", columnReverse: "_16lm1iw2g", row: "_16lm1iw2h", rowReverse: "_16lm1iw2i" };
-var gap = { "0": "_16lm1iw2o", "1": "_16lm1iw2p", "2": "_16lm1iw2q", "3": "_16lm1iw2r", "4": "_16lm1iw2s", "5": "_16lm1iw2t", "6": "_16lm1iw2u", "7": "_16lm1iw2v", "8": "_16lm1iw2w", "9": "_16lm1iw2x", "10": "_16lm1iw2y", none: "_16lm1iw2z" };
 var height = { "0": "_16lm1iw1y", "100%": "_16lm1iw1z", "50%": "_16lm1iw20" };
 var justifyContent = { center: "_16lm1iw30", spaceBetween: "_16lm1iw31", spaceAround: "_16lm1iw32", start: "_16lm1iw33", end: "_16lm1iw34" };
 var left = { "0": "_16lm1iw26", "100%": "_16lm1iw27", "50%": "_16lm1iw28", auto: "_16lm1iw29" };
@@ -12238,7 +12291,7 @@ var DragList = (props) => {
     [DRAG_LIST_ATTRIBUTE]: props.dragListId
   };
   const children = typeof props.children === "function" ? props.children(domProps, contextValue) : props.children;
-  return /* @__PURE__ */ React44.createElement(DragListContext, { value: contextValue }, children);
+  return /* @__PURE__ */ React44.createElement(DragListContext.Provider, { value: contextValue }, children);
 };
 var DRAG_LIST_ATTRIBUTE = "data-drag-list-id";
 var DRAG_ITEM_ATTRIBUTE = "data-drag-item-id";
@@ -14600,7 +14653,10 @@ function toTreeDataArray(data, options) {
     treeMap.set(path, item);
   }
   function traverse(path, arr) {
-    const nextLevelKeys = treeMap.getKeysStartingWith(path, true, 1);
+    const nextLevelKeys = treeMap.getKeysStartingWith(path, {
+      excludeSelf: true,
+      depthLimit: 1
+    });
     for (const nextLevelKey of nextLevelKeys) {
       const p = [...path, nextLevelKey[nextLevelKey.length - 1]];
       let item = treeMap.get(p);
@@ -15082,12 +15138,18 @@ var RowSelectionState = class _RowSelectionState {
   }
   getGroupKeysDirectlyInsideGroup(groupKeys) {
     const { groupDeepMap } = this.getConfig();
-    return groupDeepMap?.getKeysStartingWith(groupKeys, true, 1) || [];
+    return groupDeepMap?.getKeysStartingWith(groupKeys, {
+      excludeSelf: true,
+      depthLimit: 1
+    }) || [];
   }
   getAllPrimaryKeysInsideGroup(groupKeys) {
     const { groupDeepMap } = this.getConfig();
     if (!groupKeys.length) {
-      const topLevelKeys = groupDeepMap?.getKeysStartingWith([], true, 1) || [];
+      const topLevelKeys = groupDeepMap?.getKeysStartingWith([], {
+        excludeSelf: true,
+        depthLimit: 1
+      }) || [];
       return topLevelKeys.map((groupKeys2) => this.getAllPrimaryKeysInsideGroup(groupKeys2)).flat();
     }
     const group2 = groupDeepMap?.get(groupKeys);
@@ -15293,7 +15355,9 @@ var RowSelectionState = class _RowSelectionState {
       this.xcache();
       return;
     }
-    const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys, true);
+    const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys, {
+      excludeSelf: true
+    });
     selectedKeys.forEach((groupKeys2) => {
       this.selectedMap.delete(groupKeys2);
     });
@@ -15319,10 +15383,9 @@ var RowSelectionState = class _RowSelectionState {
       this.xcache();
       return;
     }
-    const deselectedKeys = this.deselectedMap.getKeysStartingWith(
-      groupKeys,
-      true
-    );
+    const deselectedKeys = this.deselectedMap.getKeysStartingWith(groupKeys, {
+      excludeSelf: true
+    });
     deselectedKeys.forEach((groupKeys2) => {
       this.deselectedMap.delete(groupKeys2);
     });
@@ -15449,16 +15512,14 @@ var RowSelectionState = class _RowSelectionState {
     if (groupKeys.length === this.getGroupByLength()) {
       const selectionState = this.selectedMap.has(groupKeys) ? true : this.deselectedMap.has(groupKeys) ? false : parentSelected;
       const totalCount = this.getGroupCount(groupKeys);
-      let selectedCount2 = this.selectedMap.getKeysStartingWith(
-        groupKeys,
-        true,
-        1
-      ).length;
-      let deselectedCount2 = this.deselectedMap.getKeysStartingWith(
-        groupKeys,
-        true,
-        1
-      ).length;
+      let selectedCount2 = this.selectedMap.getKeysStartingWith(groupKeys, {
+        excludeSelf: true,
+        depthLimit: 1
+      }).length;
+      let deselectedCount2 = this.deselectedMap.getKeysStartingWith(groupKeys, {
+        excludeSelf: true,
+        depthLimit: 1
+      }).length;
       const notSpecifiedCount = totalCount - (selectedCount2 + deselectedCount2);
       const result2 = {
         selectedCount: selectedCount2 + (selectionState ? notSpecifiedCount : 0),
@@ -17013,6 +17074,26 @@ var TreeSelectionState = class _TreeSelectionState {
   getTreeDeepMap() {
     return this.getConfig().treeDeepMap;
   }
+  getSelectedLeafNodePaths(rootNodePath = [], treeDeepMap) {
+    treeDeepMap = treeDeepMap || this.getConfig().treeDeepMap;
+    const selectedLeafPaths = [];
+    treeDeepMap.getLeafNodesStartingWith(rootNodePath, (pair) => {
+      if (this.isNodeSelected(pair.keys)) {
+        selectedLeafPaths.push(pair.keys);
+      }
+    });
+    return selectedLeafPaths;
+  }
+  getDeselectedLeafNodePaths(rootNodePath = [], treeDeepMap) {
+    treeDeepMap = treeDeepMap || this.getConfig().treeDeepMap;
+    const deselectedLeafPaths = [];
+    treeDeepMap.getLeafNodesStartingWith(rootNodePath, (pair) => {
+      if (!this.isNodeSelected(pair.keys)) {
+        deselectedLeafPaths.push(pair.keys);
+      }
+    });
+    return deselectedLeafPaths;
+  }
   isLeafNode(nodePath) {
     return !this.getTreeDeepMap().has(nodePath);
   }
@@ -17110,7 +17191,9 @@ var TreeSelectionState = class _TreeSelectionState {
     const leafCount = this.getLeafNodesCount(nodePath);
     let currentSelectionState = this.isSelfSelected(nodePath);
     const { selectionMap } = this;
-    const childPaths = selectionMap.getUnnestedKeysStartingWith(nodePath, true).sort(shortestToLongest);
+    const childPaths = selectionMap.getKeysOfFirstChildOnEachBranchStartingWith(nodePath, {
+      excludeSelf: true
+    }).sort(shortestToLongest);
     if (!childPaths.length) {
       if (currentSelectionState !== null) {
         const res2 = leafCount ? currentSelectionState : (
@@ -17299,6 +17382,52 @@ var TreeApiImpl = class {
     this.actions = param.actions;
     this.dataSourceApi = param.dataSourceApi;
   }
+  getSelectedLeafNodePaths(config) {
+    const { treePaths } = this.getState();
+    const treeSelectionState = config?.treeSelectionState || this.getState().treeSelectionState;
+    if (!treeSelectionState) {
+      return [];
+    }
+    return treeSelectionState.getSelectedLeafNodePaths(
+      config?.rootNodePath,
+      treePaths
+    );
+  }
+  getDeselectedLeafNodePaths(config) {
+    const { treePaths } = this.getState();
+    const treeSelectionState = config?.treeSelectionState || this.getState().treeSelectionState;
+    if (!treeSelectionState) {
+      return [];
+    }
+    return treeSelectionState.getDeselectedLeafNodePaths(
+      config?.rootNodePath,
+      treePaths
+    );
+  }
+  getSelectedLeafRowInfos(config) {
+    const { treePaths } = this.getState();
+    const treeSelectionState = config?.treeSelectionState || this.getState().treeSelectionState;
+    if (!treePaths || !treeSelectionState) {
+      return [];
+    }
+    const rootNodePath = config?.rootNodePath || [];
+    const selectedLeafRowInfos = [];
+    treePaths.getLeafNodesStartingWith(
+      rootNodePath,
+      (pair) => {
+        if (treeSelectionState.isNodeSelected(pair.keys)) {
+          const rowInfo = this.getRowInfoByPath(
+            pair.keys
+          );
+          if (rowInfo) {
+            selectedLeafRowInfos.push(rowInfo);
+          }
+        }
+      },
+      { excludeSelf: true }
+    );
+    return selectedLeafRowInfos;
+  }
   get allRowsSelected() {
     return this.getState().allRowsSelected;
   }
@@ -20605,12 +20734,16 @@ function getMappedCallbacks() {
           callbackParams: callbackParams2
         };
       }
+      const dataSourceApi = state.__apiRef.current;
+      const treeApi = dataSourceApi.treeApi;
       const callbackParams = [
         treeSelection2.getState(),
         {
+          treeSelectionState: treeSelection2,
           selectionMode: "multi-row",
           lastUpdatedNodePath: state.lastSelectionUpdatedNodePathRef.current,
-          dataSourceApi: state.__apiRef.current
+          dataSourceApi,
+          treeApi
         }
       ];
       return {
@@ -25586,7 +25719,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "7.2.0"
+      version: "7.2.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -29407,7 +29540,7 @@ var import_react70 = require("react");
 
 // src/components/InfiniteTable/components/GroupingToolbar/index.css.ts
 var GroupingToolbarItemClearCls = "hs68h8j _16lm1iwk _16lm1iwx _16lm1iw2n";
-var GroupingToolbarItemRecipe = createRuntimeFn({ defaultClassName: "hs68h8e _16lm1iw12 _16lm1iw1x _16lm1iw2j _16lm1iw1p _16lm1iw31", variantClassNames: { active: { true: "hs68h8f _16lm1iwn _16lm1iw1h", false: "_16lm1iwo" }, draggingInProgress: { true: "hs68h8h", false: "hs68h8i" } }, defaultVariants: {}, compoundVariants: [] });
+var GroupingToolbarItemRecipe = createRuntimeFn({ defaultClassName: "hs68h8e _16lm1iw12 _16lm1iw1x _16lm1iw2j _16lm1iw1p", variantClassNames: { active: { true: "hs68h8f _16lm1iwn _16lm1iw1h", false: "_16lm1iwo" }, draggingInProgress: { true: "hs68h8h", false: "hs68h8i" } }, defaultVariants: {}, compoundVariants: [] });
 var GroupingToolbarPlaceholderCls = "hs68h81";
 var GroupingToolbarRecipe = createRuntimeFn({ defaultClassName: "hs68h80 _16lm1iw1p", variantClassNames: { orientation: { horizontal: "_16lm1iw2h _16lm1iw2j", vertical: "_16lm1iw2f" }, draggingInProgress: { true: "_16lm1iw1h", false: "hs68h86" }, dropRejected: { true: "hs68h87", false: "hs68h88" }, active: { true: "hs68h89", false: "hs68h8a" } }, defaultVariants: {}, compoundVariants: [[{ dropRejected: true, active: true }, "hs68h8b"], [{ dropRejected: false, active: true }, "hs68h8c"], [{ active: false, dropRejected: false }, "hs68h8d"]] });
 
@@ -29427,7 +29560,7 @@ function GroupingToolbarItemDefault(props) {
       props.onClear?.();
     }
   };
-  return /* @__PURE__ */ React74.createElement("div", { ...props.domProps }, props.label, /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React74.createElement("div", { ...props.domProps }, props.label, /* @__PURE__ */ React74.createElement("div", { className: flex[1] }), /* @__PURE__ */ React74.createElement(
     "div",
     {
       tabIndex: 0,
@@ -29487,7 +29620,7 @@ function GroupingToolbarItem(props) {
       direction: column.computedSortedAsc ? 1 : column.computedSortedDesc ? -1 : 0
     }
   ) : null;
-  const header = /* @__PURE__ */ React75.createElement("div", { className: join(display.flex, flexFlow.row, gap[2], alignItems.end) }, columnHeader, sortIcon);
+  const header = /* @__PURE__ */ React75.createElement(React75.Fragment, null, columnHeader, sortIcon);
   const active = dragItemId === id && dragSourceListId === GROUPING_TOOLBAR_DRAG_LIST_ID;
   const className = join(
     GroupingToolbarItemRecipe({
@@ -29553,9 +29686,8 @@ function GroupingToolbar(props) {
             }
           },
           onClear: () => {
-            dataSourceApi.setGroupBy(
-              groupBy.filter((g) => g !== group2)
-            );
+            const newGroupBy = groupBy.filter((g) => g !== group2).filter(Boolean);
+            dataSourceApi.setGroupBy(newGroupBy);
           }
         }
       );