@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/components/Tree/TreeDropdown/index.js

@@ -1,291 +1,529 @@
-import * as React from 'react';
-import FieldWrap from '../../FieldWrap';
-import { TreeList } from '../TreeList';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import OverlayTrigger from '../../OverlayTrigger';
-import NotifyResize from '../../NotifyResize';
-import Input from '../../Input';
-import { TreeSelectionState, useDataSourceState, withSelectedLeafNodesOnly, } from '../../InfiniteTable';
-import SimpleButton from '../../SimpleButton';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { ChevronRightIcon, ChevronDownIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, } from 'lucide-react';
+import { TreeExpandState, TreeSelectionState } from '../../InfiniteTable';
+import { MultiCombobox } from '../../Combobox';
+import { ComboboxChip } from '../../ui/combobox';
+import { toDisplayValueDefault, toDisplayValueFromOptionTree } from '../treeUtils';
+import { cn } from '../../../lib/utils';
 import { CheckBox } from '../../CheckBox';
-import { useLatest } from '../../utils/useLatest';
-import { Resizable } from 're-resizable';
-import { useAdaptableComputedCSSVars } from '../../../View/AdaptableComputedCSSVarsContext';
-import { Box, Flex } from '../../Flex';
-const resizableDirections = {
-    right: true,
-    bottom: true,
-    bottomRight: true,
-};
-export function toDisplayValueDefault(value) {
+export { toDisplayValueDefault, toDisplayValueFromOptionTree };
+const encodePath = (p) => JSON.stringify(p);
+const decodePath = (s) => JSON.parse(s);
+function normalizePaths(value) {
     if (!Array.isArray(value)) {
-        return `${value}`;
+        return [];
     }
-    return value.map((v) => (Array.isArray(v) ? v.join('-') : v)).join(', ');
+    return value.map((v) => (Array.isArray(v) ? v : [v]));
 }
-/**
- * Formats the closed TreeDropdown input using each option's `label` for the stored `value` path
- * segments (same shape as {@link toDisplayValueDefault}, but resolves raw values to labels).
- */
-export function toDisplayValueFromOptionTree(paths, options) {
-    const valueToLabel = new Map();
-    const walk = (node) => {
-        valueToLabel.set(node.value, node.label);
-        if (Array.isArray(node.children)) {
-            node.children.forEach(walk);
+function flattenOptions(options, primaryKey, labelField, parentPath = [], result = []) {
+    for (const option of options) {
+        const id = option[primaryKey];
+        const path = [...parentPath, id];
+        const children = option.children;
+        const hasChildren = Array.isArray(children) && children.length > 0;
+        result.push({
+            path,
+            pathKey: encodePath(path),
+            label: option[labelField] != null ? String(option[labelField]) : String(id),
+            depth: parentPath.length,
+            hasChildren,
+        });
+        if (hasChildren) {
+            flattenOptions(children, primaryKey, labelField, path, result);
         }
-    };
-    options.forEach(walk);
-    return paths
-        .map((path) => Array.isArray(path)
-        ? path.map((segment) => valueToLabel.get(segment) ?? String(segment)).join('-')
-        : valueToLabel.get(path) ?? String(path))
-        .join(', ');
+    }
+    return result;
 }
-const getLabelColumn = (field, { includeExpandCollapseButton }) => {
-    return {
-        field,
-        defaultFlex: 1,
-        renderTreeIcon: true,
-        defaultSortable: false,
-        resizable: false,
-        renderSelectionCheckBox: ({ rowInfo, dataSourceApi, api }) => {
-            if (!rowInfo.isTreeNode) {
-                return null;
-            }
-            return (React.createElement(CheckBox, { className: "twa:mx-1", checked: rowInfo?.rowSelected, onChange: (checked) => {
-                    dataSourceApi.treeApi.setNodeSelection(rowInfo.nodePath, checked);
-                    api.focus();
-                } }));
-        },
-        renderHeader: ({ dataSourceApi, api, allRowsSelected, someRowsSelected }) => {
-            return (React.createElement(CustomHeader, { dataSourceApi: dataSourceApi, api: api, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, includeExpandCollapseButton: includeExpandCollapseButton }));
+function TreeItemLabel(props) {
+    const { node, isExpanded, onToggleExpand, selected, reserveExpandSpace } = props;
+    const handleChevronMouseDown = (e) => {
+        // Prevent the combobox from stealing focus or treating the chevron click
+        // as a selection toggle on the row.
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleChevronClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onToggleExpand(node.path);
+    };
+    // These elements are rendered as `children` of the `ComboboxItem`, which is
+    // a flex container. The built-in indicator is suppressed via
+    // `renderCheckboxIndicator` on the list, so we render our own tri-state checkbox
+    // at `order: 0` (middle). Chevron goes before (`-1`), label after (`1`).
+    // Rendering the indicator here lets it reflect `null`/indeterminate state
+    // that base-ui's boolean indicator can't.
+    const indent = node.depth > 0 ? `calc(${node.depth} * var(--ab-tree-indent-size))` : 0;
+    const iconProps = {
+        style: {
+            // override this explicitly since the parent ComboboxItem
+            // sets this on highlighted items, but the color is not appropriate
+            //@ts-ignore ignore
+            '--ab-color-accent-foreground': 'var(--ab-color-accent)',
         },
+        className: 'twa:size-4',
     };
-};
-function useAllFirstLevelCollapsed(treeApi) {
-    const { originalDataArray } = useDataSourceState((state) => {
-        return {
-            originalDataArray: state.originalDataArray,
-            treeExpandState: state.treeExpandState,
-        };
-    });
-    return originalDataArray.every((item) => !treeApi.isNodeExpanded([item.id]));
+    return (_jsxs(_Fragment, { children: [node.hasChildren ? (_jsx("button", { type: "button", tabIndex: -1, "aria-label": isExpanded ? 'Collapse' : 'Expand', "data-name": "expand-collapse-icon", onMouseDown: handleChevronMouseDown, onClick: handleChevronClick, style: { order: -1, marginLeft: indent }, className: cn('twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center twa:rounded', 'twa:cursor-pointer'), children: isExpanded ? _jsx(ChevronDownIcon, { ...iconProps }) : _jsx(ChevronRightIcon, { ...iconProps }) })) : reserveExpandSpace ? (_jsx("span", { "aria-hidden": "true", style: { order: -1, marginLeft: indent }, className: "twa:inline-block twa:size-4 twa:shrink-0" })) : null, _jsx(CheckBox, { checked: selected, checkSquareClassName: clsx(selected === true && 'twa:ring-1 twa:ring-accent-foreground') }), _jsx("span", { className: "twa:truncate twa:min-w-0 twa:flex-1", children: node.label })] }));
 }
-function CustomHeader({ dataSourceApi, api, allRowsSelected, someRowsSelected, includeExpandCollapseButton, }) {
-    const { treeApi } = dataSourceApi;
-    const allFirstLevelCollapsed = useAllFirstLevelCollapsed(treeApi);
-    const checked = someRowsSelected && !allRowsSelected ? null : allRowsSelected;
-    return (React.createElement(Flex, { flexDirection: 'row', alignItems: 'center', className: "twa:w-full", onMouseDown: (e) => {
-            // so we can keep the focus on the Grid
-            e.preventDefault();
-        } },
-        React.createElement(CheckBox, { checked: checked, className: "twa:mr-2", onChange: () => {
-                if (allRowsSelected) {
-                    dataSourceApi.treeApi.deselectAll();
+export function TreeDropdown(props) {
+    const { isLoading = false } = props;
+    const labelField = (props.labelField ?? 'label');
+    const primaryKey = (props.primaryKey ?? 'id');
+    // Walk the tree once to get every node. This is independent of expand and
+    // selection state, so it only recomputes when the options change.
+    const allNodes = useMemo(() => {
+        return flattenOptions(props.items, primaryKey, labelField);
+    }, [props.items, primaryKey, labelField]);
+    const nodeByKey = useMemo(() => {
+        const map = new Map();
+        for (const n of allNodes) {
+            map.set(n.pathKey, n);
+        }
+        return map;
+    }, [allNodes]);
+    // All paths in the tree, used to configure TreeSelectionState so it can
+    // resolve tri-state selection across branches.
+    const treePaths = useMemo(() => allNodes.map((n) => n.path), [allNodes]);
+    // --- Selection state (backed by TreeSelectionStateObject) ----------------
+    const [internalSelection, setInternalSelection] = useState(() => ({
+        defaultSelection: false,
+        selectedPaths: normalizePaths(props.value ?? props.defaultValue),
+        deselectedPaths: [],
+    }));
+    // When used in controlled mode, sync external value into internal state
+    // whenever the caller swaps the reference. We compare against the last
+    // `value` we observed (captured in a state-paired variable, as recommended
+    // for derived-from-props state) so we don't fight the caller on every
+    // re-render while still ignoring our own onChange-driven updates.
+    const [lastPropsValue, setLastPropsValue] = useState(props.value);
+    if (props.value !== undefined && props.value !== lastPropsValue) {
+        setLastPropsValue(props.value);
+        setInternalSelection({
+            defaultSelection: false,
+            selectedPaths: normalizePaths(props.value),
+            deselectedPaths: [],
+        });
+    }
+    const selectionState = useMemo(() => {
+        return new TreeSelectionState(internalSelection, {
+            treePaths,
+            strictCheckPaths: false,
+        });
+    }, [internalSelection, treePaths]);
+    // --- Expand state (backed by TreeExpandStateObject) ----------------------
+    const [internalExpand, setInternalExpand] = useState(() => ({
+        defaultExpanded: false,
+        expandedPaths: [],
+        collapsedPaths: [],
+    }));
+    const expandState = useMemo(() => {
+        return new TreeExpandState(internalExpand);
+    }, [internalExpand]);
+    const toggleExpand = useCallback((path) => {
+        const next = new TreeExpandState(internalExpand);
+        next.setNodeExpanded(path, !next.isNodeExpanded(path));
+        setInternalExpand(next.getState());
+    }, [internalExpand]);
+    // Precompute branch nodes once so the Expand All / Collapse All toggle
+    // can decide which action to offer without walking the tree on every render.
+    const branchNodes = useMemo(() => allNodes.filter((n) => n.hasChildren), [allNodes]);
+    // The toggle acts as "Collapse all" whenever *anything* is expanded, so a
+    // single click after a partial expand (e.g. branches opened by a search)
+    // collapses the whole tree. Only when every branch is already collapsed
+    // does the toggle switch to "Expand all".
+    const anyBranchExpanded = useMemo(() => {
+        for (const n of branchNodes) {
+            if (expandState.isNodeExpanded(n.path)) {
+                return true;
+            }
+        }
+        return false;
+    }, [branchNodes, expandState]);
+    const toggleExpandAll = useCallback(() => {
+        const next = new TreeExpandState(internalExpand);
+        if (anyBranchExpanded) {
+            next.collapseAll();
+        }
+        else {
+            next.expandAll();
+        }
+        setInternalExpand(next.getState());
+    }, [internalExpand, anyBranchExpanded]);
+    // --- Search state --------------------------------------------------------
+    // We track the search query ourselves so a query change can drive expand
+    // state updates: when the user types, every branch on the path to a match
+    // (and every branch within a matching subtree) is force-expanded so the
+    // matches surface in the items list. The user can then collapse a branch
+    // mid-search to hide that subtree again — and the next keystroke
+    // re-expands everything matching, restoring the full filtered view.
+    const [searchQuery, setSearchQuery] = useState('');
+    // Set of pathKeys for every node that either matches the query or is an
+    // ancestor of a matching node. Used by the filter callback so an ancestor
+    // whose own label doesn't match still passes when one of its descendants
+    // matches.
+    const matchAncestorKeys = useMemo(() => {
+        if (!searchQuery) {
+            return null;
+        }
+        const q = searchQuery.toLowerCase();
+        const keys = new Set();
+        for (const node of allNodes) {
+            if (node.label.toLowerCase().includes(q)) {
+                for (let i = 1; i <= node.path.length; i++) {
+                    keys.add(encodePath(node.path.slice(0, i)));
                 }
-                else {
-                    dataSourceApi.treeApi.selectAll();
+            }
+        }
+        return keys;
+    }, [allNodes, searchQuery]);
+    // Expand every branch needed to display the current search's matches.
+    // Called from the search input's onChange (so it's tied to user typing,
+    // not to incidental re-renders) and only mutates expand state when there
+    // is something new to expand — leaving any branches the user collapsed
+    // mid-search untouched until the next keystroke.
+    const expandPathsForQuery = useCallback((query) => {
+        if (!query) {
+            return;
+        }
+        const q = query.toLowerCase();
+        const next = new TreeExpandState(internalExpand);
+        let mutated = false;
+        for (let i = 0; i < allNodes.length; i++) {
+            const node = allNodes[i];
+            if (!node.label.toLowerCase().includes(q)) {
+                continue;
+            }
+            for (let j = 1; j < node.path.length; j++) {
+                const ancPath = node.path.slice(0, j);
+                if (!next.isNodeExpanded(ancPath)) {
+                    next.setNodeExpanded(ancPath, true);
+                    mutated = true;
                 }
-                api.focus();
-            } }, allRowsSelected ? '(Deselect All)' : '(Select All)'),
-        React.createElement(Flex, { className: "twa:flex-1" }),
-        includeExpandCollapseButton ? (React.createElement(SimpleButton, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
-                if (allFirstLevelCollapsed) {
-                    dataSourceApi.treeApi.expandAll();
+            }
+            if (node.hasChildren && !next.isNodeExpanded(node.path)) {
+                next.setNodeExpanded(node.path, true);
+                mutated = true;
+            }
+            // allNodes is in depth-first order, so descendants of `node` are the
+            // contiguous run of nodes with depth > node.depth that immediately
+            // follow it. Walk that run and force every nested branch open so the
+            // entire matching subtree (not just its first level) is visible.
+            for (let j = i + 1; j < allNodes.length; j++) {
+                const desc = allNodes[j];
+                if (desc.depth <= node.depth) {
+                    break;
                 }
-                else {
-                    dataSourceApi.treeApi.collapseAll();
+                if (desc.hasChildren && !next.isNodeExpanded(desc.path)) {
+                    next.setNodeExpanded(desc.path, true);
+                    mutated = true;
                 }
-            }, iconPosition: "end" })) : null));
-}
-const sizeFull = {
-    width: '100%',
-    height: '100%',
-};
-function getRowCount(options) {
-    return options.reduce((acc, option) => {
-        if (Array.isArray(option.children)) {
-            return acc + getRowCount(option.children) + 1;
+            }
         }
-        return acc + 1;
-    }, 0);
-}
-export function TreeDropdown(props) {
-    const [visible, doSetVisible] = useState(false);
-    const overlayDOMRef = useRef(null);
-    const getProps = useLatest(props);
-    const computedCSSVars = useAdaptableComputedCSSVars();
-    const [treeExpandState, setTreeExpandState] = useState(undefined);
-    const [searchValue, setSearchValue] = useState('');
-    const labelField = props.labelField ?? 'label';
-    const [stateValue, setStateValue] = useState(props.value !== undefined ? props.value : props.defaultValue || []);
-    const onChange = useCallback((value) => {
-        const paths = value instanceof TreeSelectionState
-            ? value.getState().selectedPaths
-            : value.selectedPaths || [];
-        if (props.value === undefined) {
-            setStateValue(paths);
+        if (mutated) {
+            setInternalExpand(next.getState());
         }
-        props.onChange?.(paths);
-    }, [props.onChange, props.value]);
-    const value = props.value !== undefined ? props.value : stateValue;
-    const treeSelection = useMemo(() => {
-        const selection = {
-            defaultSelection: false,
-            selectedPaths: value,
-        };
-        return selection;
-    }, [value]);
-    const rowCount = useMemo(() => {
-        return getRowCount(props.options);
-    }, [props.options]);
-    const hasChildren = rowCount > props.options.length;
-    const columns = useMemo(() => {
-        return {
-            label: getLabelColumn(labelField, {
-                includeExpandCollapseButton: hasChildren,
-            }),
-        };
-    }, [labelField, hasChildren]);
-    const [size, setSize] = useState({
-        width: 0,
-        height: rowCount * 35,
-    });
-    const setHeight = useCallback((height) => {
-        setSize((s) => {
-            return {
-                ...s,
-                height,
-            };
-        });
-    }, []);
-    const setWidth = useCallback((width) => {
-        setSize((s) => {
-            return {
-                ...s,
-                width,
-            };
+    }, [allNodes, internalExpand]);
+    const handleSearchInputChange = useCallback((value) => {
+        setSearchQuery(value);
+        expandPathsForQuery(value);
+    }, [expandPathsForQuery]);
+    // --- Combobox items & value ---------------------------------------------
+    // Only nodes whose ancestors are currently expanded are surfaced to the
+    // combobox. base-ui's `filter` prop is skipped when the search query is
+    // empty (it shows every item verbatim), so collapsing a branch has to be
+    // reflected directly in the items array rather than via a filter callback.
+    //
+    // Search doesn't override the items list directly. Instead, typing in the
+    // search input expands every branch on the path to (and inside) any match
+    // via `expandPathsForQuery`, which makes the matches part of `items`
+    // naturally. Collapsing a branch mid-search hides that subtree again, even
+    // if it contains matches — until the next keystroke re-expands everything.
+    //
+    // If no item anywhere in the tree has children (equivalent to "no top-level
+    // item has children", since deeper branches can only exist under a
+    // branching root), the tree is flat and leaf rows don't need to reserve
+    // space for a chevron placeholder.
+    const reserveExpandSpace = branchNodes.length > 0;
+    const items = useMemo(() => {
+        const visible = [];
+        for (const node of allNodes) {
+            let ancestorsExpanded = true;
+            for (let i = 1; i < node.path.length; i++) {
+                if (!expandState.isNodeExpanded(node.path.slice(0, i))) {
+                    ancestorsExpanded = false;
+                    break;
+                }
+            }
+            if (!ancestorsExpanded) {
+                continue;
+            }
+            const isExpanded = expandState.isNodeExpanded(node.path);
+            // Read tri-state from TreeSelectionState so branches with partial
+            // selection render the indeterminate state (base-ui's built-in
+            // indicator, suppressed via `renderCheckboxIndicator`, only knows boolean).
+            const selected = selectionState.isNodeSelected(node.path);
+            visible.push({
+                value: node.pathKey,
+                textLabel: node.label,
+                label: (_jsx(TreeItemLabel, { node: node, isExpanded: isExpanded, onToggleExpand: toggleExpand, selected: selected, reserveExpandSpace: reserveExpandSpace })),
+                path: node.path,
+                depth: node.depth,
+                hasChildren: node.hasChildren,
+                isLeaf: !node.hasChildren,
+            });
+        }
+        return visible;
+    }, [allNodes, expandState, toggleExpand, selectionState, reserveExpandSpace]);
+    // Combobox `value` is the set of path keys for currently-visible nodes that
+    // are fully selected (`TreeSelectionState.isNodeSelected(path) === true`).
+    //
+    // IMPORTANT: this must only contain *visible* items. Base-ui's combobox
+    // filters `value` through its `itemByValue` map (built from visible items),
+    // silently dropping any value whose item isn't present. If we then diffed
+    // `onValueChange`'s result against a value that included hidden items, those
+    // hidden items would look "removed" and we'd incorrectly deselect them —
+    // e.g. expanding `fruits` → strawberry is selected, collapsing fruits and
+    // clicking the `fruits` branch would select the subtree but then carve
+    // strawberry back out in the second diff loop.
+    const value = useMemo(() => {
+        const result = [];
+        for (const item of items) {
+            if (selectionState.isNodeSelected(item.path) === true) {
+                result.push(item.value);
+            }
+        }
+        return result;
+    }, [items, selectionState]);
+    const valueSet = useMemo(() => new Set(value), [value]);
+    // Translate combobox value changes into TreeSelectionState mutations:
+    // clicking a branch selects the whole subtree, clicking a leaf toggles
+    // just that leaf, and Select All / Select None take the fast path.
+    const { onValueChange: onValueChangeFromProps } = props;
+    const onValueChange = useCallback((nextValues) => {
+        const next = new TreeSelectionState(internalSelection, {
+            treePaths,
+            strictCheckPaths: false,
         });
-    }, []);
-    const getSize = useLatest(size);
-    useEffect(() => {
-        if (!getSize().height) {
-            setHeight(rowCount * 35);
+        if (nextValues.length === 0) {
+            next.deselectAll();
         }
-    }, [rowCount]);
-    const setVisible = (visible) => {
-        if (visible) {
-            const { onMenuOpen } = getProps();
-            if (onMenuOpen) {
-                onMenuOpen();
+        else {
+            const nextSet = new Set(nextValues);
+            for (const key of nextSet) {
+                if (!valueSet.has(key)) {
+                    next.setNodeSelection(decodePath(key), true);
+                }
+            }
+            for (const key of valueSet) {
+                if (!nextSet.has(key)) {
+                    next.setNodeSelection(decodePath(key), false);
+                }
             }
-            requestAnimationFrame(() => {
-                doSetVisible(visible);
+        }
+        setInternalSelection(next.getState());
+        onValueChangeFromProps?.(next.getSelectedLeafNodePaths());
+    }, [internalSelection, treePaths, valueSet, onValueChangeFromProps]);
+    // --- Filtering: search query narrows the flattened items ---------------
+    // Keep a node visible when:
+    //   1. its own label matches the query, or
+    //   2. any ancestor's label matches (so a whole matching subtree shows
+    //      alongside the branch the user typed), or
+    //   3. any descendant's label matches (so parents of a deeply-nested match
+    //      stay in the list to convey the hierarchy, even if they were
+    //      collapsed when the search started).
+    //
+    // Rule (3) relies on `matchAncestorKeys`, which contains every ancestor of
+    // every match. Combined with `items` returning the full flattened tree when
+    // `searchQuery` is non-empty, this lets us surface matches buried inside
+    // collapsed branches without implicitly expanding them.
+    const filter = useCallback((item, query) => {
+        const q = query.toLowerCase();
+        if (item.textLabel.toLowerCase().includes(q)) {
+            return true;
+        }
+        for (let i = 1; i < item.path.length; i++) {
+            const anc = nodeByKey.get(encodePath(item.path.slice(0, i)));
+            if (anc && anc.label.toLowerCase().includes(q)) {
+                return true;
+            }
+        }
+        if (matchAncestorKeys?.has(encodePath(item.path))) {
+            return true;
+        }
+        return false;
+    }, [nodeByKey, matchAncestorKeys]);
+    // --- Chips: one per selected leaf path (mirrors withSelectedLeafNodesOnly)
+    const selectedLeafPaths = useMemo(() => {
+        return selectionState.getSelectedLeafNodePaths();
+    }, [selectionState]);
+    const { toDisplayValue, showClear } = props;
+    const chipLabelForPath = useCallback((path) => {
+        if (toDisplayValue) {
+            return toDisplayValue([path]);
+        }
+        return path
+            .map((segment, idx) => {
+            const anc = nodeByKey.get(encodePath(path.slice(0, idx + 1)));
+            return anc ? anc.label : String(segment);
+        })
+            .join('-');
+    }, [nodeByKey, toDisplayValue]);
+    // Deselect a single leaf path. Used by chip remove buttons — we can't rely on
+    // base-ui's built-in `ChipRemove` because the combobox's `selectedValue`
+    // contains both branches and leaves, so index-based removal would typically
+    // target a branch and collapse its entire subtree.
+    const deselectLeafPath = useCallback((path) => {
+        const next = new TreeSelectionState(internalSelection, {
+            treePaths,
+            strictCheckPaths: false,
+        });
+        next.setNodeSelection(path, false);
+        setInternalSelection(next.getState());
+        onValueChangeFromProps?.(next.getSelectedLeafNodePaths());
+    }, [internalSelection, treePaths, onValueChangeFromProps]);
+    const showRemoveChip = showClear !== false;
+    const { renderSelectedValues } = props;
+    const renderInputValues = useCallback(() => {
+        // Callers can swap out the default chip rendering (see
+        // `GridFilterTreeDropdown` which renders a comma-separated summary).
+        if (renderSelectedValues) {
+            return renderSelectedValues({
+                selectedLeafPaths,
+                getLabelForPath: chipLabelForPath,
             });
         }
-        else {
-            const { onMenuClose } = getProps();
-            if (onMenuClose) {
-                onMenuClose();
+        if (selectedLeafPaths.length === 0) {
+            return null;
+        }
+        return (_jsx(_Fragment, { children: selectedLeafPaths.map((path) => {
+                const key = encodePath(path);
+                const labelText = chipLabelForPath(path);
+                return (_jsx(ComboboxChip, { showRemove: showRemoveChip, onRemove: () => deselectLeafPath(path), className: 'twa:overflow-hidden', "aria-label": labelText, children: labelText }, key));
+            }) }));
+    }, [renderSelectedValues, selectedLeafPaths, chipLabelForPath, showRemoveChip, deselectLeafPath]);
+    // --- Tree-aware Select All ----------------------------------------------
+    // The built-in Select All reads `selectedItems.length === allItems.length`.
+    // Since `allItems` here only contains nodes visible under the current
+    // expand state, its tri-state would change as branches are expanded or
+    // collapsed. Compute the state from every leaf in the tree instead so it
+    // stays stable regardless of what's visible.
+    const allLeafPaths = useMemo(() => allNodes.filter((n) => !n.hasChildren).map((n) => n.path), [allNodes]);
+    const selectAllChecked = useMemo(() => {
+        if (allLeafPaths.length === 0) {
+            return false;
+        }
+        let selected = 0;
+        for (const p of allLeafPaths) {
+            if (selectionState.isNodeSelected(p) === true) {
+                selected++;
             }
-            doSetVisible(visible);
         }
-    };
-    const [treeListApi, setTreeListApi] = useState(null);
-    const { listSizeConstraints } = props;
-    const nodeMatches = useCallback(({ data }) => {
-        return !searchValue
-            ? data
-            : `${data[labelField]}`.toLowerCase().includes(searchValue.toLowerCase());
-    }, [searchValue]);
-    const filterFunction = useCallback(({ data, filterTreeNode }) => {
-        if (!Array.isArray(data.children)) {
-            return nodeMatches({ data });
+        if (selected === 0) {
+            return false;
+        }
+        if (selected === allLeafPaths.length) {
+            return true;
+        }
+        return null;
+    }, [allLeafPaths, selectionState]);
+    const onSelectAllChange = useCallback((checked) => {
+        const next = new TreeSelectionState(internalSelection, {
+            treePaths,
+            strictCheckPaths: false,
+        });
+        if (checked) {
+            next.selectAll();
+        }
+        else {
+            next.deselectAll();
         }
-        // allow non-leaf nodes to match
-        if (nodeMatches({ data })) {
-            return data;
+        setInternalSelection(next.getState());
+        onValueChangeFromProps?.(next.getSelectedLeafNodePaths());
+    }, [internalSelection, treePaths, onValueChangeFromProps]);
+    // --- Search-input trailing slot (Expand All / Collapse All toggle) ------
+    const renderSearchInputTrailing = useCallback(() => {
+        if (branchNodes.length === 0) {
+            return null;
         }
-        return filterTreeNode(data);
-    }, [nodeMatches]);
-    return (React.createElement(Flex, { flexDirection: 'row', className: "ab-TreeDropdown twa:w-full", style: props.style, onMouseDown: props.onMouseDown, onBlur: (e) => {
-            const { relatedTarget } = e;
-            const overlayDOMNode = overlayDOMRef.current;
-            if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
-                overlayDOMNode?.contains(relatedTarget)) {
-                return;
+        const title = anyBranchExpanded ? 'Collapse all' : 'Expand all';
+        return (_jsx("button", { type: "button", "data-name": "tree-expand-all-toggle", title: title, "aria-label": title, onMouseDown: (e) => {
+                // Keep focus on the search input so typing isn't interrupted.
+                e.preventDefault();
+            }, onClick: (e) => {
+                e.preventDefault();
+                toggleExpandAll();
+            }, className: cn('ab-NewTreeDropdown-expand-all', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center', 'twa:bg-defaultbackground', 'twa:size-6 twa:rounded-md twa:text-muted-foreground', 'twa:hover:text-foreground twa:hover:bg-ring/50 twa:cursor-pointer'
+            // 'twa:-mr-1'
+            ), children: anyBranchExpanded ? (_jsx(ChevronsDownUpIcon, { className: "twa:size-4" })) : (_jsx(ChevronsUpDownIcon, { className: "twa:size-4" })) }));
+    }, [branchNodes.length, anyBranchExpanded, toggleExpandAll]);
+    // --- Open/close callbacks -----------------------------------------------
+    const comboboxProps = {
+        isLoading,
+        items,
+        value,
+        onValueChange,
+        searchable: 'menulist',
+        virtualized: true,
+        // Built-in Select All's default value is `visibleItems.length === totalCount`,
+        // which would swing with expand/collapse. Override it with a tree-aware
+        // value/handler computed from the full leaf set so it stays stable.
+        showSelectAllCheckbox: true,
+        selectAllCheckboxValue: selectAllChecked,
+        onSelectAllCheckboxChange: onSelectAllChange,
+        // Suppress base-ui's boolean checkbox indicator; `TreeItemLabel` renders
+        // its own tri-state checkbox so partially-selected branches display the
+        // indeterminate state.
+        renderCheckboxIndicator: () => null,
+        resizable: props.resizable,
+        placeholder: props.placeholder,
+        showClear: showRemoveChip,
+        renderItemLabel: (defaultLabel) => {
+            return defaultLabel;
+        },
+        filter,
+        onInputValueChange: handleSearchInputChange,
+        // Reset the search query on close so the next open starts with no active
+        // filter narrowing. The expand state itself is intentionally preserved
+        // (the user explicitly expanded matches by typing), so re-opening the
+        // dropdown keeps the previously-revealed branches open.
+        onOpenChange: (open) => {
+            if (!open) {
+                setSearchQuery('');
             }
-            setVisible(false);
-        } },
-        React.createElement(NotifyResize, { onResize: (newSize) => {
-                setWidth(newSize.width);
-            } }),
-        React.createElement(OverlayTrigger, { visible: visible, targetOffset: 20, alignPosition: [
-                // overlay - target
-                ['TopLeft', 'BottomLeft'],
-                ['TopRight', 'BottomRight'],
-                ['BottomLeft', 'TopLeft'],
-                ['BottomRight', 'TopRight'],
-            ], render: () => {
-                const minWidth = listSizeConstraints?.minWidth ||
-                    computedCSSVars['--ab-cmp-select-menu__min-width'] ||
-                    240;
-                const maxWidth = listSizeConstraints?.maxWidth ||
-                    computedCSSVars['--ab-cmp-select-menu__max-width'] ||
-                    '60vw';
-                const minHeight = listSizeConstraints?.minHeight || 200;
-                const maxHeight = listSizeConstraints?.maxHeight ||
-                    computedCSSVars['--ab-cmp-select-menu__max-height'] ||
-                    '50vh';
-                const resizable = getProps().resizable;
-                const treeListStyle = resizable
-                    ? { ...sizeFull }
-                    : {
-                        width: size.width,
-                        height: size.height,
-                        maxWidth,
-                        minHeight,
-                        maxHeight,
-                        minWidth,
-                    };
-                if (!hasChildren) {
-                    // @ts-ignore - don't leave any space for the > expand icon, as there are no children
-                    treeListStyle['--infinite-group-row-column-nesting'] = 'calc(var(--ab-base-space) * 2)';
-                }
-                const treeList = (React.createElement(TreeList, { primaryKey: props.primaryKey ?? 'id', treeFilterFunction: filterFunction, columnHeaderHeight: 30, onReady: ({ api }) => {
-                        setTreeListApi(api);
-                        api.focus();
-                    }, defaultTreeExpandState: treeExpandState, onTreeExpandStateChange: setTreeExpandState, columns: columns, options: props.options, treeSelection: treeSelection, onTreeSelectionChange: withSelectedLeafNodesOnly(onChange), style: treeListStyle }));
-                let children = (React.createElement(Flex, { flexDirection: 'column', className: "twa:h-full" },
-                    React.createElement(Flex, { className: "twa:bg-defaultbackground twa:p-1 twa:items-center twa:justify-stretch twa:justify-items-stretch" },
-                        React.createElement(Input, { "data-name": "menulist-search-input", placeholder: "Search...", style: { width: '100%' }, value: searchValue, onChange: (e) => setSearchValue(e.target.value) })),
-                    treeList));
-                if (resizable) {
-                    const onResizeStop = (_e, _direction, ref) => {
-                        const newSize = {
-                            width: ref.style.width,
-                            height: ref.style.height,
-                        };
-                        setSize(newSize);
-                    };
-                    children = (React.createElement(Resizable, { enable: resizableDirections, minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight, defaultSize: size, onResizeStop: onResizeStop, onResizeStart: (e) => {
-                            // in order to prevent focus from being lost
-                            e.preventDefault();
-                        } }, children));
-                }
-                return (React.createElement(Box, { ref: overlayDOMRef, className: "ab-TreeDropdownOverlay", "data-name": "menu-container", style: {
-                        fontSize: 'var(--ab-cmp-select__font-size)',
-                    } }, children));
-            } },
-            React.createElement(FieldWrap, { style: props.fieldStyle, className: "twa:w-full" },
-                React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", "aria-expanded": visible, placeholder: props.placeholder ?? 'Select...', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
-                        if (!visible) {
-                            setVisible(true);
-                        }
-                        treeListApi?.focus();
-                    } }),
-                props.clearable && (React.createElement(SimpleButton, { style: {
-                        visibility: Array.isArray(value) && value.length > 0 ? 'visible' : 'hidden',
-                    }, variant: "text", icon: "close", onClick: () => onChange({ selectedPaths: [] }) }))))));
+            props.onOpenChange?.(open);
+        },
+        renderInputValues,
+        renderSearchInputTrailing,
+        className: clsx('ab-NewTreeDropdown', props.className),
+    };
+    return (
+        // <div
+        //   className={clsx('ab-NewTreeDropdown-wrap', 'twa:w-full')}
+        //   style={{ ...props.fieldStyle, ...props.style }}
+        //   onMouseDown={props.onMouseDown}
+        // >
+        // </div>
+        (_jsx(MultiCombobox, { ...comboboxProps }))
+    );
+}
+export function GridFilterTreeDropdown(props) {
+    const { showSelectedCount = false, placeholder = 'Select...', className, ...rest } = props;
+    const renderSelectedValues = useCallback(({ selectedLeafPaths, getLabelForPath }) => {
+        let children;
+        if (selectedLeafPaths.length === 0) {
+            children = (_jsx("span", { "data-name": "placeholder", className: "twa:text-muted-foreground", children: placeholder }));
+        }
+        else {
+            children = selectedLeafPaths.map((path) => getLabelForPath(path)).join(', ');
+        }
+        return (_jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && selectedLeafPaths.length > 0 && (_jsxs("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", selectedLeafPaths.length, ")"] })), children] }));
+    }, [placeholder, showSelectedCount]);
+    const mergedClassName = cn(
+    // Match the restyling GridFilterCombobox uses: remove the field border,
+    // flatten the shadow and absolutely position so the component fits the
+    // grid's floating-filter input box.
+    'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', className);
+    return (_jsx(TreeDropdown, { ...rest, placeholder: placeholder, className: mergedClassName, showClear: rest.showClear ?? false, resizable: rest.resizable ?? true, renderSelectedValues: renderSelectedValues }));
 }