react-aria-components 1.15.0 → 1.16.0

package/dist/Tree.mjs

@@ -3,14 +3,15 @@ import {CheckboxContext as $4e85f108e88277b8$export$b085522c77523c51} from "./RS
 import {DEFAULT_SLOT as $64fa3d84918910a7$export$c62b8e45d58ddad9, dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
 import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5, DefaultCollectionRenderer as $7135fc7d473fd974$export$a164736487e3f0ae} from "./Collection.mjs";
 import {DragAndDropContext as $612b8eb6cb90e02d$export$d188a835a7bc5783, DropIndicatorContext as $612b8eb6cb90e02d$export$f55761759794cf55, useDndPersistedKeys as $612b8eb6cb90e02d$export$d1e8e3fbb7461f6, useRenderDropIndicator as $612b8eb6cb90e02d$export$971707d8a129a1f7} from "./DragAndDrop.mjs";
+import {GridListHeader as $72e60046c03fbe42$export$1b574dbdb0075ff6, GridListHeaderContext as $72e60046c03fbe42$export$87f5843bfb30d205, GridListHeaderInnerContext as $72e60046c03fbe42$export$bc7e8a4031ec2a33} from "./GridList.mjs";
 import {SelectionIndicatorContext as $1d5b8b8664671ef2$export$c9549807523555e0} from "./SelectionIndicator.mjs";
 import {SharedElementTransition as $c8a5a149f625efcf$export$758399f318e6385a} from "./SharedElementTransition.mjs";
 import {TreeDropTargetDelegate as $7e0f784ed4e400df$export$82c13862611c034e} from "./TreeDropTargetDelegate.mjs";
-import {useLocale as $kUtXx$useLocale, useCollator as $kUtXx$useCollator, useTree as $kUtXx$useTree, ListKeyboardDelegate as $kUtXx$ListKeyboardDelegate, useFocusRing as $kUtXx$useFocusRing, FocusScope as $kUtXx$FocusScope, mergeProps as $kUtXx$mergeProps, useTreeItem as $kUtXx$useTreeItem, useHover as $kUtXx$useHover, useGridListSelectionCheckbox as $kUtXx$useGridListSelectionCheckbox, useVisuallyHidden as $kUtXx$useVisuallyHidden, useId as $kUtXx$useId} from "react-aria";
-import {CollectionBuilder as $kUtXx$CollectionBuilder, Collection as $kUtXx$Collection, CollectionNode as $kUtXx$CollectionNode, createLeafComponent as $kUtXx$createLeafComponent, createBranchComponent as $kUtXx$createBranchComponent, useCachedChildren as $kUtXx$useCachedChildren, LoaderNode as $kUtXx$LoaderNode} from "@react-aria/collections";
+import {useLocale as $kUtXx$useLocale, useCollator as $kUtXx$useCollator, useTree as $kUtXx$useTree, ListKeyboardDelegate as $kUtXx$ListKeyboardDelegate, useFocusRing as $kUtXx$useFocusRing, FocusScope as $kUtXx$FocusScope, mergeProps as $kUtXx$mergeProps, useTreeItem as $kUtXx$useTreeItem, useHover as $kUtXx$useHover, useGridListSelectionCheckbox as $kUtXx$useGridListSelectionCheckbox, useVisuallyHidden as $kUtXx$useVisuallyHidden, useId as $kUtXx$useId, useGridListSection as $kUtXx$useGridListSection} from "react-aria";
+import {BaseCollection as $kUtXx$BaseCollection, CollectionBuilder as $kUtXx$CollectionBuilder, Collection as $kUtXx$Collection, CollectionNode as $kUtXx$CollectionNode, createLeafComponent as $kUtXx$createLeafComponent, createBranchComponent as $kUtXx$createBranchComponent, useCachedChildren as $kUtXx$useCachedChildren, LoaderNode as $kUtXx$LoaderNode, SectionNode as $kUtXx$SectionNode} from "@react-aria/collections";
 import {useTreeState as $kUtXx$useTreeState} from "react-stately";
 import {filterDOMProps as $kUtXx$filterDOMProps, useObjectRef as $kUtXx$useObjectRef, useLoadMoreSentinel as $kUtXx$useLoadMoreSentinel, inertValue as $kUtXx$inertValue} from "@react-aria/utils";
-import $kUtXx$react, {createContext as $kUtXx$createContext, forwardRef as $kUtXx$forwardRef, useRef as $kUtXx$useRef, useEffect as $kUtXx$useEffect, useContext as $kUtXx$useContext, useMemo as $kUtXx$useMemo, useState as $kUtXx$useState} from "react";
+import $kUtXx$react, {createContext as $kUtXx$createContext, forwardRef as $kUtXx$forwardRef, useRef as $kUtXx$useRef, useEffect as $kUtXx$useEffect, useContext as $kUtXx$useContext, useState as $kUtXx$useState, useMemo as $kUtXx$useMemo} from "react";
 import {useControlledState as $kUtXx$useControlledState} from "@react-stately/utils";
 
 /*
@@ -37,52 +38,95 @@ import {useControlledState as $kUtXx$useControlledState} from "@react-stately/ut
 
 
 
-class $2f5eaf4a2a47b4cf$var$TreeCollection {
-    // TODO: should this collection's getters reflect the flattened structure or the original structure
-    // If we respresent the flattened structure, it is easier for the keyboard nav but harder to find all the nodes
-    *[Symbol.iterator]() {
-        yield* this.flattenedRows;
-    }
-    get size() {
-        return this.itemCount;
-    }
-    getKeys() {
-        return this.keyMap.keys();
-    }
-    getItem(key) {
-        return this.keyMap.get(key) || null;
+
+class $2f5eaf4a2a47b4cf$var$TreeCollection extends (0, $kUtXx$BaseCollection) {
+    withExpandedKeys(lastExpandedKeys, expandedKeys) {
+        let collection = this.clone();
+        collection.expandedKeys = expandedKeys;
+        // Clone ancestor section nodes so React knows to re-render since the same item won't cause a new render but a clone creating a new object with the same value will
+        // Without this change, the items won't expand and collapse when virtualized inside a section
+        $2f5eaf4a2a47b4cf$var$TreeCollection.cloneAncestorSections(expandedKeys, lastExpandedKeys, collection);
+        $2f5eaf4a2a47b4cf$var$TreeCollection.cloneAncestorSections(lastExpandedKeys, expandedKeys, collection);
+        collection.frozen = this.frozen;
+        return collection;
     }
-    at(idx) {
-        return this.flattenedRows[idx];
+    // diff lastExpandedKeys and expandedKeys so we only clone what has changed
+    static cloneAncestorSections(keys, excludeSet, collection) {
+        for (let key of keys)if (!excludeSet.has(key)) {
+            let currentKey = key;
+            while(currentKey != null){
+                let item = collection.getItem(currentKey);
+                var _item_parentKey;
+                if ((item === null || item === void 0 ? void 0 : item.type) === 'section') {
+                    collection.keyMap.set(currentKey, item.clone());
+                    break;
+                } else currentKey = (_item_parentKey = item === null || item === void 0 ? void 0 : item.parentKey) !== null && _item_parentKey !== void 0 ? _item_parentKey : null;
+            }
+        }
     }
-    getFirstKey() {
-        var _this_flattenedRows_;
-        return (_this_flattenedRows_ = this.flattenedRows[0]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
+    *[Symbol.iterator]() {
+        let firstKey = this.getFirstKey();
+        let node = firstKey != null ? this.getItem(firstKey) : null;
+        while(node){
+            yield node;
+            if (node.type === 'section') node = node.nextKey ? this.getItem(node.nextKey) : null;
+            else {
+                // This will include both item and content nodes
+                // We handle the content nodes in useCollectionRenderer and ListLayout
+                let key = this.getKeyAfter(node.key);
+                node = key ? this.getItem(key) : null;
+            }
+        }
     }
     getLastKey() {
-        var _this_flattenedRows_;
-        return (_this_flattenedRows_ = this.flattenedRows[this.flattenedRows.length - 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
+        // Find the deepest expanded child. We don't use collection.getLastKey() here
+        // because that will return the deepest child regardless of expandedKeys.
+        // Instead, start from the last top-level key and walk down.
+        let key = this.lastKey;
+        if (key == null) return null;
+        let node = this.getItem(key);
+        while((node === null || node === void 0 ? void 0 : node.lastChildKey) != null && (node.type !== 'item' || this.expandedKeys.has(node.key)))node = this.getItem(node.lastChildKey);
+        return node === null || node === void 0 ? void 0 : node.key;
     }
     getKeyAfter(key) {
-        var _this_flattenedRows_;
-        let index = this.flattenedRows.findIndex((row)=>row.key === key);
-        return (_this_flattenedRows_ = this.flattenedRows[index + 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
+        let node = this.getItem(key);
+        if (!node) return null;
+        if ((this.expandedKeys.has(node.key) || node.type !== 'item') && node.firstChildKey != null) return node.firstChildKey;
+        while(node){
+            if (node.nextKey != null) return node.nextKey;
+            if (node.parentKey != null) node = this.getItem(node.parentKey);
+            else return null;
+        }
+        return null;
     }
     getKeyBefore(key) {
-        var _this_flattenedRows_;
-        let index = this.flattenedRows.findIndex((row)=>row.key === key);
-        return (_this_flattenedRows_ = this.flattenedRows[index - 1]) === null || _this_flattenedRows_ === void 0 ? void 0 : _this_flattenedRows_.key;
+        let node = this.getItem(key);
+        if (!node) return null;
+        if (node.prevKey != null) {
+            node = this.getItem(node.prevKey);
+            // If the lastChildKey is expanded, check its lastChildKey
+            while(node && (node.type !== 'item' || this.expandedKeys.has(node.key)) && node.lastChildKey != null)node = this.getItem(node.lastChildKey);
+            var _node_key;
+            return (_node_key = node === null || node === void 0 ? void 0 : node.key) !== null && _node_key !== void 0 ? _node_key : null;
+        }
+        return node.parentKey;
     }
-    // Note that this will return Content nodes in addition to nested TreeItems
     getChildren(key) {
-        let keyMap = this.keyMap;
+        let self = this;
         return {
             *[Symbol.iterator] () {
-                let parent = keyMap.get(key);
-                let node = (parent === null || parent === void 0 ? void 0 : parent.firstChildKey) != null ? keyMap.get(parent.firstChildKey) : null;
-                while(node){
+                let parent = self.getItem(key);
+                let node = (parent === null || parent === void 0 ? void 0 : parent.firstChildKey) != null ? self.getItem(parent.firstChildKey) : null;
+                if (parent && parent.type === 'section' && node) // Stop once either the node is null or the node is the parent's sibling
+                while(node && node.key !== parent.nextKey){
+                    yield self.getItem(node.key);
+                    // This will include content nodes which we skip in ListLayout
+                    let key = self.getKeyAfter(node.key);
+                    node = key != null ? self.getItem(key) : null;
+                }
+                else while(node){
                     yield node;
-                    node = node.nextKey != null ? keyMap.get(node.nextKey) : undefined;
+                    node = node.nextKey != null ? self.getItem(node.nextKey) : null;
                 }
             }
         };
@@ -91,17 +135,8 @@ class $2f5eaf4a2a47b4cf$var$TreeCollection {
         let item = this.getItem(key);
         return item ? item.textValue : '';
     }
-    constructor(opts){
-        this.keyMap = new Map();
-        this.itemCount = 0;
-        let { collection: collection, expandedKeys: expandedKeys } = opts;
-        let { flattenedRows: flattenedRows, keyMap: keyMap, itemCount: itemCount } = $2f5eaf4a2a47b4cf$var$flattenTree(collection, {
-            expandedKeys: expandedKeys
-        });
-        this.flattenedRows = flattenedRows;
-        // Use generated keyMap because it contains the modified collection nodes (aka it adjusts the indexes so that they ignore the existence of the Content items)
-        this.keyMap = keyMap;
-        this.itemCount = itemCount;
+    constructor(...args){
+        super(...args), this.expandedKeys = new Set();
     }
 }
 const $2f5eaf4a2a47b4cf$export$dfae7d399eea2568 = /*#__PURE__*/ (0, $kUtXx$createContext)(null);
@@ -110,7 +145,8 @@ const $2f5eaf4a2a47b4cf$export$7fbedc92909ed28e = /*#__PURE__*/ (0, $kUtXx$forwa
     // Render the portal first so that we have the collection by the time we render the DOM in SSR.
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $2f5eaf4a2a47b4cf$export$dfae7d399eea2568);
     return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$CollectionBuilder), {
-        content: /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$Collection), props)
+        content: /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $kUtXx$Collection), props),
+        createCollection: ()=>new $2f5eaf4a2a47b4cf$var$TreeCollection()
     }, (collection)=>/*#__PURE__*/ (0, $kUtXx$react).createElement($2f5eaf4a2a47b4cf$var$TreeInner, {
             props: props,
             collection: collection,
@@ -149,16 +185,16 @@ function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection,
     let { CollectionRoot: CollectionRoot, isVirtualized: isVirtualized, layoutDelegate: layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate } = (0, $kUtXx$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     // Kinda annoying that we have to replicate this code here as well as in useTreeState, but don't want to add
     // flattenCollection stuff to useTreeState. Think about this later
-    let [expandedKeys, setExpandedKeys] = (0, $kUtXx$useControlledState)(propExpandedKeys ? $2f5eaf4a2a47b4cf$var$convertExpanded(propExpandedKeys) : undefined, propDefaultExpandedKeys ? $2f5eaf4a2a47b4cf$var$convertExpanded(propDefaultExpandedKeys) : new Set(), onExpandedChange);
-    let flattenedCollection = (0, $kUtXx$useMemo)(()=>{
-        return new $2f5eaf4a2a47b4cf$var$TreeCollection({
-            collection: collection,
-            expandedKeys: expandedKeys
-        });
-    }, [
-        collection,
-        expandedKeys
-    ]);
+    let [expandedKeys, setExpandedKeys] = (0, $kUtXx$useControlledState)(propExpandedKeys ? new Set(propExpandedKeys) : undefined, propDefaultExpandedKeys ? new Set(propDefaultExpandedKeys) : new Set(), onExpandedChange);
+    let [lastCollection, setLastCollection] = (0, $kUtXx$useState)(collection);
+    let [lastExpandedKeys, setLastExpandedKeys] = (0, $kUtXx$useState)(expandedKeys);
+    let [flattenedCollection, setFlattenedCollection] = (0, $kUtXx$useState)(()=>collection.withExpandedKeys(lastExpandedKeys, expandedKeys));
+    // if the lastExpandedKeys is not the same as the currentExpandedKeys or the collection has changed, then run this
+    if (!$2f5eaf4a2a47b4cf$var$areSetsEqual(lastExpandedKeys, expandedKeys) || collection !== lastCollection) {
+        setFlattenedCollection(collection.withExpandedKeys(lastExpandedKeys, expandedKeys));
+        setLastCollection(collection);
+        setLastExpandedKeys(expandedKeys);
+    }
     let state = (0, $kUtXx$useTreeState)({
         ...props,
         selectionMode: selectionMode,
@@ -219,7 +255,7 @@ function $2f5eaf4a2a47b4cf$var$TreeInner({ props: props, collection: collection,
                     var _dragAndDropHooks_isVirtualDragging;
                     let key = e.target.key;
                     let item = state.collection.getItem(key);
-                    let isExpanded = expandedKeys !== 'all' && expandedKeys.has(key);
+                    let isExpanded = expandedKeys.has(key);
                     if (item && item.hasChildNodes && (!isExpanded || (dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : (_dragAndDropHooks_isVirtualDragging = dragAndDropHooks.isVirtualDragging) === null || _dragAndDropHooks_isVirtualDragging === void 0 ? void 0 : _dragAndDropHooks_isVirtualDragging.call(dragAndDropHooks)))) state.toggleKey(key);
                 }
             },
@@ -643,52 +679,6 @@ const $2f5eaf4a2a47b4cf$export$533df5f8efd48cc9 = (0, $kUtXx$createLeafComponent
         style: style
     }, renderProps.children)));
 });
-function $2f5eaf4a2a47b4cf$var$convertExpanded(expanded) {
-    if (!expanded) return new Set();
-    return expanded === 'all' ? 'all' : new Set(expanded);
-}
-function $2f5eaf4a2a47b4cf$var$flattenTree(collection, opts) {
-    let { expandedKeys: expandedKeys = new Set() } = opts;
-    let keyMap = new Map();
-    let flattenedRows = [];
-    // Need to count the items here because BaseCollection will return the full item count regardless if items are hidden via collapsed rows
-    let itemCount = 0;
-    let parentLookup = new Map();
-    let visitNode = (node)=>{
-        if (node.type === 'item' || node.type === 'loader') {
-            let parentKey = node === null || node === void 0 ? void 0 : node.parentKey;
-            let clone = {
-                ...node
-            };
-            if (parentKey != null) {
-                // TODO: assumes that non item content node (aka TreeItemContent always placed before Collection) will be always placed before the child rows. If we can't make this assumption then we can filter out
-                // every non-item per level and assign indicies based off the node's position in said filtered array
-                let hasContentNode = [
-                    ...collection.getChildren(parentKey)
-                ][0].type !== 'item';
-                if (hasContentNode) clone.index = (node === null || node === void 0 ? void 0 : node.index) != null ? (node === null || node === void 0 ? void 0 : node.index) - 1 : 0;
-                // For loader nodes that have a parent (aka non-root level loaders), these need their levels incremented by 1 for parity with their sibiling rows
-                // (Collection only increments the level if it is a "item" type node).
-                if (node.type === 'loader') clone.level = node.level + 1;
-                keyMap.set(clone.key, clone);
-            } else keyMap.set(node.key, node);
-            // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
-            let modifiedNode = keyMap.get(node.key) || node;
-            if (modifiedNode.level === 0 || modifiedNode.parentKey != null && expandedKeys.has(modifiedNode.parentKey) && parentLookup.get(modifiedNode.parentKey)) {
-                if (modifiedNode.type === 'item') itemCount++;
-                flattenedRows.push(modifiedNode);
-                parentLookup.set(modifiedNode.key, true);
-            }
-        } else if (node.type !== null) keyMap.set(node.key, node);
-        for (let child of collection.getChildren(node.key))visitNode(child);
-    };
-    for (let node of collection)visitNode(node);
-    return {
-        flattenedRows: flattenedRows,
-        keyMap: keyMap,
-        itemCount: itemCount
-    };
-}
 function $2f5eaf4a2a47b4cf$var$TreeDropIndicatorWrapper(props, ref) {
     var _dropState_collection_getItem;
     ref = (0, $kUtXx$useObjectRef)(ref);
@@ -765,7 +755,64 @@ function $2f5eaf4a2a47b4cf$var$RootDropIndicator() {
         ref: ref
     })));
 }
+const $2f5eaf4a2a47b4cf$export$1cd40fa16d4f033a = /*#__PURE__*/ (0, $kUtXx$createBranchComponent)((0, $kUtXx$SectionNode), (props, ref, item)=>{
+    let state = (0, $kUtXx$useContext)($2f5eaf4a2a47b4cf$export$8953bccafd7bce87);
+    let { CollectionBranch: CollectionBranch } = (0, $kUtXx$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
+    let headingRef = (0, $kUtXx$useRef)(null);
+    ref = (0, $kUtXx$useObjectRef)(ref);
+    var _props_arialabel;
+    let { rowHeaderProps: rowHeaderProps, rowProps: rowProps, rowGroupProps: rowGroupProps } = (0, $kUtXx$useGridListSection)({
+        'aria-label': (_props_arialabel = props['aria-label']) !== null && _props_arialabel !== void 0 ? _props_arialabel : undefined
+    }, state, ref);
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...props,
+        id: undefined,
+        children: undefined,
+        defaultClassName: 'react-aria-TreeSection',
+        values: undefined
+    });
+    let DOMProps = (0, $kUtXx$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).section, {
+        ...(0, $kUtXx$mergeProps)(DOMProps, renderProps, rowGroupProps),
+        ref: ref
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
+        values: [
+            [
+                (0, $72e60046c03fbe42$export$87f5843bfb30d205),
+                {
+                    ...rowProps,
+                    ref: headingRef
+                }
+            ],
+            [
+                (0, $72e60046c03fbe42$export$bc7e8a4031ec2a33),
+                {
+                    ...rowHeaderProps
+                }
+            ]
+        ]
+    }, /*#__PURE__*/ (0, $kUtXx$react).createElement(CollectionBranch, {
+        collection: state.collection,
+        parent: item
+    })));
+});
+const $2f5eaf4a2a47b4cf$export$2a73ea8963a8efd8 = (props)=>{
+    return /*#__PURE__*/ (0, $kUtXx$react).createElement((0, $72e60046c03fbe42$export$1b574dbdb0075ff6), {
+        className: "react-aria-TreeHeader",
+        ...props
+    }, props.children);
+};
+function $2f5eaf4a2a47b4cf$var$areSetsEqual(a, b) {
+    if (a.size !== b.size) return false;
+    for (let item of a){
+        if (!b.has(item)) return false;
+    }
+    return true;
+}
 
 
-export {$2f5eaf4a2a47b4cf$export$dfae7d399eea2568 as TreeContext, $2f5eaf4a2a47b4cf$export$8953bccafd7bce87 as TreeStateContext, $2f5eaf4a2a47b4cf$export$7fbedc92909ed28e as Tree, $2f5eaf4a2a47b4cf$export$4b687e3f663d618c as TreeItemContent, $2f5eaf4a2a47b4cf$export$36b5dda0d9bc8f78 as TreeItemContentContext, $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 as TreeItem, $2f5eaf4a2a47b4cf$export$533df5f8efd48cc9 as TreeLoadMoreItem};
+export {$2f5eaf4a2a47b4cf$export$dfae7d399eea2568 as TreeContext, $2f5eaf4a2a47b4cf$export$8953bccafd7bce87 as TreeStateContext, $2f5eaf4a2a47b4cf$export$7fbedc92909ed28e as Tree, $2f5eaf4a2a47b4cf$export$4b687e3f663d618c as TreeItemContent, $2f5eaf4a2a47b4cf$export$36b5dda0d9bc8f78 as TreeItemContentContext, $2f5eaf4a2a47b4cf$export$53d36ab85dc89436 as TreeItem, $2f5eaf4a2a47b4cf$export$533df5f8efd48cc9 as TreeLoadMoreItem, $2f5eaf4a2a47b4cf$export$1cd40fa16d4f033a as TreeSection, $2f5eaf4a2a47b4cf$export$2a73ea8963a8efd8 as TreeHeader};
 //# sourceMappingURL=Tree.module.js.map