@ariakit/react-components 0.1.1 → 0.1.2

package/dist/composite/composite-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"composite-container.js","names":["composite"],"sources":["../../src/composite/composite-container.tsx"],"sourcesContent":["// TODO: Add data-attribute to indicate whether it's expanded?\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  isButton,\n  isTextField,\n  isFocusEventOutside,\n  isSelfTarget,\n  disableFocusIn,\n  getFirstTabbableIn,\n  restoreFocusIn,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, KeyboardEvent, MouseEvent } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\nimport { selectTextField } from \"./utils.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getFirstTabbable(container: HTMLElement) {\n  restoreFocusIn(container);\n  const tabbable = getFirstTabbableIn(container);\n  disableFocusIn(container);\n  return tabbable;\n}\n\n/**\n * Returns props to create a `CompositeContainer` component. This component\n * renders interactive widgets inside composite items. This should be used in\n * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,\n * or any other component/hook that uses `CompositeItem` underneath.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeContainer({ store });\n * <Composite store={store}>\n *   <CompositeItem {...props}>\n *     <input type=\"text\" />\n *   </CompositeItem>\n * </Composite>\n * ```\n */\nexport const useCompositeContainer = createHook<\n  TagName,\n  CompositeContainerOptions\n>(function useCompositeContainer({ store, ...props }) {\n  const context = useCompositeContext();\n  store = store || context;\n\n  const ref = useRef<HTMLType>(null);\n  const isOpenRef = useRef(false);\n\n  const open = (collapseToEnd = false) => {\n    const container = ref.current;\n    if (!container) return;\n    restoreFocusIn(container);\n    const tabbable = getFirstTabbableIn(container);\n    if (!tabbable) {\n      disableFocusIn(container);\n      return;\n    }\n    isOpenRef.current = true;\n    queueMicrotask(() => {\n      tabbable.focus();\n      if (isTextField(tabbable) || tabbable.isContentEditable) {\n        selectTextField(tabbable, collapseToEnd);\n      }\n    });\n  };\n\n  const close = () => {\n    const container = ref.current;\n    if (!container) return;\n    isOpenRef.current = false;\n    disableFocusIn(container);\n  };\n\n  const renderedItems = useStoreState(store, \"renderedItems\");\n\n  // Disable focus on the tabbable elements inside the container when the\n  // container is mounted.\n  useEffect(() => {\n    const container = ref.current;\n    if (!container) return;\n    const isOpen = isOpenRef.current;\n    // We need to wait for the items to be populated before we can disable\n    // focus, so we consider edge cases where some tabbable elements become\n    // disabled after the first render (for example, when rendering nested\n    // composite elements).\n    if (!isOpen && renderedItems?.length) {\n      disableFocusIn(container);\n    }\n  }, [renderedItems]);\n\n  const onFocusProp = props.onFocus;\n\n  const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n    onFocusProp?.(event);\n    if (event.defaultPrevented) return;\n    if (!store) return;\n    const isOpen = isOpenRef.current;\n    if (isSelfTarget(event)) {\n      // The container element itself has received focus. Here we make an\n      // additional step in case tabbable elements have been added lazily to\n      // the DOM. We get all containers in the current composite element and\n      // disable all tabbable elements inside them.\n      isOpenRef.current = false;\n      const { baseElement } = store.getState();\n      const composite = baseElement;\n      const selector = \"[data-composite-container]\";\n      const containers = composite?.querySelectorAll<HTMLElement>(selector);\n      if (containers) {\n        for (const container of containers) {\n          disableFocusIn(container);\n        }\n      }\n    } else if (!isOpen) {\n      // Otherwise, if any element inside the container has received focus,\n      // for example, by a direct user click, we should act as the container\n      // has been opened.\n      isOpenRef.current = true;\n      restoreFocusIn(event.currentTarget);\n      // Resets the moves in the store so the composite item will not be\n      // focused right after the focusable element inside the container gets\n      // focus.\n      store?.setState(\"moves\", 0);\n    }\n  });\n\n  const onBlurProp = props.onBlur;\n\n  const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n    onBlurProp?.(event);\n    if (event.defaultPrevented) return;\n    if (isFocusEventOutside(event)) {\n      close();\n    }\n  });\n\n  const onKeyDownProp = props.onKeyDown;\n\n  const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n    onKeyDownProp?.(event);\n    if (event.defaultPrevented) return;\n    if (event.altKey) return;\n    if (event.ctrlKey) return;\n    if (event.metaKey) return;\n    if (event.shiftKey) return;\n    const container = event.currentTarget;\n    if (isSelfTarget(event)) {\n      // Alphanumeric key on container: focus the first tabbable element in\n      // the container if it's a text field or contenteditable element. This\n      // will automatically replace the text field value with the pressed key.\n      if (event.key.length === 1 && event.key !== \" \") {\n        const tabbable = getFirstTabbable(container);\n        if (!tabbable) return;\n        if (isTextField(tabbable) || tabbable.isContentEditable) {\n          event.stopPropagation();\n          open();\n        }\n      }\n\n      // Delete/Backspace on container: focus on the first tabbable element in\n      // the container if it's a text field or contenteditable element. This\n      // will automatically clear the text field value.\n      else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n        const tabbable = getFirstTabbable(container);\n        if (!tabbable) return;\n        if (isTextField(tabbable) || tabbable.isContentEditable) {\n          open();\n          // We need to move focus back to the container as soon as the\n          // delete/backspace key is captured by the text field.\n          const onInput = () => queueMicrotask(() => container.focus());\n          container.addEventListener(\"input\", onInput, { once: true });\n        }\n      }\n    }\n\n    // Escape on tabbable element inside container: move focus back to the\n    // container.\n    else if (event.key === \"Escape\") {\n      queueMicrotask(() => container.focus());\n    }\n\n    // Enter on tabbable element inside container: move focus back to the\n    // container only if it's an input or contenteditable element.\n    else if (event.key === \"Enter\") {\n      const target = event.target as HTMLElement;\n      const isInput =\n        (target.tagName === \"INPUT\" && !isButton(target)) ||\n        target.tagName === \"TEXTAREA\";\n      if (isInput || target.isContentEditable) {\n        event.preventDefault();\n        queueMicrotask(() => container.focus());\n      }\n    }\n  });\n\n  const onClickProp = props.onClick;\n\n  const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n    onClickProp?.(event);\n    if (event.defaultPrevented) return;\n    if (isSelfTarget(event) && !event.detail) {\n      // Move focus to the first tabbable element in the container and place\n      // at the end.\n      open(true);\n    }\n  });\n\n  props = {\n    \"data-composite-container\": \"\",\n    ...props,\n    ref: useMergeRefs(ref, props.ref),\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onClick,\n  };\n\n  return removeUndefinedValues(props);\n});\n\n/**\n * Renders a container for interactive widgets inside composite items. This\n * should be used in conjunction with the\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) component or\n * a component that uses\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-5}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem render={<CompositeContainer />}>\n *       <input type=\"text\" />\n *     </CompositeItem>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeContainer = forwardRef(function CompositeContainer(\n  props: CompositeContainerProps,\n) {\n  const htmlProps = useCompositeContainer(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeContainerOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n}\n\nexport type CompositeContainerProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeContainerOptions<T>\n>;\n"],"mappings":"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"}
+{"version":3,"file":"composite-container.js","names":["composite"],"sources":["../../src/composite/composite-container.tsx"],"sourcesContent":["// TODO: Add data-attribute to indicate whether it's expanded?\nimport { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  isButton,\n  isTextField,\n  isFocusEventOutside,\n  isSelfTarget,\n  disableFocusIn,\n  getFirstTabbableIn,\n  restoreFocusIn,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, KeyboardEvent, MouseEvent } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { useCompositeScopedContext } from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\nimport { selectTextField } from \"./utils.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getFirstTabbable(container: HTMLElement) {\n  restoreFocusIn(container);\n  const tabbable = getFirstTabbableIn(container);\n  disableFocusIn(container);\n  return tabbable;\n}\n\n/**\n * Returns props to create a `CompositeContainer` component. This component\n * renders interactive widgets inside composite items. This should be used in\n * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,\n * or any other component/hook that uses `CompositeItem` underneath.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeContainer({ store });\n * <Composite store={store}>\n *   <CompositeItem {...props}>\n *     <input type=\"text\" />\n *   </CompositeItem>\n * </Composite>\n * ```\n */\nexport const useCompositeContainer = createHook<\n  TagName,\n  CompositeContainerOptions\n>(function useCompositeContainer({ store, ...props }) {\n  const context = useCompositeScopedContext();\n  store = store || context;\n\n  const ref = useRef<HTMLType>(null);\n  const isOpenRef = useRef(false);\n\n  const open = (collapseToEnd = false) => {\n    const container = ref.current;\n    if (!container) return;\n    restoreFocusIn(container);\n    const tabbable = getFirstTabbableIn(container);\n    if (!tabbable) {\n      disableFocusIn(container);\n      return;\n    }\n    isOpenRef.current = true;\n    queueMicrotask(() => {\n      tabbable.focus();\n      if (isTextField(tabbable) || tabbable.isContentEditable) {\n        selectTextField(tabbable, collapseToEnd);\n      }\n    });\n  };\n\n  const close = () => {\n    const container = ref.current;\n    if (!container) return;\n    isOpenRef.current = false;\n    disableFocusIn(container);\n  };\n\n  const renderedItems = useStoreState(store, \"renderedItems\");\n\n  // Disable focus on the tabbable elements inside the container when the\n  // container is mounted.\n  useEffect(() => {\n    const container = ref.current;\n    if (!container) return;\n    const isOpen = isOpenRef.current;\n    // We need to wait for the items to be populated before we can disable\n    // focus, so we consider edge cases where some tabbable elements become\n    // disabled after the first render (for example, when rendering nested\n    // composite elements).\n    if (!isOpen && renderedItems?.length) {\n      disableFocusIn(container);\n    }\n  }, [renderedItems]);\n\n  const onFocusProp = props.onFocus;\n\n  const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n    onFocusProp?.(event);\n    if (event.defaultPrevented) return;\n    if (!store) return;\n    const isOpen = isOpenRef.current;\n    if (isSelfTarget(event)) {\n      // The container element itself has received focus. Here we make an\n      // additional step in case tabbable elements have been added lazily to\n      // the DOM. We get all containers in the current composite element and\n      // disable all tabbable elements inside them.\n      isOpenRef.current = false;\n      const { baseElement } = store.getState();\n      const composite = baseElement;\n      const selector = \"[data-composite-container]\";\n      const containers = composite?.querySelectorAll<HTMLElement>(selector);\n      if (containers) {\n        for (const container of containers) {\n          disableFocusIn(container);\n        }\n      }\n    } else if (!isOpen) {\n      // Otherwise, if any element inside the container has received focus,\n      // for example, by a direct user click, we should act as the container\n      // has been opened.\n      isOpenRef.current = true;\n      restoreFocusIn(event.currentTarget);\n      // Resets the moves in the store so the composite item will not be\n      // focused right after the focusable element inside the container gets\n      // focus.\n      store?.setState(\"moves\", 0);\n    }\n  });\n\n  const onBlurProp = props.onBlur;\n\n  const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n    onBlurProp?.(event);\n    if (event.defaultPrevented) return;\n    if (isFocusEventOutside(event)) {\n      close();\n    }\n  });\n\n  const onKeyDownProp = props.onKeyDown;\n\n  const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n    onKeyDownProp?.(event);\n    if (event.defaultPrevented) return;\n    if (event.altKey) return;\n    if (event.ctrlKey) return;\n    if (event.metaKey) return;\n    if (event.shiftKey) return;\n    const container = event.currentTarget;\n    if (isSelfTarget(event)) {\n      // Alphanumeric key on container: focus the first tabbable element in\n      // the container if it's a text field or contenteditable element. This\n      // will automatically replace the text field value with the pressed key.\n      if (event.key.length === 1 && event.key !== \" \") {\n        const tabbable = getFirstTabbable(container);\n        if (!tabbable) return;\n        if (isTextField(tabbable) || tabbable.isContentEditable) {\n          event.stopPropagation();\n          open();\n        }\n      }\n\n      // Delete/Backspace on container: focus on the first tabbable element in\n      // the container if it's a text field or contenteditable element. This\n      // will automatically clear the text field value.\n      else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n        const tabbable = getFirstTabbable(container);\n        if (!tabbable) return;\n        if (isTextField(tabbable) || tabbable.isContentEditable) {\n          open();\n          // We need to move focus back to the container as soon as the\n          // delete/backspace key is captured by the text field.\n          const onInput = () => queueMicrotask(() => container.focus());\n          container.addEventListener(\"input\", onInput, { once: true });\n        }\n      }\n    }\n\n    // Escape on tabbable element inside container: move focus back to the\n    // container.\n    else if (event.key === \"Escape\") {\n      queueMicrotask(() => container.focus());\n    }\n\n    // Enter on tabbable element inside container: move focus back to the\n    // container only if it's an input or contenteditable element.\n    else if (event.key === \"Enter\") {\n      const target = event.target as HTMLElement;\n      const isInput =\n        (target.tagName === \"INPUT\" && !isButton(target)) ||\n        target.tagName === \"TEXTAREA\";\n      if (isInput || target.isContentEditable) {\n        event.preventDefault();\n        queueMicrotask(() => container.focus());\n      }\n    }\n  });\n\n  const onClickProp = props.onClick;\n\n  const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n    onClickProp?.(event);\n    if (event.defaultPrevented) return;\n    if (isSelfTarget(event) && !event.detail) {\n      // Move focus to the first tabbable element in the container and place\n      // at the end.\n      open(true);\n    }\n  });\n\n  props = {\n    \"data-composite-container\": \"\",\n    ...props,\n    ref: useMergeRefs(ref, props.ref),\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onClick,\n  };\n\n  return removeUndefinedValues(props);\n});\n\n/**\n * Renders a container for interactive widgets inside composite items. This\n * should be used in conjunction with the\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) component or\n * a component that uses\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-5}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem render={<CompositeContainer />}>\n *       <input type=\"text\" />\n *     </CompositeItem>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeContainer = forwardRef(function CompositeContainer(\n  props: CompositeContainerProps,\n) {\n  const htmlProps = useCompositeContainer(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeContainerOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n}\n\nexport type CompositeContainerProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeContainerOptions<T>\n>;\n"],"mappings":"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"}

package/dist/composite/composite-group-label.d.ts

@@ -1,5 +1,5 @@
 import { t as CompositeStore } from "../composite-store-DyJc-XRA.js";
-import { n as GroupLabelOptions } from "../group-label-C16IDs1b.js";
+import { n as GroupLabelOptions } from "../group-label-BKYqD4Sj.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
 
@@ -37,7 +37,7 @@ declare const useCompositeGroupLabel: import("@ariakit/react-utils").Hook<"div",
  * </CompositeProvider>
  * ```
  */
-declare const CompositeGroupLabel: (props: CompositeGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CompositeGroupLabel: (props: CompositeGroupLabelProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CompositeGroupLabelOptions<T extends ElementType = TagName> extends GroupLabelOptions<T> {
   /**
    * Object returned by the

package/dist/composite/composite-group-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite-group-label.d.ts","names":["Props","ElementType","GroupLabelOptions","CompositeStore","TagName","useCompositeGroupLabel","CompositeGroupLabelOptions","Hook","CompositeGroupLabel","CompositeGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/composite/composite-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAa7B;;AAf2D,cAetCC,sBAAAA,iCAAuDE,IAAAA,QAAYD,0BAA0B;;AAAA;AAmBlH;;;;;;;;;AAA+J;AAC/J;;;;;;cADqBE,mBAAAA,GAAsBE,KAAAA,EAAOD,wBAAwB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzHN,0BAAAA,WAAqCL,WAAAA,GAAcG,OAAAA,UAAiBF,iBAAAA,CAAkBW,CAAAA;EAAD;;;;;;;;EASlGC,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,wBAAAA,WAAmCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,0BAAAA,CAA2BO,CAAAA"}
+{"version":3,"file":"composite-group-label.d.ts","names":["Props","ElementType","GroupLabelOptions","CompositeStore","TagName","useCompositeGroupLabel","CompositeGroupLabelOptions","Hook","CompositeGroupLabel","CompositeGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/composite/composite-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAa7B;;AAf2D,cAetCC,sBAAAA,iCAAuDE,IAAAA,QAAYD,0BAA0B;;AAAA;AAmBlH;;;;;;;;;AAAmK;AACnK;;;;;;cADqBE,mBAAAA,GAAsBE,KAAAA,EAAOD,wBAAwB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC7HN,0BAAAA,WAAqCL,WAAAA,GAAcG,OAAAA,UAAiBF,iBAAAA,CAAkBW,CAAAA;EAAD;;;;;;;;EASlGC,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,wBAAAA,WAAmCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,0BAAAA,CAA2BO,CAAAA"}

package/dist/composite/composite-group.d.ts

@@ -1,5 +1,5 @@
 import { t as CompositeStore } from "../composite-store-DyJc-XRA.js";
-import { n as GroupOptions } from "../group-CamegDJA.js";
+import { n as GroupOptions } from "../group-nGD9e6Dj.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
 
@@ -42,7 +42,7 @@ declare const useCompositeGroup: import("@ariakit/react-utils").Hook<"div", Comp
  * </CompositeProvider>
  * ```
  */
-declare const CompositeGroup: (props: CompositeGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CompositeGroup: (props: CompositeGroupProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CompositeGroupOptions<T extends ElementType = TagName> extends GroupOptions<T> {
   /**
    * Object returned by the

package/dist/composite/composite-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite-group.d.ts","names":["Props","ElementType","GroupOptions","CompositeStore","TagName","useCompositeGroup","CompositeGroupOptions","Hook","CompositeGroup","CompositeGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/composite/composite-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAiB7B;;;;AAAwG;AAoBxG;AAvC2D,cAmBtCC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;;;;;;;AAoB6C;AACrJ;;;;;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,YAAAA,CAAaW,CAAAA;EAAbX;;;;;AAStD;AAE1B;;EAFIY,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}
+{"version":3,"file":"composite-group.d.ts","names":["Props","ElementType","GroupOptions","CompositeStore","TagName","useCompositeGroup","CompositeGroupOptions","Hook","CompositeGroup","CompositeGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/composite/composite-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAiB7B;;;;AAAwG;AAoBxG;AAvC2D,cAmBtCC,iBAAAA,iCAAkDE,IAAAA,QAAYD,qBAAqB;;;;;;;;AAoBiD;AACzJ;;;;;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACnHN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,YAAAA,CAAaW,CAAAA;EAAbX;;;;;AAStD;AAE1B;;EAFIY,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

package/dist/composite/composite-hover.d.ts

@@ -1,2 +1,2 @@
-import { i as useCompositeHover, n as CompositeHoverOptions, r as CompositeHoverProps, t as CompositeHover } from "../composite-hover-C7ul163w.js";
+import { i as useCompositeHover, n as CompositeHoverOptions, r as CompositeHoverProps, t as CompositeHover } from "../composite-hover-BpXq3T8J.js";
 export { CompositeHover, CompositeHoverOptions, CompositeHoverProps, useCompositeHover };

package/dist/composite/composite-hover.js

@@ -1,24 +1,20 @@
 "use client";
-import { useCompositeContext } from "./composite-context.js";
+import { useCompositeScopedContext } from "./composite-context.js";
 import { createElement, createHook, forwardRef, memo, useBooleanEvent, useEvent, useIsMouseMoving, useMergeRefs } from "@ariakit/react-utils";
-import { contains, hasFocus, hasFocusWithin, hasOwnProperty, invariant, removeUndefinedValues } from "@ariakit/utils";
+import { contains, hasFocus, hasFocusWithin, hasOwnProperty, invariant, isElement, removeUndefinedValues } from "@ariakit/utils";
 import { useCallback } from "react";
 //#region src/composite/composite-hover.tsx
 const TagName = "div";
-function getMouseDestination(event) {
-	const relatedTarget = event.relatedTarget;
-	if (relatedTarget?.nodeType === Node.ELEMENT_NODE) return relatedTarget;
-	return null;
-}
 function hoveringInside(event) {
-	const nextElement = getMouseDestination(event);
-	if (!nextElement) return false;
+	const nextElement = event.relatedTarget;
+	if (!isElement(nextElement)) return false;
 	return contains(event.currentTarget, nextElement);
 }
 const symbol = Symbol("composite-hover");
 function movingToAnotherItem(event) {
-	let dest = getMouseDestination(event);
-	if (!dest) return false;
+	const { relatedTarget } = event;
+	if (!isElement(relatedTarget)) return false;
+	let dest = relatedTarget;
 	do {
 		if (hasOwnProperty(dest, symbol) && dest[symbol]) return true;
 		dest = dest.parentElement;
@@ -40,9 +36,9 @@ function movingToAnotherItem(event) {
 * ```
 */
 const useCompositeHover = createHook(function useCompositeHover({ store, focusOnHover = true, blurOnHoverEnd = !!focusOnHover, ...props }) {
-	const context = useCompositeContext();
+	const context = useCompositeScopedContext();
 	store = store || context;
-	invariant(store, "CompositeHover must be wrapped in a Composite component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "CompositeHover must be wrapped in a Composite component.");
 	const isMouseMoving = useIsMouseMoving();
 	const onMouseMoveProp = props.onMouseMove;
 	const focusOnHoverProp = useBooleanEvent(focusOnHover);

package/dist/composite/composite-hover.js.map

@@ -1 +1 @@
-{"version":3,"file":"composite-hover.js","names":[],"sources":["../../src/composite/composite-hover.tsx"],"sourcesContent":["import {\n  useBooleanEvent,\n  useEvent,\n  useIsMouseMoving,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  contains,\n  hasFocus,\n  hasFocusWithin,\n  hasOwnProperty,\n  invariant,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent as ReactMouseEvent } from \"react\";\nimport { useCallback } from \"react\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getMouseDestination(event: ReactMouseEvent<HTMLElement>) {\n  const relatedTarget = event.relatedTarget as Node | null;\n  if (relatedTarget?.nodeType === Node.ELEMENT_NODE) {\n    return relatedTarget as Element;\n  }\n  return null;\n}\n\nfunction hoveringInside(event: ReactMouseEvent<HTMLElement>) {\n  const nextElement = getMouseDestination(event);\n  if (!nextElement) return false;\n  return contains(event.currentTarget, nextElement);\n}\n\nconst symbol = Symbol(\"composite-hover\");\ntype ElementWithSymbol = HTMLElement & { [symbol]?: boolean };\n\nfunction movingToAnotherItem(event: ReactMouseEvent<HTMLElement>) {\n  let dest = getMouseDestination(event);\n  if (!dest) return false;\n  do {\n    if (hasOwnProperty(dest, symbol) && dest[symbol]) return true;\n    dest = dest.parentElement;\n  } while (dest);\n  return false;\n}\n\n/**\n * Returns props to create a `CompositeHover` component. The composite item that\n * receives these props will get focused on mouse move and lose focus to the\n * composite base element on mouse leave. This should be combined with the\n * `CompositeItem` component, the `useCompositeItem` hook or any component/hook\n * that uses them underneath.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeHover({ store });\n * <CompositeItem store={store} {...props}>Item</CompositeItem>\n * ```\n */\nexport const useCompositeHover = createHook<TagName, CompositeHoverOptions>(\n  function useCompositeHover({\n    store,\n    focusOnHover = true,\n    blurOnHoverEnd = !!focusOnHover,\n    ...props\n  }) {\n    const context = useCompositeContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"CompositeHover must be wrapped in a Composite component.\",\n    );\n\n    const isMouseMoving = useIsMouseMoving();\n\n    const onMouseMoveProp = props.onMouseMove;\n    const focusOnHoverProp = useBooleanEvent(focusOnHover);\n\n    const onMouseMove = useEvent((event: ReactMouseEvent<HTMLType>) => {\n      onMouseMoveProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!isMouseMoving()) return;\n      if (!focusOnHoverProp(event)) return;\n      // If we're hovering over an item that doesn't have DOM focus, we move\n      // focus to the composite element. We're doing this here before setting\n      // the active id because the composite element will automatically set the\n      // active id to null when it receives focus.\n      if (!hasFocusWithin(event.currentTarget)) {\n        const baseElement = store?.getState().baseElement;\n        if (baseElement && !hasFocus(baseElement)) {\n          baseElement.focus();\n        }\n      }\n      store?.setActiveId(event.currentTarget.id);\n    });\n\n    const onMouseLeaveProp = props.onMouseLeave;\n    const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);\n\n    const onMouseLeave = useEvent((event: ReactMouseEvent<HTMLType>) => {\n      onMouseLeaveProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!isMouseMoving()) return;\n      if (hoveringInside(event)) return;\n      if (movingToAnotherItem(event)) return;\n      if (!focusOnHoverProp(event)) return;\n      if (!blurOnHoverEndProp(event)) return;\n      store?.setActiveId(null);\n      // Move focus to the composite element.\n      store?.getState().baseElement?.focus();\n    });\n\n    const ref = useCallback((element: ElementWithSymbol | null) => {\n      if (!element) return;\n      element[symbol] = true;\n    }, []);\n\n    props = {\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n      onMouseMove,\n      onMouseLeave,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders an element in a composite widget that receives focus on mouse move\n * and loses focus to the composite base element on mouse leave.\n *\n * This should be combined with the\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) component.\n * The\n * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)\n * and\n * [`blurOnHoverEnd`](https://ariakit.com/reference/composite-hover#bluronhoverend)\n * props can be used to customize the behavior.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-5}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeHover render={<CompositeItem />}>\n *       Item\n *     </CompositeHover>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeHover = memo(\n  forwardRef(function CompositeHover(props: CompositeHoverProps) {\n    const htmlProps = useCompositeHover(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface CompositeHoverOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n  /**\n   * Determines if the composite item should be _focused_ when hovered over.\n   *\n   * Note that the actual DOM focus will stay on the composite element. This\n   * item will get the\n   * [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)\n   * attribute so it can be styled as if it's focused.\n   *\n   * Live examples:\n   * - [Multi-selectable\n   *   Combobox](https://ariakit.com/examples/combobox-multiple)\n   * - [Combobox with integrated\n   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * @default true\n   */\n  focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;\n  /**\n   * Determines if the composite item should lose focus when the mouse leaves.\n   * By default, this is set to `true` if\n   * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)\n   * is `true`.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Combobox with integrated\n   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   * - [Select with Combobox and\n   *   Tabs](https://ariakit.com/examples/select-combobox-tab)\n   */\n  blurOnHoverEnd?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;\n}\n\nexport type CompositeHoverProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeHoverOptions<T>\n>;\n"],"mappings":";;;;;;AA6BA,MAAA,UAAS;SACD,oBAAsB,OAAA;CAC5B,MAAI,gBAAe,MAAA;CAGnB,IAAA,eAAO,aAAA,KAAA,cAAA,OAAA;CACT,OAAA;AAEA;SACQ,eAAc,OAAA;CACpB,MAAK,cAAa,oBAAO,KAAA;CACzB,IAAA,CAAA,aAAgB,OAAM;CACxB,OAAA,SAAA,MAAA,eAAA,WAAA;AAEA;AAGA,MAAA,SAAS,OAAA,iBAAyD;SAC5D,oBAAO,OAAoB;CAC/B,IAAI,OAAO,oBAAO,KAAA;CAClB,IAAG,CAAA,MAAA,OAAA;IACD;EACA,IAAA,eAAY,MAAA,MAAA,KAAA,KAAA,SAAA,OAAA;EACd,OAAA,KAAS;CACT,SAAO;CACT,OAAA;;;;;;;;;;;;;;;;MAuBI,oBAAgB,WAAoB,SAAA,kBAAA,EAAA,OAAA,eAAA,MAAA,iBAAA,CAAA,CAAA,cAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,0DAAiC;CAEvC,MAAM,gBAAA,iBAAwB;CAC9B,MAAM,kBAAA,MAAmB;CAEzB,MAAM,mBAAc,gBAA+C,YAAA;OACjE,cAAkB,UAAK,UAAA;EACvB,kBAAU,KAAA;EACV,IAAI,MAAC,kBAAiB;EACtB,IAAI,CAAC,cAAA,GAAiB;EAKtB,IAAI,CAAC,iBAAe,KAAM,GAAA;MACxB,CAAA,eAAM,MAAc,aAAkB,GAAA;GACtC,MAAI,cAAgB,OAAA,SAAS,EAAA;GAG/B,IAAA,eAAA,CAAA,SAAA,WAAA,GAAA,YAAA,MAAA;EACA;EACD,OAAA,YAAA,MAAA,cAAA,EAAA;CAED,CAAA;CACA,MAAM,mBAAA,MAAqB;CAE3B,MAAM,qBAAe,gBAA+C,cAAA;OAClE,eAAmB,UAAK,UAAA;EACxB,mBAAU,KAAA;EACV,IAAI,MAAC,kBAAiB;EACtB,IAAI,CAAA,cAAe,GAAA;EACnB,IAAI,eAAA,KAAoB,GAAA;EACxB,IAAI,oBAAkB,KAAK,GAAG;EAC9B,IAAI,CAAC,iBAAA,KAAmB,GAAK;EAC7B,IAAA,CAAA,mBAAuB,KAAA,GAAA;EAEvB,OAAO,YAAW,IAAA;EACnB,OAAA,SAAA,EAAA,aAAA,MAAA;CAED,CAAA;OACO,MAAA,aAAS,YAAA;EACd,IAAA,CAAA,SAAQ;EACV,QAAK,UAAA;CAEL,GAAA,CAAA,CAAA;SACK;EACH,GAAA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;MA4BI,iBAAqB,KAAA,WADH,SAAA,eACqB,OAAA;CACxC,OACH,cAAA,SAAA,kBAAA,KAAA,CAAA"}
+{"version":3,"file":"composite-hover.js","names":[],"sources":["../../src/composite/composite-hover.tsx"],"sourcesContent":["import {\n  useBooleanEvent,\n  useEvent,\n  useIsMouseMoving,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  contains,\n  hasFocus,\n  hasFocusWithin,\n  hasOwnProperty,\n  invariant,\n  isElement,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent as ReactMouseEvent } from \"react\";\nimport { useCallback } from \"react\";\nimport { useCompositeScopedContext } from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction hoveringInside(event: ReactMouseEvent<HTMLElement>) {\n  const nextElement = event.relatedTarget;\n  if (!isElement(nextElement)) return false;\n  return contains(event.currentTarget, nextElement);\n}\n\nconst symbol = Symbol(\"composite-hover\");\ntype ElementWithSymbol = HTMLElement & { [symbol]?: boolean };\n\nfunction movingToAnotherItem(event: ReactMouseEvent<HTMLElement>) {\n  const { relatedTarget } = event;\n  if (!isElement(relatedTarget)) return false;\n  let dest: Element | null = relatedTarget;\n  do {\n    if (hasOwnProperty(dest, symbol) && dest[symbol]) return true;\n    dest = dest.parentElement;\n  } while (dest);\n  return false;\n}\n\n/**\n * Returns props to create a `CompositeHover` component. The composite item that\n * receives these props will get focused on mouse move and lose focus to the\n * composite base element on mouse leave. This should be combined with the\n * `CompositeItem` component, the `useCompositeItem` hook or any component/hook\n * that uses them underneath.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeHover({ store });\n * <CompositeItem store={store} {...props}>Item</CompositeItem>\n * ```\n */\nexport const useCompositeHover = createHook<TagName, CompositeHoverOptions>(\n  function useCompositeHover({\n    store,\n    focusOnHover = true,\n    blurOnHoverEnd = !!focusOnHover,\n    ...props\n  }) {\n    const context = useCompositeScopedContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"CompositeHover must be wrapped in a Composite component.\",\n    );\n\n    const isMouseMoving = useIsMouseMoving();\n\n    const onMouseMoveProp = props.onMouseMove;\n    const focusOnHoverProp = useBooleanEvent(focusOnHover);\n\n    const onMouseMove = useEvent((event: ReactMouseEvent<HTMLType>) => {\n      onMouseMoveProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!isMouseMoving()) return;\n      if (!focusOnHoverProp(event)) return;\n      // If we're hovering over an item that doesn't have DOM focus, we move\n      // focus to the composite element. We're doing this here before setting\n      // the active id because the composite element will automatically set the\n      // active id to null when it receives focus.\n      if (!hasFocusWithin(event.currentTarget)) {\n        const baseElement = store?.getState().baseElement;\n        if (baseElement && !hasFocus(baseElement)) {\n          baseElement.focus();\n        }\n      }\n      store?.setActiveId(event.currentTarget.id);\n    });\n\n    const onMouseLeaveProp = props.onMouseLeave;\n    const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd);\n\n    const onMouseLeave = useEvent((event: ReactMouseEvent<HTMLType>) => {\n      onMouseLeaveProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!isMouseMoving()) return;\n      if (hoveringInside(event)) return;\n      if (movingToAnotherItem(event)) return;\n      if (!focusOnHoverProp(event)) return;\n      if (!blurOnHoverEndProp(event)) return;\n      store?.setActiveId(null);\n      // Move focus to the composite element.\n      store?.getState().baseElement?.focus();\n    });\n\n    const ref = useCallback((element: ElementWithSymbol | null) => {\n      if (!element) return;\n      element[symbol] = true;\n    }, []);\n\n    props = {\n      ...props,\n      ref: useMergeRefs(ref, props.ref),\n      onMouseMove,\n      onMouseLeave,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders an element in a composite widget that receives focus on mouse move\n * and loses focus to the composite base element on mouse leave.\n *\n * This should be combined with the\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) component.\n * The\n * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)\n * and\n * [`blurOnHoverEnd`](https://ariakit.com/reference/composite-hover#bluronhoverend)\n * props can be used to customize the behavior.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-5}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeHover render={<CompositeItem />}>\n *       Item\n *     </CompositeHover>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeHover = memo(\n  forwardRef(function CompositeHover(props: CompositeHoverProps) {\n    const htmlProps = useCompositeHover(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface CompositeHoverOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n  /**\n   * Determines if the composite item should be _focused_ when hovered over.\n   *\n   * Note that the actual DOM focus will stay on the composite element. This\n   * item will get the\n   * [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)\n   * attribute so it can be styled as if it's focused.\n   *\n   * Live examples:\n   * - [Multi-selectable\n   *   Combobox](https://ariakit.com/examples/combobox-multiple)\n   * - [Combobox with integrated\n   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * @default true\n   */\n  focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;\n  /**\n   * Determines if the composite item should lose focus when the mouse leaves.\n   * By default, this is set to `true` if\n   * [`focusOnHover`](https://ariakit.com/reference/composite-hover#focusonhover)\n   * is `true`.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * - [Combobox with integrated\n   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   * - [Select with Combobox and\n   *   Tabs](https://ariakit.com/examples/select-combobox-tab)\n   */\n  blurOnHoverEnd?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;\n}\n\nexport type CompositeHoverProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeHoverOptions<T>\n>;\n"],"mappings":";;;;;;AA8BA,MAAA,UAAS;SACD,eAAc,OAAM;CAC1B,MAAK,cAAU,MAAW;CAC1B,IAAA,CAAA,UAAO,WAAe,GAAA,OAAA;CACxB,OAAA,SAAA,MAAA,eAAA,WAAA;AAEA;AAGA,MAAA,SAAS,OAAA,iBAAyD;SACxD,oBAAkB,OAAA;CAC1B,MAAK,EAAA,kBAAU;CACf,IAAI,CAAA,UAAuB,aAAA,GAAA,OAAA;CAC3B,IAAG,OAAA;IACD;EACA,IAAA,eAAY,MAAA,MAAA,KAAA,KAAA,SAAA,OAAA;EACd,OAAA,KAAS;CACT,SAAO;CACT,OAAA;;;;;;;;;;;;;;;;MAuBI,oBAAgB,WAAA,SAA0B,kBAAA,EAAA,OAAA,eAAA,MAAA,iBAAA,CAAA,CAAA,cAAA,GAAA,SAAA;CAC1C,MAAA,UAAQ,0BAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAA,QAAgB,IAAA,aAAiB,gBAAA,0DAAA;CAEvC,MAAM,gBAAA,iBAAwB;CAC9B,MAAM,kBAAA,MAAmB;CAEzB,MAAM,mBAAc,gBAA+C,YAAA;OACjE,cAAkB,UAAK,UAAA;EACvB,kBAAU,KAAA;EACV,IAAI,MAAC,kBAAiB;EACtB,IAAI,CAAC,cAAA,GAAiB;EAKtB,IAAI,CAAC,iBAAe,KAAM,GAAA;MACxB,CAAA,eAAM,MAAc,aAAkB,GAAA;GACtC,MAAI,cAAgB,OAAA,SAAS,EAAA;GAG/B,IAAA,eAAA,CAAA,SAAA,WAAA,GAAA,YAAA,MAAA;EACA;EACD,OAAA,YAAA,MAAA,cAAA,EAAA;CAED,CAAA;CACA,MAAM,mBAAA,MAAqB;CAE3B,MAAM,qBAAe,gBAA+C,cAAA;OAClE,eAAmB,UAAK,UAAA;EACxB,mBAAU,KAAA;EACV,IAAI,MAAC,kBAAiB;EACtB,IAAI,CAAA,cAAe,GAAA;EACnB,IAAI,eAAA,KAAoB,GAAA;EACxB,IAAI,oBAAkB,KAAK,GAAG;EAC9B,IAAI,CAAC,iBAAA,KAAmB,GAAK;EAC7B,IAAA,CAAA,mBAAuB,KAAA,GAAA;EAEvB,OAAO,YAAW,IAAA;EACnB,OAAA,SAAA,EAAA,aAAA,MAAA;CAED,CAAA;OACO,MAAA,aAAS,YAAA;EACd,IAAA,CAAA,SAAQ;EACV,QAAK,UAAA;CAEL,GAAA,CAAA,CAAA;SACK;EACH,GAAA;EACA,KAAA,aAAA,KAAA,MAAA,GAAA;EACA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;MA4BI,iBAAqB,KAAA,WADH,SAAA,eACqB,OAAA;CACxC,OACH,cAAA,SAAA,kBAAA,KAAA,CAAA"}

package/dist/composite/composite-input.d.ts

@@ -37,7 +37,7 @@ declare const useCompositeInput: import("@ariakit/react-utils").Hook<"input", Co
  * </CompositeProvider>
  * ```
  */
-declare const CompositeInput: (props: CompositeInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CompositeInput: (props: CompositeInputProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CompositeInputOptions<_T extends ElementType = TagName> extends Options {
   /**
    * Object returned by the

package/dist/composite/composite-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite-input.d.ts","names":["Options","Props","ElementType","CompositeStore","TagName","useCompositeInput","CompositeInputOptions","Hook","CompositeInput","CompositeInputProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/composite/composite-input.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAgB7B;;;;AAA0G;AAlB/C,cAkBtCC,iBAAAA,iCAAkDE,IAAAA,UAAcD,qBAAqB;;;;;;;;;AAiB2C;AACrJ;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,YAAiCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAA1Ca;;;;;;;AASb;EAAtBC,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,qBAAAA,CAAsBS,CAAAA"}
+{"version":3,"file":"composite-input.d.ts","names":["Options","Props","ElementType","CompositeStore","TagName","useCompositeInput","CompositeInputOptions","Hook","CompositeInput","CompositeInputProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/composite/composite-input.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAgB7B;;;;AAA0G;AAlB/C,cAkBtCC,iBAAAA,iCAAkDE,IAAAA,UAAcD,qBAAqB;;;;;;;;;AAiB+C;AACzJ;;;;;;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACnHN,qBAAAA,YAAiCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAA1Ca;;;;;;;AASb;EAAtBC,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,qBAAAA,CAAsBS,CAAAA"}

package/dist/composite/composite-input.js

@@ -31,7 +31,7 @@ function getValueLength(element) {
 */
 const useCompositeInput = createHook(function useCompositeInput({ store, ...props }) {
 	const onKeyDownCaptureProp = props.onKeyDownCapture;
-	useEffect(() => {
+	if (process.env.NODE_ENV !== "production") useEffect(() => {
 		console.warn("CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead.");
 	}, []);
 	const onKeyDownCapture = useEvent((event) => {

package/dist/composite/composite-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"composite-input.js","names":[],"sources":["../../src/composite/composite-input.tsx"],"sourcesContent":["import {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  getDocument,\n  getTextboxSelection,\n  isTextField,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, KeyboardEvent } from \"react\";\nimport { useEffect } from \"react\";\nimport type { CompositeStore } from \"./composite-store.ts\";\nimport { selectTextField } from \"./utils.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getValueLength(element: HTMLElement) {\n  if (isTextField(element)) {\n    return element.value.length;\n  } else if (element.isContentEditable) {\n    const range = getDocument(element).createRange();\n    range.selectNodeContents(element);\n    return range.toString().length;\n  }\n  return 0;\n}\n\n/**\n * Returns props to create a `CompositeInput` component. This should be used in\n * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,\n * or any other component/hook that uses `CompositeItem` underneath.\n * @see https://ariakit.com/components/composite\n * @deprecated Use `useCompositeItem` instead.\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeInput({ store });\n * <Composite store={store}>\n *   <CompositeItem {...props} />\n * </Composite>\n * ```\n */\nexport const useCompositeInput = createHook<TagName, CompositeInputOptions>(\n  function useCompositeInput({ store, ...props }) {\n    const onKeyDownCaptureProp = props.onKeyDownCapture;\n\n    if (process.env.NODE_ENV !== \"production\") {\n      useEffect(() => {\n        console.warn(\n          \"CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead.\",\n        );\n      }, []);\n    }\n\n    const onKeyDownCapture = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownCaptureProp?.(event);\n      if (event.defaultPrevented) return;\n      const element = event.currentTarget;\n      if (!element.isContentEditable && !isTextField(element)) return;\n      const selection = getTextboxSelection(element);\n\n      const { orientation } = store?.getState() || {};\n      const isHorizontal = orientation !== \"vertical\";\n      const isVertical = orientation !== \"horizontal\";\n\n      const isLeft = isHorizontal && event.key === \"ArrowLeft\";\n      const isRight = isHorizontal && event.key === \"ArrowRight\";\n      const isUp = isVertical && event.key === \"ArrowUp\";\n      const isDown = isVertical && event.key === \"ArrowDown\";\n\n      if (isRight || isDown) {\n        if (selection.end !== getValueLength(element)) {\n          event.stopPropagation();\n        }\n      } else if (isLeft || isUp) {\n        if (selection.start !== 0) {\n          event.stopPropagation();\n        }\n      }\n    });\n\n    const onFocusProp = props.onFocus;\n\n    const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusProp?.(event);\n      if (event.defaultPrevented) return;\n      selectTextField(event.currentTarget);\n    });\n\n    props = {\n      ...props,\n      onKeyDownCapture,\n      onFocus,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders an input as a composite item. This should be used in conjunction with\n * the [`CompositeItem`](https://ariakit.com/reference/composite-item) component\n * or a component that uses\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.\n * @see https://ariakit.com/components/composite\n * @deprecated Use `<CompositeItem render={<input />}>` instead.\n * @example\n * ```jsx {3}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem render={<CompositeInput />} />\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeInput = memo(\n  forwardRef(function CompositeInput(props: CompositeInputProps) {\n    const htmlProps = useCompositeInput(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface CompositeInputOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n}\n\nexport type CompositeInputProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeInputOptions<T>\n>;\n"],"mappings":";;;;;;AAuBA,MAAA,UAAS;SACH,eAAmB,SACrB;iBACS,OAAQ,GAAA,OAAA,QAAmB,MAAA;MACpC,IAAM,QAAQ,mBAAqB;EACnC,MAAM,QAAA,YAAmB,OAAO,EAAA,YAAA;EAChC,MAAA,mBAAwB,OAAA;EAC1B,OAAA,MAAA,SAAA,EAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;;MAmBI,oBAAM,WAA6B,SAAA,kBAAA,EAAA,OAAA,GAAA,SAAA;CAGjC,MAAA,uBAAgB,MAAA;iBAEZ;EAEJ,QAAK,KAAA,iFAAA;CAGP,GAAA,CAAA,CAAA;OACE,mBAAuB,UAAK,UAAA;EAC5B,uBAAU,KAAkB;EAC5B,IAAA,MAAM,kBAAgB;EACtB,MAAK,UAAQ,MAAA;EACb,IAAA,CAAA,QAAM,qBAAY,CAAA,YAA2B,OAAA,GAAA;EAE7C,MAAM,YAAE,oBAAuB,OAAc;EAC7C,MAAM,EAAA,gBAAe,OAAA,SAAgB,KAAA,CAAA;EACrC,MAAM,eAAa,gBAAgB;EAEnC,MAAM,aAAS,gBAAgB;EAC/B,MAAM,SAAA,gBAAU,MAAgB,QAAM;EACtC,MAAM,UAAO,gBAAc,MAAM,QAAQ;EACzC,MAAM,OAAA,cAAS,MAAc,QAAM;EAEnC,MAAI,SAAW,cACb,MAAA,QAAA;iBAAc,QAEd;OAAA,UACS,QAAU,eACnB,OAAA,GAAA,MAAA,gBAAA;EAAA,OAAI,IAAA,UAAU,MAEd;OAAA,UAAA,UAAA,GAAA,MAAA,gBAAA;EAAA;CAIJ,CAAA;CAEA,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAA,kBAAsB;EACvB,gBAAA,MAAA,aAAA;CAED,CAAA;SACK;EACH,GAAA;EACA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;MAqBI,iBAAqB,KAAA,WADH,SAAA,eACqB,OAAA;CACxC,OACH,cAAA,SAAA,kBAAA,KAAA,CAAA"}
+{"version":3,"file":"composite-input.js","names":[],"sources":["../../src/composite/composite-input.tsx"],"sourcesContent":["import {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  getDocument,\n  getTextboxSelection,\n  isTextField,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, KeyboardEvent } from \"react\";\nimport { useEffect } from \"react\";\nimport type { CompositeStore } from \"./composite-store.ts\";\nimport { selectTextField } from \"./utils.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction getValueLength(element: HTMLElement) {\n  if (isTextField(element)) {\n    return element.value.length;\n  } else if (element.isContentEditable) {\n    const range = getDocument(element).createRange();\n    range.selectNodeContents(element);\n    return range.toString().length;\n  }\n  return 0;\n}\n\n/**\n * Returns props to create a `CompositeInput` component. This should be used in\n * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,\n * or any other component/hook that uses `CompositeItem` underneath.\n * @see https://ariakit.com/components/composite\n * @deprecated Use `useCompositeItem` instead.\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeInput({ store });\n * <Composite store={store}>\n *   <CompositeItem {...props} />\n * </Composite>\n * ```\n */\nexport const useCompositeInput = createHook<TagName, CompositeInputOptions>(\n  function useCompositeInput({ store, ...props }) {\n    const onKeyDownCaptureProp = props.onKeyDownCapture;\n\n    if (process.env.NODE_ENV !== \"production\") {\n      useEffect(() => {\n        console.warn(\n          \"CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead.\",\n        );\n      }, []);\n    }\n\n    const onKeyDownCapture = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownCaptureProp?.(event);\n      if (event.defaultPrevented) return;\n      const element = event.currentTarget;\n      if (!element.isContentEditable && !isTextField(element)) return;\n      const selection = getTextboxSelection(element);\n\n      const { orientation } = store?.getState() || {};\n      const isHorizontal = orientation !== \"vertical\";\n      const isVertical = orientation !== \"horizontal\";\n\n      const isLeft = isHorizontal && event.key === \"ArrowLeft\";\n      const isRight = isHorizontal && event.key === \"ArrowRight\";\n      const isUp = isVertical && event.key === \"ArrowUp\";\n      const isDown = isVertical && event.key === \"ArrowDown\";\n\n      if (isRight || isDown) {\n        if (selection.end !== getValueLength(element)) {\n          event.stopPropagation();\n        }\n      } else if (isLeft || isUp) {\n        if (selection.start !== 0) {\n          event.stopPropagation();\n        }\n      }\n    });\n\n    const onFocusProp = props.onFocus;\n\n    const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusProp?.(event);\n      if (event.defaultPrevented) return;\n      selectTextField(event.currentTarget);\n    });\n\n    props = {\n      ...props,\n      onKeyDownCapture,\n      onFocus,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders an input as a composite item. This should be used in conjunction with\n * the [`CompositeItem`](https://ariakit.com/reference/composite-item) component\n * or a component that uses\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) underneath.\n * @see https://ariakit.com/components/composite\n * @deprecated Use `<CompositeItem render={<input />}>` instead.\n * @example\n * ```jsx {3}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem render={<CompositeInput />} />\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeInput = memo(\n  forwardRef(function CompositeInput(props: CompositeInputProps) {\n    const htmlProps = useCompositeInput(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface CompositeInputOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n}\n\nexport type CompositeInputProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeInputOptions<T>\n>;\n"],"mappings":";;;;;;AAuBA,MAAA,UAAS;SACH,eAAmB,SACrB;iBACS,OAAQ,GAAA,OAAA,QAAmB,MAAA;MACpC,IAAM,QAAQ,mBAAqB;EACnC,MAAM,QAAA,YAAmB,OAAO,EAAA,YAAA;EAChC,MAAA,mBAAwB,OAAA;EAC1B,OAAA,MAAA,SAAA,EAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;;MAmBI,oBAAM,WAA6B,SAAA,kBAAA,EAAA,OAAA,GAAA,SAAA;CAEnC,MAAI,uBAAyB,MAAA;KAEzB,QAAQ,IACN,aAAA,cAAA,gBAAA;EAEJ,QAAK,KAAA,iFAAA;CAGP,GAAA,CAAA,CAAA;OACE,mBAAuB,UAAK,UAAA;EAC5B,uBAAU,KAAkB;EAC5B,IAAA,MAAM,kBAAgB;EACtB,MAAK,UAAQ,MAAA;EACb,IAAA,CAAA,QAAM,qBAAY,CAAA,YAA2B,OAAA,GAAA;EAE7C,MAAM,YAAE,oBAAuB,OAAc;EAC7C,MAAM,EAAA,gBAAe,OAAA,SAAgB,KAAA,CAAA;EACrC,MAAM,eAAa,gBAAgB;EAEnC,MAAM,aAAS,gBAAgB;EAC/B,MAAM,SAAA,gBAAU,MAAgB,QAAM;EACtC,MAAM,UAAO,gBAAc,MAAM,QAAQ;EACzC,MAAM,OAAA,cAAS,MAAc,QAAM;EAEnC,MAAI,SAAW,cACb,MAAA,QAAA;iBAAc,QAEd;OAAA,UACS,QAAU,eACnB,OAAA,GAAA,MAAA,gBAAA;EAAA,OAAI,IAAA,UAAU,MAEd;OAAA,UAAA,UAAA,GAAA,MAAA,gBAAA;EAAA;CAIJ,CAAA;CAEA,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAA,kBAAsB;EACvB,gBAAA,MAAA,aAAA;CAED,CAAA;SACK;EACH,GAAA;EACA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;MAqBI,iBAAqB,KAAA,WADH,SAAA,eACqB,OAAA;CACxC,OACH,cAAA,SAAA,kBAAA,KAAA,CAAA"}

package/dist/composite/composite-item-offscreen.d.ts

@@ -1,5 +1,5 @@
-import { n as CollectionItemOptions } from "../collection-item-offscreen-DyXa-sqj.js";
-import { n as CompositeItemOptions$1 } from "../composite-item-B4WTelVz.js";
+import { n as CollectionItemOptions } from "../collection-item-offscreen-B5E5vNFi.js";
+import { n as CompositeItemOptions$1 } from "../composite-item-d4UXaZ84.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
 

package/dist/composite/composite-item-offscreen.js

@@ -1,7 +1,7 @@
 "use client";
 import { Role } from "../role/role.js";
 import { useCollectionItemOffscreen } from "../collection/collection-item-offscreen.js";
-import { useCompositeContext } from "./composite-context.js";
+import { useCompositeScopedContext } from "./composite-context.js";
 import { CompositeItem as CompositeItem$1 } from "./composite-item.js";
 import { forwardRef, useId, useMergeRefs } from "@ariakit/react-utils";
 import { getPopupItemRole } from "@ariakit/utils";
@@ -10,7 +10,7 @@ import { useStoreStateObject } from "@ariakit/react-store";
 //#region src/composite/composite-item-offscreen.tsx
 const TagName = "button";
 function useCompositeItemOffscreen({ store, offscreenMode = "active", disabled, value, ...props }) {
-	const context = useCompositeContext();
+	const context = useCompositeScopedContext();
 	store = store || context;
 	const id = useId(props.id);
 	const { storeId, active, listElement, offscreenRoot } = useStoreStateObject(store, {

package/dist/composite/composite-item-offscreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"composite-item-offscreen.js","names":["Base.CompositeItem"],"sources":["../../src/composite/composite-item-offscreen.tsx"],"sourcesContent":["import { useStoreStateObject } from \"@ariakit/react-store\";\nimport { useId, useMergeRefs, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getPopupItemRole } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item-offscreen.tsx\";\nimport { useCollectionItemOffscreen } from \"../collection/collection-item-offscreen.tsx\";\nimport type { ComboboxStoreState } from \"../combobox/combobox-store.ts\";\nimport { Role } from \"../role/role.tsx\";\nimport type { SelectStoreState } from \"../select/select-store.ts\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport * as Base from \"./composite-item.tsx\";\nimport type { CompositeStoreState } from \"./composite-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nexport function useCompositeItemOffscreen<\n  T extends ElementType,\n  // oxlint-disable-next-line no-unnecessary-type-parameters\n  P extends CompositeItemProps<T>,\n>({ store, offscreenMode = \"active\", disabled, value, ...props }: P) {\n  const context = useCompositeContext();\n  store = store || context;\n\n  const id = useId(props.id);\n\n  const { storeId, active, listElement, offscreenRoot } = useStoreStateObject(\n    store,\n    {\n      storeId: \"id\",\n      active(\n        state?: CompositeStoreState | ComboboxStoreState | SelectStoreState,\n      ) {\n        if (!state) return;\n        if (!(\"selectedValue\" in state) && \"value\" in state) {\n          if (state.value === value) return true;\n        }\n        return !!id && state.activeId === id;\n      },\n      listElement(state?: CompositeStoreState | SelectStoreState) {\n        if (!state) return;\n        if (!(\"listElement\" in state)) return;\n        return state.listElement;\n      },\n      offscreenRoot(state?: CompositeStoreState | ComboboxStoreState) {\n        if (props.offscreenRoot) return props.offscreenRoot;\n        if (!state) return;\n        if (!(\"contentElement\" in state)) return;\n        return state.contentElement || null;\n      },\n    },\n  );\n\n  const offscreenProps = useCollectionItemOffscreen({\n    id,\n    store,\n    offscreenMode: active ? \"active\" : offscreenMode,\n    ...props,\n    offscreenRoot,\n  });\n\n  if (!offscreenProps.active) {\n    return {\n      ...offscreenProps,\n      children: value,\n      role: getPopupItemRole(listElement),\n      \"aria-disabled\": disabled || undefined,\n      \"data-offscreen-id\": storeId,\n    };\n  }\n\n  return offscreenProps;\n}\n\nexport const CompositeItem = forwardRef(function CompositeItem({\n  offscreenMode,\n  offscreenRoot,\n  ...props\n}: CompositeItemProps) {\n  const { active, ref, ...rest } = useCompositeItemOffscreen({\n    offscreenMode,\n    offscreenRoot,\n    ...props,\n  });\n  const allProps = { ...rest, ...props, ref: useMergeRefs(ref, props.ref) };\n  if (active) {\n    return <Base.CompositeItem {...allProps} />;\n  }\n  // Remove CompositeItem props\n  const {\n    store,\n    rowId,\n    preventScrollOnKeyDown,\n    moveOnKeyPress,\n    tabbable,\n    getItem,\n    ...htmlProps\n  } = allProps;\n  const Component = Role[TagName];\n  return <Component {...htmlProps} />;\n});\n\nexport interface CompositeItemOptions<T extends ElementType = TagName>\n  extends\n    Base.CompositeItemOptions<T>,\n    Omit<CollectionItemOptions<T>, \"store\"> {}\n\nexport type CompositeItemProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeItemOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AAiBA,MAAA,UAAgB;SAKR,0BAAU,EAAoB,OAAA,gBAAA,UAAA,UAAA,OAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAM,SAAW;CAEjB,MAAM,KAAE,MAAS,MAAA,EAAQ;OAGrB,EAAA,SAAS,QAAA,aAAA,kBAAA,oBAAA,OAAA;EACT,SACE;SAEK,OAAO;GACZ,IAAI,CAAA,OAAE;SACA,mBAAgB,UAAc,WAAA,OAAI;QAAA,MAAA,UAAA,OAAA,OAAA;GAAA;GAG1C,OAAA,CAAA,CAAA,MAAA,MAAA,aAAA;EACA;cACO,OAAO;GACZ,IAAI,CAAA,OAAE;GACN,IAAA,EAAA,iBAAa,QAAA;GACf,OAAA,MAAA;EACA;gBACY,OAAA;GACV,IAAI,MAAC,eAAO,OAAA,MAAA;GACZ,IAAI,CAAA,OAAE;GACN,IAAA,EAAA,oBAAa,QAAkB;GACjC,OAAA,MAAA,kBAAA;EAEJ;CAEA,CAAA;OACE,iBAAA,2BAAA;EACA;EACA;EACA,eAAG,SAAA,WAAA;EACH,GAAA;EACD;CAED,CAAA;KAEO,CAAA,eAAA,QAAA,OAAA;EACH,GAAA;EACA,UAAM;EACN,MAAA,iBAAiB,WAAY;EAC7B,iBAAA,YAAqB,KAAA;EACvB,qBAAA;CAGF;CACF,OAAA;AAEA;MAKE,gBAAqB,WAAG,SAAS,cAAA,EAAA,eAA0B,eAAA,GAAA,SAAA;OACzD,EAAA,QAAA,KAAA,GAAA,SAAA,0BAAA;EACA;EACA;EACD,GAAA;CACD,CAAA;OAAsB,WAAA;EAAM,GAAG;EAAO,GAAA;EAAkC,KAAA,aAAA,KAAA,MAAA,GAAA;CACxE;CAIA,IAAA,QACE,OAEA,oBAAA,iBACA,EAAA,GAAA,SACA,CAAA;CAIF,MAAM,EAAA,OAAA,OAAY,wBAAK,gBAAA,UAAA,SAAA,GAAA,cAAA;CACvB,MAAA,YAAO,KAAA;CACR,OAAA,oBAAA,WAAA,EAAA,GAAA,UAAA,CAAA"}
+{"version":3,"file":"composite-item-offscreen.js","names":["Base.CompositeItem"],"sources":["../../src/composite/composite-item-offscreen.tsx"],"sourcesContent":["import { useStoreStateObject } from \"@ariakit/react-store\";\nimport { useId, useMergeRefs, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getPopupItemRole } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item-offscreen.tsx\";\nimport { useCollectionItemOffscreen } from \"../collection/collection-item-offscreen.tsx\";\nimport type { ComboboxStoreState } from \"../combobox/combobox-store.ts\";\nimport { Role } from \"../role/role.tsx\";\nimport type { SelectStoreState } from \"../select/select-store.ts\";\nimport { useCompositeScopedContext } from \"./composite-context.tsx\";\nimport * as Base from \"./composite-item.tsx\";\nimport type { CompositeStoreState } from \"./composite-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nexport function useCompositeItemOffscreen<\n  T extends ElementType,\n  // oxlint-disable-next-line no-unnecessary-type-parameters\n  P extends CompositeItemProps<T>,\n>({ store, offscreenMode = \"active\", disabled, value, ...props }: P) {\n  const context = useCompositeScopedContext();\n  store = store || context;\n\n  const id = useId(props.id);\n\n  const { storeId, active, listElement, offscreenRoot } = useStoreStateObject(\n    store,\n    {\n      storeId: \"id\",\n      active(\n        state?: CompositeStoreState | ComboboxStoreState | SelectStoreState,\n      ) {\n        if (!state) return;\n        if (!(\"selectedValue\" in state) && \"value\" in state) {\n          if (state.value === value) return true;\n        }\n        return !!id && state.activeId === id;\n      },\n      listElement(state?: CompositeStoreState | SelectStoreState) {\n        if (!state) return;\n        if (!(\"listElement\" in state)) return;\n        return state.listElement;\n      },\n      offscreenRoot(state?: CompositeStoreState | ComboboxStoreState) {\n        if (props.offscreenRoot) return props.offscreenRoot;\n        if (!state) return;\n        if (!(\"contentElement\" in state)) return;\n        return state.contentElement || null;\n      },\n    },\n  );\n\n  const offscreenProps = useCollectionItemOffscreen({\n    id,\n    store,\n    offscreenMode: active ? \"active\" : offscreenMode,\n    ...props,\n    offscreenRoot,\n  });\n\n  if (!offscreenProps.active) {\n    return {\n      ...offscreenProps,\n      children: value,\n      role: getPopupItemRole(listElement),\n      \"aria-disabled\": disabled || undefined,\n      \"data-offscreen-id\": storeId,\n    };\n  }\n\n  return offscreenProps;\n}\n\nexport const CompositeItem = forwardRef(function CompositeItem({\n  offscreenMode,\n  offscreenRoot,\n  ...props\n}: CompositeItemProps) {\n  const { active, ref, ...rest } = useCompositeItemOffscreen({\n    offscreenMode,\n    offscreenRoot,\n    ...props,\n  });\n  const allProps = { ...rest, ...props, ref: useMergeRefs(ref, props.ref) };\n  if (active) {\n    return <Base.CompositeItem {...allProps} />;\n  }\n  // Remove CompositeItem props\n  const {\n    store,\n    rowId,\n    preventScrollOnKeyDown,\n    moveOnKeyPress,\n    tabbable,\n    getItem,\n    ...htmlProps\n  } = allProps;\n  const Component = Role[TagName];\n  return <Component {...htmlProps} />;\n});\n\nexport interface CompositeItemOptions<T extends ElementType = TagName>\n  extends\n    Base.CompositeItemOptions<T>,\n    Omit<CollectionItemOptions<T>, \"store\"> {}\n\nexport type CompositeItemProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeItemOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AAiBA,MAAA,UAAgB;SAKR,0BAAU,EAAA,OAA0B,gBAAA,UAAA,UAAA,OAAA,GAAA,SAAA;CAC1C,MAAA,UAAQ,0BAAS;CAEjB,QAAM,SAAW;CAEjB,MAAM,KAAE,MAAS,MAAA,EAAQ;OAGrB,EAAA,SAAS,QAAA,aAAA,kBAAA,oBAAA,OAAA;EACT,SACE;SAEK,OAAO;GACZ,IAAI,CAAA,OAAE;SACA,mBAAgB,UAAc,WAAA,OAAI;QAAA,MAAA,UAAA,OAAA,OAAA;GAAA;GAG1C,OAAA,CAAA,CAAA,MAAA,MAAA,aAAA;EACA;cACO,OAAO;GACZ,IAAI,CAAA,OAAE;GACN,IAAA,EAAA,iBAAa,QAAA;GACf,OAAA,MAAA;EACA;gBACY,OAAA;GACV,IAAI,MAAC,eAAO,OAAA,MAAA;GACZ,IAAI,CAAA,OAAE;GACN,IAAA,EAAA,oBAAa,QAAkB;GACjC,OAAA,MAAA,kBAAA;EAEJ;CAEA,CAAA;OACE,iBAAA,2BAAA;EACA;EACA;EACA,eAAG,SAAA,WAAA;EACH,GAAA;EACD;CAED,CAAA;KAEO,CAAA,eAAA,QAAA,OAAA;EACH,GAAA;EACA,UAAM;EACN,MAAA,iBAAiB,WAAY;EAC7B,iBAAA,YAAqB,KAAA;EACvB,qBAAA;CAGF;CACF,OAAA;AAEA;MAKE,gBAAqB,WAAG,SAAS,cAAA,EAAA,eAA0B,eAAA,GAAA,SAAA;OACzD,EAAA,QAAA,KAAA,GAAA,SAAA,0BAAA;EACA;EACA;EACD,GAAA;CACD,CAAA;OAAsB,WAAA;EAAM,GAAG;EAAO,GAAA;EAAkC,KAAA,aAAA,KAAA,MAAA,GAAA;CACxE;CAIA,IAAA,QACE,OAEA,oBAAA,iBACA,EAAA,GAAA,SACA,CAAA;CAIF,MAAM,EAAA,OAAA,OAAY,wBAAK,gBAAA,UAAA,SAAA,GAAA,cAAA;CACvB,MAAA,YAAO,KAAA;CACR,OAAA,oBAAA,WAAA,EAAA,GAAA,UAAA,CAAA"}

package/dist/composite/composite-item.d.ts

@@ -1,2 +1,2 @@
-import { i as useCompositeItem, n as CompositeItemOptions, r as CompositeItemProps, t as CompositeItem } from "../composite-item-B4WTelVz.js";
+import { i as useCompositeItem, n as CompositeItemOptions, r as CompositeItemProps, t as CompositeItem } from "../composite-item-d4UXaZ84.js";
 export { CompositeItem, CompositeItemOptions, CompositeItemProps, useCompositeItem };

package/dist/composite/composite-item.js

@@ -1,7 +1,7 @@
 "use client";
 import { useCommand } from "../command/command.js";
 import { useCollectionItem } from "../collection/collection-item.js";
-import { CompositeItemContext, CompositeRowContext, useCompositeContext } from "./composite-context.js";
+import { CompositeItemContext, CompositeRowContext, useCompositeScopedContext } from "./composite-context.js";
 import { focusSilently, getEnabledItem, isItem, selectTextField } from "./utils.js";
 import { createElement, createHook, forwardRef, memo, useBooleanEvent, useEvent, useId, useMergeRefs, useWrapElement } from "@ariakit/react-utils";
 import { disabledFromProps, getScrollingElement, getTextboxSelection, getTextboxValue, isButton, isPortalEvent, isSafari, isSelfTarget, isTextField, isTextbox, removeUndefinedValues } from "@ariakit/utils";
@@ -68,7 +68,7 @@ function targetIsAnotherItem(event, store) {
 * ```
 */
 const useCompositeItem = createHook(function useCompositeItem({ store, rowId: rowIdProp, preventScrollOnKeyDown = false, moveOnKeyPress = true, tabbable = false, getItem: getItemProp, "aria-setsize": ariaSetSizeProp, "aria-posinset": ariaPosInSetProp, ...props }) {
-	const context = useCompositeContext();
+	const context = useCompositeScopedContext();
 	store = store || context;
 	const id = useId(props.id);
 	const ref = useRef(null);

package/dist/composite/composite-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"composite-item.js","names":[],"sources":["../../src/composite/composite-item.tsx"],"sourcesContent":["import { useStoreStateObject } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useMergeRefs,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  getScrollingElement,\n  getTextboxSelection,\n  getTextboxValue,\n  isButton,\n  isTextbox,\n  isTextField,\n  isPortalEvent,\n  isSelfTarget,\n  disabledFromProps,\n  removeUndefinedValues,\n  isSafari,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type {\n  ElementType,\n  FocusEvent,\n  KeyboardEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { useCallback, useContext, useMemo, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport type { CommandOptions } from \"../command/command.tsx\";\nimport { useCommand } from \"../command/command.tsx\";\nimport {\n  CompositeItemContext,\n  CompositeRowContext,\n  useCompositeContext,\n} from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\nimport {\n  focusSilently,\n  getEnabledItem,\n  isItem,\n  selectTextField,\n} from \"./utils.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isEditableElement(element: HTMLElement) {\n  if (isTextbox(element)) return true;\n  return element.tagName === \"INPUT\" && !isButton(element);\n}\n\nfunction getNextPageOffset(scrollingElement: Element, pageUp = false) {\n  const height = scrollingElement.clientHeight;\n  const { top } = scrollingElement.getBoundingClientRect();\n  // Calculates the size of the page based on the scrolling element's height.\n  // This is similar to how browsers calculate the scroll position when pressing\n  // spacebar, page up, or page down.\n  const pageSize = Math.max(height * 0.875, height - 40) * 1.5;\n  const pageOffset = pageUp ? height - pageSize + top : pageSize + top;\n  if (scrollingElement.tagName === \"HTML\") {\n    return pageOffset + scrollingElement.scrollTop;\n  }\n  return pageOffset;\n}\n\nfunction getItemOffset(itemElement: Element, pageUp = false) {\n  const { top } = itemElement.getBoundingClientRect();\n  if (pageUp) {\n    // PageUp is always the inverse of PageDown. On PageDown, we consider only\n    // the top offset of the element. On PageUp we need to add the height of the\n    // element as well so we consider the bottom of it.\n    return top + itemElement.clientHeight;\n  }\n  return top;\n}\n\nfunction findNextPageItemId(\n  element: Element,\n  store?: CompositeStore,\n  next?: CompositeStore[\"next\"],\n  pageUp = false,\n) {\n  if (!store) return;\n  if (!next) return;\n  const { renderedItems } = store.getState();\n  const scrollingElement = getScrollingElement(element);\n  if (!scrollingElement) return;\n  const nextPageOffset = getNextPageOffset(scrollingElement, pageUp);\n  let id: string | null | undefined;\n  let prevDifference: number | undefined;\n  // We need to loop through the next items to find the one that is closest to\n  // the next page offset.\n  for (let i = 0; i < renderedItems.length; i += 1) {\n    const previousId = id;\n    id = next(i);\n    if (!id) break;\n    if (id === previousId) continue;\n    const itemElement = getEnabledItem(store, id)?.element;\n    if (!itemElement) continue;\n    const itemOffset = getItemOffset(itemElement, pageUp);\n    const difference = itemOffset - nextPageOffset;\n    const absDifference = Math.abs(difference);\n    // On PageUp, the element is at the next page if the difference between its\n    // top offset (plus its height) and the next page offset is less than or\n    // equal zero. On PageDown, the difference should be greater than or equal\n    // zero.\n    if ((pageUp && difference <= 0) || (!pageUp && difference >= 0)) {\n      // There may be cases when there's a lot of space between the pages, for\n      // example, when there's a lot of disabled items. In this case, the first\n      // item in the next page might not be the closest one. So we return the\n      // previous item id if its difference is less than the current one.\n      if (prevDifference !== undefined && prevDifference < absDifference) {\n        id = previousId;\n      }\n      break;\n    }\n    prevDifference = absDifference;\n  }\n  return id;\n}\n\nfunction targetIsAnotherItem(event: SyntheticEvent, store: CompositeStore) {\n  if (isSelfTarget(event)) return false;\n  return isItem(store, event.target as HTMLElement);\n}\n\n/**\n * Returns props to create a `CompositeItem` component.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeItem({ store });\n * <Role {...props}>Item 1</Role>\n * ```\n */\nexport const useCompositeItem = createHook<TagName, CompositeItemOptions>(\n  function useCompositeItem({\n    store,\n    rowId: rowIdProp,\n    preventScrollOnKeyDown = false,\n    moveOnKeyPress = true,\n    tabbable = false,\n    getItem: getItemProp,\n    \"aria-setsize\": ariaSetSizeProp,\n    \"aria-posinset\": ariaPosInSetProp,\n    ...props\n  }) {\n    const context = useCompositeContext();\n    store = store || context;\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const row = useContext(CompositeRowContext);\n    const disabled = disabledFromProps(props);\n    const trulyDisabled = disabled && !props.accessibleWhenDisabled;\n\n    const {\n      rowId,\n      baseElement,\n      isActiveItem,\n      ariaSetSize,\n      ariaPosInSet,\n      isTabbable,\n    } = useStoreStateObject(store, {\n      rowId(state) {\n        if (rowIdProp) return rowIdProp;\n        if (!state) return;\n        if (!row?.baseElement) return;\n        if (row.baseElement !== state.baseElement) return;\n        return row.id;\n      },\n      baseElement(state) {\n        return state?.baseElement || undefined;\n      },\n      isActiveItem(state) {\n        return !!state && state.activeId === id;\n      },\n      ariaSetSize(state) {\n        if (ariaSetSizeProp != null) return ariaSetSizeProp;\n        if (!state) return;\n        if (!row?.ariaSetSize) return;\n        if (row.baseElement !== state.baseElement) return;\n        return row.ariaSetSize;\n      },\n      ariaPosInSet(state) {\n        if (ariaPosInSetProp != null) return ariaPosInSetProp;\n        if (!state) return;\n        if (!row?.ariaPosInSet) return;\n        if (row.baseElement !== state.baseElement) return;\n        const itemsInRow = state.renderedItems.filter(\n          (item) => item.rowId === rowId,\n        );\n        return (\n          row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id)\n        );\n      },\n      isTabbable(state) {\n        if (!state?.renderedItems.length) return true;\n        if (state.virtualFocus) return false;\n        if (tabbable) return true;\n        if (state.activeId === null) return false;\n        // If activeId refers to an item that's disabled or not connected to the\n        // DOM, we make all items tabbable so users can tab into the composite\n        // widget. Once the activeId is valid, we restore the roving tabindex. See\n        // https://github.com/ariakit/ariakit/issues/3232\n        // https://github.com/ariakit/ariakit/issues/4129\n        const item = store?.item(state.activeId);\n        if (item?.disabled) return true;\n        if (!item?.element) return true;\n        return state.activeId === id;\n      },\n    });\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = {\n          ...item,\n          id: id || item.id,\n          rowId,\n          disabled: trulyDisabled,\n          children: item.element?.textContent,\n        };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, rowId, trulyDisabled, getItemProp],\n    );\n\n    const onFocusProp = props.onFocus;\n    const hasFocusedComposite = useRef(false);\n\n    const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusProp?.(event);\n      if (event.defaultPrevented) return;\n      if (isPortalEvent(event)) return;\n      if (!id) return;\n      if (!store) return;\n      // If the target is another item, this probably means that composite items\n      // are nested. This is okay when building, for example, tree or treegrid\n      // elements. In this case, we just ignore the focus event on this parent\n      // item.\n      if (targetIsAnotherItem(event, store)) return;\n      const { virtualFocus, baseElement } = store.getState();\n      store.setActiveId(id);\n      // If the composite item is a text field, we'll select its content when\n      // focused. This guarantees that pressing arrow keys will move to the\n      // previous/next composite items instead of moving the cursor inside the\n      // text field.\n      if (isTextbox(event.currentTarget)) {\n        selectTextField(event.currentTarget);\n      }\n      // When using aria-activedescendant, we want to make sure that the\n      // composite container receives focus, not the composite item.\n      if (!virtualFocus) return;\n      // But we'll only do this if the focused element is the composite item\n      // itself\n      if (!isSelfTarget(event)) return;\n      // and the composite item is not a text field or contenteditable element.\n      if (isEditableElement(event.currentTarget)) return;\n      // We need to verify if the base element is connected to the DOM to avoid\n      // a scroll jump on Safari. This is necessary when the base element is\n      // removed from the DOM just before triggering this focus event.\n      if (!baseElement?.isConnected) return;\n      // Safari doesn't scroll the element into view when another element is\n      // immediately focused. So we have to do it manually here.\n      if (isSafari() && event.currentTarget.hasAttribute(\"data-autofocus\")) {\n        event.currentTarget.scrollIntoView({\n          block: \"nearest\",\n          inline: \"nearest\",\n        });\n      }\n      hasFocusedComposite.current = true;\n      // If the previously focused element is a composite or composite item\n      // component, we'll transfer focus silently to the composite element.\n      // That's because this is just a transition event, the composite element\n      // was likely already focused, so we're just immediately returning focus\n      // to it when navigating through the items.\n      const fromComposite =\n        event.relatedTarget === baseElement ||\n        isItem(store, event.relatedTarget);\n      if (fromComposite) {\n        focusSilently(baseElement);\n      }\n\n      // Otherwise, the composite element is likely not focused, so we need this\n      // focus event to propagate so consumers can use the onFocus prop on\n      // <Composite>.\n      else {\n        baseElement.focus();\n      }\n    });\n\n    const onBlurCaptureProp = props.onBlurCapture;\n\n    const onBlurCapture = useEvent((event: FocusEvent<HTMLType>) => {\n      onBlurCaptureProp?.(event);\n      if (event.defaultPrevented) return;\n      const state = store?.getState();\n      if (state?.virtualFocus && hasFocusedComposite.current) {\n        // When hasFocusedComposite is true, composite has been focused right\n        // after focusing on this item. This is an intermediate blur event, so\n        // we ignore it.\n        hasFocusedComposite.current = false;\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    });\n\n    const onKeyDownProp = props.onKeyDown;\n    const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown);\n    const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!isSelfTarget(event)) return;\n      if (!store) return;\n      const { currentTarget } = event;\n      const state = store.getState();\n      const item = store.item(id);\n      const isGrid = !!item?.rowId;\n      const isVertical = state.orientation !== \"horizontal\";\n      const isHorizontal = state.orientation !== \"vertical\";\n      // If the base element is a text field, the Home and End keys should be\n      // performed on the text field, not the composite item, unless the\n      // composite is a grid or has a horizontal orientation.\n      const canHomeEnd = () => {\n        if (isGrid) return true;\n        if (isHorizontal) return true;\n        if (!state.baseElement) return true;\n        if (!isTextField(state.baseElement)) return true;\n        return false;\n      };\n      const keyMap = {\n        ArrowUp: (isGrid || isVertical) && store.up,\n        ArrowRight: (isGrid || isHorizontal) && store.next,\n        ArrowDown: (isGrid || isVertical) && store.down,\n        ArrowLeft: (isGrid || isHorizontal) && store.previous,\n        Home: () => {\n          if (!canHomeEnd()) return;\n          if (!isGrid || event.ctrlKey) {\n            return store?.first();\n          }\n          return store?.previous(-1);\n        },\n        End: () => {\n          if (!canHomeEnd()) return;\n          if (!isGrid || event.ctrlKey) {\n            return store?.last();\n          }\n          return store?.next(-1);\n        },\n        PageUp: () => {\n          return findNextPageItemId(currentTarget, store, store?.up, true);\n        },\n        PageDown: () => {\n          return findNextPageItemId(currentTarget, store, store?.down);\n        },\n      };\n      const action = keyMap[event.key as keyof typeof keyMap];\n      if (action) {\n        // If the composite item is a textbox, we'll only move focus to the\n        // previous/next composite items when the cursor is at the beginning or\n        // end of the text. This is to avoid moving focus when the user is\n        // navigating through the text.\n        if (isTextbox(currentTarget)) {\n          const selection = getTextboxSelection(currentTarget);\n          const isLeft = isHorizontal && event.key === \"ArrowLeft\";\n          const isRight = isHorizontal && event.key === \"ArrowRight\";\n          const isUp = isVertical && event.key === \"ArrowUp\";\n          const isDown = isVertical && event.key === \"ArrowDown\";\n          if (isRight || isDown) {\n            const { length: valueLength } = getTextboxValue(currentTarget);\n            if (selection.end !== valueLength) return;\n          } else if ((isLeft || isUp) && selection.start !== 0) return;\n        }\n        const nextId = action();\n        if (preventScrollOnKeyDownProp(event) || nextId !== undefined) {\n          if (!moveOnKeyPressProp(event)) return;\n          event.preventDefault();\n          store.move(nextId);\n        }\n      }\n    });\n\n    const providerValue = useMemo(\n      () => ({ id, baseElement }),\n      [id, baseElement],\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <CompositeItemContext.Provider value={providerValue}>\n          {element}\n        </CompositeItemContext.Provider>\n      ),\n      [providerValue],\n    );\n\n    props = {\n      \"data-active-item\": isActiveItem || undefined,\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n      tabIndex: isTabbable ? props.tabIndex : -1,\n      onFocus,\n      onBlurCapture,\n      onKeyDown,\n    };\n\n    props = useCommand(props);\n    props = useCollectionItem<TagName>({\n      store,\n      ...props,\n      getItem,\n      shouldRegisterItem: id ? props.shouldRegisterItem : false,\n    });\n\n    return removeUndefinedValues({\n      ...props,\n      \"aria-setsize\": ariaSetSize,\n      \"aria-posinset\": ariaPosInSet,\n    });\n  },\n);\n\n/**\n * Renders a focusable item as part of a composite widget. The `tabindex`\n * attribute is automatically managed by this component based on the\n * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)\n * option.\n *\n * When this component receives DOM focus or is virtually focused (when the\n * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)\n * option is set to `true`), the element will automatically receive the\n * [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)\n * attribute. This can be used to style the focused item, no matter the focus\n * approach employed.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-5}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem>Item 1</CompositeItem>\n *     <CompositeItem>Item 2</CompositeItem>\n *     <CompositeItem>Item 3</CompositeItem>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeItem = memo(\n  forwardRef(function CompositeItem(props: CompositeItemProps) {\n    const htmlProps = useCompositeItem(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface CompositeItemOptions<T extends ElementType = TagName>\n  extends CommandOptions<T>, CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n  /**\n   * Determines if the item should be registered as part of the collection. If\n   * this is set to `false`, the item won't be accessible via arrow keys.\n   */\n  shouldRegisterItem?: CollectionItemOptions<T>[\"shouldRegisterItem\"];\n  /**\n   * The id that will be used to group items in the same row. This is usually\n   * retrieved by the\n   * [`CompositeRow`](https://ariakit.com/reference/composite-row) component\n   * through context so in most cases you don't need to set it manually.\n   *\n   * Live examples:\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   */\n  rowId?: string;\n  /**\n   * Whether the scroll behavior should be prevented when pressing arrow keys on\n   * the first or the last items.\n   * @deprecated Use CSS\n   * [`scroll-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin)\n   * instead.\n   * @default false\n   */\n  preventScrollOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n  /**\n   * Determines if pressing arrow keys while this item is in focus should move\n   * focus to a different item.\n   *\n   * **Note**: To entirely disable focus moving within a composite widget, you\n   * can use the\n   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) prop\n   * on the composite component instead. If you want to control the behavior\n   * _only when arrow keys are pressed_, where\n   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) may\n   * not be applicable, this prop must be set on all composite items because\n   * they each manage their own key presses, as well as on the composite\n   * component itself.\n   * @default true\n   * @example\n   * ```jsx\n   * <Composite moveOnKeyPress={false}>\n   *   <CompositeItem moveOnKeyPress={false} />\n   *   <CompositeItem moveOnKeyPress={false} />\n   * </Composite>\n   * ```\n   */\n  moveOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n  /**\n   * When the `tabbable` prop is set to `true`, the [roving\n   * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)\n   * method is partially disabled for this element. This means that the\n   * `tabIndex` prop won't be assigned `-1` when the item is inactive. In\n   * addition to using arrow keys, users will be able to tab to this element,\n   * leading to the composite widget no longer existing as a single tab stop.\n   *\n   * As per the [ARIA spec](https://w3c.github.io/aria/#composite):\n   *\n   * > Authors **SHOULD** ensure that a composite widget exists as a single\n   * > navigation stop within the larger navigation system of the web page.\n   *\n   * Additionally, as stated in\n   * [RFC-2119](https://www.rfc-editor.org/rfc/rfc2119.txt):\n   *\n   * > **SHOULD** This word, or the adjective \"RECOMMENDED\", mean that there may\n   * > exist valid reasons in particular circumstances to ignore a particular\n   * > item, but the full implications must be understood and carefully weighed\n   * > before choosing a different course.\n   *\n   * Therefore, while this may be allowed, you should think carefully about the\n   * implications of using this prop.\n   *\n   * **Note**: This prop has no effect when the\n   * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)\n   * option is enabled.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   */\n  tabbable?: boolean;\n}\n\nexport type CompositeItemProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeItemOptions<T>\n>;\n"],"mappings":"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"}
+{"version":3,"file":"composite-item.js","names":[],"sources":["../../src/composite/composite-item.tsx"],"sourcesContent":["import { useStoreStateObject } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useMergeRefs,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  getScrollingElement,\n  getTextboxSelection,\n  getTextboxValue,\n  isButton,\n  isTextbox,\n  isTextField,\n  isPortalEvent,\n  isSelfTarget,\n  disabledFromProps,\n  removeUndefinedValues,\n  isSafari,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type {\n  ElementType,\n  FocusEvent,\n  KeyboardEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { useCallback, useContext, useMemo, useRef } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport type { CommandOptions } from \"../command/command.tsx\";\nimport { useCommand } from \"../command/command.tsx\";\nimport {\n  CompositeItemContext,\n  CompositeRowContext,\n  useCompositeScopedContext,\n} from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\nimport {\n  focusSilently,\n  getEnabledItem,\n  isItem,\n  selectTextField,\n} from \"./utils.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isEditableElement(element: HTMLElement) {\n  if (isTextbox(element)) return true;\n  return element.tagName === \"INPUT\" && !isButton(element);\n}\n\nfunction getNextPageOffset(scrollingElement: Element, pageUp = false) {\n  const height = scrollingElement.clientHeight;\n  const { top } = scrollingElement.getBoundingClientRect();\n  // Calculates the size of the page based on the scrolling element's height.\n  // This is similar to how browsers calculate the scroll position when pressing\n  // spacebar, page up, or page down.\n  const pageSize = Math.max(height * 0.875, height - 40) * 1.5;\n  const pageOffset = pageUp ? height - pageSize + top : pageSize + top;\n  if (scrollingElement.tagName === \"HTML\") {\n    return pageOffset + scrollingElement.scrollTop;\n  }\n  return pageOffset;\n}\n\nfunction getItemOffset(itemElement: Element, pageUp = false) {\n  const { top } = itemElement.getBoundingClientRect();\n  if (pageUp) {\n    // PageUp is always the inverse of PageDown. On PageDown, we consider only\n    // the top offset of the element. On PageUp we need to add the height of the\n    // element as well so we consider the bottom of it.\n    return top + itemElement.clientHeight;\n  }\n  return top;\n}\n\nfunction findNextPageItemId(\n  element: Element,\n  store?: CompositeStore,\n  next?: CompositeStore[\"next\"],\n  pageUp = false,\n) {\n  if (!store) return;\n  if (!next) return;\n  const { renderedItems } = store.getState();\n  const scrollingElement = getScrollingElement(element);\n  if (!scrollingElement) return;\n  const nextPageOffset = getNextPageOffset(scrollingElement, pageUp);\n  let id: string | null | undefined;\n  let prevDifference: number | undefined;\n  // We need to loop through the next items to find the one that is closest to\n  // the next page offset.\n  for (let i = 0; i < renderedItems.length; i += 1) {\n    const previousId = id;\n    id = next(i);\n    if (!id) break;\n    if (id === previousId) continue;\n    const itemElement = getEnabledItem(store, id)?.element;\n    if (!itemElement) continue;\n    const itemOffset = getItemOffset(itemElement, pageUp);\n    const difference = itemOffset - nextPageOffset;\n    const absDifference = Math.abs(difference);\n    // On PageUp, the element is at the next page if the difference between its\n    // top offset (plus its height) and the next page offset is less than or\n    // equal zero. On PageDown, the difference should be greater than or equal\n    // zero.\n    if ((pageUp && difference <= 0) || (!pageUp && difference >= 0)) {\n      // There may be cases when there's a lot of space between the pages, for\n      // example, when there's a lot of disabled items. In this case, the first\n      // item in the next page might not be the closest one. So we return the\n      // previous item id if its difference is less than the current one.\n      if (prevDifference !== undefined && prevDifference < absDifference) {\n        id = previousId;\n      }\n      break;\n    }\n    prevDifference = absDifference;\n  }\n  return id;\n}\n\nfunction targetIsAnotherItem(event: SyntheticEvent, store: CompositeStore) {\n  if (isSelfTarget(event)) return false;\n  return isItem(store, event.target as HTMLElement);\n}\n\n/**\n * Returns props to create a `CompositeItem` component.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeItem({ store });\n * <Role {...props}>Item 1</Role>\n * ```\n */\nexport const useCompositeItem = createHook<TagName, CompositeItemOptions>(\n  function useCompositeItem({\n    store,\n    rowId: rowIdProp,\n    preventScrollOnKeyDown = false,\n    moveOnKeyPress = true,\n    tabbable = false,\n    getItem: getItemProp,\n    \"aria-setsize\": ariaSetSizeProp,\n    \"aria-posinset\": ariaPosInSetProp,\n    ...props\n  }) {\n    const context = useCompositeScopedContext();\n    store = store || context;\n\n    const id = useId(props.id);\n    const ref = useRef<HTMLType>(null);\n    const row = useContext(CompositeRowContext);\n    const disabled = disabledFromProps(props);\n    const trulyDisabled = disabled && !props.accessibleWhenDisabled;\n\n    const {\n      rowId,\n      baseElement,\n      isActiveItem,\n      ariaSetSize,\n      ariaPosInSet,\n      isTabbable,\n    } = useStoreStateObject(store, {\n      rowId(state) {\n        if (rowIdProp) return rowIdProp;\n        if (!state) return;\n        if (!row?.baseElement) return;\n        if (row.baseElement !== state.baseElement) return;\n        return row.id;\n      },\n      baseElement(state) {\n        return state?.baseElement || undefined;\n      },\n      isActiveItem(state) {\n        return !!state && state.activeId === id;\n      },\n      ariaSetSize(state) {\n        if (ariaSetSizeProp != null) return ariaSetSizeProp;\n        if (!state) return;\n        if (!row?.ariaSetSize) return;\n        if (row.baseElement !== state.baseElement) return;\n        return row.ariaSetSize;\n      },\n      ariaPosInSet(state) {\n        if (ariaPosInSetProp != null) return ariaPosInSetProp;\n        if (!state) return;\n        if (!row?.ariaPosInSet) return;\n        if (row.baseElement !== state.baseElement) return;\n        const itemsInRow = state.renderedItems.filter(\n          (item) => item.rowId === rowId,\n        );\n        return (\n          row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id)\n        );\n      },\n      isTabbable(state) {\n        if (!state?.renderedItems.length) return true;\n        if (state.virtualFocus) return false;\n        if (tabbable) return true;\n        if (state.activeId === null) return false;\n        // If activeId refers to an item that's disabled or not connected to the\n        // DOM, we make all items tabbable so users can tab into the composite\n        // widget. Once the activeId is valid, we restore the roving tabindex. See\n        // https://github.com/ariakit/ariakit/issues/3232\n        // https://github.com/ariakit/ariakit/issues/4129\n        const item = store?.item(state.activeId);\n        if (item?.disabled) return true;\n        if (!item?.element) return true;\n        return state.activeId === id;\n      },\n    });\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = {\n          ...item,\n          id: id || item.id,\n          rowId,\n          disabled: trulyDisabled,\n          children: item.element?.textContent,\n        };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, rowId, trulyDisabled, getItemProp],\n    );\n\n    const onFocusProp = props.onFocus;\n    const hasFocusedComposite = useRef(false);\n\n    const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusProp?.(event);\n      if (event.defaultPrevented) return;\n      if (isPortalEvent(event)) return;\n      if (!id) return;\n      if (!store) return;\n      // If the target is another item, this probably means that composite items\n      // are nested. This is okay when building, for example, tree or treegrid\n      // elements. In this case, we just ignore the focus event on this parent\n      // item.\n      if (targetIsAnotherItem(event, store)) return;\n      const { virtualFocus, baseElement } = store.getState();\n      store.setActiveId(id);\n      // If the composite item is a text field, we'll select its content when\n      // focused. This guarantees that pressing arrow keys will move to the\n      // previous/next composite items instead of moving the cursor inside the\n      // text field.\n      if (isTextbox(event.currentTarget)) {\n        selectTextField(event.currentTarget);\n      }\n      // When using aria-activedescendant, we want to make sure that the\n      // composite container receives focus, not the composite item.\n      if (!virtualFocus) return;\n      // But we'll only do this if the focused element is the composite item\n      // itself\n      if (!isSelfTarget(event)) return;\n      // and the composite item is not a text field or contenteditable element.\n      if (isEditableElement(event.currentTarget)) return;\n      // We need to verify if the base element is connected to the DOM to avoid\n      // a scroll jump on Safari. This is necessary when the base element is\n      // removed from the DOM just before triggering this focus event.\n      if (!baseElement?.isConnected) return;\n      // Safari doesn't scroll the element into view when another element is\n      // immediately focused. So we have to do it manually here.\n      if (isSafari() && event.currentTarget.hasAttribute(\"data-autofocus\")) {\n        event.currentTarget.scrollIntoView({\n          block: \"nearest\",\n          inline: \"nearest\",\n        });\n      }\n      hasFocusedComposite.current = true;\n      // If the previously focused element is a composite or composite item\n      // component, we'll transfer focus silently to the composite element.\n      // That's because this is just a transition event, the composite element\n      // was likely already focused, so we're just immediately returning focus\n      // to it when navigating through the items.\n      const fromComposite =\n        event.relatedTarget === baseElement ||\n        isItem(store, event.relatedTarget);\n      if (fromComposite) {\n        focusSilently(baseElement);\n      }\n\n      // Otherwise, the composite element is likely not focused, so we need this\n      // focus event to propagate so consumers can use the onFocus prop on\n      // <Composite>.\n      else {\n        baseElement.focus();\n      }\n    });\n\n    const onBlurCaptureProp = props.onBlurCapture;\n\n    const onBlurCapture = useEvent((event: FocusEvent<HTMLType>) => {\n      onBlurCaptureProp?.(event);\n      if (event.defaultPrevented) return;\n      const state = store?.getState();\n      if (state?.virtualFocus && hasFocusedComposite.current) {\n        // When hasFocusedComposite is true, composite has been focused right\n        // after focusing on this item. This is an intermediate blur event, so\n        // we ignore it.\n        hasFocusedComposite.current = false;\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    });\n\n    const onKeyDownProp = props.onKeyDown;\n    const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown);\n    const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!isSelfTarget(event)) return;\n      if (!store) return;\n      const { currentTarget } = event;\n      const state = store.getState();\n      const item = store.item(id);\n      const isGrid = !!item?.rowId;\n      const isVertical = state.orientation !== \"horizontal\";\n      const isHorizontal = state.orientation !== \"vertical\";\n      // If the base element is a text field, the Home and End keys should be\n      // performed on the text field, not the composite item, unless the\n      // composite is a grid or has a horizontal orientation.\n      const canHomeEnd = () => {\n        if (isGrid) return true;\n        if (isHorizontal) return true;\n        if (!state.baseElement) return true;\n        if (!isTextField(state.baseElement)) return true;\n        return false;\n      };\n      const keyMap = {\n        ArrowUp: (isGrid || isVertical) && store.up,\n        ArrowRight: (isGrid || isHorizontal) && store.next,\n        ArrowDown: (isGrid || isVertical) && store.down,\n        ArrowLeft: (isGrid || isHorizontal) && store.previous,\n        Home: () => {\n          if (!canHomeEnd()) return;\n          if (!isGrid || event.ctrlKey) {\n            return store?.first();\n          }\n          return store?.previous(-1);\n        },\n        End: () => {\n          if (!canHomeEnd()) return;\n          if (!isGrid || event.ctrlKey) {\n            return store?.last();\n          }\n          return store?.next(-1);\n        },\n        PageUp: () => {\n          return findNextPageItemId(currentTarget, store, store?.up, true);\n        },\n        PageDown: () => {\n          return findNextPageItemId(currentTarget, store, store?.down);\n        },\n      };\n      const action = keyMap[event.key as keyof typeof keyMap];\n      if (action) {\n        // If the composite item is a textbox, we'll only move focus to the\n        // previous/next composite items when the cursor is at the beginning or\n        // end of the text. This is to avoid moving focus when the user is\n        // navigating through the text.\n        if (isTextbox(currentTarget)) {\n          const selection = getTextboxSelection(currentTarget);\n          const isLeft = isHorizontal && event.key === \"ArrowLeft\";\n          const isRight = isHorizontal && event.key === \"ArrowRight\";\n          const isUp = isVertical && event.key === \"ArrowUp\";\n          const isDown = isVertical && event.key === \"ArrowDown\";\n          if (isRight || isDown) {\n            const { length: valueLength } = getTextboxValue(currentTarget);\n            if (selection.end !== valueLength) return;\n          } else if ((isLeft || isUp) && selection.start !== 0) return;\n        }\n        const nextId = action();\n        if (preventScrollOnKeyDownProp(event) || nextId !== undefined) {\n          if (!moveOnKeyPressProp(event)) return;\n          event.preventDefault();\n          store.move(nextId);\n        }\n      }\n    });\n\n    const providerValue = useMemo(\n      () => ({ id, baseElement }),\n      [id, baseElement],\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <CompositeItemContext.Provider value={providerValue}>\n          {element}\n        </CompositeItemContext.Provider>\n      ),\n      [providerValue],\n    );\n\n    props = {\n      \"data-active-item\": isActiveItem || undefined,\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n      tabIndex: isTabbable ? props.tabIndex : -1,\n      onFocus,\n      onBlurCapture,\n      onKeyDown,\n    };\n\n    props = useCommand(props);\n    props = useCollectionItem<TagName>({\n      store,\n      ...props,\n      getItem,\n      shouldRegisterItem: id ? props.shouldRegisterItem : false,\n    });\n\n    return removeUndefinedValues({\n      ...props,\n      \"aria-setsize\": ariaSetSize,\n      \"aria-posinset\": ariaPosInSet,\n    });\n  },\n);\n\n/**\n * Renders a focusable item as part of a composite widget. The `tabindex`\n * attribute is automatically managed by this component based on the\n * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)\n * option.\n *\n * When this component receives DOM focus or is virtually focused (when the\n * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)\n * option is set to `true`), the element will automatically receive the\n * [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)\n * attribute. This can be used to style the focused item, no matter the focus\n * approach employed.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-5}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem>Item 1</CompositeItem>\n *     <CompositeItem>Item 2</CompositeItem>\n *     <CompositeItem>Item 3</CompositeItem>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeItem = memo(\n  forwardRef(function CompositeItem(props: CompositeItemProps) {\n    const htmlProps = useCompositeItem(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface CompositeItemOptions<T extends ElementType = TagName>\n  extends CommandOptions<T>, CollectionItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n  /**\n   * Determines if the item should be registered as part of the collection. If\n   * this is set to `false`, the item won't be accessible via arrow keys.\n   */\n  shouldRegisterItem?: CollectionItemOptions<T>[\"shouldRegisterItem\"];\n  /**\n   * The id that will be used to group items in the same row. This is usually\n   * retrieved by the\n   * [`CompositeRow`](https://ariakit.com/reference/composite-row) component\n   * through context so in most cases you don't need to set it manually.\n   *\n   * Live examples:\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   */\n  rowId?: string;\n  /**\n   * Whether the scroll behavior should be prevented when pressing arrow keys on\n   * the first or the last items.\n   * @deprecated Use CSS\n   * [`scroll-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin)\n   * instead.\n   * @default false\n   */\n  preventScrollOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n  /**\n   * Determines if pressing arrow keys while this item is in focus should move\n   * focus to a different item.\n   *\n   * **Note**: To entirely disable focus moving within a composite widget, you\n   * can use the\n   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) prop\n   * on the composite component instead. If you want to control the behavior\n   * _only when arrow keys are pressed_, where\n   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) may\n   * not be applicable, this prop must be set on all composite items because\n   * they each manage their own key presses, as well as on the composite\n   * component itself.\n   * @default true\n   * @example\n   * ```jsx\n   * <Composite moveOnKeyPress={false}>\n   *   <CompositeItem moveOnKeyPress={false} />\n   *   <CompositeItem moveOnKeyPress={false} />\n   * </Composite>\n   * ```\n   */\n  moveOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n  /**\n   * When the `tabbable` prop is set to `true`, the [roving\n   * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)\n   * method is partially disabled for this element. This means that the\n   * `tabIndex` prop won't be assigned `-1` when the item is inactive. In\n   * addition to using arrow keys, users will be able to tab to this element,\n   * leading to the composite widget no longer existing as a single tab stop.\n   *\n   * As per the [ARIA spec](https://w3c.github.io/aria/#composite):\n   *\n   * > Authors **SHOULD** ensure that a composite widget exists as a single\n   * > navigation stop within the larger navigation system of the web page.\n   *\n   * Additionally, as stated in\n   * [RFC-2119](https://www.rfc-editor.org/rfc/rfc2119.txt):\n   *\n   * > **SHOULD** This word, or the adjective \"RECOMMENDED\", mean that there may\n   * > exist valid reasons in particular circumstances to ignore a particular\n   * > item, but the full implications must be understood and carefully weighed\n   * > before choosing a different course.\n   *\n   * Therefore, while this may be allowed, you should think carefully about the\n   * implications of using this prop.\n   *\n   * **Note**: This prop has no effect when the\n   * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)\n   * option is enabled.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   */\n  tabbable?: boolean;\n}\n\nexport type CompositeItemProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeItemOptions<T>\n>;\n"],"mappings":"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"}

package/dist/composite/composite-overflow-disclosure.d.ts

@@ -1,4 +1,4 @@
-import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { n as CompositeItemOptions } from "../composite-item-d4UXaZ84.js";
 import { PopoverDisclosureOptions } from "../popover/popover-disclosure.js";
 import { CompositeOverflowStore } from "./composite-overflow-store.js";
 import { Props } from "@ariakit/react-utils";
@@ -40,7 +40,7 @@ declare const useCompositeOverflowDisclosure: import("@ariakit/react-utils").Hoo
  * </Composite>
  * ```
  */
-declare const CompositeOverflowDisclosure: (props: CompositeOverflowDisclosureProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CompositeOverflowDisclosure: (props: CompositeOverflowDisclosureProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CompositeOverflowDisclosureOptions<T extends ElementType = TagName> extends Omit<CompositeItemOptions<T>, "store">, PopoverDisclosureOptions<T> {
   /**
    * Object returned by the `useCompositeOverflowStore` hook.

package/dist/composite/composite-overflow-disclosure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite-overflow-disclosure.d.ts","names":["Props","ElementType","PopoverDisclosureOptions","CompositeItemOptions","CompositeOverflowStore","TagName","useCompositeOverflowDisclosure","CompositeOverflowDisclosureOptions","Hook","CompositeOverflowDisclosure","CompositeOverflowDisclosureProps","props","ReactElement","JSXElementConstructor","T","Omit","store"],"sources":["../../src/composite/composite-overflow-disclosure.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF+C;;;;AACvD;AAAA;;;;AACQ;AAY7B;AAd4E,cAcvDC,8BAAAA,iCAA+DE,IAAAA,WAAeD,kCAAkC;;;AAAA;AAsBrI;;;;;;;;;AAA+K;AAC/K;;;;;;;;cADqBE,2BAAAA,GAA8BE,KAAAA,EAAOD,gCAAgC,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzIN,kCAAAA,WAA6CN,WAAAA,GAAcI,OAAAA,UAAiBU,IAAAA,CAAKZ,oBAAAA,CAAqBW,CAAAA,aAAcZ,wBAAAA,CAAyBY,CAAAA;EAAzBZ;;;EAIjIc,KAAAA,EAAOZ,sBAAAA;AAAAA;AAAAA,KAECM,gCAAAA,WAA2CT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,kCAAAA,CAAmCO,CAAAA"}
+{"version":3,"file":"composite-overflow-disclosure.d.ts","names":["Props","ElementType","PopoverDisclosureOptions","CompositeItemOptions","CompositeOverflowStore","TagName","useCompositeOverflowDisclosure","CompositeOverflowDisclosureOptions","Hook","CompositeOverflowDisclosure","CompositeOverflowDisclosureProps","props","ReactElement","JSXElementConstructor","T","Omit","store"],"sources":["../../src/composite/composite-overflow-disclosure.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF+C;;;;AACvD;AAAA;;;;AACQ;AAY7B;AAd4E,cAcvDC,8BAAAA,iCAA+DE,IAAAA,WAAeD,kCAAkC;;;AAAA;AAsBrI;;;;;;;;;AAAmL;AACnL;;;;;;;;cADqBE,2BAAAA,GAA8BE,KAAAA,EAAOD,gCAAgC,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC7IN,kCAAAA,WAA6CN,WAAAA,GAAcI,OAAAA,UAAiBU,IAAAA,CAAKZ,oBAAAA,CAAqBW,CAAAA,aAAcZ,wBAAAA,CAAyBY,CAAAA;EAAzBZ;;;EAIjIc,KAAAA,EAAOZ,sBAAAA;AAAAA;AAAAA,KAECM,gCAAAA,WAA2CT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,kCAAAA,CAAmCO,CAAAA"}

package/dist/composite/composite-overflow.d.ts

@@ -1,4 +1,4 @@
-import { n as PopoverOptions } from "../popover-CCqiRKqg.js";
+import { n as PopoverOptions } from "../popover-B9PxE5iP.js";
 import { CompositeOverflowStore } from "./composite-overflow-store.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -41,7 +41,7 @@ declare const useCompositeOverflow: import("@ariakit/react-utils").Hook<"div", C
  * </Composite>
  * ```
  */
-declare const CompositeOverflow: (props: CompositeOverflowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CompositeOverflow: (props: CompositeOverflowProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CompositeOverflowOptions<T extends ElementType = TagName> extends PopoverOptions<T> {
   /**
    * Object returned by the `useCompositeOverflowStore` hook.

package/dist/composite/composite-overflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite-overflow.d.ts","names":["Props","ElementType","PopoverOptions","CompositeOverflowStore","TagName","useCompositeOverflow","CompositeOverflowOptions","Hook","CompositeOverflow","CompositeOverflowProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/composite/composite-overflow.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF+C;;;;AACvD;AAAA;;;;AACQ;AAc7B;;;AAhB4E,cAgBvDC,oBAAAA,iCAAqDE,IAAAA,QAAYD,wBAAwB;AAAA;AAsB9G;;;;;;;;;AAA2J;AAC3J;;;;;;;;;;AAvB8G,cAsBzFE,iBAAAA,GAAoBE,KAAAA,EAAOD,sBAAsB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrHN,wBAAAA,WAAmCL,WAAAA,GAAcG,OAAAA,UAAiBF,cAAAA,CAAeW,CAAAA;EAAhCT;;;EAI9DU,KAAAA,EAAOX,sBAAAA;AAAAA;AAAAA,KAECM,sBAAAA,WAAiCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,wBAAAA,CAAyBO,CAAAA"}
+{"version":3,"file":"composite-overflow.d.ts","names":["Props","ElementType","PopoverOptions","CompositeOverflowStore","TagName","useCompositeOverflow","CompositeOverflowOptions","Hook","CompositeOverflow","CompositeOverflowProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/composite/composite-overflow.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF+C;;;;AACvD;AAAA;;;;AACQ;AAc7B;;;AAhB4E,cAgBvDC,oBAAAA,iCAAqDE,IAAAA,QAAYD,wBAAwB;AAAA;AAsB9G;;;;;;;;;AAA+J;AAC/J;;;;;;;;;;AAvB8G,cAsBzFE,iBAAAA,GAAoBE,KAAAA,EAAOD,sBAAsB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzHN,wBAAAA,WAAmCL,WAAAA,GAAcG,OAAAA,UAAiBF,cAAAA,CAAeW,CAAAA;EAAhCT;;;EAI9DU,KAAAA,EAAOX,sBAAAA;AAAAA;AAAAA,KAECM,sBAAAA,WAAiCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,wBAAAA,CAAyBO,CAAAA"}