@ariakit/react-components 0.1.0

package/dist/composite/composite-item.js

@@ -0,0 +1,290 @@
+"use client";
+import { useCommand } from "../command/command.js";
+import { useCollectionItem } from "../collection/collection-item.js";
+import { CompositeItemContext, CompositeRowContext, useCompositeContext } 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";
+import { useCallback, useContext, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreStateObject } from "@ariakit/react-store";
+//#region src/composite/composite-item.tsx
+const TagName = "button";
+function isEditableElement(element) {
+	if (isTextbox(element)) return true;
+	return element.tagName === "INPUT" && !isButton(element);
+}
+function getNextPageOffset(scrollingElement, pageUp = false) {
+	const height = scrollingElement.clientHeight;
+	const { top } = scrollingElement.getBoundingClientRect();
+	const pageSize = Math.max(height * .875, height - 40) * 1.5;
+	const pageOffset = pageUp ? height - pageSize + top : pageSize + top;
+	if (scrollingElement.tagName === "HTML") return pageOffset + scrollingElement.scrollTop;
+	return pageOffset;
+}
+function getItemOffset(itemElement, pageUp = false) {
+	const { top } = itemElement.getBoundingClientRect();
+	if (pageUp) return top + itemElement.clientHeight;
+	return top;
+}
+function findNextPageItemId(element, store, next, pageUp = false) {
+	if (!store) return;
+	if (!next) return;
+	const { renderedItems } = store.getState();
+	const scrollingElement = getScrollingElement(element);
+	if (!scrollingElement) return;
+	const nextPageOffset = getNextPageOffset(scrollingElement, pageUp);
+	let id;
+	let prevDifference;
+	for (let i = 0; i < renderedItems.length; i += 1) {
+		const previousId = id;
+		id = next(i);
+		if (!id) break;
+		if (id === previousId) continue;
+		const itemElement = getEnabledItem(store, id)?.element;
+		if (!itemElement) continue;
+		const difference = getItemOffset(itemElement, pageUp) - nextPageOffset;
+		const absDifference = Math.abs(difference);
+		if (pageUp && difference <= 0 || !pageUp && difference >= 0) {
+			if (prevDifference !== void 0 && prevDifference < absDifference) id = previousId;
+			break;
+		}
+		prevDifference = absDifference;
+	}
+	return id;
+}
+function targetIsAnotherItem(event, store) {
+	if (isSelfTarget(event)) return false;
+	return isItem(store, event.target);
+}
+/**
+* Returns props to create a `CompositeItem` component.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const store = useCompositeStore();
+* const props = useCompositeItem({ store });
+* <Role {...props}>Item 1</Role>
+* ```
+*/
+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();
+	store = store || context;
+	const id = useId(props.id);
+	const ref = useRef(null);
+	const row = useContext(CompositeRowContext);
+	const trulyDisabled = disabledFromProps(props) && !props.accessibleWhenDisabled;
+	const { rowId, baseElement, isActiveItem, ariaSetSize, ariaPosInSet, isTabbable } = useStoreStateObject(store, {
+		rowId(state) {
+			if (rowIdProp) return rowIdProp;
+			if (!state) return;
+			if (!row?.baseElement) return;
+			if (row.baseElement !== state.baseElement) return;
+			return row.id;
+		},
+		baseElement(state) {
+			return state?.baseElement || void 0;
+		},
+		isActiveItem(state) {
+			return !!state && state.activeId === id;
+		},
+		ariaSetSize(state) {
+			if (ariaSetSizeProp != null) return ariaSetSizeProp;
+			if (!state) return;
+			if (!row?.ariaSetSize) return;
+			if (row.baseElement !== state.baseElement) return;
+			return row.ariaSetSize;
+		},
+		ariaPosInSet(state) {
+			if (ariaPosInSetProp != null) return ariaPosInSetProp;
+			if (!state) return;
+			if (!row?.ariaPosInSet) return;
+			if (row.baseElement !== state.baseElement) return;
+			const itemsInRow = state.renderedItems.filter((item) => item.rowId === rowId);
+			return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id);
+		},
+		isTabbable(state) {
+			if (!state?.renderedItems.length) return true;
+			if (state.virtualFocus) return false;
+			if (tabbable) return true;
+			if (state.activeId === null) return false;
+			const item = store?.item(state.activeId);
+			if (item?.disabled) return true;
+			if (!item?.element) return true;
+			return state.activeId === id;
+		}
+	});
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			id: id || item.id,
+			rowId,
+			disabled: trulyDisabled,
+			children: item.element?.textContent
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [
+		id,
+		rowId,
+		trulyDisabled,
+		getItemProp
+	]);
+	const onFocusProp = props.onFocus;
+	const hasFocusedComposite = useRef(false);
+	const onFocus = useEvent((event) => {
+		onFocusProp?.(event);
+		if (event.defaultPrevented) return;
+		if (isPortalEvent(event)) return;
+		if (!id) return;
+		if (!store) return;
+		if (targetIsAnotherItem(event, store)) return;
+		const { virtualFocus, baseElement } = store.getState();
+		store.setActiveId(id);
+		if (isTextbox(event.currentTarget)) selectTextField(event.currentTarget);
+		if (!virtualFocus) return;
+		if (!isSelfTarget(event)) return;
+		if (isEditableElement(event.currentTarget)) return;
+		if (!baseElement?.isConnected) return;
+		if (isSafari() && event.currentTarget.hasAttribute("data-autofocus")) event.currentTarget.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+		hasFocusedComposite.current = true;
+		if (event.relatedTarget === baseElement || isItem(store, event.relatedTarget)) focusSilently(baseElement);
+		else baseElement.focus();
+	});
+	const onBlurCaptureProp = props.onBlurCapture;
+	const onBlurCapture = useEvent((event) => {
+		onBlurCaptureProp?.(event);
+		if (event.defaultPrevented) return;
+		if ((store?.getState())?.virtualFocus && hasFocusedComposite.current) {
+			hasFocusedComposite.current = false;
+			event.preventDefault();
+			event.stopPropagation();
+		}
+	});
+	const onKeyDownProp = props.onKeyDown;
+	const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown);
+	const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!isSelfTarget(event)) return;
+		if (!store) return;
+		const { currentTarget } = event;
+		const state = store.getState();
+		const isGrid = !!store.item(id)?.rowId;
+		const isVertical = state.orientation !== "horizontal";
+		const isHorizontal = state.orientation !== "vertical";
+		const canHomeEnd = () => {
+			if (isGrid) return true;
+			if (isHorizontal) return true;
+			if (!state.baseElement) return true;
+			if (!isTextField(state.baseElement)) return true;
+			return false;
+		};
+		const action = {
+			ArrowUp: (isGrid || isVertical) && store.up,
+			ArrowRight: (isGrid || isHorizontal) && store.next,
+			ArrowDown: (isGrid || isVertical) && store.down,
+			ArrowLeft: (isGrid || isHorizontal) && store.previous,
+			Home: () => {
+				if (!canHomeEnd()) return;
+				if (!isGrid || event.ctrlKey) return store?.first();
+				return store?.previous(-1);
+			},
+			End: () => {
+				if (!canHomeEnd()) return;
+				if (!isGrid || event.ctrlKey) return store?.last();
+				return store?.next(-1);
+			},
+			PageUp: () => {
+				return findNextPageItemId(currentTarget, store, store?.up, true);
+			},
+			PageDown: () => {
+				return findNextPageItemId(currentTarget, store, store?.down);
+			}
+		}[event.key];
+		if (action) {
+			if (isTextbox(currentTarget)) {
+				const selection = getTextboxSelection(currentTarget);
+				const isLeft = isHorizontal && event.key === "ArrowLeft";
+				const isRight = isHorizontal && event.key === "ArrowRight";
+				const isUp = isVertical && event.key === "ArrowUp";
+				const isDown = isVertical && event.key === "ArrowDown";
+				if (isRight || isDown) {
+					const { length: valueLength } = getTextboxValue(currentTarget);
+					if (selection.end !== valueLength) return;
+				} else if ((isLeft || isUp) && selection.start !== 0) return;
+			}
+			const nextId = action();
+			if (preventScrollOnKeyDownProp(event) || nextId !== void 0) {
+				if (!moveOnKeyPressProp(event)) return;
+				event.preventDefault();
+				store.move(nextId);
+			}
+		}
+	});
+	const providerValue = useMemo(() => ({
+		id,
+		baseElement
+	}), [id, baseElement]);
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(CompositeItemContext.Provider, {
+		value: providerValue,
+		children: element
+	}), [providerValue]);
+	props = {
+		"data-active-item": isActiveItem || void 0,
+		...props,
+		id,
+		ref: useMergeRefs(ref, props.ref),
+		tabIndex: isTabbable ? props.tabIndex : -1,
+		onFocus,
+		onBlurCapture,
+		onKeyDown
+	};
+	props = useCommand(props);
+	props = useCollectionItem({
+		store,
+		...props,
+		getItem,
+		shouldRegisterItem: id ? props.shouldRegisterItem : false
+	});
+	return removeUndefinedValues({
+		...props,
+		"aria-setsize": ariaSetSize,
+		"aria-posinset": ariaPosInSet
+	});
+});
+/**
+* Renders a focusable item as part of a composite widget. The `tabindex`
+* attribute is automatically managed by this component based on the
+* [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)
+* option.
+*
+* When this component receives DOM focus or is virtually focused (when the
+* [`virtualFocus`](https://ariakit.com/reference/composite-provider#virtualfocus)
+* option is set to `true`), the element will automatically receive the
+* [`data-active-item`](https://ariakit.com/guide/styling#data-active-item)
+* attribute. This can be used to style the focused item, no matter the focus
+* approach employed.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx {3-5}
+* <CompositeProvider>
+*   <Composite>
+*     <CompositeItem>Item 1</CompositeItem>
+*     <CompositeItem>Item 2</CompositeItem>
+*     <CompositeItem>Item 3</CompositeItem>
+*   </Composite>
+* </CompositeProvider>
+* ```
+*/
+const CompositeItem = memo(forwardRef(function CompositeItem(props) {
+	return createElement(TagName, useCompositeItem(props));
+}));
+//#endregion
+export { CompositeItem, useCompositeItem };
+
+//# sourceMappingURL=composite-item.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,53 @@
+import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { PopoverDisclosureOptions } from "../popover/popover-disclosure.js";
+import { CompositeOverflowStore } from "./composite-overflow-store.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/composite/composite-overflow-disclosure.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeOverflowDisclosure` component. This hook
+ * should be used in a component that's wrapped with a composite component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * // This component should be wrapped with Composite
+ * const props = useCompositeOverflowDisclosure();
+ * <Role {...props}>+2 items</Role>
+ * ```
+ */
+declare const useCompositeOverflowDisclosure: import("@ariakit/react-utils").Hook<"button", CompositeOverflowDisclosureOptions<"button">>;
+/**
+ * Renders a disclosure button for the `CompositeOverflow` component. This
+ * component should be wrapped with a composite component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * const overflow = useCompositeOverflowStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ *   <CompositeOverflowDisclosure store={overflow}>
+ *     +2 items
+ *   </CompositeOverflowDisclosure>
+ *   <CompositeOverflow store={overflow}>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *     <CompositeItem>Item 4</CompositeItem>
+ *   </CompositeOverflow>
+ * </Composite>
+ * ```
+ */
+declare const CompositeOverflowDisclosure: (props: CompositeOverflowDisclosureProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeOverflowDisclosureOptions<T extends ElementType = TagName> extends Omit<CompositeItemOptions<T>, "store">, PopoverDisclosureOptions<T> {
+  /**
+   * Object returned by the `useCompositeOverflowStore` hook.
+   */
+  store: CompositeOverflowStore;
+}
+type CompositeOverflowDisclosureProps<T extends ElementType = TagName> = Props<T, CompositeOverflowDisclosureOptions<T>>;
+//#endregion
+export { CompositeOverflowDisclosure, CompositeOverflowDisclosureOptions, CompositeOverflowDisclosureProps, useCompositeOverflowDisclosure };
+//# sourceMappingURL=composite-overflow-disclosure.d.ts.map

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

@@ -0,0 +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"}

package/dist/composite/composite-overflow-disclosure.js

@@ -0,0 +1,84 @@
+"use client";
+import { useCompositeItem } from "./composite-item.js";
+import { usePopoverDisclosure } from "../popover/popover-disclosure.js";
+import { createElement, createHook, forwardRef, useEvent, useMergeRefs } from "@ariakit/react-utils";
+import { useEffect, useRef, useState } from "react";
+import { sync } from "@ariakit/store";
+//#region src/composite/composite-overflow-disclosure.ts
+const TagName = "button";
+/**
+* Returns props to create a `CompositeOverflowDisclosure` component. This hook
+* should be used in a component that's wrapped with a composite component.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* // This component should be wrapped with Composite
+* const props = useCompositeOverflowDisclosure();
+* <Role {...props}>+2 items</Role>
+* ```
+*/
+const useCompositeOverflowDisclosure = createHook(function useCompositeOverflowDisclosure({ store, ...props }) {
+	const ref = useRef(null);
+	const [shouldRegisterItem, setShouldRegisterItem] = useState(false);
+	useEffect(() => {
+		return sync(store, ["disclosureElement"], () => {
+			store.setDisclosureElement(ref.current);
+		});
+	}, [store]);
+	const onFocusProp = props.onFocus;
+	const onFocus = useEvent((event) => {
+		onFocusProp?.(event);
+		if (event.defaultPrevented) return;
+		setShouldRegisterItem(true);
+	});
+	const onBlurProp = props.onBlur;
+	const onBlur = useEvent((event) => {
+		onBlurProp?.(event);
+		if (event.defaultPrevented) return;
+		setShouldRegisterItem(false);
+	});
+	props = {
+		"aria-hidden": !shouldRegisterItem,
+		...props,
+		ref: useMergeRefs(props.ref, ref),
+		onFocus,
+		onBlur
+	};
+	props = useCompositeItem({
+		...props,
+		shouldRegisterItem
+	});
+	props = usePopoverDisclosure({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a disclosure button for the `CompositeOverflow` component. This
+* component should be wrapped with a composite component.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const composite = useCompositeStore();
+* const overflow = useCompositeOverflowStore();
+* <Composite store={composite}>
+*   <CompositeItem>Item 1</CompositeItem>
+*   <CompositeItem>Item 2</CompositeItem>
+*   <CompositeOverflowDisclosure store={overflow}>
+*     +2 items
+*   </CompositeOverflowDisclosure>
+*   <CompositeOverflow store={overflow}>
+*     <CompositeItem>Item 3</CompositeItem>
+*     <CompositeItem>Item 4</CompositeItem>
+*   </CompositeOverflow>
+* </Composite>
+* ```
+*/
+const CompositeOverflowDisclosure = forwardRef(function CompositeOverflowDisclosure(props) {
+	return createElement(TagName, useCompositeOverflowDisclosure(props));
+});
+//#endregion
+export { CompositeOverflowDisclosure, useCompositeOverflowDisclosure };
+
+//# sourceMappingURL=composite-overflow-disclosure.js.map

package/dist/composite/composite-overflow-disclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-overflow-disclosure.js","names":[],"sources":["../../src/composite/composite-overflow-disclosure.ts"],"sourcesContent":["import {\n  useEvent,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { sync } from \"@ariakit/store\";\nimport type { ElementType, FocusEvent } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { PopoverDisclosureOptions } from \"../popover/popover-disclosure.tsx\";\nimport { usePopoverDisclosure } from \"../popover/popover-disclosure.tsx\";\nimport type { CompositeItemOptions } from \"./composite-item.tsx\";\nimport { useCompositeItem } from \"./composite-item.tsx\";\nimport type { CompositeOverflowStore } from \"./composite-overflow-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `CompositeOverflowDisclosure` component. This hook\n * should be used in a component that's wrapped with a composite component.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * // This component should be wrapped with Composite\n * const props = useCompositeOverflowDisclosure();\n * <Role {...props}>+2 items</Role>\n * ```\n */\nexport const useCompositeOverflowDisclosure = createHook<\n  TagName,\n  CompositeOverflowDisclosureOptions\n>(function useCompositeOverflowDisclosure({ store, ...props }) {\n  const ref = useRef<HTMLType>(null);\n  const [shouldRegisterItem, setShouldRegisterItem] = useState(false);\n\n  useEffect(() => {\n    return sync(store, [\"disclosureElement\"], () => {\n      store.setDisclosureElement(ref.current);\n    });\n  }, [store]);\n\n  const onFocusProp = props.onFocus;\n\n  const onFocus = useEvent((event: FocusEvent<HTMLType>) => {\n    onFocusProp?.(event);\n    if (event.defaultPrevented) return;\n    setShouldRegisterItem(true);\n  });\n\n  const onBlurProp = props.onBlur;\n\n  const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n    onBlurProp?.(event);\n    if (event.defaultPrevented) return;\n    setShouldRegisterItem(false);\n  });\n\n  props = {\n    \"aria-hidden\": !shouldRegisterItem,\n    ...props,\n    ref: useMergeRefs(props.ref, ref),\n    onFocus,\n    onBlur,\n  };\n\n  props = useCompositeItem({ ...props, shouldRegisterItem });\n  props = usePopoverDisclosure({ store, ...props });\n\n  return props;\n});\n\n/**\n * Renders a disclosure button for the `CompositeOverflow` component. This\n * component should be wrapped with a composite component.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const composite = useCompositeStore();\n * const overflow = useCompositeOverflowStore();\n * <Composite store={composite}>\n *   <CompositeItem>Item 1</CompositeItem>\n *   <CompositeItem>Item 2</CompositeItem>\n *   <CompositeOverflowDisclosure store={overflow}>\n *     +2 items\n *   </CompositeOverflowDisclosure>\n *   <CompositeOverflow store={overflow}>\n *     <CompositeItem>Item 3</CompositeItem>\n *     <CompositeItem>Item 4</CompositeItem>\n *   </CompositeOverflow>\n * </Composite>\n * ```\n */\nexport const CompositeOverflowDisclosure = forwardRef(\n  function CompositeOverflowDisclosure(\n    props: CompositeOverflowDisclosureProps,\n  ) {\n    const htmlProps = useCompositeOverflowDisclosure(props);\n    return createElement(TagName, htmlProps);\n  },\n);\n\nexport interface CompositeOverflowDisclosureOptions<\n  T extends ElementType = TagName,\n>\n  extends Omit<CompositeItemOptions<T>, \"store\">, PopoverDisclosureOptions<T> {\n  /**\n   * Object returned by the `useCompositeOverflowStore` hook.\n   */\n  store: CompositeOverflowStore;\n}\n\nexport type CompositeOverflowDisclosureProps<T extends ElementType = TagName> =\n  Props<T, CompositeOverflowDisclosureOptions<T>>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;MAoCE,iCAAiC,WAAA,SAAA,+BAAA,EAAA,OAAA,GAAA,SAAA;CACjC,MAAM,MAAC,OAAA,IAAA;CAEP,MAAA,CAAA,oBAAgB,yBAAA,SAAA,KAAA;iBACF;SACJ,KAAA,OAAA,CAAA,mBAAgC,SAAA;GACvC,MAAA,qBAAA,IAAA,OAAA;EACH,CAAA;CAEA,GAAA,CAAA,KAAM,CAAA;CAEN,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAA,kBAA0B;EAC3B,sBAAA,IAAA;CAED,CAAA;CAEA,MAAM,aAAS,MAAU;OACvB,SAAa,UAAK,UAAA;EAClB,aAAU,KAAA;EACV,IAAA,MAAA,kBAA2B;EAC5B,sBAAA,KAAA;CAED,CAAA;SACE;EACA,eAAG,CAAA;EACH,GAAA;EACA,KAAA,aAAA,MAAA,KAAA,GAAA;EACA;EACF;CAEA;SAA8B,iBAAA;EAAO,GAAA;EAAoB;CACzD,CAAA;SAA+B,qBAAA;EAAO;EAAU,GAAA;CAEhD,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;;MA4BG,8BADkB,WAAA,SAAA,4BACqB,OAAA;CAE3C,OAAA,cAAA,SAAA,+BAAA,KAAA,CAAA"}

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

@@ -0,0 +1,38 @@
+import { t as DisclosureStore } from "../disclosure-store-BsaBaRKv.js";
+import { a as PopoverStoreState, n as PopoverStoreFunctions, r as PopoverStoreOptions } from "../popover-store-Bc-l5VVO.js";
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/composite/composite-overflow-store";
+
+//#region src/composite/composite-overflow-store.d.ts
+declare function useCompositeOverflowStoreProps<T extends Core.CompositeOverflowStore>(store: T, update: () => void, props: CompositeOverflowStoreProps): T & {
+  disclosure: DisclosureStore | null | undefined;
+};
+/**
+ * Creates a composite overflow store.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * const overflow = useCompositeOverflowStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ *   <CompositeOverflowDisclosure store={overflow}>
+ *     +2 items
+ *   </CompositeOverflowDisclosure>
+ *   <CompositeOverflow store={overflow}>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *     <CompositeItem>Item 4</CompositeItem>
+ *   </CompositeOverflow>
+ * </Composite>
+ * ```
+ */
+declare function useCompositeOverflowStore(props?: CompositeOverflowStoreProps): CompositeOverflowStore;
+interface CompositeOverflowStoreState extends Core.CompositeOverflowStoreState, PopoverStoreState {}
+interface CompositeOverflowStoreFunctions extends Omit<Core.CompositeOverflowStoreFunctions, "disclosure">, PopoverStoreFunctions {}
+interface CompositeOverflowStoreOptions extends Omit<Core.CompositeOverflowStoreOptions, "disclosure">, PopoverStoreOptions {}
+type CompositeOverflowStoreProps = CompositeOverflowStoreOptions & Omit<Core.CompositeOverflowStoreProps, "disclosure">;
+type CompositeOverflowStore = CompositeOverflowStoreFunctions & Omit<Store<Core.CompositeOverflowStore>, "disclosure">;
+//#endregion
+export { CompositeOverflowStore, CompositeOverflowStoreFunctions, CompositeOverflowStoreOptions, CompositeOverflowStoreProps, CompositeOverflowStoreState, useCompositeOverflowStore, useCompositeOverflowStoreProps };
+//# sourceMappingURL=composite-overflow-store.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-overflow-store.d.ts","names":["Core","Store","PopoverStoreFunctions","PopoverStoreOptions","PopoverStoreState","useCompositeOverflowStoreProps","T","CompositeOverflowStore","CompositeOverflowStoreProps","_$___disclosure_disclosure_store_ts0","DisclosureStore","store","update","props","disclosure","useCompositeOverflowStore","CompositeOverflowStoreState","CompositeOverflowStoreFunctions","Omit","CompositeOverflowStoreOptions"],"sources":["../../src/composite/composite-overflow-store.d.ts"],"mappings":";;;;;;iBAGwBK,8BAAAA,WAAyCL,IAAAA,CAAKO,sBAAAA,CAAAA,CAAwBI,KAAAA,EAAOL,CAAAA,EAAGM,MAAAA,cAAoBC,KAAAA,EAAOL,2BAAAA,GAA8BF,CAAAA;EAC7JQ,UAAAA,EAD8JL,eAAAA;AAAAA;AAAlK;;;;;;;;;;;;;;;;;;;;AAAA,iBAuBwBM,yBAAAA,CAA0BF,KAAAA,GAAQL,2BAAAA,GAA8BD,sBAAsB;AAAA,UAC7FS,2BAAAA,SAAoChB,IAAAA,CAAKgB,2BAAAA,EAA6BZ,iBAAiB;AAAA,UAEvFa,+BAAAA,SAAwCC,IAAAA,CAAKlB,IAAAA,CAAKiB,+BAAAA,iBAAgDf,qBAAAA;AAAAA,UAElGiB,6BAAAA,SAAsCD,IAAAA,CAAKlB,IAAAA,CAAKmB,6BAAAA,iBAA8ChB,mBAAAA;AAAAA,KAEnGK,2BAAAA,GAA8BW,6BAAAA,GAAgCD,IAAAA,CAAKlB,IAAAA,CAAKQ,2BAAAA;AAAAA,KACxED,sBAAAA,GAAyBU,+BAAAA,GAAkCC,IAAAA,CAAKjB,KAAAA,CAAMD,IAAAA,CAAKO,sBAAAA"}

package/dist/composite/composite-overflow-store.js

@@ -0,0 +1,36 @@
+"use client";
+import { usePopoverStoreProps } from "../popover/popover-store.js";
+import { useStore } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/composite/composite-overflow-store";
+//#region src/composite/composite-overflow-store.ts
+function useCompositeOverflowStoreProps(store, update, props) {
+	return usePopoverStoreProps(store, update, props);
+}
+/**
+* Creates a composite overflow store.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const composite = useCompositeStore();
+* const overflow = useCompositeOverflowStore();
+* <Composite store={composite}>
+*   <CompositeItem>Item 1</CompositeItem>
+*   <CompositeItem>Item 2</CompositeItem>
+*   <CompositeOverflowDisclosure store={overflow}>
+*     +2 items
+*   </CompositeOverflowDisclosure>
+*   <CompositeOverflow store={overflow}>
+*     <CompositeItem>Item 3</CompositeItem>
+*     <CompositeItem>Item 4</CompositeItem>
+*   </CompositeOverflow>
+* </Composite>
+* ```
+*/
+function useCompositeOverflowStore(props = {}) {
+	const [store, update] = useStore(Core.createCompositeOverflowStore, props);
+	return useCompositeOverflowStoreProps(store, update, props);
+}
+//#endregion
+export { useCompositeOverflowStore, useCompositeOverflowStoreProps };
+
+//# sourceMappingURL=composite-overflow-store.js.map

package/dist/composite/composite-overflow-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-overflow-store.js","names":[],"sources":["../../src/composite/composite-overflow-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/composite/composite-overflow-store\";\nimport { useStore } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport type {\n  PopoverStoreFunctions,\n  PopoverStoreOptions,\n  PopoverStoreState,\n} from \"../popover/popover-store.ts\";\nimport { usePopoverStoreProps } from \"../popover/popover-store.ts\";\n\nexport function useCompositeOverflowStoreProps<\n  T extends Core.CompositeOverflowStore,\n>(store: T, update: () => void, props: CompositeOverflowStoreProps) {\n  return usePopoverStoreProps(store, update, props);\n}\n\n/**\n * Creates a composite overflow store.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const composite = useCompositeStore();\n * const overflow = useCompositeOverflowStore();\n * <Composite store={composite}>\n *   <CompositeItem>Item 1</CompositeItem>\n *   <CompositeItem>Item 2</CompositeItem>\n *   <CompositeOverflowDisclosure store={overflow}>\n *     +2 items\n *   </CompositeOverflowDisclosure>\n *   <CompositeOverflow store={overflow}>\n *     <CompositeItem>Item 3</CompositeItem>\n *     <CompositeItem>Item 4</CompositeItem>\n *   </CompositeOverflow>\n * </Composite>\n * ```\n */\nexport function useCompositeOverflowStore(\n  props: CompositeOverflowStoreProps = {},\n): CompositeOverflowStore {\n  const [store, update] = useStore(Core.createCompositeOverflowStore, props);\n  return useCompositeOverflowStoreProps(store, update, props);\n}\n\nexport interface CompositeOverflowStoreState\n  extends Core.CompositeOverflowStoreState, PopoverStoreState {}\n\nexport interface CompositeOverflowStoreFunctions\n  extends\n    Omit<Core.CompositeOverflowStoreFunctions, \"disclosure\">,\n    PopoverStoreFunctions {}\n\nexport interface CompositeOverflowStoreOptions\n  extends\n    Omit<Core.CompositeOverflowStoreOptions, \"disclosure\">,\n    PopoverStoreOptions {}\n\nexport type CompositeOverflowStoreProps = CompositeOverflowStoreOptions &\n  Omit<Core.CompositeOverflowStoreProps, \"disclosure\">;\n\nexport type CompositeOverflowStore = CompositeOverflowStoreFunctions &\n  Omit<Store<Core.CompositeOverflowStore>, \"disclosure\">;\n"],"mappings":";;;;;SAaS,+BAA4B,OAAQ,QAAK,OAAA;CAClD,OAAA,qBAAA,OAAA,QAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;SAyBS,0BAA0B,QAAK,CAAA,GAAA;CACtC,MAAA,CAAO,OAAA,UAAA,SAAA,KAA+B,8BAAoB,KAAA;CAC5D,OAAA,+BAAA,OAAA,QAAA,KAAA"}

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

@@ -0,0 +1,54 @@
+import { n as PopoverOptions } from "../popover-CCqiRKqg.js";
+import { CompositeOverflowStore } from "./composite-overflow-store.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/composite/composite-overflow.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeOverflow` component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeOverflowStore();
+ * const props = useCompositeOverflow({ store });
+ * <Role {...props}>
+ *   <CompositeItem>Item 3</CompositeItem>
+ *   <CompositeItem>Item 4</CompositeItem>
+ * </Role>
+ * ```
+ */
+declare const useCompositeOverflow: import("@ariakit/react-utils").Hook<"div", CompositeOverflowOptions<"div">>;
+/**
+ * Renders a popover that will contain the overflow items in a composite
+ * collection.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * const overflow = useCompositeOverflowStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ *   <CompositeOverflowDisclosure store={overflow}>
+ *     +2 items
+ *   </CompositeOverflowDisclosure>
+ *   <CompositeOverflow store={overflow}>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *     <CompositeItem>Item 4</CompositeItem>
+ *   </CompositeOverflow>
+ * </Composite>
+ * ```
+ */
+declare const CompositeOverflow: (props: CompositeOverflowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeOverflowOptions<T extends ElementType = TagName> extends PopoverOptions<T> {
+  /**
+   * Object returned by the `useCompositeOverflowStore` hook.
+   */
+  store: CompositeOverflowStore;
+}
+type CompositeOverflowProps<T extends ElementType = TagName> = Props<T, CompositeOverflowOptions<T>>;
+//#endregion
+export { CompositeOverflow, CompositeOverflowOptions, CompositeOverflowProps, useCompositeOverflow };
+//# sourceMappingURL=composite-overflow.d.ts.map

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

@@ -0,0 +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"}