@ariakit/react-components 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-renderer.js","names":[],"sources":["../../src/composite/composite-renderer.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { useId, createElement, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType, ReactNode } from \"react\";\nimport { useMemo } from \"react\";\nimport type {\n  CollectionRendererBaseItemProps,\n  CollectionRendererItem,\n  CollectionRendererItemObject,\n  CollectionRendererItemProps,\n  CollectionRendererOptions,\n} from \"../collection/collection-renderer.tsx\";\nimport {\n  getCollectionRendererItem,\n  getCollectionRendererItemId,\n  useCollectionRenderer,\n} from \"../collection/collection-renderer.tsx\";\nimport type { CollectionStoreItem } from \"../collection/collection-store.ts\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport type { CompositeStore, CompositeStoreItem } from \"./composite-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\ninterface ItemObject extends CollectionRendererItemObject {\n  disabled?: boolean;\n}\n\ntype Item = ItemObject | CollectionRendererItem;\n\ninterface BaseItemProps extends CollectionRendererBaseItemProps {\n  \"aria-setsize\": number;\n  \"aria-posinset\": number;\n}\n\ntype ItemProps<\n  T extends Item,\n  P extends BaseItemProps = BaseItemProps,\n> = CollectionRendererItemProps<T, P>;\n\nfunction getItemObject(item: Item): ItemObject {\n  if (!item || typeof item !== \"object\") {\n    return { value: item };\n  }\n  return item;\n}\n\nfunction countItems(items?: number | readonly Item[]): number[] {\n  if (!items) return [0];\n  if (typeof items === \"number\") {\n    return Array.from({ length: items }, (_, index) => index + 1);\n  }\n  return items.reduce<number[]>((count, item, index) => {\n    const object = getItemObject(item);\n    if (!object.items) {\n      count[index] = index + 1;\n      return count;\n    }\n    const prevCount = count[index - 1] ?? 0;\n    const itemsCount = countItems(object.items)[object.items.length - 1] ?? 0;\n    count[index] = prevCount + itemsCount;\n    return count;\n  }, []);\n}\n\nfunction findFirst(items: readonly Item[], offset = 1): number {\n  for (\n    let index = offset > 0 ? 0 : items.length - 1;\n    index >= 0 && index < items.length;\n    index += offset\n  ) {\n    const item = items[index];\n    const object = getItemObject(item);\n    if (object.items && findFirst(object.items, offset) !== -1) return index;\n    if (!object.disabled) return index;\n  }\n  return -1;\n}\n\nfunction findLast(items: readonly Item[]) {\n  return findFirst(items, -1);\n}\n\nfunction findById(items: readonly Item[], id: string, baseId: string): number {\n  return items.findIndex((item, index) => {\n    const itemId = getCollectionRendererItemId(item, index, baseId);\n    if (itemId === id) return true;\n    const object = getItemObject(item);\n    if (object.items?.length) return findById(object.items, id, itemId) !== -1;\n    const ids = id.split(\"/\");\n    if (ids.length === 1) return false;\n    return ids.some((id) => itemId === id);\n  });\n}\n\nexport function useCompositeRenderer<T extends Item = any>({\n  store,\n  orientation: orientationProp,\n  persistentIndices: persistentIndicesProp,\n  children: renderItem,\n  \"aria-setsize\": ariaSetSize,\n  \"aria-posinset\": ariaPosInSet = 1,\n  ...props\n}: CompositeRendererProps<T>) {\n  const context = useCompositeContext();\n  store = store || (context as typeof store);\n\n  const orientation = useStoreState(store, (state) =>\n    (orientationProp ?? state?.orientation === \"both\")\n      ? \"vertical\"\n      : state?.orientation,\n  );\n\n  const items = useStoreState(store, (state) => {\n    if (!state) return props.items;\n    if (\"mounted\" in state && !state.mounted) return 0;\n    return props.items ?? (state.items as T[]);\n  });\n\n  const id = useId(props.id);\n\n  const itemsCount = useMemo(() => countItems(items), [items]);\n\n  const setSize = useMemo(\n    () => ariaSetSize ?? itemsCount[itemsCount.length - 1] ?? 0,\n    [ariaSetSize, itemsCount],\n  );\n\n  const firstIndex = useMemo(() => {\n    if (!items) return -1;\n    if (typeof items === \"number\") return 0;\n    if (!items.length) return -1;\n    return findFirst(items);\n  }, [items]);\n\n  const lastIndex = useMemo(() => {\n    if (!items) return -1;\n    if (typeof items === \"number\") return items - 1;\n    if (!items.length) return -1;\n    return findLast(items);\n  }, [items]);\n\n  const activeId = useStoreState(store, \"activeId\");\n\n  const activeIndex = useMemo(() => {\n    if (!id) return -1;\n    if (!items) return -1;\n    if (activeId == null) return -1;\n    if (typeof items === \"number\") return -1;\n    if (!items.length) return -1;\n    return findById(items, activeId, id);\n  }, [id, items, activeId]);\n\n  const persistentIndices = useMemo(() => {\n    const indices = [firstIndex, activeIndex, lastIndex].filter(\n      (index) => index >= 0,\n    );\n    if (persistentIndicesProp) {\n      return [...persistentIndicesProp, ...indices];\n    }\n    return indices;\n  }, [firstIndex, activeIndex, lastIndex, persistentIndicesProp]);\n\n  return useCollectionRenderer({\n    id,\n    store,\n    orientation,\n    persistentIndices,\n    ...props,\n    children: (item) => {\n      const nextItem = Object.assign({}, item, {\n        \"aria-setsize\": setSize,\n        \"aria-posinset\": ariaPosInSet + (itemsCount[item.index - 1] ?? 0),\n      });\n      return renderItem?.(nextItem as ItemProps<T>);\n    },\n  });\n}\n\nexport {\n  getCollectionRendererItem as getCompositeRendererItem,\n  getCollectionRendererItemId as getCompositeRendererItemId,\n};\n\nexport type CompositeRendererItemObject = ItemObject;\nexport type CompositeRendererItem = Item;\nexport type CompositeRendererBaseItemProps = BaseItemProps;\nexport type CompositeRendererItemProps<\n  T extends Item,\n  P extends BaseItemProps = BaseItemProps,\n> = ItemProps<T, P>;\n\nexport const CompositeRenderer = forwardRef(function CompositeRenderer<\n  T extends Item = any,\n>(props: CompositeRendererProps<T>) {\n  const htmlProps = useCompositeRenderer(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeRendererOptions<T extends Item = any> extends Omit<\n  CollectionRendererOptions<T>,\n  \"store\" | \"children\"\n> {\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/components/composite) component's context\n   * will be used.\n   *\n   * The store\n   * [`items`](https://ariakit.com/reference/use-composite-store#items) state\n   * will be used to render the items if the\n   * [`items`](https://ariakit.com/reference/composite-items#items) prop is not\n   * provided.\n   */\n  store?: CompositeStore<\n    T extends CollectionStoreItem ? T : CompositeStoreItem\n  >;\n  /**\n   * The `children` should be a function that receives item props and returns a\n   * React element. The item props should be spread onto the element that\n   * renders the item.\n   */\n  children?: (item: ItemProps<T>) => ReactNode;\n}\n\nexport interface CompositeRendererProps<T extends Item = any> extends Props<\n  TagName,\n  CompositeRendererOptions<T>\n> {}\n"],"mappings":"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"}

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

@@ -0,0 +1,67 @@
+import { t as CompositeStore } from "../composite-store-DyJc-XRA.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/composite/composite-row.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeRow` component. Wrapping `CompositeItem`
+ * elements within rows will create a two-dimensional composite widget, such as
+ * a grid.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeRow({ store });
+ * <Composite store={store}>
+ *   <Role {...props}>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *   </Role>
+ * </Composite>
+ * ```
+ */
+declare const useCompositeRow: import("@ariakit/react-utils").Hook<"div", CompositeRowOptions<"div">>;
+/**
+ * Renders a row element for composite items that allows two-dimensional arrow
+ * key navigation.
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) elements
+ * wrapped within this component will automatically receive a
+ * [`rowId`](https://ariakit.com/reference/composite-item#rowid) prop.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx {3-12}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeRow>
+ *       <CompositeItem>Item 1.1</CompositeItem>
+ *       <CompositeItem>Item 1.2</CompositeItem>
+ *       <CompositeItem>Item 1.3</CompositeItem>
+ *     </CompositeRow>
+ *     <CompositeRow>
+ *       <CompositeItem>Item 2.1</CompositeItem>
+ *       <CompositeItem>Item 2.2</CompositeItem>
+ *       <CompositeItem>Item 2.3</CompositeItem>
+ *     </CompositeRow>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+declare const CompositeRow: (props: CompositeRowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeRowOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [`Composite`](https://ariakit.com/reference/composite) or
+   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)
+   * components' context will be used.
+   */
+  store?: CompositeStore;
+}
+type CompositeRowProps<T extends ElementType = TagName> = Props<T, CompositeRowOptions<T>>;
+//#endregion
+export { CompositeRow, CompositeRowOptions, CompositeRowProps, useCompositeRow };
+//# sourceMappingURL=composite-row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-row.d.ts","names":["Options","Props","ElementType","CompositeStore","TagName","useCompositeRow","CompositeRowOptions","Hook","CompositeRow","CompositeRowProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/composite/composite-row.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAmB7B;;;;AAAoG;AA0BpG;;;AA/C2D,cAqBtCC,eAAAA,iCAAgDE,IAAAA,QAAYD,mBAAmB;;;;;;AA0B6C;AACjJ;;;;;;;;;;;;;;;;AAS0B;AAE1B;;cAZqBE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3GN,mBAAAA,YAA+BJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAWzBI;;;;;;;;EAFlDU,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,iBAAAA,WAA4BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,mBAAAA,CAAoBS,CAAAA"}

package/dist/composite/composite-row.js

@@ -0,0 +1,86 @@
+"use client";
+import { CompositeRowContext, useCompositeContext } from "./composite-context.js";
+import { createElement, createHook, forwardRef, useId, useWrapElement } from "@ariakit/react-utils";
+import { invariant, removeUndefinedValues } from "@ariakit/utils";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/composite/composite-row.tsx
+const TagName = "div";
+/**
+* Returns props to create a `CompositeRow` component. Wrapping `CompositeItem`
+* elements within rows will create a two-dimensional composite widget, such as
+* a grid.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const store = useCompositeStore();
+* const props = useCompositeRow({ store });
+* <Composite store={store}>
+*   <Role {...props}>
+*     <CompositeItem>Item 1</CompositeItem>
+*     <CompositeItem>Item 2</CompositeItem>
+*     <CompositeItem>Item 3</CompositeItem>
+*   </Role>
+* </Composite>
+* ```
+*/
+const useCompositeRow = createHook(function useCompositeRow({ store, "aria-setsize": ariaSetSize, "aria-posinset": ariaPosInSet, ...props }) {
+	const context = useCompositeContext();
+	store = store || context;
+	invariant(store, "CompositeRow must be wrapped in a Composite component.");
+	const id = useId(props.id);
+	const baseElement = useStoreState(store, (state) => state.baseElement || void 0);
+	const providerValue = useMemo(() => ({
+		id,
+		baseElement,
+		ariaSetSize,
+		ariaPosInSet
+	}), [
+		id,
+		baseElement,
+		ariaSetSize,
+		ariaPosInSet
+	]);
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(CompositeRowContext.Provider, {
+		value: providerValue,
+		children: element
+	}), [providerValue]);
+	props = {
+		...props,
+		id
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a row element for composite items that allows two-dimensional arrow
+* key navigation.
+* [`CompositeItem`](https://ariakit.com/reference/composite-item) elements
+* wrapped within this component will automatically receive a
+* [`rowId`](https://ariakit.com/reference/composite-item#rowid) prop.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx {3-12}
+* <CompositeProvider>
+*   <Composite>
+*     <CompositeRow>
+*       <CompositeItem>Item 1.1</CompositeItem>
+*       <CompositeItem>Item 1.2</CompositeItem>
+*       <CompositeItem>Item 1.3</CompositeItem>
+*     </CompositeRow>
+*     <CompositeRow>
+*       <CompositeItem>Item 2.1</CompositeItem>
+*       <CompositeItem>Item 2.2</CompositeItem>
+*       <CompositeItem>Item 2.3</CompositeItem>
+*     </CompositeRow>
+*   </Composite>
+* </CompositeProvider>
+* ```
+*/
+const CompositeRow = forwardRef(function CompositeRow(props) {
+	return createElement(TagName, useCompositeRow(props));
+});
+//#endregion
+export { CompositeRow, useCompositeRow };
+
+//# sourceMappingURL=composite-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-row.js","names":[],"sources":["../../src/composite/composite-row.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useId,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { invariant, removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useMemo } from \"react\";\nimport {\n  CompositeRowContext,\n  useCompositeContext,\n} from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `CompositeRow` component. Wrapping `CompositeItem`\n * elements within rows will create a two-dimensional composite widget, such as\n * a grid.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeRow({ store });\n * <Composite store={store}>\n *   <Role {...props}>\n *     <CompositeItem>Item 1</CompositeItem>\n *     <CompositeItem>Item 2</CompositeItem>\n *     <CompositeItem>Item 3</CompositeItem>\n *   </Role>\n * </Composite>\n * ```\n */\nexport const useCompositeRow = createHook<TagName, CompositeRowOptions>(\n  function useCompositeRow({\n    store,\n    \"aria-setsize\": ariaSetSize,\n    \"aria-posinset\": ariaPosInSet,\n    ...props\n  }) {\n    const context = useCompositeContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"CompositeRow must be wrapped in a Composite component.\",\n    );\n\n    const id = useId(props.id);\n\n    const baseElement = useStoreState(\n      store,\n      (state) => state.baseElement || undefined,\n    );\n\n    const providerValue = useMemo(\n      () => ({ id, baseElement, ariaSetSize, ariaPosInSet }),\n      [id, baseElement, ariaSetSize, ariaPosInSet],\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <CompositeRowContext.Provider value={providerValue}>\n          {element}\n        </CompositeRowContext.Provider>\n      ),\n      [providerValue],\n    );\n\n    props = { ...props, id };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a row element for composite items that allows two-dimensional arrow\n * key navigation.\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) elements\n * wrapped within this component will automatically receive a\n * [`rowId`](https://ariakit.com/reference/composite-item#rowid) prop.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {3-12}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeRow>\n *       <CompositeItem>Item 1.1</CompositeItem>\n *       <CompositeItem>Item 1.2</CompositeItem>\n *       <CompositeItem>Item 1.3</CompositeItem>\n *     </CompositeRow>\n *     <CompositeRow>\n *       <CompositeItem>Item 2.1</CompositeItem>\n *       <CompositeItem>Item 2.2</CompositeItem>\n *       <CompositeItem>Item 2.3</CompositeItem>\n *     </CompositeRow>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeRow = forwardRef(function CompositeRow(\n  props: CompositeRowProps,\n) {\n  const htmlProps = useCompositeRow(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeRowOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n}\n\nexport type CompositeRowProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeRowOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;MA8CI,kBAAgB,WAAA,SAAoB,gBAAA,EAAA,OAAA,gBAAA,aAAA,iBAAA,cAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,wDAAQ;CAEzB,MAAM,KAAA,MAAA,MAAc,EAAA;CAKpB,MAAM,cAAA,cAAgB,QACb,UAAA,MAAA,eAAA,KAAA,CAAA;OAAE,gBAAA,eAAA;EAAI;EAAa;EAAa;EAAa;KACnD;EAAI;EAAa;EAAa;EACjC;CAEA,CAAA;SAGyC,eAAA,QAAA,YAAA,oBAAA,oBAAA,UAAA;;EAEP,UAE/B;CAGH,CAAA,GAAA,CAAA,aAAQ,CAAA;SAAK;EAAO,GAAA;EAAG;CAEvB;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BE,eAAO,WADW,SAAA,aACqB,OAAA;CACxC,OAAA,cAAA,SAAA,gBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,61 @@
+import { t as CompositeStore } from "../composite-store-DyJc-XRA.js";
+import { n as SeparatorOptions } from "../separator--ozQfMcK.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/composite/composite-separator.d.ts
+declare const TagName = "hr";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `CompositeSeparator` component.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeSeparator({ store });
+ * <Composite store={store}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <Role {...props} />
+ *   <CompositeItem>Item 2</CompositeItem>
+ * </Composite>
+ * ```
+ */
+declare const useCompositeSeparator: import("@ariakit/react-utils").Hook<"hr", CompositeSeparatorOptions<"hr">>;
+/**
+ * Renders a divider between
+ * [`CompositeItem`](https://ariakit.com/reference/composite-item) elements.
+ * @see https://ariakit.com/components/composite
+ * @example
+ * ```jsx {4}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeSeparator />
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
+ * ```
+ */
+declare const CompositeSeparator: (props: CompositeSeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CompositeSeparatorOptions<T extends ElementType = TagName> extends SeparatorOptions<T> {
+  /**
+   * Object returned by the
+   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)
+   * hook. If not provided, the closest
+   * [`Composite`](https://ariakit.com/reference/composite) or
+   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)
+   * components' context will be used.
+   */
+  store?: CompositeStore;
+  /**
+   * The orientation of the separator. By default, this is the opposite of the
+   * [`orientation`](https://ariakit.com/reference/composite-provider#orientation)
+   * state of the composite widget. Which means it doesn't need to be explicitly
+   * set in most cases.
+   */
+  orientation?: SeparatorOptions<T>["orientation"];
+}
+type CompositeSeparatorProps<T extends ElementType = TagName> = Props<T, CompositeSeparatorOptions<T>>;
+//#endregion
+export { CompositeSeparator, CompositeSeparatorOptions, CompositeSeparatorProps, useCompositeSeparator };
+//# sourceMappingURL=composite-separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-separator.d.ts","names":["Props","ElementType","SeparatorOptions","CompositeStore","TagName","useCompositeSeparator","CompositeSeparatorOptions","Hook","CompositeSeparator","CompositeSeparatorProps","props","ReactElement","JSXElementConstructor","T","store","orientation"],"sources":["../../src/composite/composite-separator.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAe7B;;;;AAjB2D,cAiBtCC,qBAAAA,iCAAsDE,IAAAA,OAAWD,yBAAyB;AAgB/G;;;;;;;;;AAA6J;AAC7J;;;;;AADA,cAAqBE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvHN,yBAAAA,WAAoCL,WAAAA,GAAcG,OAAAA,UAAiBF,gBAAAA,CAAiBW,CAAAA;EAgBlEA;;;;;;;;EAP/BC,KAAAA,GAAQX,cAAAA;EATyFU;;;;;;EAgBjGE,WAAAA,GAAcb,gBAAAA,CAAiBW,CAAAA;AAAAA;AAAAA,KAEvBJ,uBAAAA,WAAkCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,yBAAAA,CAA0BO,CAAAA"}

package/dist/composite/composite-separator.js

@@ -0,0 +1,55 @@
+"use client";
+import { useCompositeContext } from "./composite-context.js";
+import { useSeparator } from "../separator/separator.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/composite/composite-separator.tsx
+const TagName = "hr";
+/**
+* Returns props to create a `CompositeSeparator` component.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const store = useCompositeStore();
+* const props = useCompositeSeparator({ store });
+* <Composite store={store}>
+*   <CompositeItem>Item 1</CompositeItem>
+*   <Role {...props} />
+*   <CompositeItem>Item 2</CompositeItem>
+* </Composite>
+* ```
+*/
+const useCompositeSeparator = createHook(function useCompositeSeparator({ store, ...props }) {
+	const context = useCompositeContext();
+	store = store || context;
+	invariant(store, "CompositeSeparator must be wrapped in a Composite component.");
+	const orientation = useStoreState(store, (state) => state.orientation === "horizontal" ? "vertical" : "horizontal");
+	props = useSeparator({
+		...props,
+		orientation
+	});
+	return props;
+});
+/**
+* Renders a divider between
+* [`CompositeItem`](https://ariakit.com/reference/composite-item) elements.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx {4}
+* <CompositeProvider>
+*   <Composite>
+*     <CompositeItem>Item 1</CompositeItem>
+*     <CompositeSeparator />
+*     <CompositeItem>Item 2</CompositeItem>
+*   </Composite>
+* </CompositeProvider>
+* ```
+*/
+const CompositeSeparator = forwardRef(function CompositeSeparator(props) {
+	return createElement(TagName, useCompositeSeparator(props));
+});
+//#endregion
+export { CompositeSeparator, useCompositeSeparator };
+
+//# sourceMappingURL=composite-separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-separator.js","names":[],"sources":["../../src/composite/composite-separator.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { SeparatorOptions } from \"../separator/separator.tsx\";\nimport { useSeparator } from \"../separator/separator.tsx\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport type { CompositeStore } from \"./composite-store.ts\";\n\nconst TagName = \"hr\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `CompositeSeparator` component.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeSeparator({ store });\n * <Composite store={store}>\n *   <CompositeItem>Item 1</CompositeItem>\n *   <Role {...props} />\n *   <CompositeItem>Item 2</CompositeItem>\n * </Composite>\n * ```\n */\nexport const useCompositeSeparator = createHook<\n  TagName,\n  CompositeSeparatorOptions\n>(function useCompositeSeparator({ store, ...props }) {\n  const context = useCompositeContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"CompositeSeparator must be wrapped in a Composite component.\",\n  );\n\n  const orientation = useStoreState(store, (state) =>\n    state.orientation === \"horizontal\" ? \"vertical\" : \"horizontal\",\n  );\n\n  props = useSeparator({ ...props, orientation });\n\n  return props;\n});\n\n/**\n * Renders a divider between\n * [`CompositeItem`](https://ariakit.com/reference/composite-item) elements.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx {4}\n * <CompositeProvider>\n *   <Composite>\n *     <CompositeItem>Item 1</CompositeItem>\n *     <CompositeSeparator />\n *     <CompositeItem>Item 2</CompositeItem>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeSeparator = forwardRef(function CompositeSeparator(\n  props: CompositeSeparatorProps,\n) {\n  const htmlProps = useCompositeSeparator(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeSeparatorOptions<\n  T extends ElementType = TagName,\n> extends SeparatorOptions<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   * The orientation of the separator. By default, this is the opposite of the\n   * [`orientation`](https://ariakit.com/reference/composite-provider#orientation)\n   * state of the composite widget. Which means it doesn't need to be explicitly\n   * set in most cases.\n   */\n  orientation?: SeparatorOptions<T>[\"orientation\"];\n}\n\nexport type CompositeSeparatorProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeSeparatorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MA+BE,wBAAgB,WAAoB,SAAA,sBAAA,EAAA,OAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,8DACkB;CAGxB,MAAA,cAAQ,cAAa,QAAA,UAAA,MAAA,gBAAA,eAAA,aAAA,YAAA;SAAK,aAAA;EAAO,GAAA;EAAa;CAE9C,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;MAqBC,qBAAqB,WADH,SAAA,mBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,sBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,2 @@
+import { a as CompositeStoreProps, c as useCompositeStoreOptions, i as CompositeStoreOptions, l as useCompositeStoreProps, n as CompositeStoreFunctions, o as CompositeStoreState, r as CompositeStoreItem, s as useCompositeStore, t as CompositeStore } from "../composite-store-DyJc-XRA.js";
+export { CompositeStore, CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreProps, CompositeStoreState, useCompositeStore, useCompositeStoreOptions, useCompositeStoreProps };

package/dist/composite/composite-store.js

@@ -0,0 +1,33 @@
+"use client";
+import { useCollectionStoreProps } from "../collection/collection-store.js";
+import { useId } from "@ariakit/react-utils";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/composite/composite-store";
+//#region src/composite/composite-store.ts
+function useCompositeStoreOptions(props) {
+	return {
+		id: useId(props.id),
+		...props
+	};
+}
+function useCompositeStoreProps(store, update, props) {
+	store = useCollectionStoreProps(store, update, props);
+	useStoreProps(store, props, "activeId", "setActiveId");
+	useStoreProps(store, props, "includesBaseElement");
+	useStoreProps(store, props, "virtualFocus");
+	useStoreProps(store, props, "orientation");
+	useStoreProps(store, props, "rtl");
+	useStoreProps(store, props, "focusLoop");
+	useStoreProps(store, props, "focusWrap");
+	useStoreProps(store, props, "focusShift");
+	return store;
+}
+function useCompositeStore(props = {}) {
+	props = useCompositeStoreOptions(props);
+	const [store, update] = useStore(Core.createCompositeStore, props);
+	return useCompositeStoreProps(store, update, props);
+}
+//#endregion
+export { useCompositeStore, useCompositeStoreOptions, useCompositeStoreProps };
+
+//# sourceMappingURL=composite-store.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-store.js","names":[],"sources":["../../src/composite/composite-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/composite/composite-store\";\nimport { useStore, useStoreProps } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport { useId } from \"@ariakit/react-utils\";\nimport type { PickRequired } from \"@ariakit/utils\";\nimport type {\n  CollectionStoreFunctions,\n  CollectionStoreOptions,\n  CollectionStoreState,\n} from \"../collection/collection-store.ts\";\nimport { useCollectionStoreProps } from \"../collection/collection-store.ts\";\n\nexport function useCompositeStoreOptions<T extends Core.CompositeStoreOptions>(\n  props: T,\n) {\n  const id = useId(props.id);\n  return { id, ...props };\n}\n\nexport function useCompositeStoreProps<T extends Core.CompositeStore>(\n  store: T,\n  update: () => void,\n  props: CompositeStoreProps,\n) {\n  store = useCollectionStoreProps(store, update, props);\n  useStoreProps(store, props, \"activeId\", \"setActiveId\");\n  useStoreProps(store, props, \"includesBaseElement\");\n  useStoreProps(store, props, \"virtualFocus\");\n  useStoreProps(store, props, \"orientation\");\n  useStoreProps(store, props, \"rtl\");\n  useStoreProps(store, props, \"focusLoop\");\n  useStoreProps(store, props, \"focusWrap\");\n  useStoreProps(store, props, \"focusShift\");\n  return store;\n}\n\n/**\n * Creates a composite store to control the state of\n * [Composite](https://ariakit.com/components/composite) components.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const composite = useCompositeStore();\n *\n * <Composite store={composite}>\n *   <CompositeItem>Item</CompositeItem>\n *   <CompositeItem>Item</CompositeItem>\n *   <CompositeItem>Item</CompositeItem>\n * </Composite>\n * ```\n */\n\nexport function useCompositeStore<\n  T extends CompositeStoreItem = CompositeStoreItem,\n>(\n  props: PickRequired<CompositeStoreProps<T>, \"items\" | \"defaultItems\">,\n): CompositeStore<T>;\n\nexport function useCompositeStore(props?: CompositeStoreProps): CompositeStore;\n\nexport function useCompositeStore(\n  props: CompositeStoreProps = {},\n): CompositeStore {\n  props = useCompositeStoreOptions(props);\n  const [store, update] = useStore(Core.createCompositeStore, props);\n  return useCompositeStoreProps(store, update, props);\n}\n\nexport interface CompositeStoreItem extends Core.CompositeStoreItem {}\n\nexport interface CompositeStoreState<\n  T extends CompositeStoreItem = CompositeStoreItem,\n>\n  extends Core.CompositeStoreState<T>, CollectionStoreState<T> {}\n\nexport interface CompositeStoreFunctions<\n  T extends CompositeStoreItem = CompositeStoreItem,\n>\n  extends Core.CompositeStoreFunctions<T>, CollectionStoreFunctions<T> {}\n\nexport interface CompositeStoreOptions<\n  T extends CompositeStoreItem = CompositeStoreItem,\n>\n  extends Core.CompositeStoreOptions<T>, CollectionStoreOptions<T> {\n  /**\n   * A callback that gets called when the\n   * [`activeId`](https://ariakit.com/reference/composite-provider#activeid)\n   * state changes.\n   */\n  setActiveId?: (activeId: CompositeStoreState<T>[\"activeId\"]) => void;\n}\n\nexport interface CompositeStoreProps<\n  T extends CompositeStoreItem = CompositeStoreItem,\n>\n  extends CompositeStoreOptions<T>, Core.CompositeStoreProps<T> {}\n\nexport interface CompositeStore<\n  T extends CompositeStoreItem = CompositeStoreItem,\n>\n  extends CompositeStoreFunctions<T>, Store<Core.CompositeStore<T>> {}\n"],"mappings":";;;;;;SAgBS,yBAAA,OAAA;QADI;EACE,IAAG,MAAA,MAAA,EAAA;EAAM,GAAA;CACxB;AAEA;SAKU,uBAAA,OAAwB,QAAO,OAAa;CACpD,QAAA,wBAA4B,OAAA,QAAY,KAAA;CACxC,cAAc,OAAO,OAAO,YAAA,aAAqB;CACjD,cAAc,OAAO,OAAO,qBAAc;CAC1C,cAAc,OAAO,OAAO,cAAa;CACzC,cAAc,OAAO,OAAO,aAAK;CACjC,cAAc,OAAO,OAAO,KAAA;CAC5B,cAAc,OAAO,OAAO,WAAW;CACvC,cAAc,OAAO,OAAO,WAAA;CAC5B,cAAO,OAAA,OAAA,YAAA;CACT,OAAA;AA0BA;SAGU,kBAAA,QAAyB,CAAA,GAAK;CACtC,QAAO,yBAA0B,KAAK;CACtC,MAAA,CAAO,OAAA,UAAA,SAAuB,KAAO,sBAAa,KAAA;CACpD,OAAA,uBAAA,OAAA,QAAA,KAAA"}

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

@@ -0,0 +1,2 @@
+import { i as useCompositeTypeahead, n as CompositeTypeaheadOptions, r as CompositeTypeaheadProps, t as CompositeTypeahead } from "../composite-typeahead-DDhpyKqm.js";
+export { CompositeTypeahead, CompositeTypeaheadOptions, CompositeTypeaheadProps, useCompositeTypeahead };

package/dist/composite/composite-typeahead.js

@@ -0,0 +1,126 @@
+"use client";
+import { useCompositeContext } from "./composite-context.js";
+import { flipItems } from "./utils.js";
+import { createElement, createHook, forwardRef, useEvent } from "@ariakit/react-utils";
+import { getDocument, invariant, isSelfTarget, isTextField, normalizeString, removeUndefinedValues, sortBasedOnDOMPosition } from "@ariakit/utils";
+import { useRef } from "react";
+//#region src/composite/composite-typeahead.tsx
+const TagName = "div";
+let chars = "";
+function clearChars() {
+	chars = "";
+}
+function isValidTypeaheadEvent(event) {
+	const target = event.target;
+	if (target && isTextField(target)) return false;
+	if (event.key === " " && chars.length) return true;
+	return event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey && /^[\p{Letter}\p{Number}]$/u.test(event.key);
+}
+function isSelfTargetOrItem(event, items) {
+	if (isSelfTarget(event)) return true;
+	const target = event.target;
+	if (!target) return false;
+	return items.some((item) => item.element === target);
+}
+function getEnabledItems(items) {
+	return items.filter((item) => !item.disabled);
+}
+function itemTextStartsWith(item, text) {
+	const itemText = item.element?.textContent || item.children || "value" in item && item.value;
+	if (!itemText) return false;
+	return normalizeString(itemText).trim().toLowerCase().startsWith(text.toLowerCase());
+}
+function getSameInitialItems(items, char, activeId) {
+	if (!activeId) return items;
+	const activeItem = items.find((item) => item.id === activeId);
+	if (!activeItem) return items;
+	if (!itemTextStartsWith(activeItem, char)) return items;
+	if (chars !== char && itemTextStartsWith(activeItem, chars)) return items;
+	chars = char;
+	return flipItems(items.filter((item) => itemTextStartsWith(item, chars)), activeId).filter((item) => item.id !== activeId);
+}
+/**
+* Returns props to create a `CompositeTypeahead` component.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* const store = useCompositeStore();
+* const props = useCompositeTypeahead({ store });
+* <Composite store={store} {...props}>
+*   <CompositeItem>Item 1</CompositeItem>
+*   <CompositeItem>Item 2</CompositeItem>
+* </Composite>
+* ```
+*/
+const useCompositeTypeahead = createHook(function useCompositeTypeahead({ store, typeahead = true, ...props }) {
+	const context = useCompositeContext();
+	store = store || context;
+	invariant(store, "CompositeTypeahead must be a Composite component");
+	const onKeyDownCaptureProp = props.onKeyDownCapture;
+	const cleanupTimeoutRef = useRef(0);
+	const onKeyDownCapture = useEvent((event) => {
+		onKeyDownCaptureProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!typeahead) return;
+		if (!store) return;
+		if (!isValidTypeaheadEvent(event)) return clearChars();
+		const { renderedItems, items, activeId, id } = store.getState();
+		let enabledItems = getEnabledItems(items.length > renderedItems.length ? items : renderedItems);
+		const document = getDocument(event.currentTarget);
+		const selector = `[data-offscreen-id="${id}"]`;
+		const offscreenItems = document.querySelectorAll(selector);
+		for (const element of offscreenItems) {
+			const disabled = element.ariaDisabled === "true" || "disabled" in element && !!element.disabled;
+			enabledItems.push({
+				id: element.id,
+				element,
+				disabled
+			});
+		}
+		if (offscreenItems.length) enabledItems = sortBasedOnDOMPosition(enabledItems, (i) => i.element);
+		if (!isSelfTargetOrItem(event, enabledItems)) return clearChars();
+		event.preventDefault();
+		window.clearTimeout(cleanupTimeoutRef.current);
+		cleanupTimeoutRef.current = window.setTimeout(() => {
+			chars = "";
+		}, 500);
+		const char = event.key.toLowerCase();
+		chars += char;
+		enabledItems = getSameInitialItems(enabledItems, char, activeId);
+		const item = enabledItems.find((item) => itemTextStartsWith(item, chars));
+		if (item) store.move(item.id);
+		else clearChars();
+	});
+	props = {
+		...props,
+		onKeyDownCapture
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a component that adds typeahead functionality to composite
+* components.
+*
+* When the
+* [`typeahead`](https://ariakit.com/reference/composite-typeahead#typeahead)
+* prop is enabled, which it is by default, hitting printable character keys
+* will move focus to the next composite item that begins with the input
+* characters.
+* @see https://ariakit.com/components/composite
+* @example
+* ```jsx
+* <CompositeProvider>
+*   <Composite render={<CompositeTypeahead />}>
+*     <CompositeItem>Item 1</CompositeItem>
+*     <CompositeItem>Item 2</CompositeItem>
+*   </Composite>
+* </CompositeProvider>
+* ```
+*/
+const CompositeTypeahead = forwardRef(function CompositeTypeahead(props) {
+	return createElement(TagName, useCompositeTypeahead(props));
+});
+//#endregion
+export { CompositeTypeahead, useCompositeTypeahead };
+
+//# sourceMappingURL=composite-typeahead.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composite-typeahead.js","names":[],"sources":["../../src/composite/composite-typeahead.tsx"],"sourcesContent":["import {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  getDocument,\n  isTextField,\n  sortBasedOnDOMPosition,\n  isSelfTarget,\n  invariant,\n  normalizeString,\n  removeUndefinedValues,\n} from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent } from \"react\";\nimport { useRef } from \"react\";\nimport { useCompositeContext } from \"./composite-context.tsx\";\nimport type { CompositeStore, CompositeStoreItem } from \"./composite-store.ts\";\nimport { flipItems } from \"./utils.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nlet chars = \"\";\n\nfunction clearChars() {\n  chars = \"\";\n}\n\nfunction isValidTypeaheadEvent(event: KeyboardEvent) {\n  const target = event.target as HTMLElement | null;\n  if (target && isTextField(target)) return false;\n  // If the spacebar is pressed, we'll only consider it a valid typeahead event\n  // if there were already other characters typed.\n  if (event.key === \" \" && chars.length) return true;\n  return (\n    event.key.length === 1 &&\n    !event.ctrlKey &&\n    !event.altKey &&\n    !event.metaKey &&\n    /^[\\p{Letter}\\p{Number}]$/u.test(event.key)\n  );\n}\n\nfunction isSelfTargetOrItem(event: KeyboardEvent, items: CompositeStoreItem[]) {\n  if (isSelfTarget(event)) return true;\n  const target = event.target as HTMLElement | null;\n  if (!target) return false;\n  const isItem = items.some((item) => item.element === target);\n  return isItem;\n}\n\nfunction getEnabledItems(items: CompositeStoreItem[]) {\n  return items.filter((item) => !item.disabled);\n}\n\nfunction itemTextStartsWith(item: CompositeStoreItem, text: string) {\n  const itemText =\n    item.element?.textContent ||\n    item.children ||\n    // The composite item object itself doesn't include a value property, but\n    // other components like Select do. Since CompositeTypeahead is a generic\n    // component that can be used with those as well, we also consider the value\n    // property as a fallback for the typeahead text content.\n    (\"value\" in item && (item.value as string | undefined));\n  if (!itemText) return false;\n  return normalizeString(itemText)\n    .trim()\n    .toLowerCase()\n    .startsWith(text.toLowerCase());\n}\n\nfunction getSameInitialItems(\n  items: CompositeStoreItem[],\n  char: string,\n  activeId?: string | null,\n) {\n  if (!activeId) return items;\n  const activeItem = items.find((item) => item.id === activeId);\n  if (!activeItem) return items;\n  if (!itemTextStartsWith(activeItem, char)) return items;\n  // Typing \"oo\" will match \"oof\" instead of moving to the next item.\n  if (chars !== char && itemTextStartsWith(activeItem, chars)) return items;\n  // If we're looping through the items, we'll want to reset the chars so \"oo\"\n  // becomes just \"o\".\n  chars = char;\n  // flipItems will put the previous items at the end of the list so we can loop\n  // through them.\n  return flipItems(\n    items.filter((item) => itemTextStartsWith(item, chars)),\n    activeId,\n  ).filter((item) => item.id !== activeId);\n}\n\n/**\n * Returns props to create a `CompositeTypeahead` component.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * const store = useCompositeStore();\n * const props = useCompositeTypeahead({ store });\n * <Composite store={store} {...props}>\n *   <CompositeItem>Item 1</CompositeItem>\n *   <CompositeItem>Item 2</CompositeItem>\n * </Composite>\n * ```\n */\nexport const useCompositeTypeahead = createHook<\n  TagName,\n  CompositeTypeaheadOptions\n>(function useCompositeTypeahead({ store, typeahead = true, ...props }) {\n  const context = useCompositeContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"CompositeTypeahead must be a Composite component\",\n  );\n\n  const onKeyDownCaptureProp = props.onKeyDownCapture;\n  const cleanupTimeoutRef = useRef(0);\n\n  // We have to listen to the event in the capture phase because the event\n  // might be handled by a child component. For example, the space key may\n  // trigger a click event on a child component. We need to prevent this\n  // behavior if the character is a valid typeahead key.\n  const onKeyDownCapture = useEvent((event: KeyboardEvent<HTMLType>) => {\n    onKeyDownCaptureProp?.(event);\n    if (event.defaultPrevented) return;\n    if (!typeahead) return;\n    if (!store) return;\n    if (!isValidTypeaheadEvent(event)) {\n      return clearChars();\n    }\n    const { renderedItems, items, activeId, id } = store.getState();\n    // We typically want to use the rendered items, as they're already sorted.\n    // However, the composite list might be unmounted or virtualized, in which\n    // case we'll use the original items.\n    let enabledItems = getEnabledItems(\n      items.length > renderedItems.length ? items : renderedItems,\n    );\n    // When the composite widget contains items with the `offscreenMode`\n    // prop, we need to consider them as well.\n    const document = getDocument(event.currentTarget);\n    const selector = `[data-offscreen-id=\"${id}\"]`;\n    const offscreenItems = document.querySelectorAll<HTMLElement>(selector);\n    // Push the offscreen items to the enabled items list.\n    for (const element of offscreenItems) {\n      const disabled =\n        element.ariaDisabled === \"true\" ||\n        (\"disabled\" in element && !!element.disabled);\n      enabledItems.push({ id: element.id, element, disabled });\n    }\n    // If there are offscreen items, we need to sort the enabled items based on\n    // their DOM position so offscreen elements above the viewport are correctly\n    // considered.\n    if (offscreenItems.length) {\n      enabledItems = sortBasedOnDOMPosition(enabledItems, (i) => i.element);\n    }\n    if (!isSelfTargetOrItem(event, enabledItems)) return clearChars();\n    event.preventDefault();\n    // We need to clear the previous cleanup timeout so we can append the\n    // pressed char to the existing one.\n    window.clearTimeout(cleanupTimeoutRef.current);\n    // Schedule a new cleanup timeout. After a short delay we'll reset the\n    // characters so the next one counts as a new start character.\n    cleanupTimeoutRef.current = window.setTimeout(() => {\n      chars = \"\";\n    }, 500);\n    // Always consider the lowercase version of the key.\n    const char = event.key.toLowerCase();\n    chars += char;\n    enabledItems = getSameInitialItems(enabledItems, char, activeId);\n    const item = enabledItems.find((item) => itemTextStartsWith(item, chars));\n    if (item) {\n      store.move(item.id);\n    } else {\n      // Immediately clear the characters so the next keypress starts a new\n      // search.\n      clearChars();\n    }\n  });\n\n  props = {\n    ...props,\n    onKeyDownCapture,\n  };\n\n  return removeUndefinedValues(props);\n});\n\n/**\n * Renders a component that adds typeahead functionality to composite\n * components.\n *\n * When the\n * [`typeahead`](https://ariakit.com/reference/composite-typeahead#typeahead)\n * prop is enabled, which it is by default, hitting printable character keys\n * will move focus to the next composite item that begins with the input\n * characters.\n * @see https://ariakit.com/components/composite\n * @example\n * ```jsx\n * <CompositeProvider>\n *   <Composite render={<CompositeTypeahead />}>\n *     <CompositeItem>Item 1</CompositeItem>\n *     <CompositeItem>Item 2</CompositeItem>\n *   </Composite>\n * </CompositeProvider>\n * ```\n */\nexport const CompositeTypeahead = forwardRef(function CompositeTypeahead(\n  props: CompositeTypeaheadProps,\n) {\n  const htmlProps = useCompositeTypeahead(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface CompositeTypeaheadOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useCompositeStore`](https://ariakit.com/reference/use-composite-store)\n   * hook. If not provided, the closest\n   * [`Composite`](https://ariakit.com/reference/composite) or\n   * [`CompositeProvider`](https://ariakit.com/reference/composite-provider)\n   * components' context will be used.\n   */\n  store?: CompositeStore;\n  /**\n   * When enabled, pressing printable character keys will move focus to the next\n   * composite item that starts with the entered characters.\n   * @default true\n   */\n  typeahead?: boolean;\n}\n\nexport type CompositeTypeaheadProps<T extends ElementType = TagName> = Props<\n  T,\n  CompositeTypeaheadOptions<T>\n>;\n"],"mappings":"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"}

package/dist/composite/composite.d.ts

@@ -0,0 +1,2 @@
+import { i as useComposite, n as CompositeOptions, r as CompositeProps, t as Composite } from "../composite-DLvyFHMq.js";
+export { Composite, CompositeOptions, CompositeProps, useComposite };