@neo4j-ndl/react 4.21.2 → 4.22.1

package/lib/esm/next/tree-view/TreeView.js

@@ -32,31 +32,73 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useMergeRefs } from '@floating-ui/react';
 import classNames from 'classnames';
-import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useId, useRef, useState, } from 'react';
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { useSemicontrolledState } from '../../_common/use-semi-controlled-state';
+import { needleWarningMessage } from '../../_common/utils';
 import { Checkbox } from '../../checkbox';
 import { CleanIconButton } from '../../clean-icon-button';
 import { ConditionalWrap } from '../../conditional-wrap';
+import { isApplePlatform } from '../../helpers/platform';
 import { ChevronRightIconOutline } from '../../icons/generated/heroIcons/ChevronRightIconOutline';
 import { EllipsisHorizontalIconOutline } from '../../icons/generated/heroIcons/EllipsisHorizontalIconOutline';
 import { Menu } from '../../menu';
 import { Skeleton } from '../../skeleton';
 import { Tooltip } from '../../tooltip';
+import { computeNextSelection, computeSelectionEdges, countChangedIds, formatSelectionAnnouncement, } from './selection';
 const noop = () => undefined;
+const EMPTY_EDGES = new Map();
+const EMPTY_IDS = new Set();
+const EMPTY_ID_LIST = [];
+/**
+ * Volatile per-interaction state (focus, root-managed selection, edge
+ * styling) lives in this store instead of React context, so each item can
+ * subscribe to its own primitive slice via `useSyncExternalStore` and an
+ * interaction only re-renders the rows whose slice actually changed.
+ */
+function createTreeViewStore(initialState) {
+    let state = Object.assign({ edgeById: EMPTY_EDGES, focusedId: null, selectedIds: EMPTY_IDS }, initialState);
+    const listeners = new Set();
+    return {
+        getState: () => state,
+        setState: (partial) => {
+            state = Object.assign(Object.assign({}, state), partial);
+            listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+}
 const TREE_EVENTS = {
     action: 'treeitem-action',
     collapse: 'treeitem-collapse',
     expand: 'treeitem-expand',
-    select: 'treeitem-select',
 };
 const TreeViewContext = createContext({
-    focusedId: null,
+    isRootManaged: false,
     level: 1,
+    onSelectionIntent: noop,
+    parentId: null,
+    registerItem: noop,
     selectionMode: 'single',
     setFocusedId: noop,
+    store: createTreeViewStore(),
 });
+/**
+ * On Apple platforms Ctrl+click is the context menu gesture, so only Cmd may
+ * stand for an additive selection there.
+ */
+function getSelectionIntent(event) {
+    return {
+        isRange: event.shiftKey,
+        isToggle: isApplePlatform() ? event.metaKey : event.ctrlKey,
+    };
+}
 function getVisibleTreeItems(root) {
-    return Array.from(root.querySelectorAll('[role="treeitem"]:not([role="group"][hidden] [role="treeitem"])')).filter((el) => {
+    return Array.from(root.querySelectorAll('[role="treeitem"]')).filter((el) => {
         let parent = el.parentElement;
         while (parent && parent !== root) {
             if (parent.getAttribute('role') === 'group' && parent.hidden) {
@@ -67,6 +109,31 @@ function getVisibleTreeItems(root) {
         return true;
     });
 }
+function getVisibleItemIds(root) {
+    return getVisibleTreeItems(root).map((el) => el.id);
+}
+function areIdSetsEqual(first, second) {
+    if (first.size !== second.size) {
+        return false;
+    }
+    for (const id of first) {
+        if (!second.has(id)) {
+            return false;
+        }
+    }
+    return true;
+}
+function areEdgeMapsEqual(first, second) {
+    if (first.size !== second.size) {
+        return false;
+    }
+    for (const [id, edge] of first) {
+        if (second.get(id) !== edge) {
+            return false;
+        }
+    }
+    return true;
+}
 function annotateTreeItems(children) {
     const items = Children.toArray(children);
     const treeItemCount = items.filter((child) => isValidElement(child) && child.type === Item).length;
@@ -99,10 +166,186 @@ function annotateTreeItems(children) {
  * @alpha - this component is still in development and may change in the future. It might not have feature parity with the old tree view yet.
  */
 const Root = (_a) => {
-    var { children, selectionMode = 'single', ariaLabel, ariaLabelledby, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "selectionMode", "ariaLabel", "ariaLabelledby", "className", "style", "htmlAttributes", "ref"]);
+    var _b, _c;
+    var { children, defaultSelectedIds, selectedIds: selectedIdsProp, selectionMode = 'single', ariaLabel, ariaLabelledby, className, style, htmlAttributes, onSelectedIdsChange, ref } = _a, restProps = __rest(_a, ["children", "defaultSelectedIds", "selectedIds", "selectionMode", "ariaLabel", "ariaLabelledby", "className", "style", "htmlAttributes", "onSelectedIdsChange", "ref"]);
     const treeRef = useRef(null);
     const mergedRef = useMergeRefs([treeRef, ref]);
-    const [focusedId, setFocusedId] = useState(null);
+    const [announcement, setAnnouncement] = useState('');
+    const anchorRef = useRef(null);
+    const entriesRef = useRef(new Map());
+    const isRootManaged = selectedIdsProp !== undefined || defaultSelectedIds !== undefined;
+    const storeRef = useRef(null);
+    if (storeRef.current === null) {
+        storeRef.current = createTreeViewStore({
+            selectedIds: new Set((_b = selectedIdsProp !== null && selectedIdsProp !== void 0 ? selectedIdsProp : defaultSelectedIds) !== null && _b !== void 0 ? _b : EMPTY_ID_LIST),
+        });
+    }
+    const store = storeRef.current;
+    const setFocusedId = useCallback((id) => {
+        if (store.getState().focusedId !== id) {
+            store.setState({ focusedId: id });
+        }
+    }, [store]);
+    const [selectedIdList, setSelectedIdList] = useSemicontrolledState({
+        isControlled: selectedIdsProp !== undefined,
+        onChange: onSelectedIdsChange,
+        state: (_c = selectedIdsProp !== null && selectedIdsProp !== void 0 ? selectedIdsProp : defaultSelectedIds) !== null && _c !== void 0 ? _c : EMPTY_ID_LIST,
+    });
+    // useSemicontrolledState recreates its setter whenever the value changes;
+    // reading it through a ref keeps onSelectionIntent (and with it the
+    // memoized context value) stable across selection changes.
+    const setSelectedIdListRef = useRef(setSelectedIdList);
+    useLayoutEffect(() => {
+        setSelectedIdListRef.current = setSelectedIdList;
+    });
+    const readSelectedIds = useCallback(() => {
+        if (isRootManaged) {
+            return new Set(store.getState().selectedIds);
+        }
+        const selected = new Set();
+        entriesRef.current.forEach((entry, itemId) => {
+            if (entry.isSelected) {
+                selected.add(itemId);
+            }
+        });
+        return selected;
+    }, [isRootManaged, store]);
+    const readItemMaps = useCallback(() => {
+        const parentIdById = new Map();
+        const selectableIds = new Set();
+        entriesRef.current.forEach((entry, itemId) => {
+            if (entry.parentId !== null) {
+                parentIdById.set(itemId, entry.parentId);
+            }
+            if (entry.isSelectable && !entry.isDisabled) {
+                selectableIds.add(itemId);
+            }
+        });
+        return { parentIdById, selectableIds };
+    }, []);
+    const recomputeEdges = useCallback(() => {
+        const root = treeRef.current;
+        const previousEdges = store.getState().edgeById;
+        if (!root || selectionMode !== 'multiple-replace') {
+            if (previousEdges.size > 0) {
+                store.setState({ edgeById: EMPTY_EDGES });
+            }
+            return;
+        }
+        const selectedIds = readSelectedIds();
+        if (selectedIds.size === 0 && previousEdges.size === 0) {
+            return;
+        }
+        const nextEdges = computeSelectionEdges(getVisibleItemIds(root), selectedIds);
+        if (!areEdgeMapsEqual(previousEdges, nextEdges)) {
+            store.setState({ edgeById: nextEdges });
+        }
+    }, [readSelectedIds, selectionMode, store]);
+    const recomputeEdgesRef = useRef(recomputeEdges);
+    useLayoutEffect(() => {
+        recomputeEdgesRef.current = recomputeEdges;
+    });
+    // Debounced through a microtask so a commit that touches many items (mount,
+    // expansion, range selection) triggers a single recompute, after all item
+    // layout effects have registered and before the browser paints.
+    const isEdgeRecomputeScheduledRef = useRef(false);
+    const scheduleEdgeRecompute = useCallback(() => {
+        if (isEdgeRecomputeScheduledRef.current) {
+            return;
+        }
+        isEdgeRecomputeScheduledRef.current = true;
+        queueMicrotask(() => {
+            isEdgeRecomputeScheduledRef.current = false;
+            recomputeEdgesRef.current();
+        });
+    }, []);
+    const registerItem = useCallback((itemId, entry) => {
+        if (entry === null) {
+            entriesRef.current.delete(itemId);
+        }
+        else {
+            entriesRef.current.set(itemId, entry);
+        }
+        // Covers item mount/unmount and expansion toggles (a collapsing parent
+        // re-registers because its toggleExpanded callback is recreated).
+        scheduleEdgeRecompute();
+    }, [scheduleEdgeRecompute]);
+    const onSelectionIntent = useCallback((itemId, intent) => {
+        var _a;
+        const root = treeRef.current;
+        const entry = entriesRef.current.get(itemId);
+        if (!root || !entry || entry.isDisabled) {
+            return;
+        }
+        if (!entry.isSelectable) {
+            entry.toggleExpanded();
+            return;
+        }
+        const { parentIdById, selectableIds } = readItemMaps();
+        const selectedIds = readSelectedIds();
+        const result = computeNextSelection({
+            anchor: anchorRef.current,
+            intent,
+            parentIdById,
+            selectableIds,
+            selectedIds,
+            selectionMode,
+            targetId: itemId,
+            visibleIds: getVisibleItemIds(root),
+        });
+        anchorRef.current = result.anchor;
+        const nextSelectedIds = result.selectedIds;
+        const changedCount = countChangedIds(selectedIds, nextSelectedIds);
+        if (isRootManaged) {
+            if (changedCount > 0) {
+                setSelectedIdListRef.current([...nextSelectedIds]);
+            }
+        }
+        else if (selectionMode === 'single') {
+            // Single mode leaves clearing the previously selected item to the
+            // consumer, so only the clicked item is told about the change.
+            if (!selectedIds.has(itemId)) {
+                (_a = entry.onSelectedChange) === null || _a === void 0 ? void 0 : _a.call(entry, true);
+            }
+        }
+        else {
+            entriesRef.current.forEach((itemEntry, id) => {
+                var _a;
+                const isSelected = nextSelectedIds.has(id);
+                if (itemEntry.isSelected !== isSelected) {
+                    (_a = itemEntry.onSelectedChange) === null || _a === void 0 ? void 0 : _a.call(itemEntry, isSelected);
+                }
+            });
+        }
+        scheduleEdgeRecompute();
+        if (selectionMode !== 'single') {
+            setAnnouncement(intent.isRange
+                ? formatSelectionAnnouncement(nextSelectedIds.size)
+                : '');
+        }
+    }, [
+        isRootManaged,
+        readItemMaps,
+        readSelectedIds,
+        scheduleEdgeRecompute,
+        selectionMode,
+    ]);
+    // Mirrors the root-managed selection into the store, so items subscribe to
+    // their own slice and event handlers read it without a state dependency.
+    useLayoutEffect(() => {
+        const next = isRootManaged ? new Set(selectedIdList) : EMPTY_IDS;
+        if (areIdSetsEqual(store.getState().selectedIds, next)) {
+            return;
+        }
+        store.setState({ selectedIds: next });
+        scheduleEdgeRecompute();
+    }, [isRootManaged, scheduleEdgeRecompute, selectedIdList, store]);
+    // Computes edges on mount and whenever the edge inputs change identity
+    // (selection mode, root-managed flag). Interaction-driven recomputes go
+    // through scheduleEdgeRecompute instead.
+    useLayoutEffect(() => {
+        recomputeEdges();
+    }, [recomputeEdges]);
     const handleKeyDown = useCallback((event) => {
         const root = treeRef.current;
         if (!root) {
@@ -112,13 +355,35 @@ const Root = (_a) => {
         if (items.length === 0) {
             return;
         }
-        const currentIndex = items.findIndex((el) => el.id === focusedId);
+        const currentIndex = items.findIndex((el) => el.id === store.getState().focusedId);
         let isHandled = true;
+        const extendRangeTo = (item) => {
+            if (selectionMode === 'single' || currentIndex < 0) {
+                return;
+            }
+            const entry = entriesRef.current.get(item.id);
+            if (!(entry === null || entry === void 0 ? void 0 : entry.isSelectable) || entry.isDisabled) {
+                return;
+            }
+            if (anchorRef.current === null) {
+                // A keyboard range has no preceding click to repeat, so it grows the
+                // selection outwards from wherever focus already is.
+                anchorRef.current = {
+                    baseSelectedIds: readSelectedIds(),
+                    id: items[currentIndex].id,
+                    isSelected: true,
+                };
+            }
+            onSelectionIntent(item.id, { isRange: true, isToggle: false });
+        };
         switch (event.key) {
             case 'ArrowDown': {
                 const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : currentIndex;
                 const nextItem = items[nextIndex];
                 if (nextItem) {
+                    if (event.shiftKey) {
+                        extendRangeTo(nextItem);
+                    }
                     setFocusedId(nextItem.id);
                     nextItem.focus();
                 }
@@ -128,6 +393,9 @@ const Root = (_a) => {
                 const prevIndex = currentIndex > 0 ? currentIndex - 1 : 0;
                 const prevItem = items[prevIndex];
                 if (prevItem) {
+                    if (event.shiftKey) {
+                        extendRangeTo(prevItem);
+                    }
                     setFocusedId(prevItem.id);
                     prevItem.focus();
                 }
@@ -193,7 +461,7 @@ const Root = (_a) => {
             case ' ': {
                 const current = currentIndex >= 0 ? items[currentIndex] : null;
                 if (current) {
-                    current.dispatchEvent(new CustomEvent(TREE_EVENTS.select));
+                    onSelectionIntent(current.id, getSelectionIntent(event));
                 }
                 break;
             }
@@ -216,7 +484,7 @@ const Root = (_a) => {
             event.preventDefault();
             event.stopPropagation();
         }
-    }, [focusedId]);
+    }, [onSelectionIntent, readSelectedIds, selectionMode, setFocusedId, store]);
     const handleFocus = useCallback((event) => {
         const root = treeRef.current;
         if (!root) {
@@ -224,6 +492,7 @@ const Root = (_a) => {
         }
         if (event.target === root) {
             const items = getVisibleTreeItems(root);
+            const { focusedId } = store.getState();
             const alreadyFocused = focusedId
                 ? items.find((el) => el.id === focusedId)
                 : null;
@@ -233,9 +502,36 @@ const Root = (_a) => {
                 target.focus();
             }
         }
-    }, [focusedId]);
-    const classes = classNames(className, 'ndl-tree-view-new');
-    return (_jsx(TreeViewContext.Provider, { value: { focusedId, level: 1, selectionMode, setFocusedId }, children: _jsx("div", Object.assign({ ref: mergedRef, role: "tree", "aria-multiselectable": selectionMode === 'multiple' || undefined, tabIndex: 0, className: classes, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : undefined, "aria-labelledby": ariaLabelledby, style: style }, htmlAttributes, restProps, { children: annotateTreeItems(children) })) }));
+    }, [setFocusedId, store]);
+    const classes = classNames(className, 'ndl-tree-view-new', {
+        'ndl-tree-view-new--checkbox': selectionMode === 'multiple',
+    });
+    // Cached on children identity so Root-internal state commits (announcement,
+    // uncontrolled selection) reuse the same annotated elements and React bails
+    // out of the whole item subtree instead of re-rendering every row.
+    const annotatedChildren = useMemo(() => annotateTreeItems(children), [children]);
+    // Everything in here is stable or primitive, so items only re-render via
+    // context when the tree's configuration changes, not per interaction.
+    const contextValue = useMemo(() => ({
+        isRootManaged,
+        level: 1,
+        onSelectionIntent,
+        parentId: null,
+        registerItem,
+        selectionMode,
+        setFocusedId,
+        store,
+    }), [
+        isRootManaged,
+        onSelectionIntent,
+        registerItem,
+        selectionMode,
+        setFocusedId,
+        store,
+    ]);
+    return (_jsxs(TreeViewContext.Provider, { value: contextValue, children: [_jsx("div", Object.assign({ ref: mergedRef, role: "tree", "aria-multiselectable": selectionMode === 'multiple' || selectionMode === 'multiple-replace'
+                    ? true
+                    : undefined, tabIndex: 0, className: classes, onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : undefined, "aria-labelledby": ariaLabelledby, style: style }, htmlAttributes, restProps, { children: annotatedChildren })), _jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "ndl-tree-view-new-live-region", children: announcement })] }));
 };
 /**
  * A single item within a `TreeView`. Renders a `role="treeitem"` element that
@@ -260,16 +556,23 @@ const Root = (_a) => {
  * ```
  */
 const Item = (_a) => {
-    var { actionMenuItems, children, defaultExpanded = false, hasChildren: hasChildrenProp, isDisabled, isExpanded: isExpandedProp, isIndeterminate, isLoading, isSelected, leadingVisual, title, tooltipContent, tooltipProps, trailingContent, onExpandedChange, onSelectedChange, actionMenuProps, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["actionMenuItems", "children", "defaultExpanded", "hasChildren", "isDisabled", "isExpanded", "isIndeterminate", "isLoading", "isSelected", "leadingVisual", "title", "tooltipContent", "tooltipProps", "trailingContent", "onExpandedChange", "onSelectedChange", "actionMenuProps", "className", "style", "htmlAttributes", "ref"]);
+    var _b;
+    var { actionMenuItems, children, defaultExpanded = false, hasChildren: hasChildrenProp, id: idProp, isDisabled, isExpanded: isExpandedProp, isIndeterminate, isLoading, isSelectable: isSelectableProp, isSelected: isSelectedProp, leadingVisual, title, tooltipContent, tooltipProps, trailingContent, onExpandedChange, onSelectedChange, actionMenuProps, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["actionMenuItems", "children", "defaultExpanded", "hasChildren", "id", "isDisabled", "isExpanded", "isIndeterminate", "isLoading", "isSelectable", "isSelected", "leadingVisual", "title", "tooltipContent", "tooltipProps", "trailingContent", "onExpandedChange", "onSelectedChange", "actionMenuProps", "className", "style", "htmlAttributes", "ref"]);
     const generatedId = useId();
-    const itemId = `ndl-treeitem-${generatedId}`;
+    const itemId = (_b = idProp !== null && idProp !== void 0 ? idProp : htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id) !== null && _b !== void 0 ? _b : `ndl-treeitem-${generatedId}`;
     const titleId = `ndl-treeitem-title-${generatedId}`;
     const groupId = `ndl-treegroup-${generatedId}`;
     const itemRef = useRef(null);
     const actionButtonRef = useRef(null);
     const didOpenViaKeyboard = useRef(false);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const { focusedId, level, selectionMode, setFocusedId } = useContext(TreeViewContext);
+    const treeViewContext = useContext(TreeViewContext);
+    const { isRootManaged, level, onSelectionIntent, parentId, registerItem, selectionMode, setFocusedId, store, } = treeViewContext;
+    // Primitive slices of the store, so Object.is bails out of re-renders for
+    // rows whose focus/selection/edge state did not change.
+    const isFocused = useSyncExternalStore(store.subscribe, () => store.getState().focusedId === itemId, () => store.getState().focusedId === itemId);
+    const isRootSelected = useSyncExternalStore(store.subscribe, () => store.getState().selectedIds.has(itemId), () => store.getState().selectedIds.has(itemId));
+    const edge = useSyncExternalStore(store.subscribe, () => store.getState().edgeById.get(itemId), () => store.getState().edgeById.get(itemId));
     const isControlledExpansion = isExpandedProp !== undefined;
     const [isExpanded, setIsExpanded] = useSemicontrolledState({
         isControlled: isControlledExpansion,
@@ -277,7 +580,10 @@ const Item = (_a) => {
         state: isExpandedProp !== null && isExpandedProp !== void 0 ? isExpandedProp : defaultExpanded,
     });
     const hasChildren = hasChildrenProp !== null && hasChildrenProp !== void 0 ? hasChildrenProp : Children.count(children) > 0;
-    const isSelectable = onSelectedChange !== undefined;
+    const isSelectable = isRootManaged
+        ? (isSelectableProp !== null && isSelectableProp !== void 0 ? isSelectableProp : true)
+        : (isSelectableProp !== null && isSelectableProp !== void 0 ? isSelectableProp : onSelectedChange !== undefined);
+    const isSelected = isRootManaged ? isRootSelected : (isSelectedProp !== null && isSelectedProp !== void 0 ? isSelectedProp : false);
     const isMultiple = selectionMode === 'multiple';
     const toggleExpanded = useCallback(() => {
         if (isDisabled) {
@@ -287,31 +593,46 @@ const Item = (_a) => {
             setIsExpanded(!isExpanded);
         }
     }, [isDisabled, hasChildren, setIsExpanded, isExpanded]);
-    const handleSelect = useCallback(() => {
-        if (isDisabled) {
+    useLayoutEffect(() => {
+        registerItem(itemId, {
+            isDisabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false,
+            isSelectable,
+            isSelected,
+            onSelectedChange,
+            parentId,
+            toggleExpanded,
+        });
+    }, [
+        isDisabled,
+        isSelectable,
+        isSelected,
+        itemId,
+        onSelectedChange,
+        parentId,
+        registerItem,
+        toggleExpanded,
+    ]);
+    useLayoutEffect(() => {
+        return () => registerItem(itemId, null);
+    }, [itemId, registerItem]);
+    useEffect(() => {
+        if (!isRootManaged) {
             return;
         }
-        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(!isSelected);
-    }, [isDisabled, isSelected, onSelectedChange]);
-    const handleClick = useCallback(() => {
+        if (idProp === undefined) {
+            needleWarningMessage('TreeView.Item needs an `id` when the tree manages selection with `selectedIds`.');
+        }
+        if (isSelectedProp !== undefined || onSelectedChange !== undefined) {
+            needleWarningMessage('TreeView.Item `isSelected` and `onSelectedChange` are ignored when the tree manages selection with `selectedIds`.');
+        }
+    }, [idProp, isRootManaged, isSelectedProp, onSelectedChange]);
+    const handleClick = useCallback((event) => {
         if (isDisabled) {
             return;
         }
         setFocusedId(itemId);
-        if (isSelectable) {
-            handleSelect();
-        }
-        else {
-            toggleExpanded();
-        }
-    }, [
-        isDisabled,
-        setFocusedId,
-        itemId,
-        isSelectable,
-        handleSelect,
-        toggleExpanded,
-    ]);
+        onSelectionIntent(itemId, getSelectionIntent(event));
+    }, [isDisabled, setFocusedId, itemId, onSelectionIntent]);
     const handleChevronClick = useCallback((event) => {
         event.stopPropagation();
         if (isDisabled) {
@@ -341,15 +662,6 @@ const Item = (_a) => {
                 setIsExpanded(false);
             }
         }
-        else if (event.type === TREE_EVENTS.select) {
-            event.stopPropagation();
-            if (isSelectable) {
-                handleSelect();
-            }
-            else {
-                toggleExpanded();
-            }
-        }
         else if (event.type === TREE_EVENTS.action) {
             event.stopPropagation();
             if (actionMenuItems && !isDisabled) {
@@ -357,59 +669,51 @@ const Item = (_a) => {
                 setIsMenuOpen(true);
             }
         }
-    }, [
-        actionMenuItems,
-        hasChildren,
-        isExpanded,
-        isDisabled,
-        isSelectable,
-        setIsExpanded,
-        handleSelect,
-        toggleExpanded,
-    ]);
+    }, [actionMenuItems, hasChildren, isExpanded, isDisabled, setIsExpanded]);
     const callbackRef = useCallback((node) => {
         const prev = itemRef.current;
         if (prev) {
             prev.removeEventListener(TREE_EVENTS.expand, handleCustomEvents);
             prev.removeEventListener(TREE_EVENTS.collapse, handleCustomEvents);
-            prev.removeEventListener(TREE_EVENTS.select, handleCustomEvents);
             prev.removeEventListener(TREE_EVENTS.action, handleCustomEvents);
         }
         itemRef.current = node;
         if (node) {
             node.addEventListener(TREE_EVENTS.expand, handleCustomEvents);
             node.addEventListener(TREE_EVENTS.collapse, handleCustomEvents);
-            node.addEventListener(TREE_EVENTS.select, handleCustomEvents);
             node.addEventListener(TREE_EVENTS.action, handleCustomEvents);
         }
     }, [handleCustomEvents]);
     const mergedRef = useMergeRefs([callbackRef, ref]);
-    const isFocused = focusedId === itemId;
     const selectionAriaProps = (() => {
         if (!isSelectable) {
             return {};
         }
         if (isMultiple) {
             return {
-                'aria-checked': isIndeterminate
-                    ? 'mixed'
-                    : (isSelected !== null && isSelected !== void 0 ? isSelected : false),
+                'aria-checked': isIndeterminate ? 'mixed' : isSelected,
             };
         }
-        return { 'aria-selected': isSelected !== null && isSelected !== void 0 ? isSelected : false };
+        return { 'aria-selected': isSelected };
     })();
+    const edgeClass = edge === undefined ? undefined : `ndl-tree-view-new-item--selected-${edge}`;
+    const childContextValue = useMemo(() => (Object.assign(Object.assign({}, treeViewContext), { level: treeViewContext.level + 1, parentId: itemId })), [itemId, treeViewContext]);
+    // Same caching as in Root: keeps child element identity stable across
+    // renders of this item (selection, focus, expansion) so unchanged
+    // descendants bail out of re-rendering.
+    const annotatedChildren = useMemo(() => annotateTreeItems(children), [children]);
     const itemElement = (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled on tree root; aria-selected/aria-checked applied via spread
-    _jsx("div", Object.assign({ ref: mergedRef, id: itemId, 
+    _jsx("div", Object.assign({ ref: mergedRef, 
         // eslint-disable-next-line jsx-a11y/role-has-required-aria-props -- aria-selected/aria-checked applied conditionally via spread
-        role: "treeitem" }, selectionAriaProps, { "aria-expanded": hasChildren ? isExpanded : undefined, "aria-owns": hasChildren ? groupId : undefined, "aria-disabled": isDisabled || undefined, "aria-busy": isLoading || undefined, "aria-keyshortcuts": actionMenuItems ? 'Shift+F10' : undefined, "aria-labelledby": titleId, "aria-level": level, tabIndex: isFocused ? 0 : -1, className: classNames('ndl-tree-view-new-item', className, {
+        role: "treeitem" }, selectionAriaProps, { "aria-expanded": hasChildren ? isExpanded : undefined, "aria-owns": hasChildren ? groupId : undefined, "aria-disabled": isDisabled || undefined, "aria-busy": isLoading || undefined, "aria-keyshortcuts": actionMenuItems ? 'Shift+F10' : undefined, "aria-labelledby": titleId, "aria-level": level, tabIndex: isFocused ? 0 : -1, className: classNames('ndl-tree-view-new-item', className, edgeClass, {
             'ndl-tree-view-new-item--disabled': isDisabled,
             'ndl-tree-view-new-item--parent': hasChildren,
             'ndl-tree-view-new-item--selected': isSelected && isSelectable,
         }), style: Object.assign({ '--tree-level': level - 1 }, style), onClick: (event) => {
             event.stopPropagation();
-            handleClick();
-        } }, htmlAttributes, restProps, { children: _jsxs("div", { className: classNames('ndl-tree-view-new-item-content', {
+            handleClick(event);
+        } }, htmlAttributes, restProps, { id: itemId, children: _jsxs("div", { className: classNames('ndl-tree-view-new-item-content', {
                 'ndl-tree-view-new-item-content--parent': hasChildren,
             }), children: [hasChildren && (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard handled on tree root
@@ -428,7 +732,7 @@ const Item = (_a) => {
                                 },
                                 tabIndex: -1,
                             }, children: _jsx(EllipsisHorizontalIconOutline, {}) }), _jsx(Menu, Object.assign({ isOpen: isMenuOpen, anchorRef: actionButtonRef, onClose: handleMenuClose }, actionMenuProps, { children: actionMenuItems }))] }))] }) })));
-    return (_jsxs(_Fragment, { children: [_jsx(ConditionalWrap, { shouldWrap: tooltipContent !== undefined && tooltipContent !== null, wrap: (children) => (_jsxs(Tooltip, Object.assign({ type: "simple", hoverDelay: { close: 0, open: 500 }, isDisabled: isMenuOpen, followCursor: "initial" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [_jsx(Tooltip.Trigger, Object.assign({ hasButtonWrapper: true }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { children: children })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: tooltipContent }))] }))), children: itemElement }), hasChildren && (_jsx(TreeViewContext.Provider, { value: { focusedId, level: level + 1, selectionMode, setFocusedId }, children: _jsx("div", { role: "group", id: groupId, hidden: !isExpanded, style: { '--tree-level': level - 1 }, children: annotateTreeItems(children) }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ConditionalWrap, { shouldWrap: tooltipContent !== undefined && tooltipContent !== null, wrap: (children) => (_jsxs(Tooltip, Object.assign({ type: "simple", hoverDelay: { close: 0, open: 500 }, isDisabled: isMenuOpen, followCursor: "initial" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [_jsx(Tooltip.Trigger, Object.assign({ hasButtonWrapper: true }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { children: children })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: tooltipContent }))] }))), children: itemElement }), hasChildren && (_jsx(TreeViewContext.Provider, { value: childContextValue, children: _jsx("div", { role: "group", id: groupId, hidden: !isExpanded, style: { '--tree-level': level - 1 }, children: annotatedChildren }) }))] }));
 };
 /**
  * A skeleton placeholder for tree items that are being loaded. Renders one or
@@ -440,7 +744,7 @@ const Item = (_a) => {
  *
  * @example
  * ```tsx
- * <TreeView.Item title="Lazy folder" hasChildren isLoading={isLoading} isExpanded>
+ * <TreeView.Item title="Lazy folder" hasChildren isLoading isExpanded>
  *   {isLoading && <TreeView.SkeletonItem rows={3} />}
  * </TreeView.Item>
  * ```
@@ -450,6 +754,20 @@ const SkeletonItem = (_a) => {
     const { level } = useContext(TreeViewContext);
     return (_jsx("div", Object.assign({ ref: ref, "aria-hidden": "true", className: classNames('ndl-tree-view-new-skeleton', className), style: Object.assign({ '--tree-level': level - 1 }, style) }, htmlAttributes, restProps, { children: Array.from({ length: rows }, (_unused, index) => (_jsx(Skeleton, { height: "18px", width: "100%" }, index))) })));
 };
+/**
+ * @remarks
+ * Selection can be managed per item, with `isSelected` and `onSelectedChange`
+ * on each `TreeView.Item`, or by the tree itself, by passing `selectedIds` (or
+ * `defaultSelectedIds`) together with `onSelectedIdsChange`. When the tree
+ * manages selection, every item needs an `id`, and each item's own
+ * `isSelected` and `onSelectedChange` are ignored.
+ *
+ * The available selection modes are:
+ *
+ * - `single` — one item at a time. An unmodified click selects the clicked item and never clears it.
+ * - `multiple` — multi-select with checkboxes. An unmodified click toggles an item, and `Shift` repeats that across a range without clearing anything outside it.
+ * - `multiple-replace` — multi-select without checkboxes. An unmodified click selects only that item, `Cmd`/`Ctrl` toggles it and moves the anchor, and `Shift` extends from that anchor while retaining its selection snapshot. `Shift` + arrow extends the range.
+ */
 const TreeView = Object.assign(Root, { Item, SkeletonItem });
 export { TreeView };
 //# sourceMappingURL=TreeView.js.map