react-aria-components 1.10.1 → 1.12.0

package/dist/GridList.mjs

@@ -3,12 +3,14 @@ import {CheckboxContext as $4e85f108e88277b8$export$b085522c77523c51} from "./RS
 import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5, DefaultCollectionRenderer as $7135fc7d473fd974$export$a164736487e3f0ae} from "./Collection.mjs";
 import {DEFAULT_SLOT as $64fa3d84918910a7$export$c62b8e45d58ddad9, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.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 {FieldInputContext as $8e6cc465cc68f603$export$698f465ec27e93df, SelectableCollectionContext as $8e6cc465cc68f603$export$b0d3ecf7112093a7} from "./context.mjs";
+import {HeaderContext as $72a5793c14baf454$export$e0e4026c12a8bdbb} from "./Header.mjs";
 import {ListStateContext as $eed445e0843c11d0$export$7c5906fe4f1f2af2} from "./ListBox.mjs";
 import {TextContext as $514c0188e459b4c0$export$9afb8bc826b033ea} from "./Text.mjs";
-import {useCollator as $jTmF7$useCollator, useLocale as $jTmF7$useLocale, ListKeyboardDelegate as $jTmF7$ListKeyboardDelegate, useGridList as $jTmF7$useGridList, useFocusRing as $jTmF7$useFocusRing, FocusScope as $jTmF7$FocusScope, mergeProps as $jTmF7$mergeProps, useGridListItem as $jTmF7$useGridListItem, useHover as $jTmF7$useHover, useGridListSelectionCheckbox as $jTmF7$useGridListSelectionCheckbox, useVisuallyHidden as $jTmF7$useVisuallyHidden} from "react-aria";
-import {CollectionBuilder as $jTmF7$CollectionBuilder, Collection as $jTmF7$Collection, createLeafComponent as $jTmF7$createLeafComponent} from "@react-aria/collections";
-import {useListState as $jTmF7$useListState} from "react-stately";
-import {filterDOMProps as $jTmF7$filterDOMProps, useObjectRef as $jTmF7$useObjectRef, UNSTABLE_useLoadMoreSentinel as $jTmF7$UNSTABLE_useLoadMoreSentinel, inertValue as $jTmF7$inertValue} from "@react-aria/utils";
+import {useCollator as $jTmF7$useCollator, useLocale as $jTmF7$useLocale, ListKeyboardDelegate as $jTmF7$ListKeyboardDelegate, useGridList as $jTmF7$useGridList, useFocusRing as $jTmF7$useFocusRing, FocusScope as $jTmF7$FocusScope, mergeProps as $jTmF7$mergeProps, useGridListItem as $jTmF7$useGridListItem, useHover as $jTmF7$useHover, useGridListSelectionCheckbox as $jTmF7$useGridListSelectionCheckbox, useVisuallyHidden as $jTmF7$useVisuallyHidden, useGridListSection as $jTmF7$useGridListSection} from "react-aria";
+import {CollectionBuilder as $jTmF7$CollectionBuilder, Collection as $jTmF7$Collection, createLeafComponent as $jTmF7$createLeafComponent, ItemNode as $jTmF7$ItemNode, LoaderNode as $jTmF7$LoaderNode, createBranchComponent as $jTmF7$createBranchComponent, SectionNode as $jTmF7$SectionNode, HeaderNode as $jTmF7$HeaderNode} from "@react-aria/collections";
+import {useListState as $jTmF7$useListState, UNSTABLE_useFilteredListState as $jTmF7$UNSTABLE_useFilteredListState} from "react-stately";
+import {filterDOMProps as $jTmF7$filterDOMProps, useObjectRef as $jTmF7$useObjectRef, useLoadMoreSentinel as $jTmF7$useLoadMoreSentinel, inertValue as $jTmF7$inertValue} from "@react-aria/utils";
 import $jTmF7$react, {createContext as $jTmF7$createContext, forwardRef as $jTmF7$forwardRef, useContext as $jTmF7$useContext, useMemo as $jTmF7$useMemo, useRef as $jTmF7$useRef, useEffect as $jTmF7$useEffect} from "react";
 
 /*
@@ -33,6 +35,8 @@ import $jTmF7$react, {createContext as $jTmF7$createContext, forwardRef as $jTmF
 
 
 
+
+
 const $72e60046c03fbe42$export$54fe942636b6416d = /*#__PURE__*/ (0, $jTmF7$createContext)(null);
 const $72e60046c03fbe42$export$a7bfbda1311ca015 = /*#__PURE__*/ (0, $jTmF7$forwardRef)(function GridList(props, ref) {
     // Render the portal first so that we have the collection by the time we render the DOM in SSR.
@@ -46,23 +50,30 @@ const $72e60046c03fbe42$export$a7bfbda1311ca015 = /*#__PURE__*/ (0, $jTmF7$forwa
         }));
 });
 function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collection, gridListRef: ref }) {
-    var _state_collection_getItem;
+    // TODO: for now, don't grab collection ref and collectionProps from the autocomplete, rely on the user tabbing to the gridlist
+    // figure out if we want to support virtual focus for grids when wrapped in an autocomplete
+    let contextProps;
+    [contextProps] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)({}, null, (0, $8e6cc465cc68f603$export$b0d3ecf7112093a7));
+    let { filter: filter, ...collectionProps } = contextProps;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let { shouldUseVirtualFocus: shouldUseVirtualFocus, disallowTypeAhead: disallowTypeAhead, ...DOMCollectionProps } = collectionProps || {};
     let { dragAndDropHooks: dragAndDropHooks, keyboardNavigationBehavior: keyboardNavigationBehavior = 'arrow', layout: layout = 'stack' } = props;
     let { CollectionRoot: CollectionRoot, isVirtualized: isVirtualized, layoutDelegate: layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate } = (0, $jTmF7$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
-    let state = (0, $jTmF7$useListState)({
+    let gridlistState = (0, $jTmF7$useListState)({
         ...props,
         collection: collection,
         children: undefined,
         layoutDelegate: layoutDelegate
     });
+    let filteredState = (0, $jTmF7$UNSTABLE_useFilteredListState)(gridlistState, filter);
     let collator = (0, $jTmF7$useCollator)({
         usage: 'search',
         sensitivity: 'base'
     });
-    let { disabledBehavior: disabledBehavior, disabledKeys: disabledKeys } = state.selectionManager;
+    let { disabledBehavior: disabledBehavior, disabledKeys: disabledKeys } = filteredState.selectionManager;
     let { direction: direction } = (0, $jTmF7$useLocale)();
     let keyboardDelegate = (0, $jTmF7$useMemo)(()=>new (0, $jTmF7$ListKeyboardDelegate)({
-            collection: collection,
+            collection: filteredState.collection,
             collator: collator,
             ref: ref,
             disabledKeys: disabledKeys,
@@ -71,7 +82,7 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
             layout: layout,
             direction: direction
         }), [
-        collection,
+        filteredState.collection,
         ref,
         layout,
         disabledKeys,
@@ -82,13 +93,14 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
     ]);
     let { gridProps: gridProps } = (0, $jTmF7$useGridList)({
         ...props,
+        ...DOMCollectionProps,
         keyboardDelegate: keyboardDelegate,
         // Only tab navigation is supported in grid layout.
         keyboardNavigationBehavior: layout === 'grid' ? 'tab' : keyboardNavigationBehavior,
         isVirtualized: isVirtualized,
         shouldSelectOnPressUp: props.shouldSelectOnPressUp
-    }, state, ref);
-    let selectionManager = state.selectionManager;
+    }, filteredState, ref);
+    let selectionManager = filteredState.selectionManager;
     let isListDraggable = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
     let isListDroppable = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDroppableCollectionState);
     let dragHooksProvided = (0, $jTmF7$useRef)(isListDraggable);
@@ -109,7 +121,7 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
     let preview = (0, $jTmF7$useRef)(null);
     if (isListDraggable && dragAndDropHooks) {
         dragState = dragAndDropHooks.useDraggableCollectionState({
-            collection: collection,
+            collection: filteredState.collection,
             selectionManager: selectionManager,
             preview: dragAndDropHooks.renderDragPreview ? preview : undefined
         });
@@ -121,11 +133,11 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
     }
     if (isListDroppable && dragAndDropHooks) {
         dropState = dragAndDropHooks.useDroppableCollectionState({
-            collection: collection,
+            collection: filteredState.collection,
             selectionManager: selectionManager
         });
         let keyboardDelegate = new (0, $jTmF7$ListKeyboardDelegate)({
-            collection: collection,
+            collection: filteredState.collection,
             disabledKeys: selectionManager.disabledKeys,
             disabledBehavior: selectionManager.disabledBehavior,
             ref: ref
@@ -143,15 +155,14 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
         });
     }
     let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $jTmF7$useFocusRing)();
-    // TODO: What do we think about this check? Ideally we could just query the collection and see if ALL node are loaders and thus have it return that it is empty
-    let isEmpty = state.collection.size === 0 || state.collection.size === 1 && ((_state_collection_getItem = state.collection.getItem(state.collection.getFirstKey())) === null || _state_collection_getItem === void 0 ? void 0 : _state_collection_getItem.type) === 'loader';
+    let isEmpty = filteredState.collection.size === 0;
     let renderValues = {
         isDropTarget: isRootDropTarget,
         isEmpty: isEmpty,
         isFocused: isFocused,
         isFocusVisible: isFocusVisible,
         layout: layout,
-        state: state
+        state: filteredState
     };
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         className: props.className,
@@ -176,10 +187,11 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
             }
         }, content));
     }
+    let DOMProps = (0, $jTmF7$filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, $jTmF7$react).createElement((0, $jTmF7$FocusScope), null, /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
-        ...(0, $jTmF7$filterDOMProps)(props),
-        ...renderProps,
-        ...(0, $jTmF7$mergeProps)(gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps, emptyStatePropOverrides),
+        ...(0, $jTmF7$mergeProps)(DOMProps, renderProps, gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps, emptyStatePropOverrides),
         ref: ref,
         slot: props.slot || undefined,
         onScroll: props.onScroll,
@@ -192,7 +204,7 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
         values: [
             [
                 (0, $eed445e0843c11d0$export$7c5906fe4f1f2af2),
-                state
+                filteredState
             ],
             [
                 (0, $612b8eb6cb90e02d$export$d188a835a7bc5783),
@@ -210,13 +222,13 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
             ]
         ]
     }, isListDroppable && /*#__PURE__*/ (0, $jTmF7$react).createElement($72e60046c03fbe42$var$RootDropIndicator, null), /*#__PURE__*/ (0, $jTmF7$react).createElement(CollectionRoot, {
-        collection: collection,
+        collection: filteredState.collection,
         scrollRef: ref,
         persistedKeys: (0, $612b8eb6cb90e02d$export$d1e8e3fbb7461f6)(selectionManager, dragAndDropHooks, dropState),
         renderDropIndicator: (0, $612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
     })), emptyState, dragPreview));
 }
-const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$createLeafComponent)('item', function GridListItem(props, forwardedRef, item) {
+const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$createLeafComponent)((0, $jTmF7$ItemNode), function GridListItem(props, forwardedRef, item) {
     let state = (0, $jTmF7$useContext)((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2));
     let { dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = (0, $jTmF7$useContext)((0, $612b8eb6cb90e02d$export$d188a835a7bc5783));
     let ref = (0, $jTmF7$useObjectRef)(forwardedRef);
@@ -281,6 +293,11 @@ const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$creat
     }, [
         item.textValue
     ]);
+    let DOMProps = (0, $jTmF7$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    delete DOMProps.onClick;
     return /*#__PURE__*/ (0, $jTmF7$react).createElement((0, $jTmF7$react).Fragment, null, dropIndicator && !dropIndicator.isHidden && /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
         role: "row",
         style: {
@@ -294,8 +311,7 @@ const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$creat
         ...dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.dropIndicatorProps,
         ref: dropIndicatorRef
     }))), /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
-        ...(0, $jTmF7$mergeProps)((0, $jTmF7$filterDOMProps)(props), rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
-        ...renderProps,
+        ...(0, $jTmF7$mergeProps)(DOMProps, renderProps, rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
         ref: ref,
         "data-selected": states.isSelected || undefined,
         "data-disabled": states.isDisabled || undefined,
@@ -354,6 +370,14 @@ const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$creat
             [
                 (0, $eed445e0843c11d0$export$7c5906fe4f1f2af2),
                 null
+            ],
+            [
+                (0, $8e6cc465cc68f603$export$b0d3ecf7112093a7),
+                null
+            ],
+            [
+                (0, $8e6cc465cc68f603$export$698f465ec27e93df),
+                null
             ]
         ]
     }, renderProps.children))));
@@ -425,7 +449,7 @@ function $72e60046c03fbe42$var$RootDropIndicator() {
         ref: ref
     })));
 }
-const $72e60046c03fbe42$export$74653c2d94c32cc3 = (0, $jTmF7$createLeafComponent)('loader', function GridListLoadingIndicator(props, ref, item) {
+const $72e60046c03fbe42$export$392b9a0bbc7c7e43 = (0, $jTmF7$createLeafComponent)((0, $jTmF7$LoaderNode), function GridListLoadingIndicator(props, ref, item) {
     let state = (0, $jTmF7$useContext)((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2));
     let { isVirtualized: isVirtualized } = (0, $jTmF7$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     let { isLoading: isLoading, onLoadMore: onLoadMore, scrollOffset: scrollOffset, ...otherProps } = props;
@@ -440,7 +464,7 @@ const $72e60046c03fbe42$export$74653c2d94c32cc3 = (0, $jTmF7$createLeafComponent
         scrollOffset,
         state === null || state === void 0 ? void 0 : state.collection
     ]);
-    (0, $jTmF7$UNSTABLE_useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
+    (0, $jTmF7$useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...otherProps,
         id: undefined,
@@ -448,6 +472,9 @@ const $72e60046c03fbe42$export$74653c2d94c32cc3 = (0, $jTmF7$createLeafComponent
         defaultClassName: 'react-aria-GridListLoadingIndicator',
         values: null
     });
+    // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
+    // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+    // item count
     return /*#__PURE__*/ (0, $jTmF7$react).createElement((0, $jTmF7$react).Fragment, null, /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
         style: {
             position: 'relative',
@@ -465,16 +492,75 @@ const $72e60046c03fbe42$export$74653c2d94c32cc3 = (0, $jTmF7$createLeafComponent
         }
     })), isLoading && renderProps.children && /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
         ...renderProps,
-        ...(0, $jTmF7$mergeProps)((0, $jTmF7$filterDOMProps)(props)),
+        ...(0, $jTmF7$filterDOMProps)(props, {
+            global: true
+        }),
         role: "row",
-        "aria-rowindex": isVirtualized ? item.index + 1 : undefined,
         ref: ref
     }, /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
         "aria-colindex": isVirtualized ? 1 : undefined,
         role: "gridcell"
     }, renderProps.children)));
 });
+const $72e60046c03fbe42$export$f696877219115b14 = /*#__PURE__*/ (0, $jTmF7$createBranchComponent)((0, $jTmF7$SectionNode), (props, ref, item)=>{
+    let state = (0, $jTmF7$useContext)((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2));
+    let { CollectionBranch: CollectionBranch } = (0, $jTmF7$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
+    let headingRef = (0, $jTmF7$useRef)(null);
+    ref = (0, $jTmF7$useObjectRef)(ref);
+    var _props_arialabel;
+    let { rowHeaderProps: rowHeaderProps, rowProps: rowProps, rowGroupProps: rowGroupProps } = (0, $jTmF7$useGridListSection)({
+        'aria-label': (_props_arialabel = props['aria-label']) !== null && _props_arialabel !== void 0 ? _props_arialabel : undefined
+    }, state, ref);
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        defaultClassName: 'react-aria-GridListSection',
+        className: props.className,
+        style: props.style,
+        values: {}
+    });
+    let DOMProps = (0, $jTmF7$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    return /*#__PURE__*/ (0, $jTmF7$react).createElement("section", {
+        ...(0, $jTmF7$mergeProps)(DOMProps, renderProps, rowGroupProps),
+        ref: ref
+    }, /*#__PURE__*/ (0, $jTmF7$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
+        values: [
+            [
+                (0, $72a5793c14baf454$export$e0e4026c12a8bdbb),
+                {
+                    ...rowProps,
+                    ref: headingRef
+                }
+            ],
+            [
+                $72e60046c03fbe42$var$GridListHeaderContext,
+                {
+                    ...rowHeaderProps
+                }
+            ]
+        ]
+    }, /*#__PURE__*/ (0, $jTmF7$react).createElement(CollectionBranch, {
+        collection: state.collection,
+        parent: item
+    })));
+});
+const $72e60046c03fbe42$var$GridListHeaderContext = /*#__PURE__*/ (0, $jTmF7$createContext)(null);
+const $72e60046c03fbe42$export$1b574dbdb0075ff6 = /*#__PURE__*/ (0, $jTmF7$createLeafComponent)((0, $jTmF7$HeaderNode), function Header(props, ref) {
+    [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, (0, $72a5793c14baf454$export$e0e4026c12a8bdbb));
+    let rowHeaderProps = (0, $jTmF7$useContext)($72e60046c03fbe42$var$GridListHeaderContext);
+    return /*#__PURE__*/ (0, $jTmF7$react).createElement("header", {
+        className: "react-aria-GridListHeader",
+        ref: ref,
+        ...props
+    }, /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
+        ...rowHeaderProps,
+        style: {
+            display: 'contents'
+        }
+    }, props.children));
+});
 
 
-export {$72e60046c03fbe42$export$54fe942636b6416d as GridListContext, $72e60046c03fbe42$export$a7bfbda1311ca015 as GridList, $72e60046c03fbe42$export$e96fc9a8407faa6b as GridListItem, $72e60046c03fbe42$export$74653c2d94c32cc3 as UNSTABLE_GridListLoadingSentinel};
+export {$72e60046c03fbe42$export$54fe942636b6416d as GridListContext, $72e60046c03fbe42$export$a7bfbda1311ca015 as GridList, $72e60046c03fbe42$export$e96fc9a8407faa6b as GridListItem, $72e60046c03fbe42$export$392b9a0bbc7c7e43 as GridListLoadMoreItem, $72e60046c03fbe42$export$f696877219115b14 as GridListSection, $72e60046c03fbe42$export$1b574dbdb0075ff6 as GridListHeader};
 //# sourceMappingURL=GridList.module.js.map

package/dist/GridList.module.js

@@ -3,12 +3,14 @@ import {CheckboxContext as $4e85f108e88277b8$export$b085522c77523c51} from "./RS
 import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5, DefaultCollectionRenderer as $7135fc7d473fd974$export$a164736487e3f0ae} from "./Collection.module.js";
 import {DEFAULT_SLOT as $64fa3d84918910a7$export$c62b8e45d58ddad9, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
 import {DragAndDropContext as $612b8eb6cb90e02d$export$d188a835a7bc5783, DropIndicatorContext as $612b8eb6cb90e02d$export$f55761759794cf55, useDndPersistedKeys as $612b8eb6cb90e02d$export$d1e8e3fbb7461f6, useRenderDropIndicator as $612b8eb6cb90e02d$export$971707d8a129a1f7} from "./DragAndDrop.module.js";
+import {FieldInputContext as $8e6cc465cc68f603$export$698f465ec27e93df, SelectableCollectionContext as $8e6cc465cc68f603$export$b0d3ecf7112093a7} from "./context.module.js";
+import {HeaderContext as $72a5793c14baf454$export$e0e4026c12a8bdbb} from "./Header.module.js";
 import {ListStateContext as $eed445e0843c11d0$export$7c5906fe4f1f2af2} from "./ListBox.module.js";
 import {TextContext as $514c0188e459b4c0$export$9afb8bc826b033ea} from "./Text.module.js";
-import {useCollator as $jTmF7$useCollator, useLocale as $jTmF7$useLocale, ListKeyboardDelegate as $jTmF7$ListKeyboardDelegate, useGridList as $jTmF7$useGridList, useFocusRing as $jTmF7$useFocusRing, FocusScope as $jTmF7$FocusScope, mergeProps as $jTmF7$mergeProps, useGridListItem as $jTmF7$useGridListItem, useHover as $jTmF7$useHover, useGridListSelectionCheckbox as $jTmF7$useGridListSelectionCheckbox, useVisuallyHidden as $jTmF7$useVisuallyHidden} from "react-aria";
-import {CollectionBuilder as $jTmF7$CollectionBuilder, Collection as $jTmF7$Collection, createLeafComponent as $jTmF7$createLeafComponent} from "@react-aria/collections";
-import {useListState as $jTmF7$useListState} from "react-stately";
-import {filterDOMProps as $jTmF7$filterDOMProps, useObjectRef as $jTmF7$useObjectRef, UNSTABLE_useLoadMoreSentinel as $jTmF7$UNSTABLE_useLoadMoreSentinel, inertValue as $jTmF7$inertValue} from "@react-aria/utils";
+import {useCollator as $jTmF7$useCollator, useLocale as $jTmF7$useLocale, ListKeyboardDelegate as $jTmF7$ListKeyboardDelegate, useGridList as $jTmF7$useGridList, useFocusRing as $jTmF7$useFocusRing, FocusScope as $jTmF7$FocusScope, mergeProps as $jTmF7$mergeProps, useGridListItem as $jTmF7$useGridListItem, useHover as $jTmF7$useHover, useGridListSelectionCheckbox as $jTmF7$useGridListSelectionCheckbox, useVisuallyHidden as $jTmF7$useVisuallyHidden, useGridListSection as $jTmF7$useGridListSection} from "react-aria";
+import {CollectionBuilder as $jTmF7$CollectionBuilder, Collection as $jTmF7$Collection, createLeafComponent as $jTmF7$createLeafComponent, ItemNode as $jTmF7$ItemNode, LoaderNode as $jTmF7$LoaderNode, createBranchComponent as $jTmF7$createBranchComponent, SectionNode as $jTmF7$SectionNode, HeaderNode as $jTmF7$HeaderNode} from "@react-aria/collections";
+import {useListState as $jTmF7$useListState, UNSTABLE_useFilteredListState as $jTmF7$UNSTABLE_useFilteredListState} from "react-stately";
+import {filterDOMProps as $jTmF7$filterDOMProps, useObjectRef as $jTmF7$useObjectRef, useLoadMoreSentinel as $jTmF7$useLoadMoreSentinel, inertValue as $jTmF7$inertValue} from "@react-aria/utils";
 import $jTmF7$react, {createContext as $jTmF7$createContext, forwardRef as $jTmF7$forwardRef, useContext as $jTmF7$useContext, useMemo as $jTmF7$useMemo, useRef as $jTmF7$useRef, useEffect as $jTmF7$useEffect} from "react";
 
 /*
@@ -33,6 +35,8 @@ import $jTmF7$react, {createContext as $jTmF7$createContext, forwardRef as $jTmF
 
 
 
+
+
 const $72e60046c03fbe42$export$54fe942636b6416d = /*#__PURE__*/ (0, $jTmF7$createContext)(null);
 const $72e60046c03fbe42$export$a7bfbda1311ca015 = /*#__PURE__*/ (0, $jTmF7$forwardRef)(function GridList(props, ref) {
     // Render the portal first so that we have the collection by the time we render the DOM in SSR.
@@ -46,23 +50,30 @@ const $72e60046c03fbe42$export$a7bfbda1311ca015 = /*#__PURE__*/ (0, $jTmF7$forwa
         }));
 });
 function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collection, gridListRef: ref }) {
-    var _state_collection_getItem;
+    // TODO: for now, don't grab collection ref and collectionProps from the autocomplete, rely on the user tabbing to the gridlist
+    // figure out if we want to support virtual focus for grids when wrapped in an autocomplete
+    let contextProps;
+    [contextProps] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)({}, null, (0, $8e6cc465cc68f603$export$b0d3ecf7112093a7));
+    let { filter: filter, ...collectionProps } = contextProps;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let { shouldUseVirtualFocus: shouldUseVirtualFocus, disallowTypeAhead: disallowTypeAhead, ...DOMCollectionProps } = collectionProps || {};
     let { dragAndDropHooks: dragAndDropHooks, keyboardNavigationBehavior: keyboardNavigationBehavior = 'arrow', layout: layout = 'stack' } = props;
     let { CollectionRoot: CollectionRoot, isVirtualized: isVirtualized, layoutDelegate: layoutDelegate, dropTargetDelegate: ctxDropTargetDelegate } = (0, $jTmF7$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
-    let state = (0, $jTmF7$useListState)({
+    let gridlistState = (0, $jTmF7$useListState)({
         ...props,
         collection: collection,
         children: undefined,
         layoutDelegate: layoutDelegate
     });
+    let filteredState = (0, $jTmF7$UNSTABLE_useFilteredListState)(gridlistState, filter);
     let collator = (0, $jTmF7$useCollator)({
         usage: 'search',
         sensitivity: 'base'
     });
-    let { disabledBehavior: disabledBehavior, disabledKeys: disabledKeys } = state.selectionManager;
+    let { disabledBehavior: disabledBehavior, disabledKeys: disabledKeys } = filteredState.selectionManager;
     let { direction: direction } = (0, $jTmF7$useLocale)();
     let keyboardDelegate = (0, $jTmF7$useMemo)(()=>new (0, $jTmF7$ListKeyboardDelegate)({
-            collection: collection,
+            collection: filteredState.collection,
             collator: collator,
             ref: ref,
             disabledKeys: disabledKeys,
@@ -71,7 +82,7 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
             layout: layout,
             direction: direction
         }), [
-        collection,
+        filteredState.collection,
         ref,
         layout,
         disabledKeys,
@@ -82,13 +93,14 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
     ]);
     let { gridProps: gridProps } = (0, $jTmF7$useGridList)({
         ...props,
+        ...DOMCollectionProps,
         keyboardDelegate: keyboardDelegate,
         // Only tab navigation is supported in grid layout.
         keyboardNavigationBehavior: layout === 'grid' ? 'tab' : keyboardNavigationBehavior,
         isVirtualized: isVirtualized,
         shouldSelectOnPressUp: props.shouldSelectOnPressUp
-    }, state, ref);
-    let selectionManager = state.selectionManager;
+    }, filteredState, ref);
+    let selectionManager = filteredState.selectionManager;
     let isListDraggable = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDraggableCollectionState);
     let isListDroppable = !!(dragAndDropHooks === null || dragAndDropHooks === void 0 ? void 0 : dragAndDropHooks.useDroppableCollectionState);
     let dragHooksProvided = (0, $jTmF7$useRef)(isListDraggable);
@@ -109,7 +121,7 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
     let preview = (0, $jTmF7$useRef)(null);
     if (isListDraggable && dragAndDropHooks) {
         dragState = dragAndDropHooks.useDraggableCollectionState({
-            collection: collection,
+            collection: filteredState.collection,
             selectionManager: selectionManager,
             preview: dragAndDropHooks.renderDragPreview ? preview : undefined
         });
@@ -121,11 +133,11 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
     }
     if (isListDroppable && dragAndDropHooks) {
         dropState = dragAndDropHooks.useDroppableCollectionState({
-            collection: collection,
+            collection: filteredState.collection,
             selectionManager: selectionManager
         });
         let keyboardDelegate = new (0, $jTmF7$ListKeyboardDelegate)({
-            collection: collection,
+            collection: filteredState.collection,
             disabledKeys: selectionManager.disabledKeys,
             disabledBehavior: selectionManager.disabledBehavior,
             ref: ref
@@ -143,15 +155,14 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
         });
     }
     let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $jTmF7$useFocusRing)();
-    // TODO: What do we think about this check? Ideally we could just query the collection and see if ALL node are loaders and thus have it return that it is empty
-    let isEmpty = state.collection.size === 0 || state.collection.size === 1 && ((_state_collection_getItem = state.collection.getItem(state.collection.getFirstKey())) === null || _state_collection_getItem === void 0 ? void 0 : _state_collection_getItem.type) === 'loader';
+    let isEmpty = filteredState.collection.size === 0;
     let renderValues = {
         isDropTarget: isRootDropTarget,
         isEmpty: isEmpty,
         isFocused: isFocused,
         isFocusVisible: isFocusVisible,
         layout: layout,
-        state: state
+        state: filteredState
     };
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         className: props.className,
@@ -176,10 +187,11 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
             }
         }, content));
     }
+    let DOMProps = (0, $jTmF7$filterDOMProps)(props, {
+        global: true
+    });
     return /*#__PURE__*/ (0, $jTmF7$react).createElement((0, $jTmF7$FocusScope), null, /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
-        ...(0, $jTmF7$filterDOMProps)(props),
-        ...renderProps,
-        ...(0, $jTmF7$mergeProps)(gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps, emptyStatePropOverrides),
+        ...(0, $jTmF7$mergeProps)(DOMProps, renderProps, gridProps, focusProps, droppableCollection === null || droppableCollection === void 0 ? void 0 : droppableCollection.collectionProps, emptyStatePropOverrides),
         ref: ref,
         slot: props.slot || undefined,
         onScroll: props.onScroll,
@@ -192,7 +204,7 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
         values: [
             [
                 (0, $eed445e0843c11d0$export$7c5906fe4f1f2af2),
-                state
+                filteredState
             ],
             [
                 (0, $612b8eb6cb90e02d$export$d188a835a7bc5783),
@@ -210,13 +222,13 @@ function $72e60046c03fbe42$var$GridListInner({ props: props, collection: collect
             ]
         ]
     }, isListDroppable && /*#__PURE__*/ (0, $jTmF7$react).createElement($72e60046c03fbe42$var$RootDropIndicator, null), /*#__PURE__*/ (0, $jTmF7$react).createElement(CollectionRoot, {
-        collection: collection,
+        collection: filteredState.collection,
         scrollRef: ref,
         persistedKeys: (0, $612b8eb6cb90e02d$export$d1e8e3fbb7461f6)(selectionManager, dragAndDropHooks, dropState),
         renderDropIndicator: (0, $612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
     })), emptyState, dragPreview));
 }
-const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$createLeafComponent)('item', function GridListItem(props, forwardedRef, item) {
+const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$createLeafComponent)((0, $jTmF7$ItemNode), function GridListItem(props, forwardedRef, item) {
     let state = (0, $jTmF7$useContext)((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2));
     let { dragAndDropHooks: dragAndDropHooks, dragState: dragState, dropState: dropState } = (0, $jTmF7$useContext)((0, $612b8eb6cb90e02d$export$d188a835a7bc5783));
     let ref = (0, $jTmF7$useObjectRef)(forwardedRef);
@@ -281,6 +293,11 @@ const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$creat
     }, [
         item.textValue
     ]);
+    let DOMProps = (0, $jTmF7$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    delete DOMProps.onClick;
     return /*#__PURE__*/ (0, $jTmF7$react).createElement((0, $jTmF7$react).Fragment, null, dropIndicator && !dropIndicator.isHidden && /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
         role: "row",
         style: {
@@ -294,8 +311,7 @@ const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$creat
         ...dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.dropIndicatorProps,
         ref: dropIndicatorRef
     }))), /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
-        ...(0, $jTmF7$mergeProps)((0, $jTmF7$filterDOMProps)(props), rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
-        ...renderProps,
+        ...(0, $jTmF7$mergeProps)(DOMProps, renderProps, rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
         ref: ref,
         "data-selected": states.isSelected || undefined,
         "data-disabled": states.isDisabled || undefined,
@@ -354,6 +370,14 @@ const $72e60046c03fbe42$export$e96fc9a8407faa6b = /*#__PURE__*/ (0, $jTmF7$creat
             [
                 (0, $eed445e0843c11d0$export$7c5906fe4f1f2af2),
                 null
+            ],
+            [
+                (0, $8e6cc465cc68f603$export$b0d3ecf7112093a7),
+                null
+            ],
+            [
+                (0, $8e6cc465cc68f603$export$698f465ec27e93df),
+                null
             ]
         ]
     }, renderProps.children))));
@@ -425,7 +449,7 @@ function $72e60046c03fbe42$var$RootDropIndicator() {
         ref: ref
     })));
 }
-const $72e60046c03fbe42$export$74653c2d94c32cc3 = (0, $jTmF7$createLeafComponent)('loader', function GridListLoadingIndicator(props, ref, item) {
+const $72e60046c03fbe42$export$392b9a0bbc7c7e43 = (0, $jTmF7$createLeafComponent)((0, $jTmF7$LoaderNode), function GridListLoadingIndicator(props, ref, item) {
     let state = (0, $jTmF7$useContext)((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2));
     let { isVirtualized: isVirtualized } = (0, $jTmF7$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     let { isLoading: isLoading, onLoadMore: onLoadMore, scrollOffset: scrollOffset, ...otherProps } = props;
@@ -440,7 +464,7 @@ const $72e60046c03fbe42$export$74653c2d94c32cc3 = (0, $jTmF7$createLeafComponent
         scrollOffset,
         state === null || state === void 0 ? void 0 : state.collection
     ]);
-    (0, $jTmF7$UNSTABLE_useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
+    (0, $jTmF7$useLoadMoreSentinel)(memoedLoadMoreProps, sentinelRef);
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...otherProps,
         id: undefined,
@@ -448,6 +472,9 @@ const $72e60046c03fbe42$export$74653c2d94c32cc3 = (0, $jTmF7$createLeafComponent
         defaultClassName: 'react-aria-GridListLoadingIndicator',
         values: null
     });
+    // For now don't include aria-posinset and aria-setsize on loader since they aren't keyboard focusable
+    // Arguably shouldn't include them ever since it might be confusing to the user to include the loaders as part of the
+    // item count
     return /*#__PURE__*/ (0, $jTmF7$react).createElement((0, $jTmF7$react).Fragment, null, /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
         style: {
             position: 'relative',
@@ -465,16 +492,75 @@ const $72e60046c03fbe42$export$74653c2d94c32cc3 = (0, $jTmF7$createLeafComponent
         }
     })), isLoading && renderProps.children && /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
         ...renderProps,
-        ...(0, $jTmF7$mergeProps)((0, $jTmF7$filterDOMProps)(props)),
+        ...(0, $jTmF7$filterDOMProps)(props, {
+            global: true
+        }),
         role: "row",
-        "aria-rowindex": isVirtualized ? item.index + 1 : undefined,
         ref: ref
     }, /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
         "aria-colindex": isVirtualized ? 1 : undefined,
         role: "gridcell"
     }, renderProps.children)));
 });
+const $72e60046c03fbe42$export$f696877219115b14 = /*#__PURE__*/ (0, $jTmF7$createBranchComponent)((0, $jTmF7$SectionNode), (props, ref, item)=>{
+    let state = (0, $jTmF7$useContext)((0, $eed445e0843c11d0$export$7c5906fe4f1f2af2));
+    let { CollectionBranch: CollectionBranch } = (0, $jTmF7$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
+    let headingRef = (0, $jTmF7$useRef)(null);
+    ref = (0, $jTmF7$useObjectRef)(ref);
+    var _props_arialabel;
+    let { rowHeaderProps: rowHeaderProps, rowProps: rowProps, rowGroupProps: rowGroupProps } = (0, $jTmF7$useGridListSection)({
+        'aria-label': (_props_arialabel = props['aria-label']) !== null && _props_arialabel !== void 0 ? _props_arialabel : undefined
+    }, state, ref);
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        defaultClassName: 'react-aria-GridListSection',
+        className: props.className,
+        style: props.style,
+        values: {}
+    });
+    let DOMProps = (0, $jTmF7$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    return /*#__PURE__*/ (0, $jTmF7$react).createElement("section", {
+        ...(0, $jTmF7$mergeProps)(DOMProps, renderProps, rowGroupProps),
+        ref: ref
+    }, /*#__PURE__*/ (0, $jTmF7$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
+        values: [
+            [
+                (0, $72a5793c14baf454$export$e0e4026c12a8bdbb),
+                {
+                    ...rowProps,
+                    ref: headingRef
+                }
+            ],
+            [
+                $72e60046c03fbe42$var$GridListHeaderContext,
+                {
+                    ...rowHeaderProps
+                }
+            ]
+        ]
+    }, /*#__PURE__*/ (0, $jTmF7$react).createElement(CollectionBranch, {
+        collection: state.collection,
+        parent: item
+    })));
+});
+const $72e60046c03fbe42$var$GridListHeaderContext = /*#__PURE__*/ (0, $jTmF7$createContext)(null);
+const $72e60046c03fbe42$export$1b574dbdb0075ff6 = /*#__PURE__*/ (0, $jTmF7$createLeafComponent)((0, $jTmF7$HeaderNode), function Header(props, ref) {
+    [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, (0, $72a5793c14baf454$export$e0e4026c12a8bdbb));
+    let rowHeaderProps = (0, $jTmF7$useContext)($72e60046c03fbe42$var$GridListHeaderContext);
+    return /*#__PURE__*/ (0, $jTmF7$react).createElement("header", {
+        className: "react-aria-GridListHeader",
+        ref: ref,
+        ...props
+    }, /*#__PURE__*/ (0, $jTmF7$react).createElement("div", {
+        ...rowHeaderProps,
+        style: {
+            display: 'contents'
+        }
+    }, props.children));
+});
 
 
-export {$72e60046c03fbe42$export$54fe942636b6416d as GridListContext, $72e60046c03fbe42$export$a7bfbda1311ca015 as GridList, $72e60046c03fbe42$export$e96fc9a8407faa6b as GridListItem, $72e60046c03fbe42$export$74653c2d94c32cc3 as UNSTABLE_GridListLoadingSentinel};
+export {$72e60046c03fbe42$export$54fe942636b6416d as GridListContext, $72e60046c03fbe42$export$a7bfbda1311ca015 as GridList, $72e60046c03fbe42$export$e96fc9a8407faa6b as GridListItem, $72e60046c03fbe42$export$392b9a0bbc7c7e43 as GridListLoadMoreItem, $72e60046c03fbe42$export$f696877219115b14 as GridListSection, $72e60046c03fbe42$export$1b574dbdb0075ff6 as GridListHeader};
 //# sourceMappingURL=GridList.module.js.map