npm - @bento/listbox - Versions diffs - 0.1.3 → 0.2.0 - Mend

@bento/listbox 0.1.3 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md CHANGED Viewed

@@ -120,7 +120,7 @@ export function DynamicCollectionExample({ items, ...args }: any) {
 In this pattern, `children` is called for each item in the `items` array, receiving the individual item data to render `ListBoxItem` components.
-### When no `items` prop is provided
+### When no `items` prop is provided
 When you don't provide an `items` prop but use `children` as a function, it follows **Bento's render prop pattern** and receives an object with render props:
 ```tsx
@@ -173,42 +173,50 @@ The ListBox components provide extensive customization options through data attr
 ### Styling with Data Attributes
-All ListBox components expose their internal state through `data-` attributes, enabling CSS-based styling without JavaScript. This follows Bento's design philosophy of returning styling control to CSS.
+All ListBox components expose their internal state through data attributes,
+enabling CSS-based styling without JavaScript. This follows Bento's design
+philosophy of returning styling control to CSS.
 #### ListBox Container Attributes
 The main `ListBox` component exposes these data attributes:
-- `[data-empty]` - Applied when the listbox contains no items
-- `[data-focused]` - Applied when the listbox is focused
-- `[data-focus-visible]` - Applied when the listbox has keyboard focus
-- `[data-layout="stack"]` - The layout type (currently only "stack" supported)
-- `[data-orientation="vertical|horizontal"]` - The primary orientation
-- `[data-selection-mode="none|single|multiple"]` - The selection mode
-- `[data-selection-behavior="toggle|replace"]` - How selection behaves
-- `[data-allows-tab-navigation]` - Whether tab navigation is enabled
-- `[data-focus-wrap]` - Whether focus wraps around the collection
+| Attribute                    | Description                                       | Example Values                |
+| ---------------------------- | ------------------------------------------------- | ----------------------------- |
+| `data-empty`                 | Applied when the listbox contains no items        | "true"                        |
+| `data-focused`               | Applied when the listbox is focused               | "true"                        |
+| `data-focus-visible`         | Applied when the listbox has keyboard focus       | "true"                        |
+| `data-layout`                | The layout type                                   | "stack"                       |
+| `data-orientation`           | The primary orientation                           | "vertical" / "horizontal"     |
+| `data-selection-mode`        | The selection mode                                | "none" / "single" / "multiple"|
+| `data-selection-behavior`    | How selection behaves                             | "toggle" / "replace"          |
+| `data-allows-tab-navigation` | Whether tab navigation is enabled                 | "true"                        |
+| `data-focus-wrap`            | Whether focus wraps around the collection         | "true"                        |
 #### ListBoxItem Attributes
 Individual `ListBoxItem` components expose these data attributes:
-- `[data-selected]` - Applied when the item is selected
-- `[data-disabled]` - Applied when the item is disabled
-- `[data-hovered]` - Applied when the item is being hovered
-- `[data-focused]` - Applied when the item is focused
-- `[data-focus-visible]` - Applied when the item has keyboard focus
-- `[data-pressed]` - Applied when the item is being pressed
-- `[data-level]` - The nesting level (useful for indentation)
-- `[data-selection-mode]` - Inherited selection mode
-- `[data-selection-behavior]` - Inherited selection behavior
-- `[data-text-value]` - The computed text value for the item
+| Attribute                | Description                                | Example Values                |
+| ------------------------ | ------------------------------------------ | ----------------------------- |
+| `data-selected`          | Applied when the item is selected          | "true"                        |
+| `data-disabled`          | Applied when the item is disabled          | "true"                        |
+| `data-hovered`           | Applied when the item is being hovered     | "true"                        |
+| `data-focused`           | Applied when the item is focused           | "true"                        |
+| `data-focus-visible`     | Applied when the item has keyboard focus   | "true"                        |
+| `data-pressed`           | Applied when the item is being pressed     | "true"                        |
+| `data-level`             | The nesting level (useful for indentation) | "0" / "1" / "2"               |
+| `data-selection-mode`    | Inherited selection mode                   | "none" / "single" / "multiple"|
+| `data-selection-behavior`| Inherited selection behavior               | "toggle" / "replace"          |
+| `data-text-value`        | The computed text value for the item       | "Item text"                   |
 #### ListBoxSection Attributes
 The `ListBoxSection` component exposes:
-- `[data-level]` - The nesting level of the section
+| Attribute    | Description                      | Example Values  |
+| ------------ | -------------------------------- | --------------- |
+| `data-level` | The nesting level of the section | "0" / "1" / "2" |
 #### CSS Styling Examples
@@ -389,12 +397,12 @@ const slots = {
   'my-listbox.fruits.header': ({ original, props }) => (
     <Header {...props}>🍎 {original}</Header>
   ),
   // Override a specific item in a specific section
   'my-listbox.fruits.apple': ({ original }) => (
     <div className="special-item">⭐ {original}</div>
   ),
   // Override an entire section
   'my-listbox.vegetables': ({ original }) => (
     <div className="veggie-section">{original}</div>
@@ -473,7 +481,7 @@ Customize the appearance when no items are present:
 All components support standard ARIA attributes for enhanced accessibility:
 ```tsx
-<ListBox
+<ListBox
   aria-label="Food menu"
   aria-describedby="menu-description"
 >
@@ -496,7 +504,7 @@ const StyledListBox = styled.div`
   &[data-focused] {
     box-shadow: 0 0 0 2px blue;
   }
   [role="option"][data-selected] {
     background: ${props => props.theme.primary};
   }

package/README.mdx CHANGED Viewed

@@ -57,7 +57,7 @@ When you provide an `items` prop, the `children` function receives **individual
 In this pattern, `children` is called for each item in the `items` array, receiving the individual item data to render `ListBoxItem` components.
-### When no `items` prop is provided
+### When no `items` prop is provided
 When you don't provide an `items` prop but use `children` as a function, it follows **Bento's render prop pattern** and receives an object with render props:
 ```tsx
@@ -86,42 +86,50 @@ The ListBox components provide extensive customization options through data attr
 ### Styling with Data Attributes
-All ListBox components expose their internal state through `data-` attributes, enabling CSS-based styling without JavaScript. This follows Bento's design philosophy of returning styling control to CSS.
+All ListBox components expose their internal state through data attributes,
+enabling CSS-based styling without JavaScript. This follows Bento's design
+philosophy of returning styling control to CSS.
 #### ListBox Container Attributes
 The main `ListBox` component exposes these data attributes:
-- `[data-empty]` - Applied when the listbox contains no items
-- `[data-focused]` - Applied when the listbox is focused
-- `[data-focus-visible]` - Applied when the listbox has keyboard focus
-- `[data-layout="stack"]` - The layout type (currently only "stack" supported)
-- `[data-orientation="vertical|horizontal"]` - The primary orientation
-- `[data-selection-mode="none|single|multiple"]` - The selection mode
-- `[data-selection-behavior="toggle|replace"]` - How selection behaves
-- `[data-allows-tab-navigation]` - Whether tab navigation is enabled
-- `[data-focus-wrap]` - Whether focus wraps around the collection
+| Attribute                    | Description                                       | Example Values                |
+| ---------------------------- | ------------------------------------------------- | ----------------------------- |
+| `data-empty`                 | Applied when the listbox contains no items        | "true"                        |
+| `data-focused`               | Applied when the listbox is focused               | "true"                        |
+| `data-focus-visible`         | Applied when the listbox has keyboard focus       | "true"                        |
+| `data-layout`                | The layout type                                   | "stack"                       |
+| `data-orientation`           | The primary orientation                           | "vertical" / "horizontal"     |
+| `data-selection-mode`        | The selection mode                                | "none" / "single" / "multiple"|
+| `data-selection-behavior`    | How selection behaves                             | "toggle" / "replace"          |
+| `data-allows-tab-navigation` | Whether tab navigation is enabled                 | "true"                        |
+| `data-focus-wrap`            | Whether focus wraps around the collection         | "true"                        |
 #### ListBoxItem Attributes
 Individual `ListBoxItem` components expose these data attributes:
-- `[data-selected]` - Applied when the item is selected
-- `[data-disabled]` - Applied when the item is disabled
-- `[data-hovered]` - Applied when the item is being hovered
-- `[data-focused]` - Applied when the item is focused
-- `[data-focus-visible]` - Applied when the item has keyboard focus
-- `[data-pressed]` - Applied when the item is being pressed
-- `[data-level]` - The nesting level (useful for indentation)
-- `[data-selection-mode]` - Inherited selection mode
-- `[data-selection-behavior]` - Inherited selection behavior
-- `[data-text-value]` - The computed text value for the item
+| Attribute                | Description                                | Example Values                |
+| ------------------------ | ------------------------------------------ | ----------------------------- |
+| `data-selected`          | Applied when the item is selected          | "true"                        |
+| `data-disabled`          | Applied when the item is disabled          | "true"                        |
+| `data-hovered`           | Applied when the item is being hovered     | "true"                        |
+| `data-focused`           | Applied when the item is focused           | "true"                        |
+| `data-focus-visible`     | Applied when the item has keyboard focus   | "true"                        |
+| `data-pressed`           | Applied when the item is being pressed     | "true"                        |
+| `data-level`             | The nesting level (useful for indentation) | "0" / "1" / "2"               |
+| `data-selection-mode`    | Inherited selection mode                   | "none" / "single" / "multiple"|
+| `data-selection-behavior`| Inherited selection behavior               | "toggle" / "replace"          |
+| `data-text-value`        | The computed text value for the item       | "Item text"                   |
 #### ListBoxSection Attributes
 The `ListBoxSection` component exposes:
-- `[data-level]` - The nesting level of the section
+| Attribute    | Description                      | Example Values  |
+| ------------ | -------------------------------- | --------------- |
+| `data-level` | The nesting level of the section | "0" / "1" / "2" |
 #### CSS Styling Examples
@@ -199,12 +207,12 @@ const slots = {
   'my-listbox.fruits.header': ({ original, props }) => (
     <Header {...props}>🍎 {original}</Header>
   ),
   // Override a specific item in a specific section
   'my-listbox.fruits.apple': ({ original }) => (
     <div className="special-item">⭐ {original}</div>
   ),
   // Override an entire section
   'my-listbox.vegetables': ({ original }) => (
     <div className="veggie-section">{original}</div>
@@ -283,7 +291,7 @@ Customize the appearance when no items are present:
 All components support standard ARIA attributes for enhanced accessibility:
 ```tsx
-<ListBox
+<ListBox
   aria-label="Food menu"
   aria-describedby="menu-description"
 >
@@ -306,7 +314,7 @@ const StyledListBox = styled.div`
   &[data-focused] {
     box-shadow: 0 0 0 2px blue;
   }
   [role="option"][data-selected] {
     background: ${props => props.theme.primary};
   }

package/dist/index.cjs CHANGED Viewed

@@ -17,7 +17,7 @@ var React4__default = /*#__PURE__*/_interopDefault(React4);
 var HeaderContext = React4.createContext({});
 var BentoHeaderImpl = slots.withSlots(
   "BentoHeader",
-  React4.forwardRef(function BentoHeader(props, ref) {
+  function BentoHeader(props, ref) {
     const { props: processedProps, apply } = useProps.useProps(props);
     const contextProps = React4.useContext(HeaderContext);
     const appliedUserProps = apply(processedProps);
@@ -27,29 +27,26 @@ var BentoHeaderImpl = slots.withSlots(
       // User props take precedence over context
     };
     return /* @__PURE__ */ React4__default.default.createElement("header", { ...composed, ref: contextProps.ref || ref }, processedProps.children);
-  })
+  }
 );
 function HeaderWrapper(props, ref) {
   return /* @__PURE__ */ React4__default.default.createElement(BentoHeaderImpl, { ...props, ref });
 }
 var HeaderBase = collections.createLeafComponent("header", HeaderWrapper);
 var Header = HeaderBase;
-var BentoListBoxSectionImpl = slots.withSlots(
-  "BentoListBoxSection",
-  React4.forwardRef(function BentoListBoxSectionImpl2({ __node, children, title: titleProp, ...rest }, ref) {
-    const { props, apply } = useProps.useProps(rest);
-    const data = useDataAttributes.useDataAttributes({ level: __node?.level });
-    const headingRef = React4.useRef(null);
-    const title = titleProp ?? props.title ?? __node?.rendered;
-    const { groupProps, headingProps } = reactAria.useListBoxSection({
-      heading: title,
-      "aria-label": props["aria-label"]
-    });
-    const composed = reactAria.mergeProps(apply({ ...data, ...props }, ["children", "title", "slot"]), groupProps);
-    const sectionContent = children || props.children;
-    return /* @__PURE__ */ React4__default.default.createElement("section", { ...composed, ref }, /* @__PURE__ */ React4__default.default.createElement(HeaderContext.Provider, { value: { ...headingProps, ref: headingRef } }, title && /* @__PURE__ */ React4__default.default.createElement("div", { ...headingProps }, title), sectionContent));
-  })
-);
+var BentoListBoxSectionImpl = slots.withSlots("BentoListBoxSection", function BentoListBoxSectionImpl2({ __node, children, title: titleProp, ...rest }, ref) {
+  const { props, apply } = useProps.useProps(rest);
+  const data = useDataAttributes.useDataAttributes({ level: __node?.level });
+  const headingRef = React4.useRef(null);
+  const title = titleProp ?? props.title ?? __node?.rendered;
+  const { groupProps, headingProps } = reactAria.useListBoxSection({
+    heading: title,
+    "aria-label": props["aria-label"]
+  });
+  const composed = reactAria.mergeProps(apply({ ...data, ...props }, ["children", "title", "slot"]), groupProps);
+  const sectionContent = children || props.children;
+  return /* @__PURE__ */ React4__default.default.createElement("section", { ...composed, ref }, /* @__PURE__ */ React4__default.default.createElement(HeaderContext.Provider, { value: { ...headingProps, ref: headingRef } }, title && /* @__PURE__ */ React4__default.default.createElement("div", { ...headingProps }, title), sectionContent));
+});
 function ListBoxSectionWrapper(props, ref, section) {
   return /* @__PURE__ */ React4__default.default.createElement(BentoListBoxSectionImpl, { ...props, __node: section, ref });
 }
@@ -363,7 +360,7 @@ var ListBoxItemImplComponent = function ListBoxItemImplComponent2({ __node, ...p
   };
   return /* @__PURE__ */ React4__default.default.createElement(TextContext.Provider, { value: textContext }, React4__default.default.createElement(ElementType, finalAttributes, content));
 };
-var ListBoxItemImpl = slots.withSlots("BentoListBoxItem", React4.forwardRef(ListBoxItemImplComponent));
+var ListBoxItemImpl = slots.withSlots("BentoListBoxItem", ListBoxItemImplComponent);
 function ListBoxItemComponent(props, forwardedRef, item) {
   return /* @__PURE__ */ React4__default.default.createElement(ListBoxItemImpl, { ...props, ref: forwardedRef, __node: item });
 }

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/header.tsx","../src/listbox-section.tsx","../src/utils.ts","../src/listbox.tsx","../src/listbox-item.tsx"],"names":["createContext","withSlots","forwardRef","useProps","useContext","React","createLeafComponent","BentoListBoxSectionImpl","useDataAttributes","useRef","useListBoxSection","mergeProps","createBranchComponent","ListBoxSectionInner","CollectionRendererContext","useEffect","useListState","useMemo","ListKeyboardDelegate","ListBoxInner","useLocale","useCollator","useListBox","useFocusRing","FocusScope","CollectionBuilder","AriaCollection","StandaloneListBox","ListBoxItemImplComponent","useOption","useHover"],"mappings":"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","file":"index.cjs","sourcesContent":["import React, { forwardRef, createContext, useContext } from 'react';\nimport { createLeafComponent } from '@react-aria/collections';\nimport { useProps } from '@bento/use-props';\nimport { withSlots, type Slots } from '@bento/slots';\n\n/*\n Props for the Header component.\n * @interface HeaderProps\n /\nexport interface HeaderProps extends Slots, React.ComponentProps<'header'> {\n /\n The children of the header.\n /\n readonly children?: React.ReactNode;\n}\n\n/\n Context value structure for Header components.\n * Extends HTML attributes to support all standard header element properties.\n * @interface HeaderContextValue\n /\ninterface HeaderContextValue extends React.HTMLAttributes<HTMLElement> {\n /\n Reference to the header element for forwarding.\n /\n readonly ref?: React.RefObject<HTMLDivElement>;\n}\n\n/\n Combined props type for the internal BentoHeader implementation.\n * Merges Header-specific props with standard HTML attributes to provide\n * a comprehensive interface for the internal header component.\n \n @type BentoHeaderProps\n * @internal\n /\ntype BentoHeaderProps = HeaderProps & React.HTMLAttributes<HTMLElement>;\n\n/\n React context for providing header-related attributes and refs to Header components.\n * Used internally by ListBoxSection to pass heading props to Header elements.\n * @public\n /\nexport const HeaderContext = createContext<HeaderContextValue>({});\n\n/\n Internal implementation of the BentoHeader component with slots support.\n * This component handles prop processing and context integration.\n * It merges props from useProps and HeaderContext while preserving styling props.\n \n @internal\n /\nconst BentoHeaderImpl = withSlots(\n 'BentoHeader',\n forwardRef(function BentoHeader(props: BentoHeaderProps, ref: React.ForwardedRef<HTMLElement>) {\n const { props: processedProps, apply } = useProps(props);\n const contextProps = useContext(HeaderContext);\n\n // Apply user props directly (preserves className, style, etc.)\n const appliedUserProps = apply(processedProps);\n\n const composed = {\n ...contextProps,\n ...appliedUserProps // User props take precedence over context\n };\n\n return (\n <header {...composed} ref={contextProps.ref \|\| ref}>\n {processedProps.children}\n </header>\n );\n })\n);\n\n/\n Wrapper component that connects the BentoHeaderImpl to React Aria's collection system.\n * This function serves as an adapter between the createLeafComponent system and\n * the internal BentoHeaderImpl component, ensuring proper prop forwarding and ref handling.\n \n @param {HeaderProps} props - Header component props\n * @param {React.ReactNode} [props.children] - React children to render inside the header\n * @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element\n * @returns {React.ReactElement} The BentoHeaderImpl component with forwarded props and ref\n * @internal\n /\nfunction HeaderWrapper(props: HeaderProps, ref: React.ForwardedRef<HTMLElement>) {\n return <BentoHeaderImpl {...props} ref={ref} />;\n}\n\n/\n A Header represents a heading for a section within a ListBox.\n * Uses React Aria's createLeafComponent for automatic collection handling.\n \n @component\n * @param {HeaderProps} props - The props for the Header component\n * @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element\n * @returns {JSX.Element} A header element with proper accessibility attributes\n \n @example\n * ```tsx\n * <Header>My Section Title</Header>\n * ```\n * @public\n /\n/\n Base Header component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state and\n * integrates with the collection rendering system.\n * @internal\n /\nconst HeaderBase = createLeafComponent('header', HeaderWrapper);\n\n/\n A Header component for section headings within a ListBox.\n * Provides semantic header structure with proper accessibility attributes\n * and integrates with React Aria's collection system for automatic handling.\n \n This is the main public interface for creating headers in ListBox sections.\n * It automatically receives heading props from the parent ListBoxSection via HeaderContext.\n \n @component\n * @example\n * ```tsx\n * <ListBoxSection>\n * <Header>Fruits</Header>\n * <ListBoxItem>Apple</ListBoxItem>\n * <ListBoxItem>Banana</ListBoxItem>\n * </ListBoxSection>\n * ```\n * @public\n /\nexport const Header = HeaderBase as React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;\n","import React, { forwardRef, useRef, useContext } from 'react';\nimport { useListBoxSection, mergeProps } from 'react-aria';\nimport { createBranchComponent } from '@react-aria/collections';\nimport { CollectionRendererContext } from 'react-aria-components';\nimport type { Node } from '@react-types/shared';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport { HeaderContext } from './header';\nimport { ListStateContext } from './listbox';\n\n/\n Props for the ListBoxSection component.\n * @interface ListBoxSectionProps\n /\nexport interface ListBoxSectionProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n /\n A slot name for the component. Used by Bento's slot system.\n /\n readonly slot?: string;\n /\n The title of the section.\n /\n readonly title?: React.ReactNode;\n /\n The children of the section.\n /\n readonly children?: React.ReactNode;\n}\n\n/\n Internal props interface for BentoListBoxSectionImpl component.\n * Extends ListBoxSectionProps with internal React Aria node data and allows\n * additional properties for flexibility in prop handling.\n \n @interface BentoListBoxSectionImplProps\n * @template T - The type of the section node data\n * @internal\n /\ninterface BentoListBoxSectionImplProps<T = unknown> extends ListBoxSectionProps {\n readonly __node?: Node<T>;\n readonly [key: string]: unknown;\n}\n\n/\n Props interface for the ListBoxSectionInner component.\n * Contains the React Aria section node that represents this section\n * in the collection hierarchy for dynamic rendering.\n \n @interface ListBoxSectionInnerProps\n * @internal\n /\ninterface ListBoxSectionInnerProps {\n readonly section: Node<unknown>;\n}\n\n/\n Internal implementation of the BentoListBoxSection component with slots support.\n * This component handles the core logic for rendering a section within a ListBox,\n * including title rendering, accessibility attributes, and child content management.\n * It integrates with React Aria's useListBoxSection hook for proper ARIA compliance.\n \n @internal\n /\nconst BentoListBoxSectionImpl = withSlots(\n 'BentoListBoxSection',\n forwardRef(function BentoListBoxSectionImpl<T>(\n { __node, children, title: titleProp, ...rest }: BentoListBoxSectionImplProps<T>,\n ref: React.ForwardedRef<HTMLElement>\n ) {\n const { props, apply } = useProps(rest);\n const data = useDataAttributes({ level: __node?.level });\n const headingRef = useRef<HTMLDivElement>(null);\n\n const title = titleProp ?? props.title ?? __node?.rendered;\n const { groupProps, headingProps } = useListBoxSection({\n heading: title,\n 'aria-label': props['aria-label']\n });\n\n const composed = mergeProps(apply({ ...data, ...props }, ['children', 'title', 'slot']), groupProps);\n\n const sectionContent = children \|\| props.children;\n\n return (\n <section {...composed} ref={ref}>\n <HeaderContext.Provider value={{ ...headingProps, ref: headingRef }}>\n {title && <div {...headingProps}>{title}</div>}\n {sectionContent}\n </HeaderContext.Provider>\n </section>\n );\n })\n);\n\n/\n Wrapper component that connects BentoListBoxSectionImpl to React Aria's collection system.\n * This function serves as an adapter between createBranchComponent and the internal\n * BentoListBoxSectionImpl, ensuring proper prop forwarding and node injection for sections.\n \n @template T - The type of the section node data\n * @param {ListBoxSectionProps} props - ListBoxSection component props\n * @param {string} [props.slot] - Slot name for Bento's slot system\n * @param {React.ReactNode} [props.title] - Title for the section\n * @param {React.ReactNode} [props.children] - Children to render in the section\n * @param {string} [props.aria-label] - ARIA label for accessibility\n * @param {React.ForwardedRef<HTMLElement>} ref - Ref forwarded from the collection system\n * @param {Node<T>} section - React Aria node containing section metadata and collection info\n * @returns {React.ReactElement} The BentoListBoxSectionImpl component with proper node and ref wiring\n * @internal\n /\n/ v8 ignore start /\nfunction ListBoxSectionWrapper<T extends object>(\n props: ListBoxSectionProps,\n ref: React.ForwardedRef<HTMLElement>,\n section: Node<T>\n) {\n return <BentoListBoxSectionImpl {...props} __node={section} ref={ref} />;\n}\n/ v8 ignore stop /\n\n/\n Base ListBoxSection component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state and\n * manages the branch structure for nested items.\n * @internal\n /\nconst ListBoxSectionBase = createBranchComponent('section', ListBoxSectionWrapper);\n\n/\n Internal component for rendering dynamic collection sections.\n * This component is used specifically for sections that are part of a dynamic collection,\n * connecting to the ListStateContext and CollectionRendererContext to properly render\n * nested items through React Aria's collection system.\n \n @component\n * @param {object} props - The component props containing the section node\n * @param {Node<unknown>} props.section - The React Aria node representing this section in the collection\n * @throws {BentoError} Throws an error if used outside of a ListBox context\n * @returns {React.ReactElement} JSX element representing a dynamically rendered listbox section\n * @internal\n /\nexport const ListBoxSectionInner: React.FC<ListBoxSectionInnerProps> = function ListBoxSectionInner({ section }) {\n const state = useContext(ListStateContext);\n const { CollectionBranch } = useContext(CollectionRendererContext);\n\n return (\n <BentoListBoxSectionImpl {...section.props} __node={section}>\n {CollectionBranch && state?.collection ? (\n <CollectionBranch collection={state.collection} parent={section} />\n ) : null}\n </BentoListBoxSectionImpl>\n );\n};\n\n/\n A section component for organizing related items within a ListBox.\n \n @component\n * @example\n * ```tsx\n * <ListBoxSection title=\"Fruits\">\n * <ListBoxItem>Apple</ListBoxItem>\n * <ListBoxItem>Banana</ListBoxItem>\n * </ListBoxSection>\n * ```\n * @public\n /\nexport const ListBoxSection = ListBoxSectionBase as <_T extends object>(\n props: ListBoxSectionProps & { children?: React.ReactNode }\n) => React.ReactElement;\n","/ v8 ignore next /\nimport React, { type ForwardedRef, useEffect, useRef } from 'react';\n\n/\n NOTE: This utility will be moved to the new use-collection package.\n * Safe wrapper for React Aria's useObjectRef that handles test environments where refs are not extensible.\n \n Critical for Vitest Browser Mode Testing: When running tests in Vitest's browser mode with Playwright,\n * the test environment can freeze or make objects non-extensible. React Aria's `useObjectRef` attempts to\n * dynamically add properties to ref objects, which fails with \"Cannot add property current, object is not extensible\"\n * in these constrained test environments.\n \n Technical Details:\n * - Vitest browser mode uses Playwright's Chrome DevTools Protocol for test execution\n * - The V8 engine's security model can freeze objects during test isolation\n * - React Aria's useObjectRef uses `Object.defineProperty()` to add reactive properties to refs\n * - This conflicts with frozen objects in browser testing scenarios\n \n Why This Solution Works:\n * - Creates an internal ref that's always mutable (created in our controlled environment)\n * - Safely forwards values to the external ref using try/catch for frozen object scenarios\n * - Maintains the same ref forwarding behavior as React Aria's useObjectRef in normal environments\n * - Gracefully degrades in test environments without breaking functionality\n \n Production Impact: Zero. Object freezing only occurs in specific test configurations.\n * In production and development, this behaves identically to React Aria's useObjectRef.\n \n @template T - The type of the ref element\n * @param {React.ForwardedRef<T>} ref - The forwarded ref to handle safely\n * @returns {React.RefObject<T>} A safe ref object that works in all environments including frozen test contexts\n * @public\n /\nexport function useSafeObjectRef<T>(ref: ForwardedRef<T>): React.RefObject<T> {\n const internalRef = useRef<T>(null);\n\n useEffect(function updateForwardedRef() {\n const current = internalRef.current;\n\n if (typeof ref === 'function') {\n ref(current);\n } else if (ref && 'current' in ref) {\n try {\n (ref as React.MutableRefObject<T \| null>).current = current;\n / v8 ignore start /\n } catch {\n //\n // Silently ignore errors in test environments where objects might be frozen.\n // This specifically handles Vitest browser mode with Playwright where the V8 engine\n // may freeze ref objects during test isolation, preventing dynamic property assignment.\n //\n }\n / v8 ignore stop /\n }\n });\n\n return internalRef;\n}\n","import React, { createContext, useContext, useMemo, ForwardedRef, RefObject } from 'react';\nimport {\n FocusScope,\n mergeProps,\n useCollator,\n useLocale,\n useListBox,\n useFocusRing,\n ListKeyboardDelegate\n} from 'react-aria';\nimport { ListState, SelectionBehavior, useListState, Orientation, Node } from 'react-stately';\nimport { CollectionBuilder, Collection as AriaCollection } from '@react-aria/collections';\nimport { AriaListBoxProps } from '@react-types/listbox';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots, Slots } from '@bento/slots';\nimport { ListBoxItemImpl } from './listbox-item';\nimport { ListBoxSectionInner } from './listbox-section';\nimport { useSafeObjectRef } from './utils';\n\n/\n Render props provided to ListBox render functions and empty state renderers.\n * @interface ListBoxRenderProps\n /\nexport interface ListBoxRenderProps {\n /\n Whether the listbox has no items and should display its empty state.\n * @selector [data-empty]\n /\n readonly isEmpty: boolean;\n /\n Whether the listbox is currently focused.\n * @selector [data-focused]\n /\n readonly isFocused: boolean;\n /\n Whether the listbox is currently keyboard focused.\n * @selector [data-focus-visible]\n /\n readonly isFocusVisible: boolean;\n /\n Whether the listbox is currently the active drop target.\n * @selector [data-drop-target]\n /\n readonly isDropTarget: boolean;\n /\n Whether the items are arranged in a stack or grid.\n * @selector [data-layout=\"stack \| grid\"]\n /\n readonly layout?: 'stack' \| 'grid';\n /\n State of the listbox.\n /\n readonly state: ListState<unknown>;\n /\n The items array when using dynamic collections.\n /\n readonly items?: Iterable<unknown>;\n}\n\n/\n Props for the ListBox component.\n * @interface ListBoxProps\n * @template T The type of items in the collection\n /\nexport interface ListBoxProps<T>\n extends Omit<AriaListBoxProps<T>, 'label' \| 'children'>,\n Omit<React.ComponentProps<'div'>, keyof AriaListBoxProps<T> \| 'children'>,\n Slots {\n /\n How multiple selection should behave in the collection.\n /\n readonly selectionBehavior?: SelectionBehavior;\n /\n Provides content to display when there are no items in the list.\n /\n readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;\n /\n Whether the items are arranged in a stack layout.\n * @default 'stack'\n /\n readonly layout?: 'stack';\n /\n The primary orientation of the items. Usually this is the direction that the collection scrolls.\n * @default 'vertical'\n /\n readonly orientation?: Orientation;\n /\n Static children or render function for the ListBox.\n * When items prop is provided, children receives individual items for React Aria compatibility.\n * When no items prop is provided, children receives Bento render props { isEmpty, isFocused, state, etc. }.\n /\n readonly children?:\n \| React.ReactNode\n \| ((item: T) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n}\n\n/\n React context for sharing ListBox state across components.\n * This context provides the ListBox state to child components like ListBoxItem and ListBoxSection,\n * enabling them to access selection state, collection data, and other shared functionality.\n \n @context\n * @internal\n /\nconst ListStateContext = createContext<ListState<unknown> \| null>(null);\n\n/\n Custom hook to manage ListBox state creation and context handling.\n * This hook either uses an existing state from context or creates a new one.\n * It's designed to work both as a standalone component and within a parent component\n * that provides ListBox state through context.\n \n @param {Record<string, unknown>} props - Configuration object for the ListBox state\n * @returns {object} An object containing the state instance and context state flag\n * @returns {ListState<unknown>} returns.state - The ListBox state instance\n * @returns {ListState<unknown> \| null} returns.contextState - Existing context state, if any\n * @internal\n /\nfunction useListBoxState(props: Record<string, unknown>) {\n const contextState = useContext(ListStateContext);\n\n const stateProps = {\n ...props,\n children: undefined,\n items: undefined\n };\n\n const state = contextState ?? useListState(stateProps);\n\n return { state, contextState };\n}\n\n/\n Renders content with optional context provider wrapper.\n * If no context state exists, wraps the content in a ListStateContext.Provider.\n * This allows the ListBox to work both standalone and as part of a larger component tree.\n \n @param {React.ReactNode} content - The React content to render\n * @param {ListState<unknown>} state - The ListBox state to provide via context\n * @param {ListState<unknown> \| null} contextState - Existing context state, if any\n * @returns {React.ReactNode} The content, optionally wrapped in a context provider\n * @internal\n /\nfunction renderWithOptionalContext(\n content: React.ReactNode,\n state: ListState<unknown>,\n contextState: ListState<unknown> \| null\n): React.ReactNode {\n / v8 ignore next /\n return contextState ? content : <ListStateContext.Provider value={state}>{content}</ListStateContext.Provider>;\n}\n\n/\n Creates and memoizes a keyboard delegate for the ListBox.\n * The keyboard delegate handles keyboard navigation logic, including\n * arrow key navigation, home/end keys, and type-ahead functionality.\n \n @param {object} config - Configuration object for the keyboard delegate\n * @param {ListState<unknown>['collection']} config.collection - The collection of items in the ListBox\n * @param {Intl.Collator} config.collator - Intl collator for string comparison in type-ahead\n * @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to the ListBox DOM element\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager from the state\n * @param {'stack' \| 'grid'} [config.layout] - Layout mode (stack or grid)\n * @param {Orientation} [config.orientation] - Primary orientation of the items\n * @param {'ltr' \| 'rtl'} config.direction - Text direction (ltr or rtl)\n * @param {ListKeyboardDelegate<unknown>} [config.keyboardDelegate] - Custom keyboard delegate to use instead of default\n * @returns {ListKeyboardDelegate<unknown>} A keyboard delegate instance for handling keyboard interactions\n * @internal\n /\nfunction useKeyboardDelegate({\n collection,\n collator,\n listBoxRef,\n selectionManager,\n layout,\n orientation,\n direction,\n keyboardDelegate: providedDelegate\n}: {\n readonly collection: ListState<unknown>['collection'];\n readonly collator: Intl.Collator;\n readonly listBoxRef: React.RefObject<HTMLDivElement>;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly layout?: 'stack' \| 'grid';\n readonly orientation?: Orientation;\n readonly direction: 'ltr' \| 'rtl';\n readonly keyboardDelegate?: ListKeyboardDelegate<unknown>;\n}): ListKeyboardDelegate<unknown> {\n const { disabledBehavior, disabledKeys } = selectionManager;\n\n return useMemo(\n function createKeyboardDelegate() {\n return (\n providedDelegate \|\|\n new ListKeyboardDelegate({\n collection,\n collator,\n ref: listBoxRef,\n disabledKeys,\n disabledBehavior,\n layout,\n orientation,\n direction\n })\n );\n },\n [collection, collator, listBoxRef, selectionManager, orientation, direction, layout, providedDelegate]\n );\n}\n\n/\n Generates data attributes for the ListBox element based on its current state.\n * These attributes are used for styling selectors and accessibility indicators.\n \n @param {object} config - Configuration object containing ListBox state flags\n * @param {boolean} config.isEmpty - Whether the listbox has no items\n * @param {boolean} config.isFocused - Whether the listbox is currently focused\n * @param {boolean} config.isFocusVisible - Whether focus should be visually indicated\n * @param {'stack' \| 'grid'} [config.layout] - Layout mode (stack or grid)\n * @param {Orientation} [config.orientation] - Primary orientation of the items\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager containing selection state\n * @param {boolean} [config.allowsTabNavigation] - Whether tab navigation is enabled\n * @param {boolean} [config.shouldFocusWrap] - Whether focus wraps at boundaries\n * @param {SelectionBehavior} [config.originalSelectionBehavior] - Original selection behavior setting\n * @returns {Record<string, unknown>} Object with data attributes for the ListBox element\n * @internal\n /\nfunction useListBoxDataAttributes({\n isEmpty,\n isFocused,\n isFocusVisible,\n layout,\n orientation,\n selectionManager,\n allowsTabNavigation,\n shouldFocusWrap,\n originalSelectionBehavior\n}: {\n readonly isEmpty: boolean;\n readonly isFocused: boolean;\n readonly isFocusVisible: boolean;\n readonly layout?: 'stack' \| 'grid';\n readonly orientation?: Orientation;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly allowsTabNavigation?: boolean;\n readonly shouldFocusWrap?: boolean;\n readonly originalSelectionBehavior?: SelectionBehavior;\n}) {\n return useDataAttributes({\n empty: isEmpty,\n focused: isFocused,\n 'focus-visible': isFocusVisible,\n layout,\n orientation,\n 'selection-mode': selectionManager.selectionMode !== 'none' ? selectionManager.selectionMode : undefined,\n 'selection-behavior': originalSelectionBehavior !== undefined ? selectionManager.selectionBehavior : undefined,\n 'allows-tab-navigation': allowsTabNavigation,\n 'focus-wrap': shouldFocusWrap\n });\n}\n\n/\n Composes all props for the ListBox element including DOM props, ARIA props,\n * focus props, and data attributes. Handles prop application through useProps\n * and manages ref assignment to avoid proxy extensibility issues.\n \n @param {object} config - Configuration object containing all props to compose\n * @param {Record<string, unknown>} config.otherProps - Additional props from the component\n * @param {ListBoxRenderProps} config.renderValues - Values available to render functions\n * @param {Record<string, unknown>} config.listBoxProps - Props from useListBox hook\n * @param {Record<string, unknown>} config.focusProps - Props from useFocusRing hook\n * @param {Record<string, unknown>} config.dataAttributes - Data attributes for styling/selectors\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager for ARIA attributes\n * @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to attach to the final element\n * @returns {Record<string, unknown>} Composed props object ready for the ListBox element\n * @internal\n /\nfunction useComposedProps({\n otherProps,\n renderValues,\n listBoxProps,\n focusProps,\n dataAttributes,\n selectionManager,\n listBoxRef\n}: {\n readonly otherProps: Record<string, unknown>;\n readonly renderValues: ListBoxRenderProps;\n readonly listBoxProps: Record<string, unknown>;\n readonly focusProps: Record<string, unknown>;\n readonly dataAttributes: Record<string, unknown>;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly listBoxRef: React.RefObject<HTMLDivElement>;\n}) {\n const { apply } = useProps(otherProps, renderValues);\n\n const propsToExclude = [\n 'renderEmptyState',\n 'selectionMode',\n 'defaultSelectedKeys',\n 'disabledKeys',\n 'disallowEmptySelection',\n 'shouldFocusWrap',\n 'items',\n 'children',\n 'selectionBehavior',\n 'keyboardDelegate'\n ];\n\n // Apply user props directly (preserves className, style, etc.)\n const appliedUserProps = apply(otherProps, propsToExclude);\n\n // React Aria and Bento props\n const baseProps = {\n ...mergeProps(listBoxProps, focusProps),\n ...dataAttributes,\n ...(selectionManager.selectionMode !== 'none' && {\n 'aria-multiselectable': selectionManager.selectionMode === 'multiple'\n })\n };\n\n //\n // Merge all props together with user props taking precedence\n //\n const finalProps = {\n ...baseProps,\n ...appliedUserProps,\n ref: listBoxRef // Set ref directly to avoid extensibility issues\n };\n\n return finalProps;\n}\n\n/\n Renders the empty state content for the ListBox when no items are present.\n * Handles both function-based render props and direct JSX elements.\n * If a function is provided, calls it with render values; otherwise returns as-is.\n \n @param {(props: ListBoxRenderProps) => React.ReactNode} renderEmptyStateFn - Function or JSX element to render for empty state\n * @param {ListBoxRenderProps} renderValues - Current render values to pass to render function\n * @returns {React.ReactNode} Rendered empty state content\n * @internal\n /\nfunction renderEmptyState(\n renderEmptyStateFn: (props: ListBoxRenderProps) => React.ReactNode,\n renderValues: ListBoxRenderProps\n): React.ReactNode {\n //\n // Handle cases where renderEmptyState is not a function (e.g., JSX element passed directly)\n //\n if (typeof renderEmptyStateFn === 'function') {\n return renderEmptyStateFn(renderValues);\n }\n //\n // If it's not a function, just return it as-is (likely a JSX element)\n //\n return renderEmptyStateFn as React.ReactNode;\n}\n\n/\n Renders all items in the collection as React elements.\n * Handles both regular items and section items, using the appropriate\n * components (ListBoxItemImpl for items, ListBoxSectionInner for sections).\n \n @param {ListState<unknown>['collection']} collection - The collection of items to render\n * @returns {React.ReactElement[]} Array of rendered React elements for all collection items\n * @internal\n /\nfunction renderCollectionItems(collection: ListState<unknown>['collection']): React.ReactElement[] {\n return [...collection].map(function renderCollectionItem(item: Node<unknown>) {\n return item.type === 'section' ? (\n <ListBoxSectionInner key={item.key} section={item} />\n ) : (\n <ListBoxItemImpl key={item.key} __node={item as Node<object>}>\n {item.rendered}\n </ListBoxItemImpl>\n );\n });\n}\n\n/\n Determines what content to render inside the ListBox based on its configuration.\n * Handles three cases:\n * 1. Function children without items (Bento render prop pattern with full render props)\n * 2. Empty state when no items and renderEmptyState is provided\n * 3. Normal collection rendering (including items with children functions for React Aria compatibility)\n \n @param {object} config - Configuration object for rendering\n * @param {React.ReactNode \| ((item: unknown) => React.ReactNode) \| ((props: ListBoxRenderProps) => React.ReactNode)} [config.children] - Children prop (static, item render function, or ListBox render prop)\n * @param {Iterable<unknown>} [config.items] - Items array for dynamic collections\n * @param {boolean} config.isEmpty - Whether the collection is empty\n * @param {(props: ListBoxRenderProps) => React.ReactNode} [config.renderEmptyStateProp] - Function to render empty state\n * @param {ListBoxRenderProps} config.renderValues - Current render values for render functions\n * @param {ListState<unknown>['collection']} config.collection - The collection state to render\n * @returns {React.ReactNode} The appropriate content to render inside the ListBox\n * @internal\n /\nfunction renderListBoxContent({\n children,\n items,\n isEmpty,\n renderEmptyStateProp,\n renderValues,\n collection\n}: {\n readonly children?:\n \| React.ReactNode\n \| ((item: unknown) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n readonly items?: Iterable<unknown>;\n readonly isEmpty: boolean;\n readonly renderEmptyStateProp?: (props: ListBoxRenderProps) => React.ReactNode;\n readonly renderValues: ListBoxRenderProps;\n readonly collection: ListState<unknown>['collection'];\n}): React.ReactNode {\n // If children is a function AND no items provided, use Bento render prop pattern\n / v8 ignore next /\n const hasRenderChildren = typeof children === 'function' && !items;\n\n / v8 ignore next 3 /\n if (hasRenderChildren) {\n return (children as (props: ListBoxRenderProps) => React.ReactNode)(renderValues);\n }\n\n // Handle empty state\n if (isEmpty && renderEmptyStateProp) {\n return renderEmptyState(renderEmptyStateProp, renderValues);\n }\n\n // Render collection items (React Aria handles items + children function internally)\n return renderCollectionItems(collection);\n}\n\n/\n Internal ListBox component that handles the core rendering logic.\n * This component manages all the hooks, state, and prop composition needed\n * for a fully functional ListBox. It's wrapped by the main ListBox component\n * which handles collection building.\n \n @param {object} props - Component props\n * @param {ListState<unknown>} props.state - The ListBox state instance\n * @param {(props: ListBoxRenderProps) => React.ReactNode} [props.renderEmptyState] - Function to render when no items are present\n * @param {React.ReactNode \| ((item: unknown) => React.ReactNode) \| ((props: ListBoxRenderProps) => React.ReactNode)} [props.children] - Static children, item render function, or ListBox render function\n * @param {Iterable<unknown>} [props.items] - Items array for dynamic collections\n * @param {React.RefObject<HTMLDivElement>} props.listBoxRef - Reference to the ListBox DOM element\n * @param {'stack'} [props.layout] - Layout mode (stack or grid)\n * @param {Orientation} [props.orientation] - Primary orientation of the items\n * @param {boolean} [props.shouldSelectOnPressUp] - Whether selection occurs on pointer up\n * @param {ListKeyboardDelegate<unknown>} [props.keyboardDelegate] - Custom keyboard navigation delegate\n * @param {boolean} [props.allowsTabNavigation] - Whether tab key navigates between items\n * @param {boolean} [props.shouldFocusWrap] - Whether focus wraps at boundaries\n * @param {'none' \| 'single' \| 'multiple'} [props.selectionMode] - Selection mode (none, single, multiple)\n * @param {SelectionBehavior} [props.selectionBehavior] - Selection behavior (toggle, replace)\n * @returns {React.ReactElement} A fully functional ListBox element with focus scope\n * @internal\n /\nconst ListBoxInner: React.FC<{\n readonly state: ListState<unknown>;\n readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;\n readonly children?:\n \| React.ReactNode\n \| ((item: unknown) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n readonly items?: Iterable<unknown>;\n readonly listBoxRef: RefObject<HTMLDivElement>;\n readonly layout?: 'stack';\n readonly orientation?: Orientation;\n readonly shouldSelectOnPressUp?: boolean;\n readonly keyboardDelegate?: ListKeyboardDelegate<unknown>;\n readonly allowsTabNavigation?: boolean;\n readonly shouldFocusWrap?: boolean;\n readonly selectionMode?: 'none' \| 'single' \| 'multiple';\n readonly selectionBehavior?: SelectionBehavior;\n}> = function ListBoxInner({\n state,\n renderEmptyState: renderEmptyStateProp,\n children,\n items,\n listBoxRef,\n ...otherProps\n}) {\n const { layout = 'stack', orientation = 'vertical', shouldSelectOnPressUp, selectionBehavior } = otherProps;\n\n const { collection, selectionManager } = state;\n const { direction } = useLocale();\n const collator = useCollator({ usage: 'search', sensitivity: 'base' });\n\n const keyboardDelegate = useKeyboardDelegate({\n collection,\n collator,\n listBoxRef,\n selectionManager,\n layout,\n orientation,\n direction,\n keyboardDelegate: otherProps.keyboardDelegate\n });\n\n const { listBoxProps } = useListBox(\n {\n ...otherProps,\n shouldSelectOnPressUp,\n keyboardDelegate\n },\n state,\n listBoxRef\n );\n\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const isEmpty = state.collection.size === 0;\n\n const renderValues: ListBoxRenderProps = {\n isEmpty,\n isFocused,\n isFocusVisible,\n isDropTarget: false,\n layout,\n state,\n items\n };\n\n const dataAttributes = useListBoxDataAttributes({\n isEmpty,\n isFocused,\n isFocusVisible,\n layout,\n orientation,\n selectionManager,\n allowsTabNavigation: otherProps.allowsTabNavigation,\n shouldFocusWrap: otherProps.shouldFocusWrap,\n originalSelectionBehavior: selectionBehavior\n });\n\n const composedProps = useComposedProps({\n otherProps,\n renderValues,\n listBoxProps: listBoxProps as Record<string, unknown>,\n focusProps: focusProps as Record<string, unknown>,\n dataAttributes,\n selectionManager,\n listBoxRef\n });\n\n return (\n <FocusScope>\n <div {...composedProps}>\n {renderListBoxContent({\n children,\n items,\n isEmpty,\n renderEmptyStateProp,\n renderValues,\n collection\n })}\n </div>\n </FocusScope>\n );\n};\n\n/\n A complete ListBox component providing accessible selection lists with keyboard navigation.\n * Supports both static children and dynamic collections, with single/multiple selection modes.\n * Built on React Aria with full ARIA compliance and keyboard accessibility.\n \n @component\n * @template T The type of items in the collection\n * @param {ListBoxProps<T>} args - The properties passed to the ListBox component\n * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref to the listbox container\n * @returns {React.ReactElement} A ListBox component\n \n @example\n * ```tsx\n * <ListBox aria-label=\"Fruits\" selectionMode=\"single\">\n * <ListBoxItem id=\"apple\" textValue=\"Apple\">Apple</ListBoxItem>\n * <ListBoxItem id=\"banana\" textValue=\"Banana\">Banana</ListBoxItem>\n * </ListBox>\n * ```\n * @public\n /\nfunction ListBoxComponent<T>(args: ListBoxProps<T>, ref: React.ForwardedRef<HTMLDivElement>): React.ReactElement {\n return (\n <CollectionBuilder content={<AriaCollection {...(args as unknown as Parameters<typeof AriaCollection>[0])} />}>\n {function buildCollection(collection: unknown) {\n return <StandaloneListBox props={args as ListBoxProps<unknown>} listBoxRef={ref} collection={collection} />;\n }}\n </CollectionBuilder>\n );\n}\n\n/\n Standalone ListBox component that manages its own state and collection.\n * This component is used internally by the main ListBox component after\n * collection building is complete. It handles prop processing, state creation,\n * and context management.\n \n @param {object} props - Component props\n * @param {ListBoxProps<unknown>} props.props - The original ListBox props\n * @param {React.ForwardedRef<HTMLDivElement>} props.listBoxRef - Reference to forward to the ListBox element\n * @param {unknown} props.collection - Built collection from CollectionBuilder\n * @returns {React.ReactElement} A complete ListBox with state management and optional context wrapping\n * @internal\n /\nconst StandaloneListBox: React.FC<{\n readonly props: ListBoxProps<unknown>;\n readonly listBoxRef: ForwardedRef<HTMLDivElement>;\n readonly collection: unknown;\n}> = function StandaloneListBox({ props, listBoxRef, collection }) {\n //\n // Extract renderEmptyState before useProps processes it to avoid render prop corruption\n //\n const originalRenderEmptyState = props.renderEmptyState;\n\n const { props: processedProps } = useProps(props);\n const processedRef = useSafeObjectRef(listBoxRef);\n const { state, contextState } = useListBoxState({ ...processedProps, collection });\n\n const { renderEmptyState: _, ...cleanProcessedProps } = processedProps as ListBoxProps<unknown> & {\n renderEmptyState?: unknown;\n };\n\n const content = (\n <ListBoxInner\n state={state}\n listBoxRef={processedRef}\n renderEmptyState={originalRenderEmptyState}\n {...cleanProcessedProps}\n />\n );\n\n return renderWithOptionalContext(content, state, contextState);\n};\n\n/\n A complete ListBox component providing accessible selection lists with keyboard navigation.\n * Supports both static children and dynamic collections, with single/multiple selection modes.\n * Built on React Aria with full ARIA compliance and keyboard accessibility.\n \n @component\n * @example\n * ```tsx\n * <ListBox aria-label=\"Fruits\" selectionMode=\"single\">\n * <ListBoxItem id=\"apple\" textValue=\"Apple\">Apple</ListBoxItem>\n * <ListBoxItem id=\"banana\" textValue=\"Banana\">Banana</ListBoxItem>\n * </ListBox>\n * ```\n * @public\n /\nexport const ListBox = withSlots('BentoListBox', ListBoxComponent);\n\n/\n Collection component for building dynamic collections in ListBox.\n * Re-exported from React Aria Collections.\n * @public\n /\nexport { AriaCollection as Collection };\n\n/\n Context for sharing ListBox state across components.\n * Used internally by ListBoxItem and ListBoxSection components.\n * @public\n /\nexport { ListStateContext };\n","import React, { ForwardedRef, ReactNode, createContext, useContext, useMemo, forwardRef } from 'react';\nimport { mergeProps, useOption, useHover } from 'react-aria';\nimport { createLeafComponent } from '@react-aria/collections';\nimport { HoverEvents, Key, LinkDOMProps, Node } from '@react-types/shared';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { ListStateContext } from './listbox';\nimport { useSafeObjectRef } from './utils';\nimport { withSlots } from '@bento/slots';\n\n/\n Context value structure for text-related slot attributes.\n * Used to provide label and description attributes to child components.\n * @interface TextContextValue\n /\ninterface TextContextValue {\n readonly slots: {\n /* Attributes for label elements /\n readonly label?: React.HTMLAttributes<HTMLElement>;\n /* Attributes for description elements /\n readonly description?: React.HTMLAttributes<HTMLElement>;\n };\n}\n\n/\n Internal context for providing text-related slot attributes to child components.\n * This context allows ListBoxItem to pass label and description attributes\n * to nested components that need them for accessibility.\n * @internal\n /\nconst TextContext = createContext<TextContextValue>({ slots: {} });\n\n/\n Render props provided to ListBoxItem render functions.\n * @interface ListBoxItemRenderProps\n /\nexport interface ListBoxItemRenderProps {\n /\n Whether the item is currently hovered.\n * @selector [data-hovered]\n /\n readonly isHovered: boolean;\n /\n Whether the item is currently pressed.\n * @selector [data-pressed]\n /\n readonly isPressed: boolean;\n /\n Whether the item is currently selected.\n * @selector [data-selected]\n /\n readonly isSelected: boolean;\n /\n Whether the item is currently focused.\n * @selector [data-focused]\n /\n readonly isFocused: boolean;\n /\n Whether the item is currently keyboard focused.\n * @selector [data-focus-visible]\n /\n readonly isFocusVisible: boolean;\n /\n Whether the item is disabled.\n * @selector [data-disabled]\n /\n readonly isDisabled: boolean;\n /\n The type of selection that is allowed in the collection.\n * @selector [data-selection-mode=\"none \| single \| multiple\"]\n /\n readonly selectionMode: 'none' \| 'single' \| 'multiple';\n /\n The selection behavior for the collection.\n * @selector [data-selection-behavior=\"toggle \| replace\"]\n /\n readonly selectionBehavior: 'toggle' \| 'replace';\n}\n\n/\n Props for the ListBoxItem component.\n * @interface ListBoxItemProps\n * @template T The type of the item value\n /\nexport interface ListBoxItemProps<T = object>\n extends LinkDOMProps,\n HoverEvents,\n Omit<React.HTMLAttributes<HTMLElement>, keyof LinkDOMProps \| keyof HoverEvents \| 'id' \| 'children'> {\n /* The unique id of the item. If not provided, React Aria will auto-generate one. /\n readonly id?: Key;\n /* The object value that this item represents. When using dynamic collections, this is set automatically. /\n readonly value?: T;\n /* A string representation of the item's contents, used for features like typeahead. If not provided, React Aria will derive it from children automatically. /\n readonly textValue?: string;\n /\n Handler that is called when a user performs an action on the item. The exact user event depends on the\n * collection's `selectionBehavior` prop and the interaction modality.\n /\n readonly onAction?: () => void;\n /* The contents of the item. Can be a render function that receives render props. /\n readonly children?: ReactNode \| ((values: ListBoxItemRenderProps) => ReactNode);\n /\n A slot name for the component. Used by Bento's slot system.\n /\n readonly slot?: string;\n /* Whether the item is disabled. /\n readonly isDisabled?: boolean;\n}\n\n/\n Internal implementation component for ListBoxItem.\n * Handles the core logic for rendering a single listbox item with proper accessibility.\n * This component manages all the hooks, state, and interactions needed for a functional\n * listbox item including selection, hover, focus, and keyboard interactions.\n \n @template T - The type of the item value\n * @param {object} props - Combined ListBoxItem props and internal node data\n * @param {Node<T>} props.__node - Internal React Aria node containing item metadata\n * @param {React.ReactNode \| ((values: ListBoxItemRenderProps) => React.ReactNode)} [props.children] - Content to render, can be static or a render function\n * @param {boolean} [props.isDisabled] - Whether the item is disabled\n * @param {string} [props.aria-label] - ARIA label for accessibility\n * @param {(e: HoverEvent) => void} [props.onHoverStart] - Handler for hover start events\n * @param {(isHovering: boolean) => void} [props.onHoverChange] - Handler for hover change events\n * @param {(e: HoverEvent) => void} [props.onHoverEnd] - Handler for hover end events\n * @param {React.ForwardedRef<HTMLDivElement>} ref - Forwarded ref to the item element\n * @returns {React.ReactElement} A fully interactive listbox item with accessibility and state management\n * @internal\n /\nconst ListBoxItemImplComponent = function ListBoxItemImplComponent<T extends object>(\n { __node, ...props }: ListBoxItemProps<T> & { readonly __node: Node<T> },\n ref: ForwardedRef<HTMLDivElement>\n) {\n const state = useContext(ListStateContext)!;\n const safeRef = useSafeObjectRef(ref);\n\n const { optionProps, labelProps, descriptionProps, ...states } = useOption(\n {\n key: __node.key,\n 'aria-label': props['aria-label'],\n isDisabled: props.isDisabled\n },\n state,\n safeRef\n );\n\n const { hoverProps, isHovered } = useHover({\n isDisabled: states.isDisabled,\n onHoverStart: props.onHoverStart,\n onHoverChange: props.onHoverChange,\n onHoverEnd: props.onHoverEnd\n });\n\n const renderValues: ListBoxItemRenderProps = {\n ...states,\n isHovered,\n selectionMode: state.selectionManager.selectionMode,\n selectionBehavior: state.selectionManager.selectionBehavior\n };\n\n const content = typeof props.children === 'function' ? props.children(renderValues) : props.children;\n\n const { apply } = useProps(props, renderValues);\n\n const dataAttributes = useDataAttributes({\n selected: states.isSelected,\n disabled: states.isDisabled,\n hovered: isHovered,\n focused: states.isFocused,\n 'focus-visible': states.isFocusVisible,\n pressed: states.isPressed,\n level: __node.level,\n 'selection-mode': state.selectionManager.selectionMode,\n 'selection-behavior': state.selectionManager.selectionBehavior\n });\n\n const textContext = useMemo(\n function createTextContext() {\n return {\n slots: {\n label: labelProps,\n description: descriptionProps\n }\n };\n },\n [labelProps, descriptionProps]\n );\n\n const ElementType = __node.props.href ? 'a' : 'div';\n\n // Use original node props (which contain className) not filtered finalProps\n const appliedUserProps = apply(__node.props, ['ref']);\n\n const finalAttributes = {\n ...mergeProps(optionProps, hoverProps), // React Aria props\n ...dataAttributes, // Bento data attributes\n ...appliedUserProps,\n ref: safeRef,\n 'data-text-value': __node.textValue\n };\n\n return (\n <TextContext.Provider value={textContext}>\n {React.createElement(ElementType, finalAttributes, content)}\n </TextContext.Provider>\n );\n};\n\n/\n Enhanced ListBoxItem implementation with slots support.\n * This wraps the core ListBoxItemImplComponent with Bento's slot system\n * for advanced composition and styling capabilities.\n * @internal\n /\nexport const ListBoxItemImpl = withSlots('BentoListBoxItem', forwardRef(ListBoxItemImplComponent));\n\n/\n Adapter component that connects ListBoxItemImpl to React Aria's collection system.\n * This function serves as a bridge between React Aria's createLeafComponent and\n * the internal ListBoxItemImpl, ensuring proper prop forwarding and node injection.\n \n @template T - The type of the item value\n * @param {ListBoxItemProps<T>} props - ListBoxItem component props\n * @param {React.ForwardedRef<HTMLDivElement>} forwardedRef - Ref forwarded from the collection system\n * @param {Node<T>} item - React Aria node containing item metadata and collection info\n * @returns {React.ReactElement} The ListBoxItemImpl component with proper node and ref wiring\n * @internal\n /\nfunction ListBoxItemComponent<T extends object>(\n props: ListBoxItemProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n item: Node<T>\n) {\n return <ListBoxItemImpl {...props} ref={forwardedRef} __node={item} />;\n}\n\n/\n Base ListBoxItem component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state.\n * @internal\n /\nconst ListBoxItemBase = createLeafComponent('item', ListBoxItemComponent);\n\n/\n A single item within a ListBox component.\n * Handles user interactions, accessibility, and state management for individual options.\n \n @component\n * @template T The type of the item value\n * @example\n * ```tsx\n * <ListBoxItem>Simple option</ListBoxItem>\n * ```\n * @public\n */\nexport const ListBoxItem = ListBoxItemBase;\n"]}
1	+ {"version":3,"sources":["../src/header.tsx","../src/listbox-section.tsx","../src/utils.ts","../src/listbox.tsx","../src/listbox-item.tsx"],"names":["createContext","withSlots","useProps","useContext","React","createLeafComponent","BentoListBoxSectionImpl","useDataAttributes","useRef","useListBoxSection","mergeProps","createBranchComponent","ListBoxSectionInner","CollectionRendererContext","useEffect","useListState","useMemo","ListKeyboardDelegate","ListBoxInner","useLocale","useCollator","useListBox","useFocusRing","FocusScope","CollectionBuilder","AriaCollection","StandaloneListBox","ListBoxItemImplComponent","useOption","useHover"],"mappings":"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","file":"index.cjs","sourcesContent":["import React, { createContext, useContext } from 'react';\nimport { createLeafComponent } from '@react-aria/collections';\nimport { useProps } from '@bento/use-props';\nimport { withSlots, type Slots } from '@bento/slots';\n\n/*\n Props for the Header component.\n * @interface HeaderProps\n /\nexport interface HeaderProps extends Slots, React.ComponentProps<'header'> {\n /\n The children of the header.\n /\n readonly children?: React.ReactNode;\n}\n\n/\n Context value structure for Header components.\n * Extends HTML attributes to support all standard header element properties.\n * @interface HeaderContextValue\n /\ninterface HeaderContextValue extends React.HTMLAttributes<HTMLElement> {\n /\n Reference to the header element for forwarding.\n /\n readonly ref?: React.RefObject<HTMLDivElement>;\n}\n\n/\n Combined props type for the internal BentoHeader implementation.\n * Merges Header-specific props with standard HTML attributes to provide\n * a comprehensive interface for the internal header component.\n \n @type BentoHeaderProps\n * @internal\n /\ntype BentoHeaderProps = HeaderProps & React.HTMLAttributes<HTMLElement>;\n\n/\n React context for providing header-related attributes and refs to Header components.\n * Used internally by ListBoxSection to pass heading props to Header elements.\n * @public\n /\nexport const HeaderContext = createContext<HeaderContextValue>({});\n\n/\n Internal implementation of the BentoHeader component with slots support.\n * This component handles prop processing and context integration.\n * It merges props from useProps and HeaderContext while preserving styling props.\n \n @internal\n /\nconst BentoHeaderImpl = withSlots(\n 'BentoHeader',\n function BentoHeader(props: BentoHeaderProps, ref: React.ForwardedRef<HTMLElement>) {\n const { props: processedProps, apply } = useProps(props);\n const contextProps = useContext(HeaderContext);\n\n // Apply user props directly (preserves className, style, etc.)\n const appliedUserProps = apply(processedProps);\n\n const composed = {\n ...contextProps,\n ...appliedUserProps // User props take precedence over context\n };\n\n return (\n <header {...composed} ref={contextProps.ref \|\| ref}>\n {processedProps.children}\n </header>\n );\n }\n);\n\n/\n Wrapper component that connects the BentoHeaderImpl to React Aria's collection system.\n * This function serves as an adapter between the createLeafComponent system and\n * the internal BentoHeaderImpl component, ensuring proper prop forwarding and ref handling.\n \n @param {HeaderProps} props - Header component props\n * @param {React.ReactNode} [props.children] - React children to render inside the header\n * @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element\n * @returns {React.ReactElement} The BentoHeaderImpl component with forwarded props and ref\n * @internal\n /\nfunction HeaderWrapper(props: HeaderProps, ref: React.ForwardedRef<HTMLElement>) {\n return <BentoHeaderImpl {...props} ref={ref} />;\n}\n\n/\n A Header represents a heading for a section within a ListBox.\n * Uses React Aria's createLeafComponent for automatic collection handling.\n \n @component\n * @param {HeaderProps} props - The props for the Header component\n * @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element\n * @returns {JSX.Element} A header element with proper accessibility attributes\n \n @example\n * ```tsx\n * <Header>My Section Title</Header>\n * ```\n * @public\n /\n/\n Base Header component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state and\n * integrates with the collection rendering system.\n * @internal\n /\nconst HeaderBase = createLeafComponent('header', HeaderWrapper);\n\n/\n A Header component for section headings within a ListBox.\n * Provides semantic header structure with proper accessibility attributes\n * and integrates with React Aria's collection system for automatic handling.\n \n This is the main public interface for creating headers in ListBox sections.\n * It automatically receives heading props from the parent ListBoxSection via HeaderContext.\n \n @component\n * @example\n * ```tsx\n * <ListBoxSection>\n * <Header>Fruits</Header>\n * <ListBoxItem>Apple</ListBoxItem>\n * <ListBoxItem>Banana</ListBoxItem>\n * </ListBoxSection>\n * ```\n * @public\n /\nexport const Header = HeaderBase as React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;\n","import React, { useRef, useContext } from 'react';\nimport { useListBoxSection, mergeProps } from 'react-aria';\nimport { createBranchComponent } from '@react-aria/collections';\nimport { CollectionRendererContext } from 'react-aria-components';\nimport type { Node } from '@react-types/shared';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport { HeaderContext } from './header';\nimport { ListStateContext } from './listbox';\n\n/\n Props for the ListBoxSection component.\n * @interface ListBoxSectionProps\n /\nexport interface ListBoxSectionProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n /\n A slot name for the component. Used by Bento's slot system.\n /\n readonly slot?: string;\n /\n The title of the section.\n /\n readonly title?: React.ReactNode;\n /\n The children of the section.\n /\n readonly children?: React.ReactNode;\n}\n\n/\n Internal props interface for BentoListBoxSectionImpl component.\n * Extends ListBoxSectionProps with internal React Aria node data and allows\n * additional properties for flexibility in prop handling.\n \n @interface BentoListBoxSectionImplProps\n * @template T - The type of the section node data\n * @internal\n /\ninterface BentoListBoxSectionImplProps<T = unknown> extends ListBoxSectionProps {\n readonly __node?: Node<T>;\n readonly [key: string]: unknown;\n}\n\n/\n Props interface for the ListBoxSectionInner component.\n * Contains the React Aria section node that represents this section\n * in the collection hierarchy for dynamic rendering.\n \n @interface ListBoxSectionInnerProps\n * @internal\n /\ninterface ListBoxSectionInnerProps {\n readonly section: Node<unknown>;\n}\n\n/\n Internal implementation of the BentoListBoxSection component with slots support.\n * This component handles the core logic for rendering a section within a ListBox,\n * including title rendering, accessibility attributes, and child content management.\n * It integrates with React Aria's useListBoxSection hook for proper ARIA compliance.\n \n @internal\n /\nconst BentoListBoxSectionImpl = withSlots('BentoListBoxSection', function BentoListBoxSectionImpl<\n T\n>({ __node, children, title: titleProp, ...rest }: BentoListBoxSectionImplProps<T>, ref: React.ForwardedRef<HTMLElement>) {\n const { props, apply } = useProps(rest);\n const data = useDataAttributes({ level: __node?.level });\n const headingRef = useRef<HTMLDivElement>(null);\n\n const title = titleProp ?? props.title ?? __node?.rendered;\n const { groupProps, headingProps } = useListBoxSection({\n heading: title,\n 'aria-label': props['aria-label']\n });\n\n const composed = mergeProps(apply({ ...data, ...props }, ['children', 'title', 'slot']), groupProps);\n\n const sectionContent = children \|\| props.children;\n\n return (\n <section {...composed} ref={ref}>\n <HeaderContext.Provider value={{ ...headingProps, ref: headingRef }}>\n {title && <div {...headingProps}>{title}</div>}\n {sectionContent}\n </HeaderContext.Provider>\n </section>\n );\n});\n\n/\n Wrapper component that connects BentoListBoxSectionImpl to React Aria's collection system.\n * This function serves as an adapter between createBranchComponent and the internal\n * BentoListBoxSectionImpl, ensuring proper prop forwarding and node injection for sections.\n \n @template T - The type of the section node data\n * @param {ListBoxSectionProps} props - ListBoxSection component props\n * @param {string} [props.slot] - Slot name for Bento's slot system\n * @param {React.ReactNode} [props.title] - Title for the section\n * @param {React.ReactNode} [props.children] - Children to render in the section\n * @param {string} [props.aria-label] - ARIA label for accessibility\n * @param {React.ForwardedRef<HTMLElement>} ref - Ref forwarded from the collection system\n * @param {Node<T>} section - React Aria node containing section metadata and collection info\n * @returns {React.ReactElement} The BentoListBoxSectionImpl component with proper node and ref wiring\n * @internal\n /\n/ v8 ignore start /\nfunction ListBoxSectionWrapper<T extends object>(\n props: ListBoxSectionProps,\n ref: React.ForwardedRef<HTMLElement>,\n section: Node<T>\n) {\n return <BentoListBoxSectionImpl {...props} __node={section} ref={ref} />;\n}\n/ v8 ignore stop /\n\n/\n Base ListBoxSection component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state and\n * manages the branch structure for nested items.\n * @internal\n /\nconst ListBoxSectionBase = createBranchComponent('section', ListBoxSectionWrapper);\n\n/\n Internal component for rendering dynamic collection sections.\n * This component is used specifically for sections that are part of a dynamic collection,\n * connecting to the ListStateContext and CollectionRendererContext to properly render\n * nested items through React Aria's collection system.\n \n @component\n * @param {object} props - The component props containing the section node\n * @param {Node<unknown>} props.section - The React Aria node representing this section in the collection\n * @throws {BentoError} Throws an error if used outside of a ListBox context\n * @returns {React.ReactElement} JSX element representing a dynamically rendered listbox section\n * @internal\n /\nexport const ListBoxSectionInner: React.FC<ListBoxSectionInnerProps> = function ListBoxSectionInner({ section }) {\n const state = useContext(ListStateContext);\n const { CollectionBranch } = useContext(CollectionRendererContext);\n\n return (\n <BentoListBoxSectionImpl {...section.props} __node={section}>\n {CollectionBranch && state?.collection ? (\n <CollectionBranch collection={state.collection} parent={section} />\n ) : null}\n </BentoListBoxSectionImpl>\n );\n};\n\n/\n A section component for organizing related items within a ListBox.\n \n @component\n * @example\n * ```tsx\n * <ListBoxSection title=\"Fruits\">\n * <ListBoxItem>Apple</ListBoxItem>\n * <ListBoxItem>Banana</ListBoxItem>\n * </ListBoxSection>\n * ```\n * @public\n /\nexport const ListBoxSection = ListBoxSectionBase as <_T extends object>(\n props: ListBoxSectionProps & { children?: React.ReactNode }\n) => React.ReactElement;\n","/ v8 ignore next /\nimport React, { type ForwardedRef, useEffect, useRef } from 'react';\n\n/\n NOTE: This utility will be moved to the new use-collection package.\n * Safe wrapper for React Aria's useObjectRef that handles test environments where refs are not extensible.\n \n Critical for Vitest Browser Mode Testing: When running tests in Vitest's browser mode with Playwright,\n * the test environment can freeze or make objects non-extensible. React Aria's `useObjectRef` attempts to\n * dynamically add properties to ref objects, which fails with \"Cannot add property current, object is not extensible\"\n * in these constrained test environments.\n \n Technical Details:\n * - Vitest browser mode uses Playwright's Chrome DevTools Protocol for test execution\n * - The V8 engine's security model can freeze objects during test isolation\n * - React Aria's useObjectRef uses `Object.defineProperty()` to add reactive properties to refs\n * - This conflicts with frozen objects in browser testing scenarios\n \n Why This Solution Works:\n * - Creates an internal ref that's always mutable (created in our controlled environment)\n * - Safely forwards values to the external ref using try/catch for frozen object scenarios\n * - Maintains the same ref forwarding behavior as React Aria's useObjectRef in normal environments\n * - Gracefully degrades in test environments without breaking functionality\n \n Production Impact: Zero. Object freezing only occurs in specific test configurations.\n * In production and development, this behaves identically to React Aria's useObjectRef.\n \n @template T - The type of the ref element\n * @param {React.ForwardedRef<T>} ref - The forwarded ref to handle safely\n * @returns {React.RefObject<T>} A safe ref object that works in all environments including frozen test contexts\n * @public\n /\nexport function useSafeObjectRef<T>(ref: ForwardedRef<T>): React.RefObject<T> {\n const internalRef = useRef<T>(null);\n\n useEffect(function updateForwardedRef() {\n const current = internalRef.current;\n\n if (typeof ref === 'function') {\n ref(current);\n } else if (ref && 'current' in ref) {\n try {\n (ref as React.MutableRefObject<T \| null>).current = current;\n / v8 ignore start /\n } catch {\n //\n // Silently ignore errors in test environments where objects might be frozen.\n // This specifically handles Vitest browser mode with Playwright where the V8 engine\n // may freeze ref objects during test isolation, preventing dynamic property assignment.\n //\n }\n / v8 ignore stop /\n }\n });\n\n return internalRef;\n}\n","import React, { createContext, useContext, useMemo, ForwardedRef, RefObject } from 'react';\nimport {\n FocusScope,\n mergeProps,\n useCollator,\n useLocale,\n useListBox,\n useFocusRing,\n ListKeyboardDelegate\n} from 'react-aria';\nimport { ListState, SelectionBehavior, useListState, Orientation, Node } from 'react-stately';\nimport { CollectionBuilder, Collection as AriaCollection } from '@react-aria/collections';\nimport { AriaListBoxProps } from '@react-types/listbox';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots, Slots } from '@bento/slots';\nimport { ListBoxItemImpl } from './listbox-item';\nimport { ListBoxSectionInner } from './listbox-section';\nimport { useSafeObjectRef } from './utils';\n\n/\n Render props provided to ListBox render functions and empty state renderers.\n * @interface ListBoxRenderProps\n /\nexport interface ListBoxRenderProps {\n /\n Whether the listbox has no items and should display its empty state.\n * @selector [data-empty]\n /\n readonly isEmpty: boolean;\n /\n Whether the listbox is currently focused.\n * @selector [data-focused]\n /\n readonly isFocused: boolean;\n /\n Whether the listbox is currently keyboard focused.\n * @selector [data-focus-visible]\n /\n readonly isFocusVisible: boolean;\n /\n Whether the listbox is currently the active drop target.\n * @selector [data-drop-target]\n /\n readonly isDropTarget: boolean;\n /\n Whether the items are arranged in a stack or grid.\n * @selector [data-layout=\"stack \| grid\"]\n /\n readonly layout?: 'stack' \| 'grid';\n /\n State of the listbox.\n /\n readonly state: ListState<unknown>;\n /\n The items array when using dynamic collections.\n /\n readonly items?: Iterable<unknown>;\n}\n\n/\n Props for the ListBox component.\n * @interface ListBoxProps\n * @template T The type of items in the collection\n /\nexport interface ListBoxProps<T>\n extends Omit<AriaListBoxProps<T>, 'label' \| 'children'>,\n Omit<React.ComponentProps<'div'>, keyof AriaListBoxProps<T> \| 'children'>,\n Slots {\n /\n How multiple selection should behave in the collection.\n /\n readonly selectionBehavior?: SelectionBehavior;\n /\n Provides content to display when there are no items in the list.\n /\n readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;\n /\n Whether the items are arranged in a stack layout.\n * @default 'stack'\n /\n readonly layout?: 'stack';\n /\n The primary orientation of the items. Usually this is the direction that the collection scrolls.\n * @default 'vertical'\n /\n readonly orientation?: Orientation;\n /\n Static children or render function for the ListBox.\n * When items prop is provided, children receives individual items for React Aria compatibility.\n * When no items prop is provided, children receives Bento render props { isEmpty, isFocused, state, etc. }.\n /\n readonly children?:\n \| React.ReactNode\n \| ((item: T) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n}\n\n/\n React context for sharing ListBox state across components.\n * This context provides the ListBox state to child components like ListBoxItem and ListBoxSection,\n * enabling them to access selection state, collection data, and other shared functionality.\n \n @context\n * @internal\n /\nconst ListStateContext = createContext<ListState<unknown> \| null>(null);\n\n/\n Custom hook to manage ListBox state creation and context handling.\n * This hook either uses an existing state from context or creates a new one.\n * It's designed to work both as a standalone component and within a parent component\n * that provides ListBox state through context.\n \n @param {Record<string, unknown>} props - Configuration object for the ListBox state\n * @returns {object} An object containing the state instance and context state flag\n * @returns {ListState<unknown>} returns.state - The ListBox state instance\n * @returns {ListState<unknown> \| null} returns.contextState - Existing context state, if any\n * @internal\n /\nfunction useListBoxState(props: Record<string, unknown>) {\n const contextState = useContext(ListStateContext);\n\n const stateProps = {\n ...props,\n children: undefined,\n items: undefined\n };\n\n const state = contextState ?? useListState(stateProps);\n\n return { state, contextState };\n}\n\n/\n Renders content with optional context provider wrapper.\n * If no context state exists, wraps the content in a ListStateContext.Provider.\n * This allows the ListBox to work both standalone and as part of a larger component tree.\n \n @param {React.ReactNode} content - The React content to render\n * @param {ListState<unknown>} state - The ListBox state to provide via context\n * @param {ListState<unknown> \| null} contextState - Existing context state, if any\n * @returns {React.ReactNode} The content, optionally wrapped in a context provider\n * @internal\n /\nfunction renderWithOptionalContext(\n content: React.ReactNode,\n state: ListState<unknown>,\n contextState: ListState<unknown> \| null\n): React.ReactNode {\n / v8 ignore next /\n return contextState ? content : <ListStateContext.Provider value={state}>{content}</ListStateContext.Provider>;\n}\n\n/\n Creates and memoizes a keyboard delegate for the ListBox.\n * The keyboard delegate handles keyboard navigation logic, including\n * arrow key navigation, home/end keys, and type-ahead functionality.\n \n @param {object} config - Configuration object for the keyboard delegate\n * @param {ListState<unknown>['collection']} config.collection - The collection of items in the ListBox\n * @param {Intl.Collator} config.collator - Intl collator for string comparison in type-ahead\n * @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to the ListBox DOM element\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager from the state\n * @param {'stack' \| 'grid'} [config.layout] - Layout mode (stack or grid)\n * @param {Orientation} [config.orientation] - Primary orientation of the items\n * @param {'ltr' \| 'rtl'} config.direction - Text direction (ltr or rtl)\n * @param {ListKeyboardDelegate<unknown>} [config.keyboardDelegate] - Custom keyboard delegate to use instead of default\n * @returns {ListKeyboardDelegate<unknown>} A keyboard delegate instance for handling keyboard interactions\n * @internal\n /\nfunction useKeyboardDelegate({\n collection,\n collator,\n listBoxRef,\n selectionManager,\n layout,\n orientation,\n direction,\n keyboardDelegate: providedDelegate\n}: {\n readonly collection: ListState<unknown>['collection'];\n readonly collator: Intl.Collator;\n readonly listBoxRef: React.RefObject<HTMLDivElement>;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly layout?: 'stack' \| 'grid';\n readonly orientation?: Orientation;\n readonly direction: 'ltr' \| 'rtl';\n readonly keyboardDelegate?: ListKeyboardDelegate<unknown>;\n}): ListKeyboardDelegate<unknown> {\n const { disabledBehavior, disabledKeys } = selectionManager;\n\n return useMemo(\n function createKeyboardDelegate() {\n return (\n providedDelegate \|\|\n new ListKeyboardDelegate({\n collection,\n collator,\n ref: listBoxRef,\n disabledKeys,\n disabledBehavior,\n layout,\n orientation,\n direction\n })\n );\n },\n [collection, collator, listBoxRef, selectionManager, orientation, direction, layout, providedDelegate]\n );\n}\n\n/\n Generates data attributes for the ListBox element based on its current state.\n * These attributes are used for styling selectors and accessibility indicators.\n \n @param {object} config - Configuration object containing ListBox state flags\n * @param {boolean} config.isEmpty - Whether the listbox has no items\n * @param {boolean} config.isFocused - Whether the listbox is currently focused\n * @param {boolean} config.isFocusVisible - Whether focus should be visually indicated\n * @param {'stack' \| 'grid'} [config.layout] - Layout mode (stack or grid)\n * @param {Orientation} [config.orientation] - Primary orientation of the items\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager containing selection state\n * @param {boolean} [config.allowsTabNavigation] - Whether tab navigation is enabled\n * @param {boolean} [config.shouldFocusWrap] - Whether focus wraps at boundaries\n * @param {SelectionBehavior} [config.originalSelectionBehavior] - Original selection behavior setting\n * @returns {Record<string, unknown>} Object with data attributes for the ListBox element\n * @internal\n /\nfunction useListBoxDataAttributes({\n isEmpty,\n isFocused,\n isFocusVisible,\n layout,\n orientation,\n selectionManager,\n allowsTabNavigation,\n shouldFocusWrap,\n originalSelectionBehavior\n}: {\n readonly isEmpty: boolean;\n readonly isFocused: boolean;\n readonly isFocusVisible: boolean;\n readonly layout?: 'stack' \| 'grid';\n readonly orientation?: Orientation;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly allowsTabNavigation?: boolean;\n readonly shouldFocusWrap?: boolean;\n readonly originalSelectionBehavior?: SelectionBehavior;\n}) {\n return useDataAttributes({\n empty: isEmpty,\n focused: isFocused,\n 'focus-visible': isFocusVisible,\n layout,\n orientation,\n 'selection-mode': selectionManager.selectionMode !== 'none' ? selectionManager.selectionMode : undefined,\n 'selection-behavior': originalSelectionBehavior !== undefined ? selectionManager.selectionBehavior : undefined,\n 'allows-tab-navigation': allowsTabNavigation,\n 'focus-wrap': shouldFocusWrap\n });\n}\n\n/\n Composes all props for the ListBox element including DOM props, ARIA props,\n * focus props, and data attributes. Handles prop application through useProps\n * and manages ref assignment to avoid proxy extensibility issues.\n \n @param {object} config - Configuration object containing all props to compose\n * @param {Record<string, unknown>} config.otherProps - Additional props from the component\n * @param {ListBoxRenderProps} config.renderValues - Values available to render functions\n * @param {Record<string, unknown>} config.listBoxProps - Props from useListBox hook\n * @param {Record<string, unknown>} config.focusProps - Props from useFocusRing hook\n * @param {Record<string, unknown>} config.dataAttributes - Data attributes for styling/selectors\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager for ARIA attributes\n * @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to attach to the final element\n * @returns {Record<string, unknown>} Composed props object ready for the ListBox element\n * @internal\n /\nfunction useComposedProps({\n otherProps,\n renderValues,\n listBoxProps,\n focusProps,\n dataAttributes,\n selectionManager,\n listBoxRef\n}: {\n readonly otherProps: Record<string, unknown>;\n readonly renderValues: ListBoxRenderProps;\n readonly listBoxProps: Record<string, unknown>;\n readonly focusProps: Record<string, unknown>;\n readonly dataAttributes: Record<string, unknown>;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly listBoxRef: React.RefObject<HTMLDivElement>;\n}) {\n const { apply } = useProps(otherProps, renderValues);\n\n const propsToExclude = [\n 'renderEmptyState',\n 'selectionMode',\n 'defaultSelectedKeys',\n 'disabledKeys',\n 'disallowEmptySelection',\n 'shouldFocusWrap',\n 'items',\n 'children',\n 'selectionBehavior',\n 'keyboardDelegate'\n ];\n\n // Apply user props directly (preserves className, style, etc.)\n const appliedUserProps = apply(otherProps, propsToExclude);\n\n // React Aria and Bento props\n const baseProps = {\n ...mergeProps(listBoxProps, focusProps),\n ...dataAttributes,\n ...(selectionManager.selectionMode !== 'none' && {\n 'aria-multiselectable': selectionManager.selectionMode === 'multiple'\n })\n };\n\n //\n // Merge all props together with user props taking precedence\n //\n const finalProps = {\n ...baseProps,\n ...appliedUserProps,\n ref: listBoxRef // Set ref directly to avoid extensibility issues\n };\n\n return finalProps;\n}\n\n/\n Renders the empty state content for the ListBox when no items are present.\n * Handles both function-based render props and direct JSX elements.\n * If a function is provided, calls it with render values; otherwise returns as-is.\n \n @param {(props: ListBoxRenderProps) => React.ReactNode} renderEmptyStateFn - Function or JSX element to render for empty state\n * @param {ListBoxRenderProps} renderValues - Current render values to pass to render function\n * @returns {React.ReactNode} Rendered empty state content\n * @internal\n /\nfunction renderEmptyState(\n renderEmptyStateFn: (props: ListBoxRenderProps) => React.ReactNode,\n renderValues: ListBoxRenderProps\n): React.ReactNode {\n //\n // Handle cases where renderEmptyState is not a function (e.g., JSX element passed directly)\n //\n if (typeof renderEmptyStateFn === 'function') {\n return renderEmptyStateFn(renderValues);\n }\n //\n // If it's not a function, just return it as-is (likely a JSX element)\n //\n return renderEmptyStateFn as React.ReactNode;\n}\n\n/\n Renders all items in the collection as React elements.\n * Handles both regular items and section items, using the appropriate\n * components (ListBoxItemImpl for items, ListBoxSectionInner for sections).\n \n @param {ListState<unknown>['collection']} collection - The collection of items to render\n * @returns {React.ReactElement[]} Array of rendered React elements for all collection items\n * @internal\n /\nfunction renderCollectionItems(collection: ListState<unknown>['collection']): React.ReactElement[] {\n return [...collection].map(function renderCollectionItem(item: Node<unknown>) {\n return item.type === 'section' ? (\n <ListBoxSectionInner key={item.key} section={item} />\n ) : (\n <ListBoxItemImpl key={item.key} __node={item as Node<object>}>\n {item.rendered}\n </ListBoxItemImpl>\n );\n });\n}\n\n/\n Determines what content to render inside the ListBox based on its configuration.\n * Handles three cases:\n * 1. Function children without items (Bento render prop pattern with full render props)\n * 2. Empty state when no items and renderEmptyState is provided\n * 3. Normal collection rendering (including items with children functions for React Aria compatibility)\n \n @param {object} config - Configuration object for rendering\n * @param {React.ReactNode \| ((item: unknown) => React.ReactNode) \| ((props: ListBoxRenderProps) => React.ReactNode)} [config.children] - Children prop (static, item render function, or ListBox render prop)\n * @param {Iterable<unknown>} [config.items] - Items array for dynamic collections\n * @param {boolean} config.isEmpty - Whether the collection is empty\n * @param {(props: ListBoxRenderProps) => React.ReactNode} [config.renderEmptyStateProp] - Function to render empty state\n * @param {ListBoxRenderProps} config.renderValues - Current render values for render functions\n * @param {ListState<unknown>['collection']} config.collection - The collection state to render\n * @returns {React.ReactNode} The appropriate content to render inside the ListBox\n * @internal\n /\nfunction renderListBoxContent({\n children,\n items,\n isEmpty,\n renderEmptyStateProp,\n renderValues,\n collection\n}: {\n readonly children?:\n \| React.ReactNode\n \| ((item: unknown) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n readonly items?: Iterable<unknown>;\n readonly isEmpty: boolean;\n readonly renderEmptyStateProp?: (props: ListBoxRenderProps) => React.ReactNode;\n readonly renderValues: ListBoxRenderProps;\n readonly collection: ListState<unknown>['collection'];\n}): React.ReactNode {\n // If children is a function AND no items provided, use Bento render prop pattern\n / v8 ignore next /\n const hasRenderChildren = typeof children === 'function' && !items;\n\n / v8 ignore next 3 /\n if (hasRenderChildren) {\n return (children as (props: ListBoxRenderProps) => React.ReactNode)(renderValues);\n }\n\n // Handle empty state\n if (isEmpty && renderEmptyStateProp) {\n return renderEmptyState(renderEmptyStateProp, renderValues);\n }\n\n // Render collection items (React Aria handles items + children function internally)\n return renderCollectionItems(collection);\n}\n\n/\n Internal ListBox component that handles the core rendering logic.\n * This component manages all the hooks, state, and prop composition needed\n * for a fully functional ListBox. It's wrapped by the main ListBox component\n * which handles collection building.\n \n @param {object} props - Component props\n * @param {ListState<unknown>} props.state - The ListBox state instance\n * @param {(props: ListBoxRenderProps) => React.ReactNode} [props.renderEmptyState] - Function to render when no items are present\n * @param {React.ReactNode \| ((item: unknown) => React.ReactNode) \| ((props: ListBoxRenderProps) => React.ReactNode)} [props.children] - Static children, item render function, or ListBox render function\n * @param {Iterable<unknown>} [props.items] - Items array for dynamic collections\n * @param {React.RefObject<HTMLDivElement>} props.listBoxRef - Reference to the ListBox DOM element\n * @param {'stack'} [props.layout] - Layout mode (stack or grid)\n * @param {Orientation} [props.orientation] - Primary orientation of the items\n * @param {boolean} [props.shouldSelectOnPressUp] - Whether selection occurs on pointer up\n * @param {ListKeyboardDelegate<unknown>} [props.keyboardDelegate] - Custom keyboard navigation delegate\n * @param {boolean} [props.allowsTabNavigation] - Whether tab key navigates between items\n * @param {boolean} [props.shouldFocusWrap] - Whether focus wraps at boundaries\n * @param {'none' \| 'single' \| 'multiple'} [props.selectionMode] - Selection mode (none, single, multiple)\n * @param {SelectionBehavior} [props.selectionBehavior] - Selection behavior (toggle, replace)\n * @returns {React.ReactElement} A fully functional ListBox element with focus scope\n * @internal\n /\nconst ListBoxInner: React.FC<{\n readonly state: ListState<unknown>;\n readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;\n readonly children?:\n \| React.ReactNode\n \| ((item: unknown) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n readonly items?: Iterable<unknown>;\n readonly listBoxRef: RefObject<HTMLDivElement>;\n readonly layout?: 'stack';\n readonly orientation?: Orientation;\n readonly shouldSelectOnPressUp?: boolean;\n readonly keyboardDelegate?: ListKeyboardDelegate<unknown>;\n readonly allowsTabNavigation?: boolean;\n readonly shouldFocusWrap?: boolean;\n readonly selectionMode?: 'none' \| 'single' \| 'multiple';\n readonly selectionBehavior?: SelectionBehavior;\n}> = function ListBoxInner({\n state,\n renderEmptyState: renderEmptyStateProp,\n children,\n items,\n listBoxRef,\n ...otherProps\n}) {\n const { layout = 'stack', orientation = 'vertical', shouldSelectOnPressUp, selectionBehavior } = otherProps;\n\n const { collection, selectionManager } = state;\n const { direction } = useLocale();\n const collator = useCollator({ usage: 'search', sensitivity: 'base' });\n\n const keyboardDelegate = useKeyboardDelegate({\n collection,\n collator,\n listBoxRef,\n selectionManager,\n layout,\n orientation,\n direction,\n keyboardDelegate: otherProps.keyboardDelegate\n });\n\n const { listBoxProps } = useListBox(\n {\n ...otherProps,\n shouldSelectOnPressUp,\n keyboardDelegate\n },\n state,\n listBoxRef\n );\n\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const isEmpty = state.collection.size === 0;\n\n const renderValues: ListBoxRenderProps = {\n isEmpty,\n isFocused,\n isFocusVisible,\n isDropTarget: false,\n layout,\n state,\n items\n };\n\n const dataAttributes = useListBoxDataAttributes({\n isEmpty,\n isFocused,\n isFocusVisible,\n layout,\n orientation,\n selectionManager,\n allowsTabNavigation: otherProps.allowsTabNavigation,\n shouldFocusWrap: otherProps.shouldFocusWrap,\n originalSelectionBehavior: selectionBehavior\n });\n\n const composedProps = useComposedProps({\n otherProps,\n renderValues,\n listBoxProps: listBoxProps as Record<string, unknown>,\n focusProps: focusProps as Record<string, unknown>,\n dataAttributes,\n selectionManager,\n listBoxRef\n });\n\n return (\n <FocusScope>\n <div {...composedProps}>\n {renderListBoxContent({\n children,\n items,\n isEmpty,\n renderEmptyStateProp,\n renderValues,\n collection\n })}\n </div>\n </FocusScope>\n );\n};\n\n/\n A complete ListBox component providing accessible selection lists with keyboard navigation.\n * Supports both static children and dynamic collections, with single/multiple selection modes.\n * Built on React Aria with full ARIA compliance and keyboard accessibility.\n \n @component\n * @template T The type of items in the collection\n * @param {ListBoxProps<T>} args - The properties passed to the ListBox component\n * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref to the listbox container\n * @returns {React.ReactElement} A ListBox component\n \n @example\n * ```tsx\n * <ListBox aria-label=\"Fruits\" selectionMode=\"single\">\n * <ListBoxItem id=\"apple\" textValue=\"Apple\">Apple</ListBoxItem>\n * <ListBoxItem id=\"banana\" textValue=\"Banana\">Banana</ListBoxItem>\n * </ListBox>\n * ```\n * @public\n /\nfunction ListBoxComponent<T>(args: ListBoxProps<T>, ref: React.ForwardedRef<HTMLDivElement>): React.ReactElement {\n return (\n <CollectionBuilder content={<AriaCollection {...(args as unknown as Parameters<typeof AriaCollection>[0])} />}>\n {function buildCollection(collection: unknown) {\n return <StandaloneListBox props={args as ListBoxProps<unknown>} listBoxRef={ref} collection={collection} />;\n }}\n </CollectionBuilder>\n );\n}\n\n/\n Standalone ListBox component that manages its own state and collection.\n * This component is used internally by the main ListBox component after\n * collection building is complete. It handles prop processing, state creation,\n * and context management.\n \n @param {object} props - Component props\n * @param {ListBoxProps<unknown>} props.props - The original ListBox props\n * @param {React.ForwardedRef<HTMLDivElement>} props.listBoxRef - Reference to forward to the ListBox element\n * @param {unknown} props.collection - Built collection from CollectionBuilder\n * @returns {React.ReactElement} A complete ListBox with state management and optional context wrapping\n * @internal\n /\nconst StandaloneListBox: React.FC<{\n readonly props: ListBoxProps<unknown>;\n readonly listBoxRef: ForwardedRef<HTMLDivElement>;\n readonly collection: unknown;\n}> = function StandaloneListBox({ props, listBoxRef, collection }) {\n //\n // Extract renderEmptyState before useProps processes it to avoid render prop corruption\n //\n const originalRenderEmptyState = props.renderEmptyState;\n\n const { props: processedProps } = useProps(props);\n const processedRef = useSafeObjectRef(listBoxRef);\n const { state, contextState } = useListBoxState({ ...processedProps, collection });\n\n const { renderEmptyState: _, ...cleanProcessedProps } = processedProps as ListBoxProps<unknown> & {\n renderEmptyState?: unknown;\n };\n\n const content = (\n <ListBoxInner\n state={state}\n listBoxRef={processedRef}\n renderEmptyState={originalRenderEmptyState}\n {...cleanProcessedProps}\n />\n );\n\n return renderWithOptionalContext(content, state, contextState);\n};\n\n/\n A complete ListBox component providing accessible selection lists with keyboard navigation.\n * Supports both static children and dynamic collections, with single/multiple selection modes.\n * Built on React Aria with full ARIA compliance and keyboard accessibility.\n \n @component\n * @example\n * ```tsx\n * <ListBox aria-label=\"Fruits\" selectionMode=\"single\">\n * <ListBoxItem id=\"apple\" textValue=\"Apple\">Apple</ListBoxItem>\n * <ListBoxItem id=\"banana\" textValue=\"Banana\">Banana</ListBoxItem>\n * </ListBox>\n * ```\n * @public\n /\nexport const ListBox = withSlots('BentoListBox', ListBoxComponent);\n\n/\n Collection component for building dynamic collections in ListBox.\n * Re-exported from React Aria Collections.\n * @public\n /\nexport { AriaCollection as Collection };\n\n/\n Context for sharing ListBox state across components.\n * Used internally by ListBoxItem and ListBoxSection components.\n * @public\n /\nexport { ListStateContext };\n","import React, { ForwardedRef, ReactNode, createContext, useContext, useMemo } from 'react';\nimport { mergeProps, useOption, useHover } from 'react-aria';\nimport { createLeafComponent } from '@react-aria/collections';\nimport { HoverEvents, Key, LinkDOMProps, Node } from '@react-types/shared';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { ListStateContext } from './listbox';\nimport { useSafeObjectRef } from './utils';\nimport { withSlots } from '@bento/slots';\n\n/\n Context value structure for text-related slot attributes.\n * Used to provide label and description attributes to child components.\n * @interface TextContextValue\n /\ninterface TextContextValue {\n readonly slots: {\n /* Attributes for label elements /\n readonly label?: React.HTMLAttributes<HTMLElement>;\n /* Attributes for description elements /\n readonly description?: React.HTMLAttributes<HTMLElement>;\n };\n}\n\n/\n Internal context for providing text-related slot attributes to child components.\n * This context allows ListBoxItem to pass label and description attributes\n * to nested components that need them for accessibility.\n * @internal\n /\nconst TextContext = createContext<TextContextValue>({ slots: {} });\n\n/\n Render props provided to ListBoxItem render functions.\n * @interface ListBoxItemRenderProps\n /\nexport interface ListBoxItemRenderProps {\n /\n Whether the item is currently hovered.\n * @selector [data-hovered]\n /\n readonly isHovered: boolean;\n /\n Whether the item is currently pressed.\n * @selector [data-pressed]\n /\n readonly isPressed: boolean;\n /\n Whether the item is currently selected.\n * @selector [data-selected]\n /\n readonly isSelected: boolean;\n /\n Whether the item is currently focused.\n * @selector [data-focused]\n /\n readonly isFocused: boolean;\n /\n Whether the item is currently keyboard focused.\n * @selector [data-focus-visible]\n /\n readonly isFocusVisible: boolean;\n /\n Whether the item is disabled.\n * @selector [data-disabled]\n /\n readonly isDisabled: boolean;\n /\n The type of selection that is allowed in the collection.\n * @selector [data-selection-mode=\"none \| single \| multiple\"]\n /\n readonly selectionMode: 'none' \| 'single' \| 'multiple';\n /\n The selection behavior for the collection.\n * @selector [data-selection-behavior=\"toggle \| replace\"]\n /\n readonly selectionBehavior: 'toggle' \| 'replace';\n}\n\n/\n Props for the ListBoxItem component.\n * @interface ListBoxItemProps\n * @template T The type of the item value\n /\nexport interface ListBoxItemProps<T = object>\n extends LinkDOMProps,\n HoverEvents,\n Omit<React.HTMLAttributes<HTMLElement>, keyof LinkDOMProps \| keyof HoverEvents \| 'id' \| 'children'> {\n /* The unique id of the item. If not provided, React Aria will auto-generate one. /\n readonly id?: Key;\n /* The object value that this item represents. When using dynamic collections, this is set automatically. /\n readonly value?: T;\n /* A string representation of the item's contents, used for features like typeahead. If not provided, React Aria will derive it from children automatically. /\n readonly textValue?: string;\n /\n Handler that is called when a user performs an action on the item. The exact user event depends on the\n * collection's `selectionBehavior` prop and the interaction modality.\n /\n readonly onAction?: () => void;\n /* The contents of the item. Can be a render function that receives render props. /\n readonly children?: ReactNode \| ((values: ListBoxItemRenderProps) => ReactNode);\n /\n A slot name for the component. Used by Bento's slot system.\n /\n readonly slot?: string;\n /* Whether the item is disabled. /\n readonly isDisabled?: boolean;\n}\n\n/\n Internal implementation component for ListBoxItem.\n * Handles the core logic for rendering a single listbox item with proper accessibility.\n * This component manages all the hooks, state, and interactions needed for a functional\n * listbox item including selection, hover, focus, and keyboard interactions.\n \n @template T - The type of the item value\n * @param {object} props - Combined ListBoxItem props and internal node data\n * @param {Node<T>} props.__node - Internal React Aria node containing item metadata\n * @param {React.ReactNode \| ((values: ListBoxItemRenderProps) => React.ReactNode)} [props.children] - Content to render, can be static or a render function\n * @param {boolean} [props.isDisabled] - Whether the item is disabled\n * @param {string} [props.aria-label] - ARIA label for accessibility\n * @param {(e: HoverEvent) => void} [props.onHoverStart] - Handler for hover start events\n * @param {(isHovering: boolean) => void} [props.onHoverChange] - Handler for hover change events\n * @param {(e: HoverEvent) => void} [props.onHoverEnd] - Handler for hover end events\n * @param {React.ForwardedRef<HTMLDivElement>} ref - Forwarded ref to the item element\n * @returns {React.ReactElement} A fully interactive listbox item with accessibility and state management\n * @internal\n /\nconst ListBoxItemImplComponent = function ListBoxItemImplComponent<T extends object>(\n { __node, ...props }: ListBoxItemProps<T> & { readonly __node: Node<T> },\n ref: ForwardedRef<HTMLDivElement>\n) {\n const state = useContext(ListStateContext)!;\n const safeRef = useSafeObjectRef(ref);\n\n const { optionProps, labelProps, descriptionProps, ...states } = useOption(\n {\n key: __node.key,\n 'aria-label': props['aria-label'],\n isDisabled: props.isDisabled\n },\n state,\n safeRef\n );\n\n const { hoverProps, isHovered } = useHover({\n isDisabled: states.isDisabled,\n onHoverStart: props.onHoverStart,\n onHoverChange: props.onHoverChange,\n onHoverEnd: props.onHoverEnd\n });\n\n const renderValues: ListBoxItemRenderProps = {\n ...states,\n isHovered,\n selectionMode: state.selectionManager.selectionMode,\n selectionBehavior: state.selectionManager.selectionBehavior\n };\n\n const content = typeof props.children === 'function' ? props.children(renderValues) : props.children;\n\n const { apply } = useProps(props, renderValues);\n\n const dataAttributes = useDataAttributes({\n selected: states.isSelected,\n disabled: states.isDisabled,\n hovered: isHovered,\n focused: states.isFocused,\n 'focus-visible': states.isFocusVisible,\n pressed: states.isPressed,\n level: __node.level,\n 'selection-mode': state.selectionManager.selectionMode,\n 'selection-behavior': state.selectionManager.selectionBehavior\n });\n\n const textContext = useMemo(\n function createTextContext() {\n return {\n slots: {\n label: labelProps,\n description: descriptionProps\n }\n };\n },\n [labelProps, descriptionProps]\n );\n\n const ElementType = __node.props.href ? 'a' : 'div';\n\n // Use original node props (which contain className) not filtered finalProps\n const appliedUserProps = apply(__node.props, ['ref']);\n\n const finalAttributes = {\n ...mergeProps(optionProps, hoverProps), // React Aria props\n ...dataAttributes, // Bento data attributes\n ...appliedUserProps,\n ref: safeRef,\n 'data-text-value': __node.textValue\n };\n\n return (\n <TextContext.Provider value={textContext}>\n {React.createElement(ElementType, finalAttributes, content)}\n </TextContext.Provider>\n );\n};\n\n/\n Enhanced ListBoxItem implementation with slots support.\n * This wraps the core ListBoxItemImplComponent with Bento's slot system\n * for advanced composition and styling capabilities.\n * @internal\n /\nexport const ListBoxItemImpl = withSlots('BentoListBoxItem', ListBoxItemImplComponent);\n\n/\n Adapter component that connects ListBoxItemImpl to React Aria's collection system.\n * This function serves as a bridge between React Aria's createLeafComponent and\n * the internal ListBoxItemImpl, ensuring proper prop forwarding and node injection.\n \n @template T - The type of the item value\n * @param {ListBoxItemProps<T>} props - ListBoxItem component props\n * @param {React.ForwardedRef<HTMLDivElement>} forwardedRef - Ref forwarded from the collection system\n * @param {Node<T>} item - React Aria node containing item metadata and collection info\n * @returns {React.ReactElement} The ListBoxItemImpl component with proper node and ref wiring\n * @internal\n /\nfunction ListBoxItemComponent<T extends object>(\n props: ListBoxItemProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n item: Node<T>\n) {\n return <ListBoxItemImpl {...props} ref={forwardedRef as any} __node={item} />;\n}\n\n/\n Base ListBoxItem component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state.\n * @internal\n /\nconst ListBoxItemBase = createLeafComponent('item', ListBoxItemComponent);\n\n/\n A single item within a ListBox component.\n * Handles user interactions, accessibility, and state management for individual options.\n \n @component\n * @template T The type of the item value\n * @example\n * ```tsx\n * <ListBoxItem>Simple option</ListBoxItem>\n * ```\n * @public\n */\nexport const ListBoxItem = ListBoxItemBase;\n"]}

package/dist/index.d.cts CHANGED Viewed

@@ -224,7 +224,7 @@ interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'label' | 'children'
  * ```
  * @public
  */
-declare const ListBox: React.NamedExoticComponent<ListBoxProps<unknown> & Slots>;
+declare const ListBox: React.MemoExoticComponent<React.ComponentType<ListBoxProps<unknown> & Slots>>;
 /**
  * Props for the ListBoxSection component.

package/dist/index.d.ts CHANGED Viewed

@@ -224,7 +224,7 @@ interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'label' | 'children'
  * ```
  * @public
  */
-declare const ListBox: React.NamedExoticComponent<ListBoxProps<unknown> & Slots>;
+declare const ListBox: React.MemoExoticComponent<React.ComponentType<ListBoxProps<unknown> & Slots>>;
 /**
  * Props for the ListBoxSection component.

package/dist/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React4, { createContext, forwardRef, useContext, useRef, useMemo, useEffect } from 'react';
+import React4, { createContext, useContext, useRef, useMemo, useEffect } from 'react';
 import { createLeafComponent, createBranchComponent, CollectionBuilder, Collection } from '@react-aria/collections';
 export { Collection } from '@react-aria/collections';
 import { useProps } from '@bento/use-props';
@@ -12,7 +12,7 @@ import { CollectionRendererContext } from 'react-aria-components';
 var HeaderContext = createContext({});
 var BentoHeaderImpl = withSlots(
   "BentoHeader",
-  forwardRef(function BentoHeader(props, ref) {
+  function BentoHeader(props, ref) {
     const { props: processedProps, apply } = useProps(props);
     const contextProps = useContext(HeaderContext);
     const appliedUserProps = apply(processedProps);
@@ -22,29 +22,26 @@ var BentoHeaderImpl = withSlots(
       // User props take precedence over context
     };
     return /* @__PURE__ */ React4.createElement("header", { ...composed, ref: contextProps.ref || ref }, processedProps.children);
-  })
+  }
 );
 function HeaderWrapper(props, ref) {
   return /* @__PURE__ */ React4.createElement(BentoHeaderImpl, { ...props, ref });
 }
 var HeaderBase = createLeafComponent("header", HeaderWrapper);
 var Header = HeaderBase;
-var BentoListBoxSectionImpl = withSlots(
-  "BentoListBoxSection",
-  forwardRef(function BentoListBoxSectionImpl2({ __node, children, title: titleProp, ...rest }, ref) {
-    const { props, apply } = useProps(rest);
-    const data = useDataAttributes({ level: __node?.level });
-    const headingRef = useRef(null);
-    const title = titleProp ?? props.title ?? __node?.rendered;
-    const { groupProps, headingProps } = useListBoxSection({
-      heading: title,
-      "aria-label": props["aria-label"]
-    });
-    const composed = mergeProps(apply({ ...data, ...props }, ["children", "title", "slot"]), groupProps);
-    const sectionContent = children || props.children;
-    return /* @__PURE__ */ React4.createElement("section", { ...composed, ref }, /* @__PURE__ */ React4.createElement(HeaderContext.Provider, { value: { ...headingProps, ref: headingRef } }, title && /* @__PURE__ */ React4.createElement("div", { ...headingProps }, title), sectionContent));
-  })
-);
+var BentoListBoxSectionImpl = withSlots("BentoListBoxSection", function BentoListBoxSectionImpl2({ __node, children, title: titleProp, ...rest }, ref) {
+  const { props, apply } = useProps(rest);
+  const data = useDataAttributes({ level: __node?.level });
+  const headingRef = useRef(null);
+  const title = titleProp ?? props.title ?? __node?.rendered;
+  const { groupProps, headingProps } = useListBoxSection({
+    heading: title,
+    "aria-label": props["aria-label"]
+  });
+  const composed = mergeProps(apply({ ...data, ...props }, ["children", "title", "slot"]), groupProps);
+  const sectionContent = children || props.children;
+  return /* @__PURE__ */ React4.createElement("section", { ...composed, ref }, /* @__PURE__ */ React4.createElement(HeaderContext.Provider, { value: { ...headingProps, ref: headingRef } }, title && /* @__PURE__ */ React4.createElement("div", { ...headingProps }, title), sectionContent));
+});
 function ListBoxSectionWrapper(props, ref, section) {
   return /* @__PURE__ */ React4.createElement(BentoListBoxSectionImpl, { ...props, __node: section, ref });
 }
@@ -358,7 +355,7 @@ var ListBoxItemImplComponent = function ListBoxItemImplComponent2({ __node, ...p
   };
   return /* @__PURE__ */ React4.createElement(TextContext.Provider, { value: textContext }, React4.createElement(ElementType, finalAttributes, content));
 };
-var ListBoxItemImpl = withSlots("BentoListBoxItem", forwardRef(ListBoxItemImplComponent));
+var ListBoxItemImpl = withSlots("BentoListBoxItem", ListBoxItemImplComponent);
 function ListBoxItemComponent(props, forwardedRef, item) {
   return /* @__PURE__ */ React4.createElement(ListBoxItemImpl, { ...props, ref: forwardedRef, __node: item });
 }

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/header.tsx","../src/listbox-section.tsx","../src/utils.ts","../src/listbox.tsx","../src/listbox-item.tsx"],"names":["React","withSlots","forwardRef","BentoListBoxSectionImpl","useProps","ListBoxSectionInner","useContext","useRef","createContext","useDataAttributes","mergeProps","ListBoxInner","AriaCollection","StandaloneListBox","ListBoxItemImplComponent","useMemo","createLeafComponent"],"mappings":"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","file":"index.js","sourcesContent":["import React, { forwardRef, createContext, useContext } from 'react';\nimport { createLeafComponent } from '@react-aria/collections';\nimport { useProps } from '@bento/use-props';\nimport { withSlots, type Slots } from '@bento/slots';\n\n/*\n Props for the Header component.\n * @interface HeaderProps\n /\nexport interface HeaderProps extends Slots, React.ComponentProps<'header'> {\n /\n The children of the header.\n /\n readonly children?: React.ReactNode;\n}\n\n/\n Context value structure for Header components.\n * Extends HTML attributes to support all standard header element properties.\n * @interface HeaderContextValue\n /\ninterface HeaderContextValue extends React.HTMLAttributes<HTMLElement> {\n /\n Reference to the header element for forwarding.\n /\n readonly ref?: React.RefObject<HTMLDivElement>;\n}\n\n/\n Combined props type for the internal BentoHeader implementation.\n * Merges Header-specific props with standard HTML attributes to provide\n * a comprehensive interface for the internal header component.\n \n @type BentoHeaderProps\n * @internal\n /\ntype BentoHeaderProps = HeaderProps & React.HTMLAttributes<HTMLElement>;\n\n/\n React context for providing header-related attributes and refs to Header components.\n * Used internally by ListBoxSection to pass heading props to Header elements.\n * @public\n /\nexport const HeaderContext = createContext<HeaderContextValue>({});\n\n/\n Internal implementation of the BentoHeader component with slots support.\n * This component handles prop processing and context integration.\n * It merges props from useProps and HeaderContext while preserving styling props.\n \n @internal\n /\nconst BentoHeaderImpl = withSlots(\n 'BentoHeader',\n forwardRef(function BentoHeader(props: BentoHeaderProps, ref: React.ForwardedRef<HTMLElement>) {\n const { props: processedProps, apply } = useProps(props);\n const contextProps = useContext(HeaderContext);\n\n // Apply user props directly (preserves className, style, etc.)\n const appliedUserProps = apply(processedProps);\n\n const composed = {\n ...contextProps,\n ...appliedUserProps // User props take precedence over context\n };\n\n return (\n <header {...composed} ref={contextProps.ref \|\| ref}>\n {processedProps.children}\n </header>\n );\n })\n);\n\n/\n Wrapper component that connects the BentoHeaderImpl to React Aria's collection system.\n * This function serves as an adapter between the createLeafComponent system and\n * the internal BentoHeaderImpl component, ensuring proper prop forwarding and ref handling.\n \n @param {HeaderProps} props - Header component props\n * @param {React.ReactNode} [props.children] - React children to render inside the header\n * @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element\n * @returns {React.ReactElement} The BentoHeaderImpl component with forwarded props and ref\n * @internal\n /\nfunction HeaderWrapper(props: HeaderProps, ref: React.ForwardedRef<HTMLElement>) {\n return <BentoHeaderImpl {...props} ref={ref} />;\n}\n\n/\n A Header represents a heading for a section within a ListBox.\n * Uses React Aria's createLeafComponent for automatic collection handling.\n \n @component\n * @param {HeaderProps} props - The props for the Header component\n * @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element\n * @returns {JSX.Element} A header element with proper accessibility attributes\n \n @example\n * ```tsx\n * <Header>My Section Title</Header>\n * ```\n * @public\n /\n/\n Base Header component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state and\n * integrates with the collection rendering system.\n * @internal\n /\nconst HeaderBase = createLeafComponent('header', HeaderWrapper);\n\n/\n A Header component for section headings within a ListBox.\n * Provides semantic header structure with proper accessibility attributes\n * and integrates with React Aria's collection system for automatic handling.\n \n This is the main public interface for creating headers in ListBox sections.\n * It automatically receives heading props from the parent ListBoxSection via HeaderContext.\n \n @component\n * @example\n * ```tsx\n * <ListBoxSection>\n * <Header>Fruits</Header>\n * <ListBoxItem>Apple</ListBoxItem>\n * <ListBoxItem>Banana</ListBoxItem>\n * </ListBoxSection>\n * ```\n * @public\n /\nexport const Header = HeaderBase as React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;\n","import React, { forwardRef, useRef, useContext } from 'react';\nimport { useListBoxSection, mergeProps } from 'react-aria';\nimport { createBranchComponent } from '@react-aria/collections';\nimport { CollectionRendererContext } from 'react-aria-components';\nimport type { Node } from '@react-types/shared';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport { HeaderContext } from './header';\nimport { ListStateContext } from './listbox';\n\n/\n Props for the ListBoxSection component.\n * @interface ListBoxSectionProps\n /\nexport interface ListBoxSectionProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n /\n A slot name for the component. Used by Bento's slot system.\n /\n readonly slot?: string;\n /\n The title of the section.\n /\n readonly title?: React.ReactNode;\n /\n The children of the section.\n /\n readonly children?: React.ReactNode;\n}\n\n/\n Internal props interface for BentoListBoxSectionImpl component.\n * Extends ListBoxSectionProps with internal React Aria node data and allows\n * additional properties for flexibility in prop handling.\n \n @interface BentoListBoxSectionImplProps\n * @template T - The type of the section node data\n * @internal\n /\ninterface BentoListBoxSectionImplProps<T = unknown> extends ListBoxSectionProps {\n readonly __node?: Node<T>;\n readonly [key: string]: unknown;\n}\n\n/\n Props interface for the ListBoxSectionInner component.\n * Contains the React Aria section node that represents this section\n * in the collection hierarchy for dynamic rendering.\n \n @interface ListBoxSectionInnerProps\n * @internal\n /\ninterface ListBoxSectionInnerProps {\n readonly section: Node<unknown>;\n}\n\n/\n Internal implementation of the BentoListBoxSection component with slots support.\n * This component handles the core logic for rendering a section within a ListBox,\n * including title rendering, accessibility attributes, and child content management.\n * It integrates with React Aria's useListBoxSection hook for proper ARIA compliance.\n \n @internal\n /\nconst BentoListBoxSectionImpl = withSlots(\n 'BentoListBoxSection',\n forwardRef(function BentoListBoxSectionImpl<T>(\n { __node, children, title: titleProp, ...rest }: BentoListBoxSectionImplProps<T>,\n ref: React.ForwardedRef<HTMLElement>\n ) {\n const { props, apply } = useProps(rest);\n const data = useDataAttributes({ level: __node?.level });\n const headingRef = useRef<HTMLDivElement>(null);\n\n const title = titleProp ?? props.title ?? __node?.rendered;\n const { groupProps, headingProps } = useListBoxSection({\n heading: title,\n 'aria-label': props['aria-label']\n });\n\n const composed = mergeProps(apply({ ...data, ...props }, ['children', 'title', 'slot']), groupProps);\n\n const sectionContent = children \|\| props.children;\n\n return (\n <section {...composed} ref={ref}>\n <HeaderContext.Provider value={{ ...headingProps, ref: headingRef }}>\n {title && <div {...headingProps}>{title}</div>}\n {sectionContent}\n </HeaderContext.Provider>\n </section>\n );\n })\n);\n\n/\n Wrapper component that connects BentoListBoxSectionImpl to React Aria's collection system.\n * This function serves as an adapter between createBranchComponent and the internal\n * BentoListBoxSectionImpl, ensuring proper prop forwarding and node injection for sections.\n \n @template T - The type of the section node data\n * @param {ListBoxSectionProps} props - ListBoxSection component props\n * @param {string} [props.slot] - Slot name for Bento's slot system\n * @param {React.ReactNode} [props.title] - Title for the section\n * @param {React.ReactNode} [props.children] - Children to render in the section\n * @param {string} [props.aria-label] - ARIA label for accessibility\n * @param {React.ForwardedRef<HTMLElement>} ref - Ref forwarded from the collection system\n * @param {Node<T>} section - React Aria node containing section metadata and collection info\n * @returns {React.ReactElement} The BentoListBoxSectionImpl component with proper node and ref wiring\n * @internal\n /\n/ v8 ignore start /\nfunction ListBoxSectionWrapper<T extends object>(\n props: ListBoxSectionProps,\n ref: React.ForwardedRef<HTMLElement>,\n section: Node<T>\n) {\n return <BentoListBoxSectionImpl {...props} __node={section} ref={ref} />;\n}\n/ v8 ignore stop /\n\n/\n Base ListBoxSection component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state and\n * manages the branch structure for nested items.\n * @internal\n /\nconst ListBoxSectionBase = createBranchComponent('section', ListBoxSectionWrapper);\n\n/\n Internal component for rendering dynamic collection sections.\n * This component is used specifically for sections that are part of a dynamic collection,\n * connecting to the ListStateContext and CollectionRendererContext to properly render\n * nested items through React Aria's collection system.\n \n @component\n * @param {object} props - The component props containing the section node\n * @param {Node<unknown>} props.section - The React Aria node representing this section in the collection\n * @throws {BentoError} Throws an error if used outside of a ListBox context\n * @returns {React.ReactElement} JSX element representing a dynamically rendered listbox section\n * @internal\n /\nexport const ListBoxSectionInner: React.FC<ListBoxSectionInnerProps> = function ListBoxSectionInner({ section }) {\n const state = useContext(ListStateContext);\n const { CollectionBranch } = useContext(CollectionRendererContext);\n\n return (\n <BentoListBoxSectionImpl {...section.props} __node={section}>\n {CollectionBranch && state?.collection ? (\n <CollectionBranch collection={state.collection} parent={section} />\n ) : null}\n </BentoListBoxSectionImpl>\n );\n};\n\n/\n A section component for organizing related items within a ListBox.\n \n @component\n * @example\n * ```tsx\n * <ListBoxSection title=\"Fruits\">\n * <ListBoxItem>Apple</ListBoxItem>\n * <ListBoxItem>Banana</ListBoxItem>\n * </ListBoxSection>\n * ```\n * @public\n /\nexport const ListBoxSection = ListBoxSectionBase as <_T extends object>(\n props: ListBoxSectionProps & { children?: React.ReactNode }\n) => React.ReactElement;\n","/ v8 ignore next /\nimport React, { type ForwardedRef, useEffect, useRef } from 'react';\n\n/\n NOTE: This utility will be moved to the new use-collection package.\n * Safe wrapper for React Aria's useObjectRef that handles test environments where refs are not extensible.\n \n Critical for Vitest Browser Mode Testing: When running tests in Vitest's browser mode with Playwright,\n * the test environment can freeze or make objects non-extensible. React Aria's `useObjectRef` attempts to\n * dynamically add properties to ref objects, which fails with \"Cannot add property current, object is not extensible\"\n * in these constrained test environments.\n \n Technical Details:\n * - Vitest browser mode uses Playwright's Chrome DevTools Protocol for test execution\n * - The V8 engine's security model can freeze objects during test isolation\n * - React Aria's useObjectRef uses `Object.defineProperty()` to add reactive properties to refs\n * - This conflicts with frozen objects in browser testing scenarios\n \n Why This Solution Works:\n * - Creates an internal ref that's always mutable (created in our controlled environment)\n * - Safely forwards values to the external ref using try/catch for frozen object scenarios\n * - Maintains the same ref forwarding behavior as React Aria's useObjectRef in normal environments\n * - Gracefully degrades in test environments without breaking functionality\n \n Production Impact: Zero. Object freezing only occurs in specific test configurations.\n * In production and development, this behaves identically to React Aria's useObjectRef.\n \n @template T - The type of the ref element\n * @param {React.ForwardedRef<T>} ref - The forwarded ref to handle safely\n * @returns {React.RefObject<T>} A safe ref object that works in all environments including frozen test contexts\n * @public\n /\nexport function useSafeObjectRef<T>(ref: ForwardedRef<T>): React.RefObject<T> {\n const internalRef = useRef<T>(null);\n\n useEffect(function updateForwardedRef() {\n const current = internalRef.current;\n\n if (typeof ref === 'function') {\n ref(current);\n } else if (ref && 'current' in ref) {\n try {\n (ref as React.MutableRefObject<T \| null>).current = current;\n / v8 ignore start /\n } catch {\n //\n // Silently ignore errors in test environments where objects might be frozen.\n // This specifically handles Vitest browser mode with Playwright where the V8 engine\n // may freeze ref objects during test isolation, preventing dynamic property assignment.\n //\n }\n / v8 ignore stop /\n }\n });\n\n return internalRef;\n}\n","import React, { createContext, useContext, useMemo, ForwardedRef, RefObject } from 'react';\nimport {\n FocusScope,\n mergeProps,\n useCollator,\n useLocale,\n useListBox,\n useFocusRing,\n ListKeyboardDelegate\n} from 'react-aria';\nimport { ListState, SelectionBehavior, useListState, Orientation, Node } from 'react-stately';\nimport { CollectionBuilder, Collection as AriaCollection } from '@react-aria/collections';\nimport { AriaListBoxProps } from '@react-types/listbox';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots, Slots } from '@bento/slots';\nimport { ListBoxItemImpl } from './listbox-item';\nimport { ListBoxSectionInner } from './listbox-section';\nimport { useSafeObjectRef } from './utils';\n\n/\n Render props provided to ListBox render functions and empty state renderers.\n * @interface ListBoxRenderProps\n /\nexport interface ListBoxRenderProps {\n /\n Whether the listbox has no items and should display its empty state.\n * @selector [data-empty]\n /\n readonly isEmpty: boolean;\n /\n Whether the listbox is currently focused.\n * @selector [data-focused]\n /\n readonly isFocused: boolean;\n /\n Whether the listbox is currently keyboard focused.\n * @selector [data-focus-visible]\n /\n readonly isFocusVisible: boolean;\n /\n Whether the listbox is currently the active drop target.\n * @selector [data-drop-target]\n /\n readonly isDropTarget: boolean;\n /\n Whether the items are arranged in a stack or grid.\n * @selector [data-layout=\"stack \| grid\"]\n /\n readonly layout?: 'stack' \| 'grid';\n /\n State of the listbox.\n /\n readonly state: ListState<unknown>;\n /\n The items array when using dynamic collections.\n /\n readonly items?: Iterable<unknown>;\n}\n\n/\n Props for the ListBox component.\n * @interface ListBoxProps\n * @template T The type of items in the collection\n /\nexport interface ListBoxProps<T>\n extends Omit<AriaListBoxProps<T>, 'label' \| 'children'>,\n Omit<React.ComponentProps<'div'>, keyof AriaListBoxProps<T> \| 'children'>,\n Slots {\n /\n How multiple selection should behave in the collection.\n /\n readonly selectionBehavior?: SelectionBehavior;\n /\n Provides content to display when there are no items in the list.\n /\n readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;\n /\n Whether the items are arranged in a stack layout.\n * @default 'stack'\n /\n readonly layout?: 'stack';\n /\n The primary orientation of the items. Usually this is the direction that the collection scrolls.\n * @default 'vertical'\n /\n readonly orientation?: Orientation;\n /\n Static children or render function for the ListBox.\n * When items prop is provided, children receives individual items for React Aria compatibility.\n * When no items prop is provided, children receives Bento render props { isEmpty, isFocused, state, etc. }.\n /\n readonly children?:\n \| React.ReactNode\n \| ((item: T) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n}\n\n/\n React context for sharing ListBox state across components.\n * This context provides the ListBox state to child components like ListBoxItem and ListBoxSection,\n * enabling them to access selection state, collection data, and other shared functionality.\n \n @context\n * @internal\n /\nconst ListStateContext = createContext<ListState<unknown> \| null>(null);\n\n/\n Custom hook to manage ListBox state creation and context handling.\n * This hook either uses an existing state from context or creates a new one.\n * It's designed to work both as a standalone component and within a parent component\n * that provides ListBox state through context.\n \n @param {Record<string, unknown>} props - Configuration object for the ListBox state\n * @returns {object} An object containing the state instance and context state flag\n * @returns {ListState<unknown>} returns.state - The ListBox state instance\n * @returns {ListState<unknown> \| null} returns.contextState - Existing context state, if any\n * @internal\n /\nfunction useListBoxState(props: Record<string, unknown>) {\n const contextState = useContext(ListStateContext);\n\n const stateProps = {\n ...props,\n children: undefined,\n items: undefined\n };\n\n const state = contextState ?? useListState(stateProps);\n\n return { state, contextState };\n}\n\n/\n Renders content with optional context provider wrapper.\n * If no context state exists, wraps the content in a ListStateContext.Provider.\n * This allows the ListBox to work both standalone and as part of a larger component tree.\n \n @param {React.ReactNode} content - The React content to render\n * @param {ListState<unknown>} state - The ListBox state to provide via context\n * @param {ListState<unknown> \| null} contextState - Existing context state, if any\n * @returns {React.ReactNode} The content, optionally wrapped in a context provider\n * @internal\n /\nfunction renderWithOptionalContext(\n content: React.ReactNode,\n state: ListState<unknown>,\n contextState: ListState<unknown> \| null\n): React.ReactNode {\n / v8 ignore next /\n return contextState ? content : <ListStateContext.Provider value={state}>{content}</ListStateContext.Provider>;\n}\n\n/\n Creates and memoizes a keyboard delegate for the ListBox.\n * The keyboard delegate handles keyboard navigation logic, including\n * arrow key navigation, home/end keys, and type-ahead functionality.\n \n @param {object} config - Configuration object for the keyboard delegate\n * @param {ListState<unknown>['collection']} config.collection - The collection of items in the ListBox\n * @param {Intl.Collator} config.collator - Intl collator for string comparison in type-ahead\n * @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to the ListBox DOM element\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager from the state\n * @param {'stack' \| 'grid'} [config.layout] - Layout mode (stack or grid)\n * @param {Orientation} [config.orientation] - Primary orientation of the items\n * @param {'ltr' \| 'rtl'} config.direction - Text direction (ltr or rtl)\n * @param {ListKeyboardDelegate<unknown>} [config.keyboardDelegate] - Custom keyboard delegate to use instead of default\n * @returns {ListKeyboardDelegate<unknown>} A keyboard delegate instance for handling keyboard interactions\n * @internal\n /\nfunction useKeyboardDelegate({\n collection,\n collator,\n listBoxRef,\n selectionManager,\n layout,\n orientation,\n direction,\n keyboardDelegate: providedDelegate\n}: {\n readonly collection: ListState<unknown>['collection'];\n readonly collator: Intl.Collator;\n readonly listBoxRef: React.RefObject<HTMLDivElement>;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly layout?: 'stack' \| 'grid';\n readonly orientation?: Orientation;\n readonly direction: 'ltr' \| 'rtl';\n readonly keyboardDelegate?: ListKeyboardDelegate<unknown>;\n}): ListKeyboardDelegate<unknown> {\n const { disabledBehavior, disabledKeys } = selectionManager;\n\n return useMemo(\n function createKeyboardDelegate() {\n return (\n providedDelegate \|\|\n new ListKeyboardDelegate({\n collection,\n collator,\n ref: listBoxRef,\n disabledKeys,\n disabledBehavior,\n layout,\n orientation,\n direction\n })\n );\n },\n [collection, collator, listBoxRef, selectionManager, orientation, direction, layout, providedDelegate]\n );\n}\n\n/\n Generates data attributes for the ListBox element based on its current state.\n * These attributes are used for styling selectors and accessibility indicators.\n \n @param {object} config - Configuration object containing ListBox state flags\n * @param {boolean} config.isEmpty - Whether the listbox has no items\n * @param {boolean} config.isFocused - Whether the listbox is currently focused\n * @param {boolean} config.isFocusVisible - Whether focus should be visually indicated\n * @param {'stack' \| 'grid'} [config.layout] - Layout mode (stack or grid)\n * @param {Orientation} [config.orientation] - Primary orientation of the items\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager containing selection state\n * @param {boolean} [config.allowsTabNavigation] - Whether tab navigation is enabled\n * @param {boolean} [config.shouldFocusWrap] - Whether focus wraps at boundaries\n * @param {SelectionBehavior} [config.originalSelectionBehavior] - Original selection behavior setting\n * @returns {Record<string, unknown>} Object with data attributes for the ListBox element\n * @internal\n /\nfunction useListBoxDataAttributes({\n isEmpty,\n isFocused,\n isFocusVisible,\n layout,\n orientation,\n selectionManager,\n allowsTabNavigation,\n shouldFocusWrap,\n originalSelectionBehavior\n}: {\n readonly isEmpty: boolean;\n readonly isFocused: boolean;\n readonly isFocusVisible: boolean;\n readonly layout?: 'stack' \| 'grid';\n readonly orientation?: Orientation;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly allowsTabNavigation?: boolean;\n readonly shouldFocusWrap?: boolean;\n readonly originalSelectionBehavior?: SelectionBehavior;\n}) {\n return useDataAttributes({\n empty: isEmpty,\n focused: isFocused,\n 'focus-visible': isFocusVisible,\n layout,\n orientation,\n 'selection-mode': selectionManager.selectionMode !== 'none' ? selectionManager.selectionMode : undefined,\n 'selection-behavior': originalSelectionBehavior !== undefined ? selectionManager.selectionBehavior : undefined,\n 'allows-tab-navigation': allowsTabNavigation,\n 'focus-wrap': shouldFocusWrap\n });\n}\n\n/\n Composes all props for the ListBox element including DOM props, ARIA props,\n * focus props, and data attributes. Handles prop application through useProps\n * and manages ref assignment to avoid proxy extensibility issues.\n \n @param {object} config - Configuration object containing all props to compose\n * @param {Record<string, unknown>} config.otherProps - Additional props from the component\n * @param {ListBoxRenderProps} config.renderValues - Values available to render functions\n * @param {Record<string, unknown>} config.listBoxProps - Props from useListBox hook\n * @param {Record<string, unknown>} config.focusProps - Props from useFocusRing hook\n * @param {Record<string, unknown>} config.dataAttributes - Data attributes for styling/selectors\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager for ARIA attributes\n * @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to attach to the final element\n * @returns {Record<string, unknown>} Composed props object ready for the ListBox element\n * @internal\n /\nfunction useComposedProps({\n otherProps,\n renderValues,\n listBoxProps,\n focusProps,\n dataAttributes,\n selectionManager,\n listBoxRef\n}: {\n readonly otherProps: Record<string, unknown>;\n readonly renderValues: ListBoxRenderProps;\n readonly listBoxProps: Record<string, unknown>;\n readonly focusProps: Record<string, unknown>;\n readonly dataAttributes: Record<string, unknown>;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly listBoxRef: React.RefObject<HTMLDivElement>;\n}) {\n const { apply } = useProps(otherProps, renderValues);\n\n const propsToExclude = [\n 'renderEmptyState',\n 'selectionMode',\n 'defaultSelectedKeys',\n 'disabledKeys',\n 'disallowEmptySelection',\n 'shouldFocusWrap',\n 'items',\n 'children',\n 'selectionBehavior',\n 'keyboardDelegate'\n ];\n\n // Apply user props directly (preserves className, style, etc.)\n const appliedUserProps = apply(otherProps, propsToExclude);\n\n // React Aria and Bento props\n const baseProps = {\n ...mergeProps(listBoxProps, focusProps),\n ...dataAttributes,\n ...(selectionManager.selectionMode !== 'none' && {\n 'aria-multiselectable': selectionManager.selectionMode === 'multiple'\n })\n };\n\n //\n // Merge all props together with user props taking precedence\n //\n const finalProps = {\n ...baseProps,\n ...appliedUserProps,\n ref: listBoxRef // Set ref directly to avoid extensibility issues\n };\n\n return finalProps;\n}\n\n/\n Renders the empty state content for the ListBox when no items are present.\n * Handles both function-based render props and direct JSX elements.\n * If a function is provided, calls it with render values; otherwise returns as-is.\n \n @param {(props: ListBoxRenderProps) => React.ReactNode} renderEmptyStateFn - Function or JSX element to render for empty state\n * @param {ListBoxRenderProps} renderValues - Current render values to pass to render function\n * @returns {React.ReactNode} Rendered empty state content\n * @internal\n /\nfunction renderEmptyState(\n renderEmptyStateFn: (props: ListBoxRenderProps) => React.ReactNode,\n renderValues: ListBoxRenderProps\n): React.ReactNode {\n //\n // Handle cases where renderEmptyState is not a function (e.g., JSX element passed directly)\n //\n if (typeof renderEmptyStateFn === 'function') {\n return renderEmptyStateFn(renderValues);\n }\n //\n // If it's not a function, just return it as-is (likely a JSX element)\n //\n return renderEmptyStateFn as React.ReactNode;\n}\n\n/\n Renders all items in the collection as React elements.\n * Handles both regular items and section items, using the appropriate\n * components (ListBoxItemImpl for items, ListBoxSectionInner for sections).\n \n @param {ListState<unknown>['collection']} collection - The collection of items to render\n * @returns {React.ReactElement[]} Array of rendered React elements for all collection items\n * @internal\n /\nfunction renderCollectionItems(collection: ListState<unknown>['collection']): React.ReactElement[] {\n return [...collection].map(function renderCollectionItem(item: Node<unknown>) {\n return item.type === 'section' ? (\n <ListBoxSectionInner key={item.key} section={item} />\n ) : (\n <ListBoxItemImpl key={item.key} __node={item as Node<object>}>\n {item.rendered}\n </ListBoxItemImpl>\n );\n });\n}\n\n/\n Determines what content to render inside the ListBox based on its configuration.\n * Handles three cases:\n * 1. Function children without items (Bento render prop pattern with full render props)\n * 2. Empty state when no items and renderEmptyState is provided\n * 3. Normal collection rendering (including items with children functions for React Aria compatibility)\n \n @param {object} config - Configuration object for rendering\n * @param {React.ReactNode \| ((item: unknown) => React.ReactNode) \| ((props: ListBoxRenderProps) => React.ReactNode)} [config.children] - Children prop (static, item render function, or ListBox render prop)\n * @param {Iterable<unknown>} [config.items] - Items array for dynamic collections\n * @param {boolean} config.isEmpty - Whether the collection is empty\n * @param {(props: ListBoxRenderProps) => React.ReactNode} [config.renderEmptyStateProp] - Function to render empty state\n * @param {ListBoxRenderProps} config.renderValues - Current render values for render functions\n * @param {ListState<unknown>['collection']} config.collection - The collection state to render\n * @returns {React.ReactNode} The appropriate content to render inside the ListBox\n * @internal\n /\nfunction renderListBoxContent({\n children,\n items,\n isEmpty,\n renderEmptyStateProp,\n renderValues,\n collection\n}: {\n readonly children?:\n \| React.ReactNode\n \| ((item: unknown) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n readonly items?: Iterable<unknown>;\n readonly isEmpty: boolean;\n readonly renderEmptyStateProp?: (props: ListBoxRenderProps) => React.ReactNode;\n readonly renderValues: ListBoxRenderProps;\n readonly collection: ListState<unknown>['collection'];\n}): React.ReactNode {\n // If children is a function AND no items provided, use Bento render prop pattern\n / v8 ignore next /\n const hasRenderChildren = typeof children === 'function' && !items;\n\n / v8 ignore next 3 /\n if (hasRenderChildren) {\n return (children as (props: ListBoxRenderProps) => React.ReactNode)(renderValues);\n }\n\n // Handle empty state\n if (isEmpty && renderEmptyStateProp) {\n return renderEmptyState(renderEmptyStateProp, renderValues);\n }\n\n // Render collection items (React Aria handles items + children function internally)\n return renderCollectionItems(collection);\n}\n\n/\n Internal ListBox component that handles the core rendering logic.\n * This component manages all the hooks, state, and prop composition needed\n * for a fully functional ListBox. It's wrapped by the main ListBox component\n * which handles collection building.\n \n @param {object} props - Component props\n * @param {ListState<unknown>} props.state - The ListBox state instance\n * @param {(props: ListBoxRenderProps) => React.ReactNode} [props.renderEmptyState] - Function to render when no items are present\n * @param {React.ReactNode \| ((item: unknown) => React.ReactNode) \| ((props: ListBoxRenderProps) => React.ReactNode)} [props.children] - Static children, item render function, or ListBox render function\n * @param {Iterable<unknown>} [props.items] - Items array for dynamic collections\n * @param {React.RefObject<HTMLDivElement>} props.listBoxRef - Reference to the ListBox DOM element\n * @param {'stack'} [props.layout] - Layout mode (stack or grid)\n * @param {Orientation} [props.orientation] - Primary orientation of the items\n * @param {boolean} [props.shouldSelectOnPressUp] - Whether selection occurs on pointer up\n * @param {ListKeyboardDelegate<unknown>} [props.keyboardDelegate] - Custom keyboard navigation delegate\n * @param {boolean} [props.allowsTabNavigation] - Whether tab key navigates between items\n * @param {boolean} [props.shouldFocusWrap] - Whether focus wraps at boundaries\n * @param {'none' \| 'single' \| 'multiple'} [props.selectionMode] - Selection mode (none, single, multiple)\n * @param {SelectionBehavior} [props.selectionBehavior] - Selection behavior (toggle, replace)\n * @returns {React.ReactElement} A fully functional ListBox element with focus scope\n * @internal\n /\nconst ListBoxInner: React.FC<{\n readonly state: ListState<unknown>;\n readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;\n readonly children?:\n \| React.ReactNode\n \| ((item: unknown) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n readonly items?: Iterable<unknown>;\n readonly listBoxRef: RefObject<HTMLDivElement>;\n readonly layout?: 'stack';\n readonly orientation?: Orientation;\n readonly shouldSelectOnPressUp?: boolean;\n readonly keyboardDelegate?: ListKeyboardDelegate<unknown>;\n readonly allowsTabNavigation?: boolean;\n readonly shouldFocusWrap?: boolean;\n readonly selectionMode?: 'none' \| 'single' \| 'multiple';\n readonly selectionBehavior?: SelectionBehavior;\n}> = function ListBoxInner({\n state,\n renderEmptyState: renderEmptyStateProp,\n children,\n items,\n listBoxRef,\n ...otherProps\n}) {\n const { layout = 'stack', orientation = 'vertical', shouldSelectOnPressUp, selectionBehavior } = otherProps;\n\n const { collection, selectionManager } = state;\n const { direction } = useLocale();\n const collator = useCollator({ usage: 'search', sensitivity: 'base' });\n\n const keyboardDelegate = useKeyboardDelegate({\n collection,\n collator,\n listBoxRef,\n selectionManager,\n layout,\n orientation,\n direction,\n keyboardDelegate: otherProps.keyboardDelegate\n });\n\n const { listBoxProps } = useListBox(\n {\n ...otherProps,\n shouldSelectOnPressUp,\n keyboardDelegate\n },\n state,\n listBoxRef\n );\n\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const isEmpty = state.collection.size === 0;\n\n const renderValues: ListBoxRenderProps = {\n isEmpty,\n isFocused,\n isFocusVisible,\n isDropTarget: false,\n layout,\n state,\n items\n };\n\n const dataAttributes = useListBoxDataAttributes({\n isEmpty,\n isFocused,\n isFocusVisible,\n layout,\n orientation,\n selectionManager,\n allowsTabNavigation: otherProps.allowsTabNavigation,\n shouldFocusWrap: otherProps.shouldFocusWrap,\n originalSelectionBehavior: selectionBehavior\n });\n\n const composedProps = useComposedProps({\n otherProps,\n renderValues,\n listBoxProps: listBoxProps as Record<string, unknown>,\n focusProps: focusProps as Record<string, unknown>,\n dataAttributes,\n selectionManager,\n listBoxRef\n });\n\n return (\n <FocusScope>\n <div {...composedProps}>\n {renderListBoxContent({\n children,\n items,\n isEmpty,\n renderEmptyStateProp,\n renderValues,\n collection\n })}\n </div>\n </FocusScope>\n );\n};\n\n/\n A complete ListBox component providing accessible selection lists with keyboard navigation.\n * Supports both static children and dynamic collections, with single/multiple selection modes.\n * Built on React Aria with full ARIA compliance and keyboard accessibility.\n \n @component\n * @template T The type of items in the collection\n * @param {ListBoxProps<T>} args - The properties passed to the ListBox component\n * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref to the listbox container\n * @returns {React.ReactElement} A ListBox component\n \n @example\n * ```tsx\n * <ListBox aria-label=\"Fruits\" selectionMode=\"single\">\n * <ListBoxItem id=\"apple\" textValue=\"Apple\">Apple</ListBoxItem>\n * <ListBoxItem id=\"banana\" textValue=\"Banana\">Banana</ListBoxItem>\n * </ListBox>\n * ```\n * @public\n /\nfunction ListBoxComponent<T>(args: ListBoxProps<T>, ref: React.ForwardedRef<HTMLDivElement>): React.ReactElement {\n return (\n <CollectionBuilder content={<AriaCollection {...(args as unknown as Parameters<typeof AriaCollection>[0])} />}>\n {function buildCollection(collection: unknown) {\n return <StandaloneListBox props={args as ListBoxProps<unknown>} listBoxRef={ref} collection={collection} />;\n }}\n </CollectionBuilder>\n );\n}\n\n/\n Standalone ListBox component that manages its own state and collection.\n * This component is used internally by the main ListBox component after\n * collection building is complete. It handles prop processing, state creation,\n * and context management.\n \n @param {object} props - Component props\n * @param {ListBoxProps<unknown>} props.props - The original ListBox props\n * @param {React.ForwardedRef<HTMLDivElement>} props.listBoxRef - Reference to forward to the ListBox element\n * @param {unknown} props.collection - Built collection from CollectionBuilder\n * @returns {React.ReactElement} A complete ListBox with state management and optional context wrapping\n * @internal\n /\nconst StandaloneListBox: React.FC<{\n readonly props: ListBoxProps<unknown>;\n readonly listBoxRef: ForwardedRef<HTMLDivElement>;\n readonly collection: unknown;\n}> = function StandaloneListBox({ props, listBoxRef, collection }) {\n //\n // Extract renderEmptyState before useProps processes it to avoid render prop corruption\n //\n const originalRenderEmptyState = props.renderEmptyState;\n\n const { props: processedProps } = useProps(props);\n const processedRef = useSafeObjectRef(listBoxRef);\n const { state, contextState } = useListBoxState({ ...processedProps, collection });\n\n const { renderEmptyState: _, ...cleanProcessedProps } = processedProps as ListBoxProps<unknown> & {\n renderEmptyState?: unknown;\n };\n\n const content = (\n <ListBoxInner\n state={state}\n listBoxRef={processedRef}\n renderEmptyState={originalRenderEmptyState}\n {...cleanProcessedProps}\n />\n );\n\n return renderWithOptionalContext(content, state, contextState);\n};\n\n/\n A complete ListBox component providing accessible selection lists with keyboard navigation.\n * Supports both static children and dynamic collections, with single/multiple selection modes.\n * Built on React Aria with full ARIA compliance and keyboard accessibility.\n \n @component\n * @example\n * ```tsx\n * <ListBox aria-label=\"Fruits\" selectionMode=\"single\">\n * <ListBoxItem id=\"apple\" textValue=\"Apple\">Apple</ListBoxItem>\n * <ListBoxItem id=\"banana\" textValue=\"Banana\">Banana</ListBoxItem>\n * </ListBox>\n * ```\n * @public\n /\nexport const ListBox = withSlots('BentoListBox', ListBoxComponent);\n\n/\n Collection component for building dynamic collections in ListBox.\n * Re-exported from React Aria Collections.\n * @public\n /\nexport { AriaCollection as Collection };\n\n/\n Context for sharing ListBox state across components.\n * Used internally by ListBoxItem and ListBoxSection components.\n * @public\n /\nexport { ListStateContext };\n","import React, { ForwardedRef, ReactNode, createContext, useContext, useMemo, forwardRef } from 'react';\nimport { mergeProps, useOption, useHover } from 'react-aria';\nimport { createLeafComponent } from '@react-aria/collections';\nimport { HoverEvents, Key, LinkDOMProps, Node } from '@react-types/shared';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { ListStateContext } from './listbox';\nimport { useSafeObjectRef } from './utils';\nimport { withSlots } from '@bento/slots';\n\n/\n Context value structure for text-related slot attributes.\n * Used to provide label and description attributes to child components.\n * @interface TextContextValue\n /\ninterface TextContextValue {\n readonly slots: {\n /* Attributes for label elements /\n readonly label?: React.HTMLAttributes<HTMLElement>;\n /* Attributes for description elements /\n readonly description?: React.HTMLAttributes<HTMLElement>;\n };\n}\n\n/\n Internal context for providing text-related slot attributes to child components.\n * This context allows ListBoxItem to pass label and description attributes\n * to nested components that need them for accessibility.\n * @internal\n /\nconst TextContext = createContext<TextContextValue>({ slots: {} });\n\n/\n Render props provided to ListBoxItem render functions.\n * @interface ListBoxItemRenderProps\n /\nexport interface ListBoxItemRenderProps {\n /\n Whether the item is currently hovered.\n * @selector [data-hovered]\n /\n readonly isHovered: boolean;\n /\n Whether the item is currently pressed.\n * @selector [data-pressed]\n /\n readonly isPressed: boolean;\n /\n Whether the item is currently selected.\n * @selector [data-selected]\n /\n readonly isSelected: boolean;\n /\n Whether the item is currently focused.\n * @selector [data-focused]\n /\n readonly isFocused: boolean;\n /\n Whether the item is currently keyboard focused.\n * @selector [data-focus-visible]\n /\n readonly isFocusVisible: boolean;\n /\n Whether the item is disabled.\n * @selector [data-disabled]\n /\n readonly isDisabled: boolean;\n /\n The type of selection that is allowed in the collection.\n * @selector [data-selection-mode=\"none \| single \| multiple\"]\n /\n readonly selectionMode: 'none' \| 'single' \| 'multiple';\n /\n The selection behavior for the collection.\n * @selector [data-selection-behavior=\"toggle \| replace\"]\n /\n readonly selectionBehavior: 'toggle' \| 'replace';\n}\n\n/\n Props for the ListBoxItem component.\n * @interface ListBoxItemProps\n * @template T The type of the item value\n /\nexport interface ListBoxItemProps<T = object>\n extends LinkDOMProps,\n HoverEvents,\n Omit<React.HTMLAttributes<HTMLElement>, keyof LinkDOMProps \| keyof HoverEvents \| 'id' \| 'children'> {\n /* The unique id of the item. If not provided, React Aria will auto-generate one. /\n readonly id?: Key;\n /* The object value that this item represents. When using dynamic collections, this is set automatically. /\n readonly value?: T;\n /* A string representation of the item's contents, used for features like typeahead. If not provided, React Aria will derive it from children automatically. /\n readonly textValue?: string;\n /\n Handler that is called when a user performs an action on the item. The exact user event depends on the\n * collection's `selectionBehavior` prop and the interaction modality.\n /\n readonly onAction?: () => void;\n /* The contents of the item. Can be a render function that receives render props. /\n readonly children?: ReactNode \| ((values: ListBoxItemRenderProps) => ReactNode);\n /\n A slot name for the component. Used by Bento's slot system.\n /\n readonly slot?: string;\n /* Whether the item is disabled. /\n readonly isDisabled?: boolean;\n}\n\n/\n Internal implementation component for ListBoxItem.\n * Handles the core logic for rendering a single listbox item with proper accessibility.\n * This component manages all the hooks, state, and interactions needed for a functional\n * listbox item including selection, hover, focus, and keyboard interactions.\n \n @template T - The type of the item value\n * @param {object} props - Combined ListBoxItem props and internal node data\n * @param {Node<T>} props.__node - Internal React Aria node containing item metadata\n * @param {React.ReactNode \| ((values: ListBoxItemRenderProps) => React.ReactNode)} [props.children] - Content to render, can be static or a render function\n * @param {boolean} [props.isDisabled] - Whether the item is disabled\n * @param {string} [props.aria-label] - ARIA label for accessibility\n * @param {(e: HoverEvent) => void} [props.onHoverStart] - Handler for hover start events\n * @param {(isHovering: boolean) => void} [props.onHoverChange] - Handler for hover change events\n * @param {(e: HoverEvent) => void} [props.onHoverEnd] - Handler for hover end events\n * @param {React.ForwardedRef<HTMLDivElement>} ref - Forwarded ref to the item element\n * @returns {React.ReactElement} A fully interactive listbox item with accessibility and state management\n * @internal\n /\nconst ListBoxItemImplComponent = function ListBoxItemImplComponent<T extends object>(\n { __node, ...props }: ListBoxItemProps<T> & { readonly __node: Node<T> },\n ref: ForwardedRef<HTMLDivElement>\n) {\n const state = useContext(ListStateContext)!;\n const safeRef = useSafeObjectRef(ref);\n\n const { optionProps, labelProps, descriptionProps, ...states } = useOption(\n {\n key: __node.key,\n 'aria-label': props['aria-label'],\n isDisabled: props.isDisabled\n },\n state,\n safeRef\n );\n\n const { hoverProps, isHovered } = useHover({\n isDisabled: states.isDisabled,\n onHoverStart: props.onHoverStart,\n onHoverChange: props.onHoverChange,\n onHoverEnd: props.onHoverEnd\n });\n\n const renderValues: ListBoxItemRenderProps = {\n ...states,\n isHovered,\n selectionMode: state.selectionManager.selectionMode,\n selectionBehavior: state.selectionManager.selectionBehavior\n };\n\n const content = typeof props.children === 'function' ? props.children(renderValues) : props.children;\n\n const { apply } = useProps(props, renderValues);\n\n const dataAttributes = useDataAttributes({\n selected: states.isSelected,\n disabled: states.isDisabled,\n hovered: isHovered,\n focused: states.isFocused,\n 'focus-visible': states.isFocusVisible,\n pressed: states.isPressed,\n level: __node.level,\n 'selection-mode': state.selectionManager.selectionMode,\n 'selection-behavior': state.selectionManager.selectionBehavior\n });\n\n const textContext = useMemo(\n function createTextContext() {\n return {\n slots: {\n label: labelProps,\n description: descriptionProps\n }\n };\n },\n [labelProps, descriptionProps]\n );\n\n const ElementType = __node.props.href ? 'a' : 'div';\n\n // Use original node props (which contain className) not filtered finalProps\n const appliedUserProps = apply(__node.props, ['ref']);\n\n const finalAttributes = {\n ...mergeProps(optionProps, hoverProps), // React Aria props\n ...dataAttributes, // Bento data attributes\n ...appliedUserProps,\n ref: safeRef,\n 'data-text-value': __node.textValue\n };\n\n return (\n <TextContext.Provider value={textContext}>\n {React.createElement(ElementType, finalAttributes, content)}\n </TextContext.Provider>\n );\n};\n\n/\n Enhanced ListBoxItem implementation with slots support.\n * This wraps the core ListBoxItemImplComponent with Bento's slot system\n * for advanced composition and styling capabilities.\n * @internal\n /\nexport const ListBoxItemImpl = withSlots('BentoListBoxItem', forwardRef(ListBoxItemImplComponent));\n\n/\n Adapter component that connects ListBoxItemImpl to React Aria's collection system.\n * This function serves as a bridge between React Aria's createLeafComponent and\n * the internal ListBoxItemImpl, ensuring proper prop forwarding and node injection.\n \n @template T - The type of the item value\n * @param {ListBoxItemProps<T>} props - ListBoxItem component props\n * @param {React.ForwardedRef<HTMLDivElement>} forwardedRef - Ref forwarded from the collection system\n * @param {Node<T>} item - React Aria node containing item metadata and collection info\n * @returns {React.ReactElement} The ListBoxItemImpl component with proper node and ref wiring\n * @internal\n /\nfunction ListBoxItemComponent<T extends object>(\n props: ListBoxItemProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n item: Node<T>\n) {\n return <ListBoxItemImpl {...props} ref={forwardedRef} __node={item} />;\n}\n\n/\n Base ListBoxItem component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state.\n * @internal\n /\nconst ListBoxItemBase = createLeafComponent('item', ListBoxItemComponent);\n\n/\n A single item within a ListBox component.\n * Handles user interactions, accessibility, and state management for individual options.\n \n @component\n * @template T The type of the item value\n * @example\n * ```tsx\n * <ListBoxItem>Simple option</ListBoxItem>\n * ```\n * @public\n */\nexport const ListBoxItem = ListBoxItemBase;\n"]}
1	+ {"version":3,"sources":["../src/header.tsx","../src/listbox-section.tsx","../src/utils.ts","../src/listbox.tsx","../src/listbox-item.tsx"],"names":["React","withSlots","BentoListBoxSectionImpl","useProps","ListBoxSectionInner","useContext","useRef","createContext","useDataAttributes","mergeProps","ListBoxInner","AriaCollection","StandaloneListBox","ListBoxItemImplComponent","useMemo","createLeafComponent"],"mappings":"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","file":"index.js","sourcesContent":["import React, { createContext, useContext } from 'react';\nimport { createLeafComponent } from '@react-aria/collections';\nimport { useProps } from '@bento/use-props';\nimport { withSlots, type Slots } from '@bento/slots';\n\n/*\n Props for the Header component.\n * @interface HeaderProps\n /\nexport interface HeaderProps extends Slots, React.ComponentProps<'header'> {\n /\n The children of the header.\n /\n readonly children?: React.ReactNode;\n}\n\n/\n Context value structure for Header components.\n * Extends HTML attributes to support all standard header element properties.\n * @interface HeaderContextValue\n /\ninterface HeaderContextValue extends React.HTMLAttributes<HTMLElement> {\n /\n Reference to the header element for forwarding.\n /\n readonly ref?: React.RefObject<HTMLDivElement>;\n}\n\n/\n Combined props type for the internal BentoHeader implementation.\n * Merges Header-specific props with standard HTML attributes to provide\n * a comprehensive interface for the internal header component.\n \n @type BentoHeaderProps\n * @internal\n /\ntype BentoHeaderProps = HeaderProps & React.HTMLAttributes<HTMLElement>;\n\n/\n React context for providing header-related attributes and refs to Header components.\n * Used internally by ListBoxSection to pass heading props to Header elements.\n * @public\n /\nexport const HeaderContext = createContext<HeaderContextValue>({});\n\n/\n Internal implementation of the BentoHeader component with slots support.\n * This component handles prop processing and context integration.\n * It merges props from useProps and HeaderContext while preserving styling props.\n \n @internal\n /\nconst BentoHeaderImpl = withSlots(\n 'BentoHeader',\n function BentoHeader(props: BentoHeaderProps, ref: React.ForwardedRef<HTMLElement>) {\n const { props: processedProps, apply } = useProps(props);\n const contextProps = useContext(HeaderContext);\n\n // Apply user props directly (preserves className, style, etc.)\n const appliedUserProps = apply(processedProps);\n\n const composed = {\n ...contextProps,\n ...appliedUserProps // User props take precedence over context\n };\n\n return (\n <header {...composed} ref={contextProps.ref \|\| ref}>\n {processedProps.children}\n </header>\n );\n }\n);\n\n/\n Wrapper component that connects the BentoHeaderImpl to React Aria's collection system.\n * This function serves as an adapter between the createLeafComponent system and\n * the internal BentoHeaderImpl component, ensuring proper prop forwarding and ref handling.\n \n @param {HeaderProps} props - Header component props\n * @param {React.ReactNode} [props.children] - React children to render inside the header\n * @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element\n * @returns {React.ReactElement} The BentoHeaderImpl component with forwarded props and ref\n * @internal\n /\nfunction HeaderWrapper(props: HeaderProps, ref: React.ForwardedRef<HTMLElement>) {\n return <BentoHeaderImpl {...props} ref={ref} />;\n}\n\n/\n A Header represents a heading for a section within a ListBox.\n * Uses React Aria's createLeafComponent for automatic collection handling.\n \n @component\n * @param {HeaderProps} props - The props for the Header component\n * @param {React.ForwardedRef<HTMLElement>} ref - Forwarded ref to the header element\n * @returns {JSX.Element} A header element with proper accessibility attributes\n \n @example\n * ```tsx\n * <Header>My Section Title</Header>\n * ```\n * @public\n /\n/\n Base Header component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state and\n * integrates with the collection rendering system.\n * @internal\n /\nconst HeaderBase = createLeafComponent('header', HeaderWrapper);\n\n/\n A Header component for section headings within a ListBox.\n * Provides semantic header structure with proper accessibility attributes\n * and integrates with React Aria's collection system for automatic handling.\n \n This is the main public interface for creating headers in ListBox sections.\n * It automatically receives heading props from the parent ListBoxSection via HeaderContext.\n \n @component\n * @example\n * ```tsx\n * <ListBoxSection>\n * <Header>Fruits</Header>\n * <ListBoxItem>Apple</ListBoxItem>\n * <ListBoxItem>Banana</ListBoxItem>\n * </ListBoxSection>\n * ```\n * @public\n /\nexport const Header = HeaderBase as React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;\n","import React, { useRef, useContext } from 'react';\nimport { useListBoxSection, mergeProps } from 'react-aria';\nimport { createBranchComponent } from '@react-aria/collections';\nimport { CollectionRendererContext } from 'react-aria-components';\nimport type { Node } from '@react-types/shared';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots } from '@bento/slots';\nimport { HeaderContext } from './header';\nimport { ListStateContext } from './listbox';\n\n/\n Props for the ListBoxSection component.\n * @interface ListBoxSectionProps\n /\nexport interface ListBoxSectionProps extends Omit<React.ComponentProps<'section'>, 'title'> {\n /\n A slot name for the component. Used by Bento's slot system.\n /\n readonly slot?: string;\n /\n The title of the section.\n /\n readonly title?: React.ReactNode;\n /\n The children of the section.\n /\n readonly children?: React.ReactNode;\n}\n\n/\n Internal props interface for BentoListBoxSectionImpl component.\n * Extends ListBoxSectionProps with internal React Aria node data and allows\n * additional properties for flexibility in prop handling.\n \n @interface BentoListBoxSectionImplProps\n * @template T - The type of the section node data\n * @internal\n /\ninterface BentoListBoxSectionImplProps<T = unknown> extends ListBoxSectionProps {\n readonly __node?: Node<T>;\n readonly [key: string]: unknown;\n}\n\n/\n Props interface for the ListBoxSectionInner component.\n * Contains the React Aria section node that represents this section\n * in the collection hierarchy for dynamic rendering.\n \n @interface ListBoxSectionInnerProps\n * @internal\n /\ninterface ListBoxSectionInnerProps {\n readonly section: Node<unknown>;\n}\n\n/\n Internal implementation of the BentoListBoxSection component with slots support.\n * This component handles the core logic for rendering a section within a ListBox,\n * including title rendering, accessibility attributes, and child content management.\n * It integrates with React Aria's useListBoxSection hook for proper ARIA compliance.\n \n @internal\n /\nconst BentoListBoxSectionImpl = withSlots('BentoListBoxSection', function BentoListBoxSectionImpl<\n T\n>({ __node, children, title: titleProp, ...rest }: BentoListBoxSectionImplProps<T>, ref: React.ForwardedRef<HTMLElement>) {\n const { props, apply } = useProps(rest);\n const data = useDataAttributes({ level: __node?.level });\n const headingRef = useRef<HTMLDivElement>(null);\n\n const title = titleProp ?? props.title ?? __node?.rendered;\n const { groupProps, headingProps } = useListBoxSection({\n heading: title,\n 'aria-label': props['aria-label']\n });\n\n const composed = mergeProps(apply({ ...data, ...props }, ['children', 'title', 'slot']), groupProps);\n\n const sectionContent = children \|\| props.children;\n\n return (\n <section {...composed} ref={ref}>\n <HeaderContext.Provider value={{ ...headingProps, ref: headingRef }}>\n {title && <div {...headingProps}>{title}</div>}\n {sectionContent}\n </HeaderContext.Provider>\n </section>\n );\n});\n\n/\n Wrapper component that connects BentoListBoxSectionImpl to React Aria's collection system.\n * This function serves as an adapter between createBranchComponent and the internal\n * BentoListBoxSectionImpl, ensuring proper prop forwarding and node injection for sections.\n \n @template T - The type of the section node data\n * @param {ListBoxSectionProps} props - ListBoxSection component props\n * @param {string} [props.slot] - Slot name for Bento's slot system\n * @param {React.ReactNode} [props.title] - Title for the section\n * @param {React.ReactNode} [props.children] - Children to render in the section\n * @param {string} [props.aria-label] - ARIA label for accessibility\n * @param {React.ForwardedRef<HTMLElement>} ref - Ref forwarded from the collection system\n * @param {Node<T>} section - React Aria node containing section metadata and collection info\n * @returns {React.ReactElement} The BentoListBoxSectionImpl component with proper node and ref wiring\n * @internal\n /\n/ v8 ignore start /\nfunction ListBoxSectionWrapper<T extends object>(\n props: ListBoxSectionProps,\n ref: React.ForwardedRef<HTMLElement>,\n section: Node<T>\n) {\n return <BentoListBoxSectionImpl {...props} __node={section} ref={ref} />;\n}\n/ v8 ignore stop /\n\n/\n Base ListBoxSection component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state and\n * manages the branch structure for nested items.\n * @internal\n /\nconst ListBoxSectionBase = createBranchComponent('section', ListBoxSectionWrapper);\n\n/\n Internal component for rendering dynamic collection sections.\n * This component is used specifically for sections that are part of a dynamic collection,\n * connecting to the ListStateContext and CollectionRendererContext to properly render\n * nested items through React Aria's collection system.\n \n @component\n * @param {object} props - The component props containing the section node\n * @param {Node<unknown>} props.section - The React Aria node representing this section in the collection\n * @throws {BentoError} Throws an error if used outside of a ListBox context\n * @returns {React.ReactElement} JSX element representing a dynamically rendered listbox section\n * @internal\n /\nexport const ListBoxSectionInner: React.FC<ListBoxSectionInnerProps> = function ListBoxSectionInner({ section }) {\n const state = useContext(ListStateContext);\n const { CollectionBranch } = useContext(CollectionRendererContext);\n\n return (\n <BentoListBoxSectionImpl {...section.props} __node={section}>\n {CollectionBranch && state?.collection ? (\n <CollectionBranch collection={state.collection} parent={section} />\n ) : null}\n </BentoListBoxSectionImpl>\n );\n};\n\n/\n A section component for organizing related items within a ListBox.\n \n @component\n * @example\n * ```tsx\n * <ListBoxSection title=\"Fruits\">\n * <ListBoxItem>Apple</ListBoxItem>\n * <ListBoxItem>Banana</ListBoxItem>\n * </ListBoxSection>\n * ```\n * @public\n /\nexport const ListBoxSection = ListBoxSectionBase as <_T extends object>(\n props: ListBoxSectionProps & { children?: React.ReactNode }\n) => React.ReactElement;\n","/ v8 ignore next /\nimport React, { type ForwardedRef, useEffect, useRef } from 'react';\n\n/\n NOTE: This utility will be moved to the new use-collection package.\n * Safe wrapper for React Aria's useObjectRef that handles test environments where refs are not extensible.\n \n Critical for Vitest Browser Mode Testing: When running tests in Vitest's browser mode with Playwright,\n * the test environment can freeze or make objects non-extensible. React Aria's `useObjectRef` attempts to\n * dynamically add properties to ref objects, which fails with \"Cannot add property current, object is not extensible\"\n * in these constrained test environments.\n \n Technical Details:\n * - Vitest browser mode uses Playwright's Chrome DevTools Protocol for test execution\n * - The V8 engine's security model can freeze objects during test isolation\n * - React Aria's useObjectRef uses `Object.defineProperty()` to add reactive properties to refs\n * - This conflicts with frozen objects in browser testing scenarios\n \n Why This Solution Works:\n * - Creates an internal ref that's always mutable (created in our controlled environment)\n * - Safely forwards values to the external ref using try/catch for frozen object scenarios\n * - Maintains the same ref forwarding behavior as React Aria's useObjectRef in normal environments\n * - Gracefully degrades in test environments without breaking functionality\n \n Production Impact: Zero. Object freezing only occurs in specific test configurations.\n * In production and development, this behaves identically to React Aria's useObjectRef.\n \n @template T - The type of the ref element\n * @param {React.ForwardedRef<T>} ref - The forwarded ref to handle safely\n * @returns {React.RefObject<T>} A safe ref object that works in all environments including frozen test contexts\n * @public\n /\nexport function useSafeObjectRef<T>(ref: ForwardedRef<T>): React.RefObject<T> {\n const internalRef = useRef<T>(null);\n\n useEffect(function updateForwardedRef() {\n const current = internalRef.current;\n\n if (typeof ref === 'function') {\n ref(current);\n } else if (ref && 'current' in ref) {\n try {\n (ref as React.MutableRefObject<T \| null>).current = current;\n / v8 ignore start /\n } catch {\n //\n // Silently ignore errors in test environments where objects might be frozen.\n // This specifically handles Vitest browser mode with Playwright where the V8 engine\n // may freeze ref objects during test isolation, preventing dynamic property assignment.\n //\n }\n / v8 ignore stop /\n }\n });\n\n return internalRef;\n}\n","import React, { createContext, useContext, useMemo, ForwardedRef, RefObject } from 'react';\nimport {\n FocusScope,\n mergeProps,\n useCollator,\n useLocale,\n useListBox,\n useFocusRing,\n ListKeyboardDelegate\n} from 'react-aria';\nimport { ListState, SelectionBehavior, useListState, Orientation, Node } from 'react-stately';\nimport { CollectionBuilder, Collection as AriaCollection } from '@react-aria/collections';\nimport { AriaListBoxProps } from '@react-types/listbox';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { withSlots, Slots } from '@bento/slots';\nimport { ListBoxItemImpl } from './listbox-item';\nimport { ListBoxSectionInner } from './listbox-section';\nimport { useSafeObjectRef } from './utils';\n\n/\n Render props provided to ListBox render functions and empty state renderers.\n * @interface ListBoxRenderProps\n /\nexport interface ListBoxRenderProps {\n /\n Whether the listbox has no items and should display its empty state.\n * @selector [data-empty]\n /\n readonly isEmpty: boolean;\n /\n Whether the listbox is currently focused.\n * @selector [data-focused]\n /\n readonly isFocused: boolean;\n /\n Whether the listbox is currently keyboard focused.\n * @selector [data-focus-visible]\n /\n readonly isFocusVisible: boolean;\n /\n Whether the listbox is currently the active drop target.\n * @selector [data-drop-target]\n /\n readonly isDropTarget: boolean;\n /\n Whether the items are arranged in a stack or grid.\n * @selector [data-layout=\"stack \| grid\"]\n /\n readonly layout?: 'stack' \| 'grid';\n /\n State of the listbox.\n /\n readonly state: ListState<unknown>;\n /\n The items array when using dynamic collections.\n /\n readonly items?: Iterable<unknown>;\n}\n\n/\n Props for the ListBox component.\n * @interface ListBoxProps\n * @template T The type of items in the collection\n /\nexport interface ListBoxProps<T>\n extends Omit<AriaListBoxProps<T>, 'label' \| 'children'>,\n Omit<React.ComponentProps<'div'>, keyof AriaListBoxProps<T> \| 'children'>,\n Slots {\n /\n How multiple selection should behave in the collection.\n /\n readonly selectionBehavior?: SelectionBehavior;\n /\n Provides content to display when there are no items in the list.\n /\n readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;\n /\n Whether the items are arranged in a stack layout.\n * @default 'stack'\n /\n readonly layout?: 'stack';\n /\n The primary orientation of the items. Usually this is the direction that the collection scrolls.\n * @default 'vertical'\n /\n readonly orientation?: Orientation;\n /\n Static children or render function for the ListBox.\n * When items prop is provided, children receives individual items for React Aria compatibility.\n * When no items prop is provided, children receives Bento render props { isEmpty, isFocused, state, etc. }.\n /\n readonly children?:\n \| React.ReactNode\n \| ((item: T) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n}\n\n/\n React context for sharing ListBox state across components.\n * This context provides the ListBox state to child components like ListBoxItem and ListBoxSection,\n * enabling them to access selection state, collection data, and other shared functionality.\n \n @context\n * @internal\n /\nconst ListStateContext = createContext<ListState<unknown> \| null>(null);\n\n/\n Custom hook to manage ListBox state creation and context handling.\n * This hook either uses an existing state from context or creates a new one.\n * It's designed to work both as a standalone component and within a parent component\n * that provides ListBox state through context.\n \n @param {Record<string, unknown>} props - Configuration object for the ListBox state\n * @returns {object} An object containing the state instance and context state flag\n * @returns {ListState<unknown>} returns.state - The ListBox state instance\n * @returns {ListState<unknown> \| null} returns.contextState - Existing context state, if any\n * @internal\n /\nfunction useListBoxState(props: Record<string, unknown>) {\n const contextState = useContext(ListStateContext);\n\n const stateProps = {\n ...props,\n children: undefined,\n items: undefined\n };\n\n const state = contextState ?? useListState(stateProps);\n\n return { state, contextState };\n}\n\n/\n Renders content with optional context provider wrapper.\n * If no context state exists, wraps the content in a ListStateContext.Provider.\n * This allows the ListBox to work both standalone and as part of a larger component tree.\n \n @param {React.ReactNode} content - The React content to render\n * @param {ListState<unknown>} state - The ListBox state to provide via context\n * @param {ListState<unknown> \| null} contextState - Existing context state, if any\n * @returns {React.ReactNode} The content, optionally wrapped in a context provider\n * @internal\n /\nfunction renderWithOptionalContext(\n content: React.ReactNode,\n state: ListState<unknown>,\n contextState: ListState<unknown> \| null\n): React.ReactNode {\n / v8 ignore next /\n return contextState ? content : <ListStateContext.Provider value={state}>{content}</ListStateContext.Provider>;\n}\n\n/\n Creates and memoizes a keyboard delegate for the ListBox.\n * The keyboard delegate handles keyboard navigation logic, including\n * arrow key navigation, home/end keys, and type-ahead functionality.\n \n @param {object} config - Configuration object for the keyboard delegate\n * @param {ListState<unknown>['collection']} config.collection - The collection of items in the ListBox\n * @param {Intl.Collator} config.collator - Intl collator for string comparison in type-ahead\n * @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to the ListBox DOM element\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager from the state\n * @param {'stack' \| 'grid'} [config.layout] - Layout mode (stack or grid)\n * @param {Orientation} [config.orientation] - Primary orientation of the items\n * @param {'ltr' \| 'rtl'} config.direction - Text direction (ltr or rtl)\n * @param {ListKeyboardDelegate<unknown>} [config.keyboardDelegate] - Custom keyboard delegate to use instead of default\n * @returns {ListKeyboardDelegate<unknown>} A keyboard delegate instance for handling keyboard interactions\n * @internal\n /\nfunction useKeyboardDelegate({\n collection,\n collator,\n listBoxRef,\n selectionManager,\n layout,\n orientation,\n direction,\n keyboardDelegate: providedDelegate\n}: {\n readonly collection: ListState<unknown>['collection'];\n readonly collator: Intl.Collator;\n readonly listBoxRef: React.RefObject<HTMLDivElement>;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly layout?: 'stack' \| 'grid';\n readonly orientation?: Orientation;\n readonly direction: 'ltr' \| 'rtl';\n readonly keyboardDelegate?: ListKeyboardDelegate<unknown>;\n}): ListKeyboardDelegate<unknown> {\n const { disabledBehavior, disabledKeys } = selectionManager;\n\n return useMemo(\n function createKeyboardDelegate() {\n return (\n providedDelegate \|\|\n new ListKeyboardDelegate({\n collection,\n collator,\n ref: listBoxRef,\n disabledKeys,\n disabledBehavior,\n layout,\n orientation,\n direction\n })\n );\n },\n [collection, collator, listBoxRef, selectionManager, orientation, direction, layout, providedDelegate]\n );\n}\n\n/\n Generates data attributes for the ListBox element based on its current state.\n * These attributes are used for styling selectors and accessibility indicators.\n \n @param {object} config - Configuration object containing ListBox state flags\n * @param {boolean} config.isEmpty - Whether the listbox has no items\n * @param {boolean} config.isFocused - Whether the listbox is currently focused\n * @param {boolean} config.isFocusVisible - Whether focus should be visually indicated\n * @param {'stack' \| 'grid'} [config.layout] - Layout mode (stack or grid)\n * @param {Orientation} [config.orientation] - Primary orientation of the items\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager containing selection state\n * @param {boolean} [config.allowsTabNavigation] - Whether tab navigation is enabled\n * @param {boolean} [config.shouldFocusWrap] - Whether focus wraps at boundaries\n * @param {SelectionBehavior} [config.originalSelectionBehavior] - Original selection behavior setting\n * @returns {Record<string, unknown>} Object with data attributes for the ListBox element\n * @internal\n /\nfunction useListBoxDataAttributes({\n isEmpty,\n isFocused,\n isFocusVisible,\n layout,\n orientation,\n selectionManager,\n allowsTabNavigation,\n shouldFocusWrap,\n originalSelectionBehavior\n}: {\n readonly isEmpty: boolean;\n readonly isFocused: boolean;\n readonly isFocusVisible: boolean;\n readonly layout?: 'stack' \| 'grid';\n readonly orientation?: Orientation;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly allowsTabNavigation?: boolean;\n readonly shouldFocusWrap?: boolean;\n readonly originalSelectionBehavior?: SelectionBehavior;\n}) {\n return useDataAttributes({\n empty: isEmpty,\n focused: isFocused,\n 'focus-visible': isFocusVisible,\n layout,\n orientation,\n 'selection-mode': selectionManager.selectionMode !== 'none' ? selectionManager.selectionMode : undefined,\n 'selection-behavior': originalSelectionBehavior !== undefined ? selectionManager.selectionBehavior : undefined,\n 'allows-tab-navigation': allowsTabNavigation,\n 'focus-wrap': shouldFocusWrap\n });\n}\n\n/\n Composes all props for the ListBox element including DOM props, ARIA props,\n * focus props, and data attributes. Handles prop application through useProps\n * and manages ref assignment to avoid proxy extensibility issues.\n \n @param {object} config - Configuration object containing all props to compose\n * @param {Record<string, unknown>} config.otherProps - Additional props from the component\n * @param {ListBoxRenderProps} config.renderValues - Values available to render functions\n * @param {Record<string, unknown>} config.listBoxProps - Props from useListBox hook\n * @param {Record<string, unknown>} config.focusProps - Props from useFocusRing hook\n * @param {Record<string, unknown>} config.dataAttributes - Data attributes for styling/selectors\n * @param {ListState<unknown>['selectionManager']} config.selectionManager - Selection manager for ARIA attributes\n * @param {React.RefObject<HTMLDivElement>} config.listBoxRef - Reference to attach to the final element\n * @returns {Record<string, unknown>} Composed props object ready for the ListBox element\n * @internal\n /\nfunction useComposedProps({\n otherProps,\n renderValues,\n listBoxProps,\n focusProps,\n dataAttributes,\n selectionManager,\n listBoxRef\n}: {\n readonly otherProps: Record<string, unknown>;\n readonly renderValues: ListBoxRenderProps;\n readonly listBoxProps: Record<string, unknown>;\n readonly focusProps: Record<string, unknown>;\n readonly dataAttributes: Record<string, unknown>;\n readonly selectionManager: ListState<unknown>['selectionManager'];\n readonly listBoxRef: React.RefObject<HTMLDivElement>;\n}) {\n const { apply } = useProps(otherProps, renderValues);\n\n const propsToExclude = [\n 'renderEmptyState',\n 'selectionMode',\n 'defaultSelectedKeys',\n 'disabledKeys',\n 'disallowEmptySelection',\n 'shouldFocusWrap',\n 'items',\n 'children',\n 'selectionBehavior',\n 'keyboardDelegate'\n ];\n\n // Apply user props directly (preserves className, style, etc.)\n const appliedUserProps = apply(otherProps, propsToExclude);\n\n // React Aria and Bento props\n const baseProps = {\n ...mergeProps(listBoxProps, focusProps),\n ...dataAttributes,\n ...(selectionManager.selectionMode !== 'none' && {\n 'aria-multiselectable': selectionManager.selectionMode === 'multiple'\n })\n };\n\n //\n // Merge all props together with user props taking precedence\n //\n const finalProps = {\n ...baseProps,\n ...appliedUserProps,\n ref: listBoxRef // Set ref directly to avoid extensibility issues\n };\n\n return finalProps;\n}\n\n/\n Renders the empty state content for the ListBox when no items are present.\n * Handles both function-based render props and direct JSX elements.\n * If a function is provided, calls it with render values; otherwise returns as-is.\n \n @param {(props: ListBoxRenderProps) => React.ReactNode} renderEmptyStateFn - Function or JSX element to render for empty state\n * @param {ListBoxRenderProps} renderValues - Current render values to pass to render function\n * @returns {React.ReactNode} Rendered empty state content\n * @internal\n /\nfunction renderEmptyState(\n renderEmptyStateFn: (props: ListBoxRenderProps) => React.ReactNode,\n renderValues: ListBoxRenderProps\n): React.ReactNode {\n //\n // Handle cases where renderEmptyState is not a function (e.g., JSX element passed directly)\n //\n if (typeof renderEmptyStateFn === 'function') {\n return renderEmptyStateFn(renderValues);\n }\n //\n // If it's not a function, just return it as-is (likely a JSX element)\n //\n return renderEmptyStateFn as React.ReactNode;\n}\n\n/\n Renders all items in the collection as React elements.\n * Handles both regular items and section items, using the appropriate\n * components (ListBoxItemImpl for items, ListBoxSectionInner for sections).\n \n @param {ListState<unknown>['collection']} collection - The collection of items to render\n * @returns {React.ReactElement[]} Array of rendered React elements for all collection items\n * @internal\n /\nfunction renderCollectionItems(collection: ListState<unknown>['collection']): React.ReactElement[] {\n return [...collection].map(function renderCollectionItem(item: Node<unknown>) {\n return item.type === 'section' ? (\n <ListBoxSectionInner key={item.key} section={item} />\n ) : (\n <ListBoxItemImpl key={item.key} __node={item as Node<object>}>\n {item.rendered}\n </ListBoxItemImpl>\n );\n });\n}\n\n/\n Determines what content to render inside the ListBox based on its configuration.\n * Handles three cases:\n * 1. Function children without items (Bento render prop pattern with full render props)\n * 2. Empty state when no items and renderEmptyState is provided\n * 3. Normal collection rendering (including items with children functions for React Aria compatibility)\n \n @param {object} config - Configuration object for rendering\n * @param {React.ReactNode \| ((item: unknown) => React.ReactNode) \| ((props: ListBoxRenderProps) => React.ReactNode)} [config.children] - Children prop (static, item render function, or ListBox render prop)\n * @param {Iterable<unknown>} [config.items] - Items array for dynamic collections\n * @param {boolean} config.isEmpty - Whether the collection is empty\n * @param {(props: ListBoxRenderProps) => React.ReactNode} [config.renderEmptyStateProp] - Function to render empty state\n * @param {ListBoxRenderProps} config.renderValues - Current render values for render functions\n * @param {ListState<unknown>['collection']} config.collection - The collection state to render\n * @returns {React.ReactNode} The appropriate content to render inside the ListBox\n * @internal\n /\nfunction renderListBoxContent({\n children,\n items,\n isEmpty,\n renderEmptyStateProp,\n renderValues,\n collection\n}: {\n readonly children?:\n \| React.ReactNode\n \| ((item: unknown) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n readonly items?: Iterable<unknown>;\n readonly isEmpty: boolean;\n readonly renderEmptyStateProp?: (props: ListBoxRenderProps) => React.ReactNode;\n readonly renderValues: ListBoxRenderProps;\n readonly collection: ListState<unknown>['collection'];\n}): React.ReactNode {\n // If children is a function AND no items provided, use Bento render prop pattern\n / v8 ignore next /\n const hasRenderChildren = typeof children === 'function' && !items;\n\n / v8 ignore next 3 /\n if (hasRenderChildren) {\n return (children as (props: ListBoxRenderProps) => React.ReactNode)(renderValues);\n }\n\n // Handle empty state\n if (isEmpty && renderEmptyStateProp) {\n return renderEmptyState(renderEmptyStateProp, renderValues);\n }\n\n // Render collection items (React Aria handles items + children function internally)\n return renderCollectionItems(collection);\n}\n\n/\n Internal ListBox component that handles the core rendering logic.\n * This component manages all the hooks, state, and prop composition needed\n * for a fully functional ListBox. It's wrapped by the main ListBox component\n * which handles collection building.\n \n @param {object} props - Component props\n * @param {ListState<unknown>} props.state - The ListBox state instance\n * @param {(props: ListBoxRenderProps) => React.ReactNode} [props.renderEmptyState] - Function to render when no items are present\n * @param {React.ReactNode \| ((item: unknown) => React.ReactNode) \| ((props: ListBoxRenderProps) => React.ReactNode)} [props.children] - Static children, item render function, or ListBox render function\n * @param {Iterable<unknown>} [props.items] - Items array for dynamic collections\n * @param {React.RefObject<HTMLDivElement>} props.listBoxRef - Reference to the ListBox DOM element\n * @param {'stack'} [props.layout] - Layout mode (stack or grid)\n * @param {Orientation} [props.orientation] - Primary orientation of the items\n * @param {boolean} [props.shouldSelectOnPressUp] - Whether selection occurs on pointer up\n * @param {ListKeyboardDelegate<unknown>} [props.keyboardDelegate] - Custom keyboard navigation delegate\n * @param {boolean} [props.allowsTabNavigation] - Whether tab key navigates between items\n * @param {boolean} [props.shouldFocusWrap] - Whether focus wraps at boundaries\n * @param {'none' \| 'single' \| 'multiple'} [props.selectionMode] - Selection mode (none, single, multiple)\n * @param {SelectionBehavior} [props.selectionBehavior] - Selection behavior (toggle, replace)\n * @returns {React.ReactElement} A fully functional ListBox element with focus scope\n * @internal\n /\nconst ListBoxInner: React.FC<{\n readonly state: ListState<unknown>;\n readonly renderEmptyState?: (props: ListBoxRenderProps) => React.ReactNode;\n readonly children?:\n \| React.ReactNode\n \| ((item: unknown) => React.ReactNode)\n \| ((props: ListBoxRenderProps) => React.ReactNode);\n readonly items?: Iterable<unknown>;\n readonly listBoxRef: RefObject<HTMLDivElement>;\n readonly layout?: 'stack';\n readonly orientation?: Orientation;\n readonly shouldSelectOnPressUp?: boolean;\n readonly keyboardDelegate?: ListKeyboardDelegate<unknown>;\n readonly allowsTabNavigation?: boolean;\n readonly shouldFocusWrap?: boolean;\n readonly selectionMode?: 'none' \| 'single' \| 'multiple';\n readonly selectionBehavior?: SelectionBehavior;\n}> = function ListBoxInner({\n state,\n renderEmptyState: renderEmptyStateProp,\n children,\n items,\n listBoxRef,\n ...otherProps\n}) {\n const { layout = 'stack', orientation = 'vertical', shouldSelectOnPressUp, selectionBehavior } = otherProps;\n\n const { collection, selectionManager } = state;\n const { direction } = useLocale();\n const collator = useCollator({ usage: 'search', sensitivity: 'base' });\n\n const keyboardDelegate = useKeyboardDelegate({\n collection,\n collator,\n listBoxRef,\n selectionManager,\n layout,\n orientation,\n direction,\n keyboardDelegate: otherProps.keyboardDelegate\n });\n\n const { listBoxProps } = useListBox(\n {\n ...otherProps,\n shouldSelectOnPressUp,\n keyboardDelegate\n },\n state,\n listBoxRef\n );\n\n const { focusProps, isFocused, isFocusVisible } = useFocusRing();\n const isEmpty = state.collection.size === 0;\n\n const renderValues: ListBoxRenderProps = {\n isEmpty,\n isFocused,\n isFocusVisible,\n isDropTarget: false,\n layout,\n state,\n items\n };\n\n const dataAttributes = useListBoxDataAttributes({\n isEmpty,\n isFocused,\n isFocusVisible,\n layout,\n orientation,\n selectionManager,\n allowsTabNavigation: otherProps.allowsTabNavigation,\n shouldFocusWrap: otherProps.shouldFocusWrap,\n originalSelectionBehavior: selectionBehavior\n });\n\n const composedProps = useComposedProps({\n otherProps,\n renderValues,\n listBoxProps: listBoxProps as Record<string, unknown>,\n focusProps: focusProps as Record<string, unknown>,\n dataAttributes,\n selectionManager,\n listBoxRef\n });\n\n return (\n <FocusScope>\n <div {...composedProps}>\n {renderListBoxContent({\n children,\n items,\n isEmpty,\n renderEmptyStateProp,\n renderValues,\n collection\n })}\n </div>\n </FocusScope>\n );\n};\n\n/\n A complete ListBox component providing accessible selection lists with keyboard navigation.\n * Supports both static children and dynamic collections, with single/multiple selection modes.\n * Built on React Aria with full ARIA compliance and keyboard accessibility.\n \n @component\n * @template T The type of items in the collection\n * @param {ListBoxProps<T>} args - The properties passed to the ListBox component\n * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref to the listbox container\n * @returns {React.ReactElement} A ListBox component\n \n @example\n * ```tsx\n * <ListBox aria-label=\"Fruits\" selectionMode=\"single\">\n * <ListBoxItem id=\"apple\" textValue=\"Apple\">Apple</ListBoxItem>\n * <ListBoxItem id=\"banana\" textValue=\"Banana\">Banana</ListBoxItem>\n * </ListBox>\n * ```\n * @public\n /\nfunction ListBoxComponent<T>(args: ListBoxProps<T>, ref: React.ForwardedRef<HTMLDivElement>): React.ReactElement {\n return (\n <CollectionBuilder content={<AriaCollection {...(args as unknown as Parameters<typeof AriaCollection>[0])} />}>\n {function buildCollection(collection: unknown) {\n return <StandaloneListBox props={args as ListBoxProps<unknown>} listBoxRef={ref} collection={collection} />;\n }}\n </CollectionBuilder>\n );\n}\n\n/\n Standalone ListBox component that manages its own state and collection.\n * This component is used internally by the main ListBox component after\n * collection building is complete. It handles prop processing, state creation,\n * and context management.\n \n @param {object} props - Component props\n * @param {ListBoxProps<unknown>} props.props - The original ListBox props\n * @param {React.ForwardedRef<HTMLDivElement>} props.listBoxRef - Reference to forward to the ListBox element\n * @param {unknown} props.collection - Built collection from CollectionBuilder\n * @returns {React.ReactElement} A complete ListBox with state management and optional context wrapping\n * @internal\n /\nconst StandaloneListBox: React.FC<{\n readonly props: ListBoxProps<unknown>;\n readonly listBoxRef: ForwardedRef<HTMLDivElement>;\n readonly collection: unknown;\n}> = function StandaloneListBox({ props, listBoxRef, collection }) {\n //\n // Extract renderEmptyState before useProps processes it to avoid render prop corruption\n //\n const originalRenderEmptyState = props.renderEmptyState;\n\n const { props: processedProps } = useProps(props);\n const processedRef = useSafeObjectRef(listBoxRef);\n const { state, contextState } = useListBoxState({ ...processedProps, collection });\n\n const { renderEmptyState: _, ...cleanProcessedProps } = processedProps as ListBoxProps<unknown> & {\n renderEmptyState?: unknown;\n };\n\n const content = (\n <ListBoxInner\n state={state}\n listBoxRef={processedRef}\n renderEmptyState={originalRenderEmptyState}\n {...cleanProcessedProps}\n />\n );\n\n return renderWithOptionalContext(content, state, contextState);\n};\n\n/\n A complete ListBox component providing accessible selection lists with keyboard navigation.\n * Supports both static children and dynamic collections, with single/multiple selection modes.\n * Built on React Aria with full ARIA compliance and keyboard accessibility.\n \n @component\n * @example\n * ```tsx\n * <ListBox aria-label=\"Fruits\" selectionMode=\"single\">\n * <ListBoxItem id=\"apple\" textValue=\"Apple\">Apple</ListBoxItem>\n * <ListBoxItem id=\"banana\" textValue=\"Banana\">Banana</ListBoxItem>\n * </ListBox>\n * ```\n * @public\n /\nexport const ListBox = withSlots('BentoListBox', ListBoxComponent);\n\n/\n Collection component for building dynamic collections in ListBox.\n * Re-exported from React Aria Collections.\n * @public\n /\nexport { AriaCollection as Collection };\n\n/\n Context for sharing ListBox state across components.\n * Used internally by ListBoxItem and ListBoxSection components.\n * @public\n /\nexport { ListStateContext };\n","import React, { ForwardedRef, ReactNode, createContext, useContext, useMemo } from 'react';\nimport { mergeProps, useOption, useHover } from 'react-aria';\nimport { createLeafComponent } from '@react-aria/collections';\nimport { HoverEvents, Key, LinkDOMProps, Node } from '@react-types/shared';\nimport { useDataAttributes } from '@bento/use-data-attributes';\nimport { useProps } from '@bento/use-props';\nimport { ListStateContext } from './listbox';\nimport { useSafeObjectRef } from './utils';\nimport { withSlots } from '@bento/slots';\n\n/\n Context value structure for text-related slot attributes.\n * Used to provide label and description attributes to child components.\n * @interface TextContextValue\n /\ninterface TextContextValue {\n readonly slots: {\n /* Attributes for label elements /\n readonly label?: React.HTMLAttributes<HTMLElement>;\n /* Attributes for description elements /\n readonly description?: React.HTMLAttributes<HTMLElement>;\n };\n}\n\n/\n Internal context for providing text-related slot attributes to child components.\n * This context allows ListBoxItem to pass label and description attributes\n * to nested components that need them for accessibility.\n * @internal\n /\nconst TextContext = createContext<TextContextValue>({ slots: {} });\n\n/\n Render props provided to ListBoxItem render functions.\n * @interface ListBoxItemRenderProps\n /\nexport interface ListBoxItemRenderProps {\n /\n Whether the item is currently hovered.\n * @selector [data-hovered]\n /\n readonly isHovered: boolean;\n /\n Whether the item is currently pressed.\n * @selector [data-pressed]\n /\n readonly isPressed: boolean;\n /\n Whether the item is currently selected.\n * @selector [data-selected]\n /\n readonly isSelected: boolean;\n /\n Whether the item is currently focused.\n * @selector [data-focused]\n /\n readonly isFocused: boolean;\n /\n Whether the item is currently keyboard focused.\n * @selector [data-focus-visible]\n /\n readonly isFocusVisible: boolean;\n /\n Whether the item is disabled.\n * @selector [data-disabled]\n /\n readonly isDisabled: boolean;\n /\n The type of selection that is allowed in the collection.\n * @selector [data-selection-mode=\"none \| single \| multiple\"]\n /\n readonly selectionMode: 'none' \| 'single' \| 'multiple';\n /\n The selection behavior for the collection.\n * @selector [data-selection-behavior=\"toggle \| replace\"]\n /\n readonly selectionBehavior: 'toggle' \| 'replace';\n}\n\n/\n Props for the ListBoxItem component.\n * @interface ListBoxItemProps\n * @template T The type of the item value\n /\nexport interface ListBoxItemProps<T = object>\n extends LinkDOMProps,\n HoverEvents,\n Omit<React.HTMLAttributes<HTMLElement>, keyof LinkDOMProps \| keyof HoverEvents \| 'id' \| 'children'> {\n /* The unique id of the item. If not provided, React Aria will auto-generate one. /\n readonly id?: Key;\n /* The object value that this item represents. When using dynamic collections, this is set automatically. /\n readonly value?: T;\n /* A string representation of the item's contents, used for features like typeahead. If not provided, React Aria will derive it from children automatically. /\n readonly textValue?: string;\n /\n Handler that is called when a user performs an action on the item. The exact user event depends on the\n * collection's `selectionBehavior` prop and the interaction modality.\n /\n readonly onAction?: () => void;\n /* The contents of the item. Can be a render function that receives render props. /\n readonly children?: ReactNode \| ((values: ListBoxItemRenderProps) => ReactNode);\n /\n A slot name for the component. Used by Bento's slot system.\n /\n readonly slot?: string;\n /* Whether the item is disabled. /\n readonly isDisabled?: boolean;\n}\n\n/\n Internal implementation component for ListBoxItem.\n * Handles the core logic for rendering a single listbox item with proper accessibility.\n * This component manages all the hooks, state, and interactions needed for a functional\n * listbox item including selection, hover, focus, and keyboard interactions.\n \n @template T - The type of the item value\n * @param {object} props - Combined ListBoxItem props and internal node data\n * @param {Node<T>} props.__node - Internal React Aria node containing item metadata\n * @param {React.ReactNode \| ((values: ListBoxItemRenderProps) => React.ReactNode)} [props.children] - Content to render, can be static or a render function\n * @param {boolean} [props.isDisabled] - Whether the item is disabled\n * @param {string} [props.aria-label] - ARIA label for accessibility\n * @param {(e: HoverEvent) => void} [props.onHoverStart] - Handler for hover start events\n * @param {(isHovering: boolean) => void} [props.onHoverChange] - Handler for hover change events\n * @param {(e: HoverEvent) => void} [props.onHoverEnd] - Handler for hover end events\n * @param {React.ForwardedRef<HTMLDivElement>} ref - Forwarded ref to the item element\n * @returns {React.ReactElement} A fully interactive listbox item with accessibility and state management\n * @internal\n /\nconst ListBoxItemImplComponent = function ListBoxItemImplComponent<T extends object>(\n { __node, ...props }: ListBoxItemProps<T> & { readonly __node: Node<T> },\n ref: ForwardedRef<HTMLDivElement>\n) {\n const state = useContext(ListStateContext)!;\n const safeRef = useSafeObjectRef(ref);\n\n const { optionProps, labelProps, descriptionProps, ...states } = useOption(\n {\n key: __node.key,\n 'aria-label': props['aria-label'],\n isDisabled: props.isDisabled\n },\n state,\n safeRef\n );\n\n const { hoverProps, isHovered } = useHover({\n isDisabled: states.isDisabled,\n onHoverStart: props.onHoverStart,\n onHoverChange: props.onHoverChange,\n onHoverEnd: props.onHoverEnd\n });\n\n const renderValues: ListBoxItemRenderProps = {\n ...states,\n isHovered,\n selectionMode: state.selectionManager.selectionMode,\n selectionBehavior: state.selectionManager.selectionBehavior\n };\n\n const content = typeof props.children === 'function' ? props.children(renderValues) : props.children;\n\n const { apply } = useProps(props, renderValues);\n\n const dataAttributes = useDataAttributes({\n selected: states.isSelected,\n disabled: states.isDisabled,\n hovered: isHovered,\n focused: states.isFocused,\n 'focus-visible': states.isFocusVisible,\n pressed: states.isPressed,\n level: __node.level,\n 'selection-mode': state.selectionManager.selectionMode,\n 'selection-behavior': state.selectionManager.selectionBehavior\n });\n\n const textContext = useMemo(\n function createTextContext() {\n return {\n slots: {\n label: labelProps,\n description: descriptionProps\n }\n };\n },\n [labelProps, descriptionProps]\n );\n\n const ElementType = __node.props.href ? 'a' : 'div';\n\n // Use original node props (which contain className) not filtered finalProps\n const appliedUserProps = apply(__node.props, ['ref']);\n\n const finalAttributes = {\n ...mergeProps(optionProps, hoverProps), // React Aria props\n ...dataAttributes, // Bento data attributes\n ...appliedUserProps,\n ref: safeRef,\n 'data-text-value': __node.textValue\n };\n\n return (\n <TextContext.Provider value={textContext}>\n {React.createElement(ElementType, finalAttributes, content)}\n </TextContext.Provider>\n );\n};\n\n/\n Enhanced ListBoxItem implementation with slots support.\n * This wraps the core ListBoxItemImplComponent with Bento's slot system\n * for advanced composition and styling capabilities.\n * @internal\n /\nexport const ListBoxItemImpl = withSlots('BentoListBoxItem', ListBoxItemImplComponent);\n\n/\n Adapter component that connects ListBoxItemImpl to React Aria's collection system.\n * This function serves as a bridge between React Aria's createLeafComponent and\n * the internal ListBoxItemImpl, ensuring proper prop forwarding and node injection.\n \n @template T - The type of the item value\n * @param {ListBoxItemProps<T>} props - ListBoxItem component props\n * @param {React.ForwardedRef<HTMLDivElement>} forwardedRef - Ref forwarded from the collection system\n * @param {Node<T>} item - React Aria node containing item metadata and collection info\n * @returns {React.ReactElement} The ListBoxItemImpl component with proper node and ref wiring\n * @internal\n /\nfunction ListBoxItemComponent<T extends object>(\n props: ListBoxItemProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n item: Node<T>\n) {\n return <ListBoxItemImpl {...props} ref={forwardedRef as any} __node={item} />;\n}\n\n/\n Base ListBoxItem component created through React Aria's collection system.\n * This handles the connection to the parent ListBox's collection state.\n * @internal\n /\nconst ListBoxItemBase = createLeafComponent('item', ListBoxItemComponent);\n\n/\n A single item within a ListBox component.\n * Handles user interactions, accessibility, and state management for individual options.\n \n @component\n * @template T The type of the item value\n * @example\n * ```tsx\n * <ListBoxItem>Simple option</ListBoxItem>\n * ```\n * @public\n */\nexport const ListBoxItem = ListBoxItemBase;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bento/listbox",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Listbox component",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,9 +43,9 @@
     "package.json"
   ],
   "dependencies": {
-    "@bento/slots": "^0.1.3",
+    "@bento/slots": "^0.2.0",
     "@bento/use-data-attributes": "^0.1.1",
-    "@bento/use-props": "^0.1.1",
+    "@bento/use-props": "^0.2.0",
     "@react-aria/collections": "^3.0.0",
     "@react-types/listbox": "^3.7.1",
     "react-aria": "^3.44.0",

package/src/header.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { forwardRef, createContext, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import { createLeafComponent } from '@react-aria/collections';
 import { useProps } from '@bento/use-props';
 import { withSlots, type Slots } from '@bento/slots';
@@ -52,7 +52,7 @@ export const HeaderContext = createContext<HeaderContextValue>({});
  */
 const BentoHeaderImpl = withSlots(
   'BentoHeader',
-  forwardRef(function BentoHeader(props: BentoHeaderProps, ref: React.ForwardedRef<HTMLElement>) {
+  function BentoHeader(props: BentoHeaderProps, ref: React.ForwardedRef<HTMLElement>) {
     const { props: processedProps, apply } = useProps(props);
     const contextProps = useContext(HeaderContext);
@@ -69,7 +69,7 @@ const BentoHeaderImpl = withSlots(
         {processedProps.children}
       </header>
     );
-  })
+  }
 );
 /**

package/src/listbox-item.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, ReactNode, createContext, useContext, useMemo, forwardRef } from 'react';
+import React, { ForwardedRef, ReactNode, createContext, useContext, useMemo } from 'react';
 import { mergeProps, useOption, useHover } from 'react-aria';
 import { createLeafComponent } from '@react-aria/collections';
 import { HoverEvents, Key, LinkDOMProps, Node } from '@react-types/shared';
@@ -211,7 +211,7 @@ const ListBoxItemImplComponent = function ListBoxItemImplComponent<T extends obj
  * for advanced composition and styling capabilities.
  * @internal
  */
-export const ListBoxItemImpl = withSlots('BentoListBoxItem', forwardRef(ListBoxItemImplComponent));
+export const ListBoxItemImpl = withSlots('BentoListBoxItem', ListBoxItemImplComponent);
 /**
  * Adapter component that connects ListBoxItemImpl to React Aria's collection system.
@@ -230,7 +230,7 @@ function ListBoxItemComponent<T extends object>(
   forwardedRef: ForwardedRef<HTMLDivElement>,
   item: Node<T>
 ) {
-  return <ListBoxItemImpl {...props} ref={forwardedRef} __node={item} />;
+  return <ListBoxItemImpl {...props} ref={forwardedRef as any} __node={item} />;
 }
 /**

package/src/listbox-section.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useContext } from 'react';
+import React, { useRef, useContext } from 'react';
 import { useListBoxSection, mergeProps } from 'react-aria';
 import { createBranchComponent } from '@react-aria/collections';
 import { CollectionRendererContext } from 'react-aria-components';
@@ -62,36 +62,32 @@ interface ListBoxSectionInnerProps {
  *
  * @internal
  */
-const BentoListBoxSectionImpl = withSlots(
-  'BentoListBoxSection',
-  forwardRef(function BentoListBoxSectionImpl<T>(
-    { __node, children, title: titleProp, ...rest }: BentoListBoxSectionImplProps<T>,
-    ref: React.ForwardedRef<HTMLElement>
-  ) {
-    const { props, apply } = useProps(rest);
-    const data = useDataAttributes({ level: __node?.level });
-    const headingRef = useRef<HTMLDivElement>(null);
+const BentoListBoxSectionImpl = withSlots('BentoListBoxSection', function BentoListBoxSectionImpl<
+  T
+>({ __node, children, title: titleProp, ...rest }: BentoListBoxSectionImplProps<T>, ref: React.ForwardedRef<HTMLElement>) {
+  const { props, apply } = useProps(rest);
+  const data = useDataAttributes({ level: __node?.level });
+  const headingRef = useRef<HTMLDivElement>(null);
-    const title = titleProp ?? props.title ?? __node?.rendered;
-    const { groupProps, headingProps } = useListBoxSection({
-      heading: title,
-      'aria-label': props['aria-label']
-    });
+  const title = titleProp ?? props.title ?? __node?.rendered;
+  const { groupProps, headingProps } = useListBoxSection({
+    heading: title,
+    'aria-label': props['aria-label']
+  });
-    const composed = mergeProps(apply({ ...data, ...props }, ['children', 'title', 'slot']), groupProps);
+  const composed = mergeProps(apply({ ...data, ...props }, ['children', 'title', 'slot']), groupProps);
-    const sectionContent = children || props.children;
+  const sectionContent = children || props.children;
-    return (
-      <section {...composed} ref={ref}>
-        <HeaderContext.Provider value={{ ...headingProps, ref: headingRef }}>
-          {title && <div {...headingProps}>{title}</div>}
-          {sectionContent}
-        </HeaderContext.Provider>
-      </section>
-    );
-  })
-);
+  return (
+    <section {...composed} ref={ref}>
+      <HeaderContext.Provider value={{ ...headingProps, ref: headingRef }}>
+        {title && <div {...headingProps}>{title}</div>}
+        {sectionContent}
+      </HeaderContext.Provider>
+    </section>
+  );
+});
 /**
  * Wrapper component that connects BentoListBoxSectionImpl to React Aria's collection system.