@ariakit/react-components 0.1.0

package/dist/composite/composite.js

@@ -0,0 +1,273 @@
+"use client";
+import { useFocusable } from "../focusable/focusable.js";
+import { CompositeContextProvider, useCompositeProviderContext } from "./composite-context.js";
+import { findFirstEnabledItem, getEnabledItem, groupItemsByRows, isItem, silentlyFocused } from "./utils.js";
+import { createElement, createHook, forwardRef, useBooleanEvent, useEvent, useMergeRefs, useSafeLayoutEffect, useTransactionState, useWrapElement } from "@ariakit/react-utils";
+import { fireBlurEvent, fireKeyboardEvent, flatten2DArray, focusIntoView, getActiveElement, hasFocus, invariant, isSelfTarget, isTextField, reverseArray } from "@ariakit/utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/composite/composite.tsx
+const TagName = "div";
+function isGrid(items) {
+	return items.some((item) => !!item.rowId);
+}
+function isPrintableKey(event) {
+	const target = event.target;
+	if (target && !isTextField(target)) return false;
+	return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
+}
+function isModifierKey(event) {
+	return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta";
+}
+function useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) {
+	return useEvent((event) => {
+		onKeyboardEvent?.(event);
+		if (event.defaultPrevented) return;
+		if (event.isPropagationStopped()) return;
+		if (!isSelfTarget(event)) return;
+		if (isModifierKey(event)) return;
+		if (isPrintableKey(event)) return;
+		const activeElement = getEnabledItem(store, store.getState().activeId)?.element;
+		if (!activeElement) return;
+		const { view, ...eventInit } = event;
+		if (activeElement !== previousElementRef?.current) activeElement.focus();
+		if (!fireKeyboardEvent(activeElement, event.type, eventInit)) event.preventDefault();
+		if (event.currentTarget.contains(activeElement)) event.stopPropagation();
+	});
+}
+function findFirstEnabledItemInTheLastRow(items) {
+	return findFirstEnabledItem(flatten2DArray(reverseArray(groupItemsByRows(items))));
+}
+function withBaseScrollPreserved(store, callback) {
+	const { virtualFocus, baseElement } = store.getState();
+	if (!virtualFocus || !baseElement || !isTextField(baseElement)) {
+		callback();
+		return;
+	}
+	const savedScrollLeft = baseElement.scrollLeft;
+	const savedScrollTop = baseElement.scrollTop;
+	callback();
+	baseElement.scrollLeft = savedScrollLeft;
+	baseElement.scrollTop = savedScrollTop;
+}
+function useScheduleFocus(store) {
+	const [scheduled, setScheduled] = useState(false);
+	const schedule = useCallback(() => setScheduled(true), []);
+	const activeItem = useStoreState(store, (state) => getEnabledItem(store, state.activeId));
+	useEffect(() => {
+		const activeElement = activeItem?.element;
+		if (!scheduled) return;
+		if (!activeElement) return;
+		setScheduled(false);
+		withBaseScrollPreserved(store, () => {
+			activeElement.focus({ preventScroll: true });
+		});
+	}, [
+		store,
+		activeItem,
+		scheduled
+	]);
+	return schedule;
+}
+/**
+* Returns props to create a `Composite` component.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const store = useCompositeStore();
+* const props = useComposite({ store });
+* <Role {...props}>
+*   <CompositeItem>Item 1</CompositeItem>
+*   <CompositeItem>Item 2</CompositeItem>
+* </Role>
+* ```
+*/
+const useComposite = createHook(function useComposite({ store, composite = true, focusOnMove = composite, moveOnKeyPress = true, ...props }) {
+	const context = useCompositeProviderContext();
+	store = store || context;
+	invariant(store, "Composite must receive a `store` prop or be wrapped in a CompositeProvider component.");
+	const ref = useRef(null);
+	const previousElementRef = useRef(null);
+	const scheduleFocus = useScheduleFocus(store);
+	const moves = useStoreState(store, "moves");
+	const [, setBaseElement] = useTransactionState(composite ? store.setBaseElement : null);
+	useEffect(() => {
+		if (!store) return;
+		if (!moves) return;
+		if (!composite) return;
+		if (!focusOnMove) return;
+		const { activeId } = store.getState();
+		const itemElement = getEnabledItem(store, activeId)?.element;
+		if (!itemElement) return;
+		withBaseScrollPreserved(store, () => focusIntoView(itemElement));
+	}, [
+		store,
+		moves,
+		composite,
+		focusOnMove
+	]);
+	useSafeLayoutEffect(() => {
+		if (!store) return;
+		if (!moves) return;
+		if (!composite) return;
+		const { baseElement, activeId } = store.getState();
+		if (!(activeId === null)) return;
+		if (!baseElement) return;
+		const previousElement = previousElementRef.current;
+		previousElementRef.current = null;
+		if (previousElement) fireBlurEvent(previousElement, { relatedTarget: baseElement });
+		if (!hasFocus(baseElement)) baseElement.focus();
+	}, [
+		store,
+		moves,
+		composite
+	]);
+	const activeId = useStoreState(store, "activeId");
+	const virtualFocus = useStoreState(store, "virtualFocus");
+	useSafeLayoutEffect(() => {
+		if (!store) return;
+		if (!composite) return;
+		if (!virtualFocus) return;
+		const previousElement = previousElementRef.current;
+		previousElementRef.current = null;
+		if (!previousElement) return;
+		const relatedTarget = getEnabledItem(store, activeId)?.element || getActiveElement(previousElement);
+		if (relatedTarget === previousElement) return;
+		fireBlurEvent(previousElement, { relatedTarget });
+	}, [
+		store,
+		activeId,
+		virtualFocus,
+		composite
+	]);
+	const onKeyDownCapture = useKeyboardEventProxy(store, props.onKeyDownCapture, previousElementRef);
+	const onKeyUpCapture = useKeyboardEventProxy(store, props.onKeyUpCapture, previousElementRef);
+	const onFocusCaptureProp = props.onFocusCapture;
+	const onFocusCapture = useEvent((event) => {
+		onFocusCaptureProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		const { virtualFocus } = store.getState();
+		if (!virtualFocus) return;
+		const previousActiveElement = event.relatedTarget;
+		const isSilentlyFocused = silentlyFocused(event.currentTarget);
+		if (isSelfTarget(event) && isSilentlyFocused) {
+			event.stopPropagation();
+			previousElementRef.current = previousActiveElement;
+		}
+	});
+	const onFocusProp = props.onFocus;
+	const onFocus = useEvent((event) => {
+		onFocusProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!composite) return;
+		if (!store) return;
+		const { relatedTarget } = event;
+		const { virtualFocus } = store.getState();
+		if (virtualFocus) {
+			if (isSelfTarget(event) && !isItem(store, relatedTarget)) queueMicrotask(scheduleFocus);
+		} else if (isSelfTarget(event)) store.setActiveId(null);
+	});
+	const onBlurCaptureProp = props.onBlurCapture;
+	const onBlurCapture = useEvent((event) => {
+		onBlurCaptureProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		const { virtualFocus, activeId } = store.getState();
+		if (!virtualFocus) return;
+		const activeElement = getEnabledItem(store, activeId)?.element;
+		const nextActiveElement = event.relatedTarget;
+		const nextActiveElementIsItem = isItem(store, nextActiveElement);
+		const previousElement = previousElementRef.current;
+		previousElementRef.current = null;
+		if (isSelfTarget(event) && nextActiveElementIsItem) {
+			if (nextActiveElement === activeElement) {
+				if (previousElement && previousElement !== nextActiveElement) fireBlurEvent(previousElement, event);
+			} else if (activeElement) fireBlurEvent(activeElement, event);
+			else if (previousElement) fireBlurEvent(previousElement, event);
+			event.stopPropagation();
+		} else if (!isItem(store, event.target) && activeElement) fireBlurEvent(activeElement, event);
+	});
+	const onKeyDownProp = props.onKeyDown;
+	const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.nativeEvent.isComposing) return;
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		if (!isSelfTarget(event)) return;
+		const { orientation, renderedItems, activeId } = store.getState();
+		if (getEnabledItem(store, activeId)?.element?.isConnected) return;
+		const isVertical = orientation !== "horizontal";
+		const isHorizontal = orientation !== "vertical";
+		const grid = isGrid(renderedItems);
+		if ((event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End") && isTextField(event.currentTarget)) return;
+		const up = () => {
+			if (grid) return findFirstEnabledItemInTheLastRow(renderedItems)?.id;
+			return store?.last();
+		};
+		const action = {
+			ArrowUp: (grid || isVertical) && up,
+			ArrowRight: (grid || isHorizontal) && store.first,
+			ArrowDown: (grid || isVertical) && store.first,
+			ArrowLeft: (grid || isHorizontal) && store.last,
+			Home: store.first,
+			End: store.last,
+			PageUp: store.first,
+			PageDown: store.last
+		}[event.key];
+		if (action) {
+			const id = action();
+			if (id !== void 0) {
+				if (!moveOnKeyPressProp(event)) return;
+				event.preventDefault();
+				store.move(id);
+			}
+		}
+	});
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(CompositeContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	props = {
+		"aria-activedescendant": useStoreState(store, (state) => {
+			if (!store) return;
+			if (!composite) return;
+			if (!state.virtualFocus) return;
+			return getEnabledItem(store, state.activeId)?.id;
+		}),
+		...props,
+		ref: useMergeRefs(ref, setBaseElement, props.ref),
+		onKeyDownCapture,
+		onKeyUpCapture,
+		onFocusCapture,
+		onFocus,
+		onBlurCapture,
+		onKeyDown
+	};
+	props = useFocusable({
+		focusable: useStoreState(store, (state) => composite && (state.virtualFocus || state.activeId === null)),
+		...props
+	});
+	return props;
+});
+/**
+* Renders a composite widget.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const composite = useCompositeStore();
+* <Composite store={composite}>
+*   <CompositeItem>Item 1</CompositeItem>
+*   <CompositeItem>Item 2</CompositeItem>
+* </Composite>
+* ```
+*/
+const Composite = forwardRef(function Composite(props) {
+	return createElement(TagName, useComposite(props));
+});
+//#endregion
+export { Composite, useComposite };
+
+//# sourceMappingURL=composite.js.map

package/dist/composite/composite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite.js","names":[],"sources":["../../src/composite/composite.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useMergeRefs,\n  useSafeLayoutEffect,\n  useTransactionState,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  flatten2DArray,\n  reverseArray,\n  getActiveElement,\n  isTextField,\n  fireBlurEvent,\n  fireKeyboardEvent,\n  isSelfTarget,\n  focusIntoView,\n  hasFocus,\n  invariant,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type {\n  ElementType,\n  FocusEvent,\n  KeyboardEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { FocusableOptions } from \"../focusable/focusable.tsx\";\nimport { useFocusable } from \"../focusable/focusable.tsx\";\nimport {\n  CompositeContextProvider,\n  useCompositeProviderContext,\n} from \"./composite-context.tsx\";\nimport type { CompositeStore, CompositeStoreItem } from \"./composite-store.ts\";\nimport {\n  findFirstEnabledItem,\n  getEnabledItem,\n  groupItemsByRows,\n  isItem,\n  silentlyFocused,\n} from \"./utils.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isGrid(items: CompositeStoreItem[]) {\n  return items.some((item) => !!item.rowId);\n}\n\nfunction isPrintableKey(event: KeyboardEvent | ReactKeyboardEvent): boolean {\n  const target = event.target as Element | null;\n  if (target && !isTextField(target)) return false;\n  return event.key.length === 1 && !event.ctrlKey && !event.metaKey;\n}\n\nfunction isModifierKey(event: KeyboardEvent | ReactKeyboardEvent) {\n  return (\n    event.key === \"Shift\" ||\n    event.key === \"Control\" ||\n    event.key === \"Alt\" ||\n    event.key === \"Meta\"\n  );\n}\n\nfunction useKeyboardEventProxy(\n  store: CompositeStore,\n  onKeyboardEvent?: KeyboardEventHandler,\n  previousElementRef?: RefObject<HTMLElement | null>,\n) {\n  return useEvent((event: ReactKeyboardEvent) => {\n    onKeyboardEvent?.(event);\n    if (event.defaultPrevented) return;\n    if (event.isPropagationStopped()) return;\n    if (!isSelfTarget(event)) return;\n    if (isModifierKey(event)) return;\n    if (isPrintableKey(event)) return;\n    const state = store.getState();\n    const activeElement = getEnabledItem(store, state.activeId)?.element;\n    if (!activeElement) return;\n    const { view, ...eventInit } = event;\n    const previousElement = previousElementRef?.current;\n    // If the active item element is not the previous element, this means that\n    // it hasn't been focused (for example, when using composite hover). So we\n    // focus on it before firing the keyboard event.\n    if (activeElement !== previousElement) {\n      activeElement.focus();\n    }\n    if (!fireKeyboardEvent(activeElement, event.type, eventInit)) {\n      event.preventDefault();\n    }\n    // The event will be triggered on the composite item and then propagated up\n    // to this composite element again, so we can pretend that it wasn't called\n    // on this component in the first place.\n    if (event.currentTarget.contains(activeElement)) {\n      event.stopPropagation();\n    }\n  });\n}\n\nfunction findFirstEnabledItemInTheLastRow(items: CompositeStoreItem[]) {\n  return findFirstEnabledItem(\n    flatten2DArray(reverseArray(groupItemsByRows(items))),\n  );\n}\n\n// When virtual focus briefly moves DOM focus from a text input to an\n// item and back, browsers reset the input's internal scroll position\n// (e.g., scrollLeft). This helper preserves and restores scroll across\n// such focus transitions. Only applies to text field base elements to\n// avoid undoing intentional scrollIntoView on scrollable containers.\nfunction withBaseScrollPreserved(store: CompositeStore, callback: () => void) {\n  const { virtualFocus, baseElement } = store.getState();\n  if (!virtualFocus || !baseElement || !isTextField(baseElement)) {\n    callback();\n    return;\n  }\n  const savedScrollLeft = baseElement.scrollLeft;\n  const savedScrollTop = baseElement.scrollTop;\n  callback();\n  baseElement.scrollLeft = savedScrollLeft;\n  baseElement.scrollTop = savedScrollTop;\n}\n\nfunction useScheduleFocus(store: CompositeStore) {\n  const [scheduled, setScheduled] = useState(false);\n  const schedule = useCallback(() => setScheduled(true), []);\n  const activeItem = useStoreState(store, (state) =>\n    getEnabledItem(store, state.activeId),\n  );\n  useEffect(() => {\n    const activeElement = activeItem?.element;\n    if (!scheduled) return;\n    if (!activeElement) return;\n    setScheduled(false);\n    withBaseScrollPreserved(store, () => {\n      activeElement.focus({ preventScroll: true });\n    });\n  }, [store, activeItem, scheduled]);\n  return schedule;\n}\n\n/**\n * Returns props to create a `Composite` component.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useComposite({ store });\n * <Role {...props}>\n *   <CompositeItem>Item 1</CompositeItem>\n *   <CompositeItem>Item 2</CompositeItem>\n * </Role>\n * ```\n */\nexport const useComposite = createHook<TagName, CompositeOptions>(\n  function useComposite({\n    store,\n    composite = true,\n    focusOnMove = composite,\n    moveOnKeyPress = true,\n    ...props\n  }) {\n    const context = useCompositeProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"Composite must receive a `store` prop or be wrapped in a CompositeProvider component.\",\n    );\n\n    const ref = useRef<HTMLType>(null);\n    const previousElementRef = useRef<HTMLElement | null>(null);\n    const scheduleFocus = useScheduleFocus(store);\n    const moves = useStoreState(store, \"moves\");\n\n    const [, setBaseElement] = useTransactionState(\n      composite ? store.setBaseElement : null,\n    );\n\n    // Focus on the active item element.\n    useEffect(() => {\n      if (!store) return;\n      if (!moves) return;\n      if (!composite) return;\n      if (!focusOnMove) return;\n      const { activeId } = store.getState();\n      const itemElement = getEnabledItem(store, activeId)?.element;\n      if (!itemElement) return;\n      withBaseScrollPreserved(store, () => focusIntoView(itemElement));\n    }, [store, moves, composite, focusOnMove]);\n\n    // If composite.move(null) has been called, the composite container (this\n    // element) should receive focus.\n    useSafeLayoutEffect(() => {\n      if (!store) return;\n      if (!moves) return;\n      if (!composite) return;\n      const { baseElement, activeId } = store.getState();\n      const isSelfAcive = activeId === null;\n      if (!isSelfAcive) return;\n      if (!baseElement) return;\n      const previousElement = previousElementRef.current;\n      // We have to clean up the previous element ref so an additional blur\n      // event is not fired on it, for example, when looping through items while\n      // includesBaseElement is true.\n      previousElementRef.current = null;\n      if (previousElement) {\n        // We fire a blur event on the previous active item before moving focus\n        // to the composite element so the events are dispatched in the right\n        // order (blur, then focus).\n        fireBlurEvent(previousElement, { relatedTarget: baseElement });\n      }\n      if (!hasFocus(baseElement)) {\n        baseElement.focus();\n      }\n    }, [store, moves, composite]);\n\n    const activeId = useStoreState(store, \"activeId\");\n    const virtualFocus = useStoreState(store, \"virtualFocus\");\n\n    // At this point, if the activeId has changed and we still have a\n    // previousElement, this means that the previousElement hasn't been blurred,\n    // so we do it here. This will be the scenario when moving through items, in\n    // which case the onFocusCapture below event will stop propagation.\n    useSafeLayoutEffect(() => {\n      if (!store) return;\n      if (!composite) return;\n      if (!virtualFocus) return;\n      const previousElement = previousElementRef.current;\n      previousElementRef.current = null;\n      if (!previousElement) return;\n      const activeElement = getEnabledItem(store, activeId)?.element;\n      const relatedTarget = activeElement || getActiveElement(previousElement);\n      if (relatedTarget === previousElement) return;\n      fireBlurEvent(previousElement, { relatedTarget });\n    }, [store, activeId, virtualFocus, composite]);\n\n    const onKeyDownCapture = useKeyboardEventProxy(\n      store,\n      props.onKeyDownCapture,\n      previousElementRef,\n    );\n\n    const onKeyUpCapture = useKeyboardEventProxy(\n      store,\n      props.onKeyUpCapture,\n      previousElementRef,\n    );\n\n    const onFocusCaptureProp = props.onFocusCapture;\n\n    const onFocusCapture = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusCaptureProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!store) return;\n      const { virtualFocus } = store.getState();\n      if (!virtualFocus) return;\n      const previousActiveElement = event.relatedTarget as HTMLElement | null;\n      const isSilentlyFocused = silentlyFocused(event.currentTarget);\n      if (isSelfTarget(event) && isSilentlyFocused) {\n        // Composite has been focused as a result of an item receiving focus.\n        // The composite item will move focus back to the composite container.\n        // In this case, we don't want to propagate this additional event nor\n        // call the onFocus handler passed to <Composite onFocus={...} />.\n        event.stopPropagation();\n        // We keep track of the previous active item element so we can manually\n        // fire a blur event on it later when the focus is moved to another item\n        // on the onBlurCapture event below.\n        previousElementRef.current = previousActiveElement;\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      if (!composite) return;\n      if (!store) return;\n      const { relatedTarget } = event;\n      const { virtualFocus } = store.getState();\n      if (virtualFocus) {\n        // This means that the composite element has been focused while the\n        // composite item has not. For example, by clicking on the composite\n        // element without touching any item, or by tabbing into the composite\n        // element. In this case, we want to trigger focus on the item, just\n        // like it would happen with roving tabindex. When it receives focus,\n        // the composite item will move focus back to the composite element.\n        if (isSelfTarget(event) && !isItem(store, relatedTarget)) {\n          // By queueing a microtask, we ensure the scheduleFocus effect will be\n          // triggered after all the other effects that might have changed the\n          // active item. This also accounts for when the composite container is\n          // focused right after it gets mounted (for example, in a dialog), in\n          // which case state.items will not be populated yet.\n          queueMicrotask(scheduleFocus);\n        }\n      } else if (isSelfTarget(event)) {\n        // When the roving tabindex composite gets intentionally focused (for\n        // example, by clicking directly on it, and not on an item), we make\n        // sure to set the activeId to null (which means the composite element\n        // itself has focus).\n        store.setActiveId(null);\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      if (!store) return;\n      const { virtualFocus, activeId } = store.getState();\n      if (!virtualFocus) return;\n      // When virtualFocus is set to true, we move focus from the composite\n      // container (this element) to the composite item that is being selected.\n      // Then we move focus back to the composite container. This is so we can\n      // provide the same API as the roving tabindex method, which means people\n      // can attach onFocus/onBlur handlers on the CompositeItem component\n      // regardless of whether virtualFocus is set to true or false. This\n      // sequence of blurring and focusing on items and on the composite element\n      // may be confusing, so we ignore intermediate focus and blur events by\n      // stopping their propagation.\n      const activeElement = getEnabledItem(store, activeId)?.element;\n      const nextActiveElement = event.relatedTarget;\n      const nextActiveElementIsItem = isItem(store, nextActiveElement);\n      const previousElement = previousElementRef.current;\n      previousElementRef.current = null;\n      // This is an intermediate blur event: blurring the composite container\n      // to focus on an item (nextActiveElement).\n      if (isSelfTarget(event) && nextActiveElementIsItem) {\n        // The next active element will be the same as the active item in the\n        // store in these two scenarios:\n        // - Moving focus with keyboard: the state is updated before the blur\n        //   event is triggered, so here the active item is already pointing to\n        //   the next active element.\n        // - Clicking on the active item with a pointer: this will trigger blur\n        //   on the composite element and then the next active element will be\n        //   the same as the active item. Clicking on an item other than the\n        //   active one doesn't end up here as the activeItem state will be\n        //   updated only after that.\n        if (nextActiveElement === activeElement) {\n          // If there's a previous active item and it's not a click action, then\n          // we fire a blur event on it so it will work just like if it had DOM\n          // focus before (like when using roving tabindex).\n          if (previousElement && previousElement !== nextActiveElement) {\n            fireBlurEvent(previousElement, event);\n          }\n        }\n\n        // This will be true when the next active element is not the active\n        // element, but there's an active item. This will only happen when\n        // clicking with a pointer on a different item, when there's already an\n        // item selected, in which case activeElement is the item that is\n        // getting blurred, and nextActiveElement is the item that is being\n        // clicked.\n        else if (activeElement) {\n          fireBlurEvent(activeElement, event);\n        }\n\n        // Finally, if we still have a previousElement, this means that the\n        // store is being composed with another composite store and we're moving\n        // with keyboard. In this case, the state won't be updated before the\n        // blur event. TODO: Test this.\n        else if (previousElement) {\n          fireBlurEvent(previousElement, event);\n        }\n        // We want to ignore intermediate blur events, so we stop the\n        // propagation of this event.\n        event.stopPropagation();\n      } else {\n        const targetIsItem = isItem(store, event.target);\n        // If target is not a composite item, it may be the composite element\n        // itself (isSelfTarget) or a tabbable element inside the composite\n        // element. This may be triggered by clicking outside of the composite\n        // element or by tabbing out of it. In either cases, we want to fire a\n        // blur event on the active item.\n        if (!targetIsItem && activeElement) {\n          fireBlurEvent(activeElement, event);\n        }\n      }\n    });\n\n    const onKeyDownProp = props.onKeyDown;\n    const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);\n\n    const onKeyDown = useEvent((event: ReactKeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      // https://github.com/ariakit/ariakit/issues/4388\n      if (event.nativeEvent.isComposing) return;\n      if (event.defaultPrevented) return;\n      if (!store) return;\n      if (!isSelfTarget(event)) return;\n      const { orientation, renderedItems, activeId } = store.getState();\n      const activeItem = getEnabledItem(store, activeId);\n      if (activeItem?.element?.isConnected) return;\n      const isVertical = orientation !== \"horizontal\";\n      const isHorizontal = orientation !== \"vertical\";\n      const grid = isGrid(renderedItems);\n      // If the event is coming from a text field and no item is selected,\n      // horizontal keys should perform their default action on the text field\n      // instead of moving focus to an item.\n      const isHorizontalKey =\n        event.key === \"ArrowLeft\" ||\n        event.key === \"ArrowRight\" ||\n        event.key === \"Home\" ||\n        event.key === \"End\";\n      if (isHorizontalKey && isTextField(event.currentTarget)) return;\n      const up = () => {\n        if (grid) {\n          const item = findFirstEnabledItemInTheLastRow(renderedItems);\n          return item?.id;\n        }\n        return store?.last();\n      };\n      const keyMap = {\n        ArrowUp: (grid || isVertical) && up,\n        ArrowRight: (grid || isHorizontal) && store.first,\n        ArrowDown: (grid || isVertical) && store.first,\n        ArrowLeft: (grid || isHorizontal) && store.last,\n        Home: store.first,\n        End: store.last,\n        PageUp: store.first,\n        PageDown: store.last,\n      };\n      const action = keyMap[event.key as keyof typeof keyMap];\n      if (action) {\n        const id = action();\n        if (id !== undefined) {\n          if (!moveOnKeyPressProp(event)) return;\n          event.preventDefault();\n          store.move(id);\n        }\n      }\n    });\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <CompositeContextProvider value={store}>\n          {element}\n        </CompositeContextProvider>\n      ),\n      [store],\n    );\n\n    const activeDescendant = useStoreState(store, (state) => {\n      if (!store) return;\n      if (!composite) return;\n      if (!state.virtualFocus) return;\n      return getEnabledItem(store, state.activeId)?.id;\n    });\n\n    props = {\n      \"aria-activedescendant\": activeDescendant,\n      ...props,\n      ref: useMergeRefs(ref, setBaseElement, props.ref),\n      onKeyDownCapture,\n      onKeyUpCapture,\n      onFocusCapture,\n      onFocus,\n      onBlurCapture,\n      onKeyDown,\n    };\n\n    const focusable = useStoreState(\n      store,\n      (state) => composite && (state.virtualFocus || state.activeId === null),\n    );\n\n    props = useFocusable({ focusable, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a composite widget.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const composite = useCompositeStore();\n * <Composite store={composite}>\n *   <CompositeItem>Item 1</CompositeItem>\n *   <CompositeItem>Item 2</CompositeItem>\n * </Composite>\n * ```\n */\nexport const Composite = forwardRef(function Composite(props: CompositeProps) {\n  const htmlProps = useComposite(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeOptions<\n  T extends ElementType = TagName,\n> extends FocusableOptions<T> {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * component's context will be used.\n   */\n  store?: CompositeStore;\n  /**\n   * Determines if the component should act as a composite widget. This prop\n   * needs to be set to `false` when merging various composite widgets where\n   * only one should function in that manner.\n   *\n   * If disabled, this component will stop managing focus and keyboard\n   * navigation for its items and itself. Additionally, composite ARIA\n   * attributes won't be applied. These responsibilities should be taken over by\n   * another composite component.\n   *\n   * **Note**: In most cases, this prop doesn't need to be set manually. For\n   * example, when composing [Menu with\n   * Combobox](https://ariakit.com/examples/menu-combobox) or [Select with\n   * Combobox](https://ariakit.com/examples/select-combobox), this prop will be\n   * set to `false` automatically on the\n   * [`Menu`](https://ariakit.com/reference/menu) and\n   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components\n   * so the [`Combobox`](https://ariakit.com/reference/combobox) component can\n   * take over the composite widget responsibilities.\n   *\n   * Live examples:\n   * - [Menu with Combobox](https://ariakit.com/examples/menu-combobox)\n   * - [Select with Combobox](https://ariakit.com/examples/select-combobox)\n   * @default true\n   */\n  composite?: boolean;\n  /**\n   * Determines whether the composite widget should move focus to an item when\n   * arrow keys are pressed, given that the composite element is focused and\n   * there's no active 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   * instead. If you want to control the behavior _only when arrow keys are\n   * pressed_, where\n   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) may\n   * not be applicable, this prop must be set on composite items as well.\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<ReactKeyboardEvent<HTMLElement>>;\n  /**\n   * Determines if the active composite item should receive focus (or virtual\n   * focus if the\n   * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)\n   * option is enabled) when moving through items. This typically happens when\n   * navigating through items with arrow keys, but it can also happen when\n   * calling the\n   * [`move`](https://ariakit.com/reference/use-composite-store#move) method\n   * directly.\n   *\n   * Unlike the\n   * [`composite`](https://ariakit.com/reference/composite#composite-1) prop,\n   * this option doesn't disable the entire composite widget behavior. It only\n   * stops this component from managing focus when navigating through items.\n   *\n   * **Note**: If you want to control the behavior only _when arrow keys are\n   * pressed_, use the\n   * [`moveOnKeyPress`](https://ariakit.com/reference/composite#moveonkeypress)\n   * prop instead.\n   * @default true\n   */\n  focusOnMove?: boolean;\n  /**\n   * @see https://ariakit.com/reference/focusable\n   */\n  focusable?: FocusableOptions<T>[\"focusable\"];\n}\n\nexport type CompositeProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeOptions<T>\n>;\n"],"mappings":"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"}

package/dist/composite/utils.d.ts

@@ -0,0 +1,52 @@
+import { r as CompositeStoreItem, t as CompositeStore } from "../composite-store-DyJc-XRA.js";
+
+//#region src/composite/utils.d.ts
+/**
+ * Moves all the items before the passed `id` to the end of the array. This is
+ * useful when we want to loop through the items in the same row or column as
+ * the first items will be placed after the last items.
+ *
+ * The null item that's inserted when `shouldInsertNullItem` is set to `true`
+ * represents the composite container itself. When the active item is null, the
+ * composite container has focus.
+ */
+declare function flipItems(items: CompositeStoreItem[], activeId: string, shouldInsertNullItem?: boolean): {
+  id: string;
+}[];
+/**
+ * Finds the first enabled item.
+ */
+declare function findFirstEnabledItem(items: CompositeStoreItem[], excludeId?: string): CompositeStoreItem | undefined;
+/**
+ * Finds the first enabled item by its id.
+ */
+declare function getEnabledItem(store: CompositeStore, id?: string | null): CompositeStoreItem | null;
+/**
+ * Creates a two-dimensional array with items grouped by their rowId's.
+ */
+declare function groupItemsByRows(items: CompositeStoreItem[]): CompositeStoreItem[][];
+/**
+ * Selects text field contents even if it's a content editable element.
+ */
+declare function selectTextField(element: HTMLElement, collapseToEnd?: boolean): void;
+declare const FOCUS_SILENTLY: unique symbol;
+type FocusSilentlyElement = HTMLElement & {
+  [FOCUS_SILENTLY]?: boolean;
+};
+/**
+ * Focus an element with a flag. The `silentlyFocused` function needs to be
+ * called later to check if the focus was silenced and to reset this state.
+ */
+declare function focusSilently(element: FocusSilentlyElement): void;
+/**
+ * Checks whether the element has been focused with the `focusSilently` function
+ * and resets the state.
+ */
+declare function silentlyFocused(element: FocusSilentlyElement): boolean | undefined;
+/**
+ * Determines whether the element is a composite item.
+ */
+declare function isItem(store: CompositeStore, element?: Element | null, exclude?: Element): boolean;
+//#endregion
+export { findFirstEnabledItem, flipItems, focusSilently, getEnabledItem, groupItemsByRows, isItem, selectTextField, silentlyFocused };
+//# sourceMappingURL=utils.d.ts.map

package/dist/composite/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":["CompositeStore","CompositeStoreItem","flipItems","items","activeId","shouldInsertNullItem","id","findFirstEnabledItem","excludeId","getEnabledItem","store","groupItemsByRows","selectTextField","HTMLElement","element","collapseToEnd","FOCUS_SILENTLY","FocusSilentlyElement","focusSilently","silentlyFocused","isItem","Element","exclude"],"sources":["../../src/composite/utils.d.ts"],"mappings":";;;;;AAUA;;;;;;;iBAAwBE,SAAAA,CAAUC,KAAAA,EAAOF,kBAAkB,IAAIG,QAAAA,UAAkBC,oBAAAA;EAC7EC,EAAAA;AAAAA;AAAE;AAKN;;AALM,iBAKkBC,oBAAAA,CAAqBJ,KAAAA,EAAOF,kBAAAA,IAAsBO,SAAAA,YAAqBP,kBAAkB;;;;iBAIzFQ,cAAAA,CAAeC,KAAAA,EAAOV,cAAAA,EAAgBM,EAAAA,mBAAqBL,kBAAkB;;;AAJY;iBAQzFU,gBAAAA,CAAiBR,KAAAA,EAAOF,kBAAAA,KAAuBA,kBAAkB;;;;iBAIjEW,eAAAA,CAAgBE,OAAAA,EAASD,WAAW,EAAEE,aAAAA;AAAAA,cAChDC,cAAAA;AAAAA,KACTC,oBAAAA,GAAuBJ,WAAAA;EAAAA,CACvBG,cAAc;AAAA;AAXkF;AAIrG;;;AAJqG,iBAiB7EE,aAAAA,CAAcJ,OAA6B,EAApBG,oBAAoB;;;;;iBAK3CE,eAAAA,CAAgBL,OAA6B,EAApBG,oBAAoB;AAdrE;;;AAAA,iBAkBwBG,MAAAA,CAAOV,KAAAA,EAAOV,cAAAA,EAAgBc,OAAAA,GAAUO,OAAAA,SAAgBC,OAAAA,GAAUD,OAAAA"}

package/dist/composite/utils.js

@@ -0,0 +1,93 @@
+"use client";
+import { getDocument, isTextField } from "@ariakit/utils";
+//#region src/composite/utils.ts
+const NULL_ITEM = { id: null };
+/**
+* Moves all the items before the passed `id` to the end of the array. This is
+* useful when we want to loop through the items in the same row or column as
+* the first items will be placed after the last items.
+*
+* The null item that's inserted when `shouldInsertNullItem` is set to `true`
+* represents the composite container itself. When the active item is null, the
+* composite container has focus.
+*/
+function flipItems(items, activeId, shouldInsertNullItem = false) {
+	const index = items.findIndex((item) => item.id === activeId);
+	return [
+		...items.slice(index + 1),
+		...shouldInsertNullItem ? [NULL_ITEM] : [],
+		...items.slice(0, index)
+	];
+}
+/**
+* Finds the first enabled item.
+*/
+function findFirstEnabledItem(items, excludeId) {
+	return items.find((item) => {
+		if (excludeId) return !item.disabled && item.id !== excludeId;
+		return !item.disabled;
+	});
+}
+/**
+* Finds the first enabled item by its id.
+*/
+function getEnabledItem(store, id) {
+	if (!id) return null;
+	return store.item(id) || null;
+}
+/**
+* Creates a two-dimensional array with items grouped by their rowId's.
+*/
+function groupItemsByRows(items) {
+	const rows = [];
+	for (const item of items) {
+		const row = rows.find((currentRow) => currentRow[0]?.rowId === item.rowId);
+		if (row) row.push(item);
+		else rows.push([item]);
+	}
+	return rows;
+}
+/**
+* Selects text field contents even if it's a content editable element.
+*/
+function selectTextField(element, collapseToEnd = false) {
+	if (isTextField(element)) element.setSelectionRange(collapseToEnd ? element.value.length : 0, element.value.length);
+	else if (element.isContentEditable) {
+		const selection = getDocument(element).getSelection();
+		selection?.selectAllChildren(element);
+		if (collapseToEnd) selection?.collapseToEnd();
+	}
+}
+const FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY");
+/**
+* Focus an element with a flag. The `silentlyFocused` function needs to be
+* called later to check if the focus was silenced and to reset this state.
+*/
+function focusSilently(element) {
+	element[FOCUS_SILENTLY] = true;
+	element.focus({ preventScroll: true });
+}
+/**
+* Checks whether the element has been focused with the `focusSilently` function
+* and resets the state.
+*/
+function silentlyFocused(element) {
+	const isSilentlyFocused = element[FOCUS_SILENTLY];
+	delete element[FOCUS_SILENTLY];
+	return isSilentlyFocused;
+}
+/**
+* Determines whether the element is a composite item.
+*/
+function isItem(store, element, exclude) {
+	if (!element) return false;
+	if (element === exclude) return false;
+	const item = store.item(element.id);
+	if (!item) return false;
+	if (exclude && item.element === exclude) return false;
+	return true;
+}
+//#endregion
+export { findFirstEnabledItem, flipItems, focusSilently, getEnabledItem, groupItemsByRows, isItem, selectTextField, silentlyFocused };
+
+//# sourceMappingURL=utils.js.map

package/dist/composite/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/composite/utils.ts"],"sourcesContent":["import { getDocument, isTextField } from \"@ariakit/utils\";\nimport type { CompositeStore, CompositeStoreItem } from \"./composite-store.ts\";\n\nconst NULL_ITEM = { id: null as unknown as string };\n\n/**\n * Moves all the items before the passed `id` to the end of the array. This is\n * useful when we want to loop through the items in the same row or column as\n * the first items will be placed after the last items.\n *\n * The null item that's inserted when `shouldInsertNullItem` is set to `true`\n * represents the composite container itself. When the active item is null, the\n * composite container has focus.\n */\nexport function flipItems(\n  items: CompositeStoreItem[],\n  activeId: string,\n  shouldInsertNullItem = false,\n) {\n  const index = items.findIndex((item) => item.id === activeId);\n  return [\n    ...items.slice(index + 1),\n    ...(shouldInsertNullItem ? [NULL_ITEM] : []),\n    ...items.slice(0, index),\n  ];\n}\n\n/**\n * Finds the first enabled item.\n */\nexport function findFirstEnabledItem(\n  items: CompositeStoreItem[],\n  excludeId?: string,\n) {\n  return items.find((item) => {\n    if (excludeId) {\n      return !item.disabled && item.id !== excludeId;\n    }\n    return !item.disabled;\n  });\n}\n\n/**\n * Finds the first enabled item by its id.\n */\nexport function getEnabledItem(store: CompositeStore, id?: string | null) {\n  if (!id) return null;\n  return store.item(id) || null;\n}\n\n/**\n * Creates a two-dimensional array with items grouped by their rowId's.\n */\nexport function groupItemsByRows(items: CompositeStoreItem[]) {\n  const rows: CompositeStoreItem[][] = [];\n  for (const item of items) {\n    const row = rows.find((currentRow) => currentRow[0]?.rowId === item.rowId);\n    if (row) {\n      row.push(item);\n    } else {\n      rows.push([item]);\n    }\n  }\n  return rows;\n}\n\n/**\n * Selects text field contents even if it's a content editable element.\n */\nexport function selectTextField(element: HTMLElement, collapseToEnd = false) {\n  if (isTextField(element)) {\n    element.setSelectionRange(\n      collapseToEnd ? element.value.length : 0,\n      element.value.length,\n    );\n  } else if (element.isContentEditable) {\n    const selection = getDocument(element).getSelection();\n    selection?.selectAllChildren(element);\n    if (collapseToEnd) {\n      selection?.collapseToEnd();\n    }\n  }\n}\n\nconst FOCUS_SILENTLY = Symbol(\"FOCUS_SILENTLY\");\ntype FocusSilentlyElement = HTMLElement & { [FOCUS_SILENTLY]?: boolean };\n\n/**\n * Focus an element with a flag. The `silentlyFocused` function needs to be\n * called later to check if the focus was silenced and to reset this state.\n */\nexport function focusSilently(element: FocusSilentlyElement) {\n  element[FOCUS_SILENTLY] = true;\n  element.focus({ preventScroll: true });\n}\n\n/**\n * Checks whether the element has been focused with the `focusSilently` function\n * and resets the state.\n */\nexport function silentlyFocused(element: FocusSilentlyElement) {\n  const isSilentlyFocused = element[FOCUS_SILENTLY];\n  delete element[FOCUS_SILENTLY];\n  return isSilentlyFocused;\n}\n\n/**\n * Determines whether the element is a composite item.\n */\nexport function isItem(\n  store: CompositeStore,\n  element?: Element | null,\n  exclude?: Element,\n) {\n  if (!element) return false;\n  if (element === exclude) return false;\n  const item = store.item(element.id);\n  if (!item) return false;\n  if (exclude && item.element === exclude) return false;\n  return true;\n}\n"],"mappings":";;;;;;;;;;;;;SAmBQ,UAAQ,OAAM,UAAW,uBAAqB,OAAQ;CAC5D,MAAA,QAAO,MAAA,WAAA,SAAA,KAAA,OAAA,QAAA;QACF;EACH,GAAI,MAAA,MAAA,QAAA,CAAA;EACJ,GAAG,uBAAoB,CAAA,SAAA,IAAA,CAAA;EACzB,GAAA,MAAA,MAAA,GAAA,KAAA;CACF;;;;;SASS,qBAAqB,OAAA,WAAA;QACtB,MAAA,MACF,SAAQ;EAEV,IAAA,WAAa,OAAA,CAAA,KAAA,YAAA,KAAA,OAAA;EACd,OAAA,CAAA,KAAA;CACH,CAAA;;;;;SAMO,eAAW,OAAA,IAAA;CAChB,IAAA,CAAA,IAAO,OAAM;CACf,OAAA,MAAA,KAAA,EAAA,KAAA;;;;;SAMQ,iBAAgC,OAAA;CACtC,MAAK,OAAM,CAAA;MACT,MAAM,QAAW,OAAM;EACvB,MAAI,MACF,KAAI,MAAS,eAAA,WAAA,IAAA,UAAA,KAAA,KAAA;WAEb,IAAK,KAAM,IAAK;OAEpB,KAAA,KAAA,CAAA,IAAA,CAAA;CACA;CACF,OAAA;;;;;SAMM,gBAAmB,SACrB,gBAAQ,OACN;iBAGO,OAAQ,GAAA,QAAA,kBAAmB,gBAAA,QAAA,MAAA,SAAA,GAAA,QAAA,MAAA,MAAA;MACpC,IAAM,QAAA,mBAAwB;EAC9B,MAAA,YAAW,YAAkB,OAAO,EAAA,aAAA;EACpC,WAAI,kBACF,OAAW;EAEf,IAAA,eAAA,WAAA,cAAA;CACF;AAEA;;;;;;SAQU,cAAA,SAAkB;CAC1B,QAAQ,kBAAQ;CAClB,QAAA,MAAA,EAAA,eAAA,KAAA,CAAA;;;;;;SAOQ,gBAAA,SAAoB;CAC1B,MAAA,oBAAe,QAAA;CACf,OAAO,QAAA;CACT,OAAA;;;;;SAUO,OAAS,OAAO,SAAA,SAAA;CACrB,IAAI,CAAA,SAAA,OAAY;CAChB,IAAA,YAAa,SAAW,OAAQ;CAChC,MAAK,OAAM,MAAO,KAAA,QAAA,EAAA;CAClB,IAAI,CAAA,MAAA,OAAW;CACf,IAAA,WAAO,KAAA,YAAA,SAAA,OAAA;CACT,OAAA"}

package/dist/composite-DLvyFHMq.d.ts

@@ -0,0 +1,124 @@
+import { n as FocusableOptions } from "./focusable-B00tOxtB.js";
+import { t as CompositeStore } from "./composite-store-DyJc-XRA.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, KeyboardEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/composite/composite.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Composite` component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useComposite({ store });
+ * <Role {...props}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ * </Role>
+ * ```
+ */
+declare const useComposite: import("@ariakit/react-utils").Hook<"div", CompositeOptions<"div">>;
+/**
+ * Renders a composite widget.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ * </Composite>
+ * ```
+ */
+declare const Composite: (props: CompositeProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeOptions<T extends ElementType = TagName> extends FocusableOptions<T> {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)
+   * component's context will be used.
+   */
+  store?: CompositeStore;
+  /**
+   * Determines if the component should act as a composite widget. This prop
+   * needs to be set to `false` when merging various composite widgets where
+   * only one should function in that manner.
+   *
+   * If disabled, this component will stop managing focus and keyboard
+   * navigation for its items and itself. Additionally, composite ARIA
+   * attributes won't be applied. These responsibilities should be taken over by
+   * another composite component.
+   *
+   * **Note**: In most cases, this prop doesn't need to be set manually. For
+   * example, when composing [Menu with
+   * Combobox](https://ariakit.com/examples/menu-combobox) or [Select with
+   * Combobox](https://ariakit.com/examples/select-combobox), this prop will be
+   * set to `false` automatically on the
+   * [`Menu`](https://ariakit.com/reference/menu) and
+   * [`SelectPopover`](https://ariakit.com/reference/select-popover) components
+   * so the [`Combobox`](https://ariakit.com/reference/combobox) component can
+   * take over the composite widget responsibilities.
+   *
+   * Live examples:
+   * - [Menu with Combobox](https://ariakit.com/examples/menu-combobox)
+   * - [Select with Combobox](https://ariakit.com/examples/select-combobox)
+   * @default true
+   */
+  composite?: boolean;
+  /**
+   * Determines whether the composite widget should move focus to an item when
+   * arrow keys are pressed, given that the composite element is focused and
+   * there's no active item.
+   *
+   * **Note**: To entirely disable focus moving within a composite widget, you
+   * can use the
+   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) prop
+   * instead. If you want to control the behavior _only when arrow keys are
+   * pressed_, where
+   * [`focusOnMove`](https://ariakit.com/reference/composite#focusonmove) may
+   * not be applicable, this prop must be set on composite items as well.
+   * @default true
+   * @example
+   * ```jsx
+   * <Composite moveOnKeyPress={false}>
+   *   <CompositeItem moveOnKeyPress={false} />
+   *   <CompositeItem moveOnKeyPress={false} />
+   * </Composite>
+   * ```
+   */
+  moveOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Determines if the active composite item should receive focus (or virtual
+   * focus if the
+   * [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)
+   * option is enabled) when moving through items. This typically happens when
+   * navigating through items with arrow keys, but it can also happen when
+   * calling the
+   * [`move`](https://ariakit.com/reference/use-composite-store#move) method
+   * directly.
+   *
+   * Unlike the
+   * [`composite`](https://ariakit.com/reference/composite#composite-1) prop,
+   * this option doesn't disable the entire composite widget behavior. It only
+   * stops this component from managing focus when navigating through items.
+   *
+   * **Note**: If you want to control the behavior only _when arrow keys are
+   * pressed_, use the
+   * [`moveOnKeyPress`](https://ariakit.com/reference/composite#moveonkeypress)
+   * prop instead.
+   * @default true
+   */
+  focusOnMove?: boolean;
+  /**
+   * @see https://ariakit.com/reference/focusable
+   */
+  focusable?: FocusableOptions<T>["focusable"];
+}
+type CompositeProps<T extends ElementType = TagName> = Props<T, CompositeOptions<T>>;
+//#endregion
+export { useComposite as i, CompositeOptions as n, CompositeProps as r, Composite as t };
+//# sourceMappingURL=composite-DLvyFHMq.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-DLvyFHMq.d.ts","names":["Props","BooleanOrCallback","ElementType","KeyboardEvent","ReactKeyboardEvent","FocusableOptions","CompositeStore","TagName","useComposite","CompositeOptions","Hook","Composite","CompositeProps","props","ReactElement","JSXElementConstructor","T","HTMLElement","store","composite","moveOnKeyPress","focusOnMove","focusable"],"sources":["../src/composite/composite.d.ts"],"mappings":";;;;;;;cAKcO,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAc7B;;;AAhB2D,cAgBtCC,YAAAA,iCAA6CE,IAAAA,QAAYD,gBAAgB;AAAA;AAa9F;;;;;;;;;AAA2I;AAC3I;AAd8F,cAazEE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BP,WAAAA,GAAcK,OAAAA,UAAiBF,gBAAAA,CAAiBW,CAAAA;EAAhDd;;;;;;;EAQxCgB,KAAAA,GAAQZ,cAAAA;EA0EID;;;;;;;;;;;;;;;;;;;;;AAAkB;AAElC;;;EAlDIc,SAAAA;EAkD+CZ;;;;;;;;;;;;;;;AAAsC;;;;;;EA5BrFa,cAAAA,GAAiBnB,iBAAAA,CAAkBG,aAAAA,CAAmBa,WAAAA;;;;;;;;;;;;;;;;;;;;;;EAsBtDI,WAAAA;;;;EAIAC,SAAAA,GAAYjB,gBAAAA,CAAiBW,CAAAA;AAAAA;AAAAA,KAErBJ,cAAAA,WAAyBV,WAAAA,GAAcK,OAAAA,IAAWP,KAAAA,CAAMgB,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}