@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/grouping/GroupLabel.js

@@ -0,0 +1,73 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+const countFormat = new Intl.NumberFormat();
+// Enum-like columns show the group value as the cell does (a tag, a status dot); other types
+// show the label text in the column's display format.
+const RENDERED_TYPES = new Set([
+    'tag',
+    'status'
+]);
+function ignoreEvent() {}
+function renderValue({ api, item, label, level }) {
+    if (item.empty || !RENDERED_TYPES.has(level.column.type)) return label;
+    const { Renderer } = level;
+    // A client group's first row feeds the renderer's row fields; server groups have no rows here.
+    const row = api.grouping.tree ? api.grouping.tree.leaves[item.start].original : {};
+    return /*#__PURE__*/ React.createElement(Renderer, {
+        column: level.column,
+        components: api.components,
+        methods: api.methods,
+        onEvent: ignoreEvent,
+        row: row,
+        rowKey: api.config.getKey(row),
+        value: item.value
+    });
+}
+// The chevron, group value and row count. It sits in a zero-width sticky element after the
+// leading (checkbox) columns, so the label stays in view while the grid scrolls sideways and
+// overlays the cells of the columns without an aggregate.
+function GroupLabel({ api, item, label, left, level }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-group-label",
+        style: {
+            left
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-group-label-content",
+        style: {
+            '--lf-group-depth': item.depth
+        }
+    }, /*#__PURE__*/ React.createElement("svg", {
+        "aria-hidden": "true",
+        className: "lf-table-group-toggle",
+        viewBox: "0 0 16 16"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M6 3.5 10.5 8 6 12.5",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.6"
+    })), /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-group-value"
+    }, renderValue({
+        api,
+        item,
+        label,
+        level
+    })), /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-group-count"
+    }, countFormat.format(item.count))));
+}
+export default GroupLabel;

package/dist/features/grouping/GroupRow.js

@@ -0,0 +1,103 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { memo, useMemo } from 'react';
+import countGroupSelection from './countGroupSelection.js';
+import getGroupLabel from './getGroupLabel.js';
+import GroupCell from './GroupCell.js';
+import GroupLabel from './GroupLabel.js';
+import './grouping.css';
+function renderCells({ activeCol, api, cols, item, overlay, selectionCount }) {
+    return cols.map((col)=>/*#__PURE__*/ React.createElement(GroupCell, {
+            api: api,
+            col: col,
+            focused: activeCol === col.index,
+            item: item,
+            key: col.key,
+            overlay: overlay,
+            selectionCount: selectionCount
+        }));
+}
+// A group header item of the flat row list (the `group` row renderer). Same row element, height
+// and cell layout as a data row; it carries `data-group-key` and no `data-row-key`, so row
+// events, rowLink and row selection ignore it. `overlay` renders the sticky copy. Client groups
+// (flattenGroups) and server groups (buildServerItems) are the same items and render here.
+function GroupRow({ activeCol, api, ariaRowIndex, centerCols, className, displayIndex, endCols, item, offset, overlay = false, selectable, selection, startCols, style }) {
+    const { grouping } = api;
+    const level = grouping.levels[item.depth];
+    // Server groups have no leaf rows in the browser to count or select.
+    const checkbox = selectable && api.config.rowSelection.type === 'checkbox' && grouping.tree !== null;
+    const selectionCount = useMemo(()=>checkbox ? countGroupSelection({
+            leaves: grouping.tree.leaves,
+            start: item.start,
+            end: item.end,
+            selection
+        }) : null, [
+        checkbox,
+        item,
+        selection
+    ]);
+    const label = getGroupLabel({
+        level,
+        item
+    });
+    const leading = startCols.filter((col)=>col.special);
+    const pinned = startCols.filter((col)=>!col.special);
+    const labelLeft = leading.reduce((width, col)=>width + col.width, 0);
+    const positioned = offset !== undefined;
+    const cellArgs = {
+        activeCol,
+        api,
+        item,
+        overlay,
+        selectionCount
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        "aria-expanded": !item.collapsed,
+        "aria-rowindex": overlay ? undefined : ariaRowIndex,
+        className: `${className} lf-table-group-row`,
+        "data-group-depth": item.depth,
+        "data-group-index": displayIndex,
+        "data-group-key": item.key,
+        "data-group-label": label,
+        "data-positioned": positioned ? '' : undefined,
+        "data-row-index": overlay ? undefined : displayIndex,
+        role: overlay ? undefined : 'row',
+        style: positioned ? {
+            ...style,
+            transform: `translateY(${offset}px)`
+        } : style
+    }, renderCells({
+        ...cellArgs,
+        cols: leading
+    }), /*#__PURE__*/ React.createElement(GroupLabel, {
+        api: api,
+        item: item,
+        label: label,
+        left: labelLeft,
+        level: level
+    }), renderCells({
+        ...cellArgs,
+        cols: pinned
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-center"
+    }, renderCells({
+        ...cellArgs,
+        cols: centerCols
+    })), renderCells({
+        ...cellArgs,
+        cols: endCols
+    }));
+}
+export default /*#__PURE__*/ memo(GroupRow);

package/dist/features/grouping/StickyGroupRow.js

@@ -0,0 +1,136 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useEffect, useMemo, useReducer, useRef } from 'react';
+import { flushSync } from 'react-dom';
+import buildStickyLevels from './buildStickyLevels.js';
+import getStickyGroups from './getStickyGroups.js';
+import GroupRow from './GroupRow.js';
+function bump(count) {
+    return count + 1;
+}
+function measure({ api, headerHeight, levels, sticky }) {
+    const scroller = api.scrollerRef.current;
+    if (!api.grouping || !scroller) return [];
+    // Body offset of the first row under the header: with a sticky header the body starts where
+    // the header sits; a non-sticky header scrolls away first.
+    const scrollTop = sticky ? scroller.scrollTop : scroller.scrollTop - headerHeight;
+    return getStickyGroups({
+        levels,
+        rowHeight: api.rowHeight,
+        rowOffsets: api.rowOffsets,
+        scrollTop
+    });
+}
+function sameIndices(groups, indices) {
+    if (groups.length !== indices.length) return false;
+    return groups.every((group, level)=>group.index === indices[level]);
+}
+// The sticky group headers (D10.8): one overlay under the column header holding a copy of the
+// current group header of each level, stacked outermost first (EMEA, then its rep), instead of
+// a sticky element per group. It renders only when a level's group changes; the push-ups as the
+// next headers arrive are transforms written on scroll. Inner levels sit under outer ones, so a
+// new outer group pushes them out first.
+function StickyGroupRow({ api, centerCols, headerHeight, layout, rowClassName, rows, selectable, selection, sticky }) {
+    const [, forceRender] = useReducer(bump, 0);
+    const shiftRefs = useRef([]);
+    const renderedIndices = useRef([]);
+    // Null while the table is not grouped (the overlay then renders nothing).
+    const { grouping } = api;
+    const groupIndices = grouping?.groupIndices;
+    const levelCount = grouping?.levels.length ?? 0;
+    const levels = useMemo(()=>grouping ? buildStickyLevels({
+            groupIndices,
+            levelCount,
+            rows
+        }) : [], [
+        groupIndices,
+        levelCount,
+        rows
+    ]);
+    const args = useRef(null);
+    args.current = {
+        api,
+        headerHeight,
+        levels,
+        sticky
+    };
+    useEffect(()=>{
+        const element = api.scrollerRef.current;
+        let frame = 0;
+        function onFrame() {
+            frame = 0;
+            const next = measure(args.current);
+            if (!sameIndices(next, renderedIndices.current)) {
+                flushSync(forceRender);
+                return;
+            }
+            next.forEach((group, level)=>{
+                const shift = shiftRefs.current[level];
+                if (shift) shift.style.transform = `translateY(${group.shift}px)`;
+            });
+        }
+        function schedule() {
+            if (!frame) frame = requestAnimationFrame(onFrame);
+        }
+        element.addEventListener('scroll', schedule, {
+            passive: true
+        });
+        return ()=>{
+            element.removeEventListener('scroll', schedule);
+            if (frame) cancelAnimationFrame(frame);
+        };
+    }, []);
+    // Read in render so the overlay always matches the rows it is rendered with (a collapse changes
+    // which list index is the current group without any scroll).
+    const groups = measure(args.current);
+    renderedIndices.current = groups.map((group)=>group.index);
+    if (groups.length === 0) return null;
+    // tabIndex: a click on the overlay focuses it rather than the scroller, whose focus handler
+    // would scroll back to the active cell before the click lands.
+    return /*#__PURE__*/ React.createElement("div", {
+        "aria-hidden": "true",
+        className: "lf-table-group-sticky",
+        "data-lf-group-sticky": "",
+        style: {
+            top: sticky ? headerHeight : 0
+        },
+        tabIndex: -1
+    }, groups.map((group, level)=>/*#__PURE__*/ React.createElement("div", {
+            className: "lf-table-group-sticky-shift",
+            "data-group-level": level,
+            key: level,
+            ref: (element)=>{
+                shiftRefs.current[level] = element;
+            },
+            style: {
+                top: level * api.rowHeight,
+                transform: `translateY(${group.shift}px)`,
+                zIndex: groups.length - level
+            }
+        }, /*#__PURE__*/ React.createElement(GroupRow, {
+            activeCol: -1,
+            api: api,
+            centerCols: centerCols,
+            className: rowClassName,
+            displayIndex: group.index,
+            endCols: layout.end,
+            item: rows[group.index],
+            overlay: true,
+            selectable: selectable,
+            selection: selection,
+            startCols: layout.start
+        }))));
+}
+export default StickyGroupRow;

package/dist/features/grouping/buildGroupTree.js

@@ -0,0 +1,138 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import computeAggregate from '@lowdefy/blocks-antd/table/computeAggregate.js';
+import orderGroups from './orderGroups.js';
+import toGroupIdentity from './toGroupIdentity.js';
+function createNode({ parent, identity, value, depth, level, last, aggregateCount }) {
+    const path = [
+        ...parent.path,
+        identity
+    ];
+    const values = new Array(aggregateCount);
+    for(let a = 0; a < aggregateCount; a++)values[a] = [];
+    return {
+        aggregates: {},
+        children: last ? null : [],
+        childMap: last ? null : new Map(),
+        columnKey: level.key,
+        count: 0,
+        depth,
+        empty: identity === null,
+        end: 0,
+        key: JSON.stringify(path),
+        path,
+        rows: last ? [] : null,
+        start: 0,
+        value: identity === null ? null : value,
+        values
+    };
+}
+// Orders each level, lays the leaf rows out in group order (every group owns the leaf range
+// [start, end), so a group's rows are one slice however deep it is), and turns the collected
+// values into aggregates. The build-only fields are dropped so the tree holds no second copy.
+function finalizeGroups({ groups, levels, aggregates, leaves, depth }) {
+    const ordered = orderGroups({
+        groups,
+        level: levels[depth]
+    });
+    ordered.forEach((group)=>{
+        group.start = leaves.length;
+        if (group.children === null) {
+            for(let i = 0; i < group.rows.length; i++)leaves.push(group.rows[i]);
+        } else {
+            group.children = finalizeGroups({
+                groups: group.children,
+                levels,
+                aggregates,
+                leaves,
+                depth: depth + 1
+            });
+        }
+        group.end = leaves.length;
+        group.count = group.end - group.start;
+        aggregates.forEach(({ key, fn, column }, a)=>{
+            group.aggregates[key] = computeAggregate({
+                fn,
+                values: group.values[a],
+                column
+            });
+        });
+        group.values = null;
+        group.childMap = null;
+        group.rows = null;
+    });
+    return ordered;
+}
+// The group tree in one pass over the filtered, sorted rows: each row walks the levels, creating
+// groups on first sight, counting itself and collecting its aggregate values into every group on
+// its path. Leaves keep the sort order within their group. `rows` are row-model rows
+// ({ id, original }); `levels` come from createGroupLevels and `aggregates` from
+// createAggregateColumns.
+function buildGroupTree({ rows, levels, aggregates }) {
+    const root = {
+        path: [],
+        children: [],
+        childMap: new Map()
+    };
+    const groupsByKey = new Map();
+    const lastDepth = levels.length - 1;
+    const aggregateCount = aggregates.length;
+    const aggregateValues = new Array(aggregateCount);
+    for(let i = 0; i < rows.length; i++){
+        const row = rows[i];
+        const original = row.original;
+        for(let a = 0; a < aggregateCount; a++){
+            aggregateValues[a] = aggregates[a].accessor(original);
+        }
+        let parent = root;
+        for(let depth = 0; depth <= lastDepth; depth++){
+            const level = levels[depth];
+            const value = level.accessor(original);
+            const identity = toGroupIdentity(value);
+            let group = parent.childMap.get(identity);
+            if (group === undefined) {
+                group = createNode({
+                    parent,
+                    identity,
+                    value,
+                    depth,
+                    level,
+                    last: depth === lastDepth,
+                    aggregateCount
+                });
+                parent.childMap.set(identity, group);
+                parent.children.push(group);
+                groupsByKey.set(group.key, group);
+            }
+            for(let a = 0; a < aggregateCount; a++)group.values[a].push(aggregateValues[a]);
+            parent = group;
+        }
+        parent.rows.push(row);
+    }
+    const leaves = [];
+    const groups = finalizeGroups({
+        groups: root.children,
+        levels,
+        aggregates,
+        leaves,
+        depth: 0
+    });
+    return {
+        groups,
+        groupsByKey,
+        leaves
+    };
+}
+export default buildGroupTree;

package/dist/features/grouping/buildStickyLevels.js

@@ -0,0 +1,35 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // Per group level, the list indices of that level's headers (`own`) and of the headers at that
+// level or above (`upTo`, the headers that end a group of that level), for the stacked sticky
+// headers' binary searches. Built once per display list.
+function buildStickyLevels({ groupIndices, levelCount, rows }) {
+    const own = Array.from({
+        length: levelCount
+    }, ()=>[]);
+    const upTo = Array.from({
+        length: levelCount
+    }, ()=>[]);
+    for (const index of groupIndices){
+        const { depth } = rows[index];
+        own[depth].push(index);
+        for(let level = depth; level < levelCount; level++)upTo[level].push(index);
+    }
+    return own.map((indices, level)=>({
+            own: Uint32Array.from(indices),
+            upTo: Uint32Array.from(upTo[level])
+        }));
+}
+export default buildStickyLevels;

package/dist/features/grouping/countGroupSelection.js

@@ -0,0 +1,26 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // How many of a group's leaf rows are selected, for its checkbox (checked, indeterminate).
+function countGroupSelection({ leaves, start, end, selection }) {
+    let selected = 0;
+    for(let i = start; i < end; i++){
+        if (selection[leaves[i].id] === true) selected += 1;
+    }
+    return {
+        selected,
+        total: end - start
+    };
+}
+export default countGroupSelection;

package/dist/features/grouping/createAggregateColumns.js

@@ -0,0 +1,38 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import resolveAggregates from './resolveAggregates.js';
+// The aggregates in effect with each column's accessor, and a key -> fn map for the header cells.
+function createAggregateColumns({ config, table, aggregates }) {
+    const columns = resolveAggregates({
+        columns: config.columns,
+        aggregates
+    }).map(({ key, fn })=>{
+        const { accessor, column } = table.getColumn(key).columnDef.meta;
+        return {
+            key,
+            fn,
+            accessor,
+            column
+        };
+    });
+    return {
+        columns,
+        fnByKey: new Map(columns.map(({ key, fn })=>[
+                key,
+                fn
+            ]))
+    };
+}
+export default createAggregateColumns;

package/dist/features/grouping/createCollapseAllGroups.js

@@ -0,0 +1,26 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // Collapses every group at every level of the current grouping (server mode: closes every open
+// server group).
+function createCollapseAllGroups(api) {
+    return function collapseAllGroups() {
+        if (!api.grouping) return false;
+        if (api.serverStore) return api.serverStore.collapseAllGroups();
+        return api.actions.setCollapsedGroups([
+            ...api.grouping.tree.groupsByKey.keys()
+        ]);
+    };
+}
+export default createCollapseAllGroups;

package/dist/features/grouping/createExpandAllGroups.js

@@ -0,0 +1,23 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // Expands every client group. Server groups open one at a time: opening all of them would fetch
+// every group's rows.
+function createExpandAllGroups(api) {
+    return function expandAllGroups() {
+        if (api.serverStore) return false;
+        return api.actions.setCollapsedGroups([]);
+    };
+}
+export default createExpandAllGroups;

package/dist/features/grouping/createGroupLevels.js

@@ -0,0 +1,46 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import createComparator from '@lowdefy/blocks-antd/table/createComparator.js';
+import getCellRenderer from '@lowdefy/blocks-antd/table/getCellRenderer.js';
+// One entry per group level with what the tree build and the header rows need: the column's
+// compiled accessor, the shared core's value comparator and cell renderer, its options (already
+// normalised by the shared normalizeColumns), and how its groups are ordered ('sort' when the
+// view sorts on the column, 'options' for enum columns, else 'appearance').
+function createGroupLevels({ keys, table, sorting }) {
+    return keys.map((key)=>{
+        const { accessor, column } = table.getColumn(key).columnDef.meta;
+        const sort = sorting.find((entry)=>entry.id === key);
+        const { options } = column;
+        let order = 'appearance';
+        if (sort) {
+            order = 'sort';
+        } else if (options?.length > 0) {
+            order = 'options';
+        }
+        return {
+            key,
+            accessor,
+            column,
+            compare: createComparator({
+                column
+            }),
+            desc: sort?.desc === true,
+            options,
+            order,
+            Renderer: getCellRenderer(column.type)
+        };
+    });
+}
+export default createGroupLevels;

package/dist/features/grouping/createSetCollapsedGroups.js

@@ -0,0 +1,27 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // Replaces the collapsed group keys. A no-op change never reaches updateSlice, whose pending
+// cause would otherwise attach to the next unrelated state change.
+function createSetCollapsedGroups(api) {
+    return function setCollapsedGroups(keys) {
+        const current = api.state.collapsedGroups;
+        if (keys.length === current.length && keys.every((key, i)=>key === current[i])) return false;
+        api.updateSlice('collapsedGroups', ()=>keys, {
+            cause: 'expand'
+        });
+        return true;
+    };
+}
+export default createSetCollapsedGroups;