@ariakit/react-components 0.1.0

package/dist/combobox/combobox-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-value.d.ts","names":["ReactNode","ComboboxStore","ComboboxStoreState","ComboboxValue","store","children","ComboboxValueProps","value"],"sources":["../../src/combobox/combobox-value.d.ts"],"mappings":";;;;;;AAyBA;;;;;;;;;;;;;;;;AAA0F;AAC1F;;;;iBADwBG,aAAAA,CAAAA;EAAgBC,KAAAA;EAAOC;AAAAA,IAAaC,kBAAAA,GAAqBN,SAAAA;AAAAA,UAChEM,kBAAAA;EAa+C;;;;;;;EAL5DF,KAAAA,GAAQH,aAAAA;EAKoD;AAAA;;;EAA5DI,QAAAA,IAAYE,KAAAA,EAAOL,kBAAAA,cAAgCF,SAAAA;AAAAA"}

package/dist/combobox/combobox-value.js

@@ -0,0 +1,40 @@
+"use client";
+import { useComboboxContext } from "./combobox-context.js";
+import { invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/combobox/combobox-value.tsx
+/**
+* Renders the current
+* [`value`](https://ariakit.com/reference/use-combobox-store#value) state in
+* the [combobox store](https://ariakit.com/reference/use-combobox-store).
+*
+* As a value component, it doesn't render any DOM elements and therefore
+* doesn't accept HTML props.
+*
+* It takes a
+* [`children`](https://ariakit.com/reference/combobox-value#children) function
+* that gets called with the current value as an argument. This can be used as
+* an uncontrolled API to render the combobox value in a custom way.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {3-5}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxValue>
+*     {(value) => `Current value: ${value}`}
+*   </ComboboxValue>
+* </ComboboxProvider>
+* ```
+*/
+function ComboboxValue({ store, children } = {}) {
+	const context = useComboboxContext();
+	store = store || context;
+	invariant(store, "ComboboxValue must receive a `store` prop or be wrapped in a ComboboxProvider component.");
+	const value = useStoreState(store, "value");
+	if (children) return children(value);
+	return value;
+}
+//#endregion
+export { ComboboxValue };
+
+//# sourceMappingURL=combobox-value.js.map

package/dist/combobox/combobox-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-value.js","names":[],"sources":["../../src/combobox/combobox-value.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ReactNode } from \"react\";\nimport { useComboboxContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore, ComboboxStoreState } from \"./combobox-store.ts\";\n\n/**\n * Renders the current\n * [`value`](https://ariakit.com/reference/use-combobox-store#value) state in\n * the [combobox store](https://ariakit.com/reference/use-combobox-store).\n *\n * As a value component, it doesn't render any DOM elements and therefore\n * doesn't accept HTML props.\n *\n * It takes a\n * [`children`](https://ariakit.com/reference/combobox-value#children) function\n * that gets called with the current value as an argument. This can be used as\n * an uncontrolled API to render the combobox value in a custom way.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3-5}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxValue>\n *     {(value) => `Current value: ${value}`}\n *   </ComboboxValue>\n * </ComboboxProvider>\n * ```\n */\nexport function ComboboxValue({ store, children }: ComboboxValueProps = {}) {\n  const context = useComboboxContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"ComboboxValue must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n  );\n\n  const value = useStoreState(store, \"value\");\n\n  if (children) {\n    return children(value);\n  }\n\n  return value;\n}\n\nexport interface ComboboxValueProps {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)\n   * component's context will be used.\n   */\n  store?: ComboboxStore;\n  /**\n   * A function that gets called with the current value as an argument. It can\n   * be used to render the combobox value in a custom way.\n   */\n  children?: (value: ComboboxStoreState[\"value\"]) => ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;SA8BQ,cAAU,EAAA,OAAA,aAAmB,CAAA,GAAA;CACnC,MAAA,UAAQ,mBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAQ,0FAA4B;CAE1C,MAAI,QACF,cAAO,OAAc,OAAA;CAGvB,IAAA,UAAO,OAAA,SAAA,KAAA;CACT,OAAA"}

package/dist/combobox/combobox.d.ts

@@ -0,0 +1,268 @@
+import { s as ComboboxStoreState, t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { n as CompositeOptions } from "../composite-DLvyFHMq.js";
+import { n as PopoverAnchorOptions } from "../popover-anchor-PgfeXyzs.js";
+import { Props } from "@ariakit/react-utils";
+import { AriaAttributes, ChangeEvent, ElementType, KeyboardEvent, MouseEvent } from "react";
+import { BooleanOrCallback, StringWithValue } from "@ariakit/utils";
+
+//#region src/combobox/combobox.d.ts
+declare const TagName = "input";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Combobox` component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useCombobox({ store });
+ * <Role {...props} />
+ * <ComboboxPopover store={store}>
+ *   <ComboboxItem value="Apple" />
+ *   <ComboboxItem value="Banana" />
+ *   <ComboboxItem value="Orange" />
+ * </ComboboxPopover>
+ * ```
+ */
+declare const useCombobox: import("@ariakit/react-utils").Hook<"input", ComboboxOptions<"input">>;
+/**
+ * Renders a combobox input element that can be used to filter a list of items.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {2}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const Combobox: (props: ComboboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxOptions<T extends ElementType = TagName> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)
+   * component's context will be used.
+   */
+  store?: ComboboxStore;
+  /**
+   * Determines if the first enabled item will be automatically focused when the
+   * combobox input value changes. If set to `true` or `"always"`, the exact
+   * behavior hinges on the value of the
+   * [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete) prop:
+   * - If [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete)
+   *   is `both` or `inline`, the first enabled item is automatically focused as
+   *   the user types in the input. The value gets appended with the completion
+   *   string if it matches. The inline completion string will be highlighted
+   *   and selected.
+   * - If [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete)
+   *   is `list` or `none`, the first enabled item is automatically focused as
+   *   the user types in the input, but the input value is not appended with the
+   *   item value.
+   *
+   * If set to `"always"`, the first enabled item is auto-highlighted when the
+   * combobox list opens, not just when the input value changes.
+   *
+   * To change which item gets auto-selected, use the
+   * [`getAutoSelectId`](https://ariakit.com/reference/combobox#getautoselectid)
+   * prop.
+   *
+   * Live examples:
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   * - [ComboboxGroup](https://ariakit.com/examples/combobox-group)
+   * - [Combobox with links](https://ariakit.com/examples/combobox-links)
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * - [Menu with Combobox](https://ariakit.com/examples/menu-combobox)
+   * - [Select with Combobox](https://ariakit.com/examples/select-combobox)
+   * @default false
+   */
+  autoSelect?: boolean | "always";
+  /**
+   * Function that takes the currently rendered items and returns the id of the
+   * item to be auto selected when the
+   * [`autoSelect`](https://ariakit.com/reference/combobox#autoselect) prop is
+   * `true`.
+   *
+   * By default, the first enabled item is auto selected. This function is handy
+   * if you prefer a different item to be auto selected. Returning `undefined`
+   * from this function will result in the default behavior.
+   * @example
+   * ```jsx
+   * <Combobox
+   *   autoSelect
+   *   getAutoSelectId={(items) => {
+   *     // Auto select the first enabled item with a value
+   *     const item = items.find((item) => {
+   *       if (item.disabled) return false;
+   *       if (!item.value) return false;
+   *       return true;
+   *     });
+   *     return item?.id;
+   *   }}
+   * />
+   * ```
+   */
+  getAutoSelectId?: (renderedItems: ComboboxStoreState["renderedItems"]) => string | null | undefined;
+  /**
+   * Whether the items will be filtered based on
+   * [`value`](https://ariakit.com/reference/combobox-provider#value) and
+   * whether the input value will temporarily change based on the active item.
+   *
+   * This prop is based on the standard
+   * [`aria-autocomplete`](https://w3c.github.io/aria/#aria-autocomplete)
+   * attribute, accepting the same values:
+   * - `list` (default): indicates that the items will be dynamically rendered
+   *   based on [`value`](https://ariakit.com/reference/combobox-provider#value)
+   *   and the input value will _not_ change based on the active item. The
+   *   filtering logic must be implemented by the consumer of this component.
+   * - `inline`: indicates that the items are static, that is, they won't be
+   *   filtered, but the input value will temporarily change based on the active
+   *   item. Ariakit will automatically provide the inline autocompletion
+   *   behavior.
+   * - `both`: indicates that the items will be dynamically rendered based on
+   *   [`value`](https://ariakit.com/reference/combobox-provider#value) and the
+   *   input value will temporarily change based on the active item. The
+   *   filtering logic must be implemented by the consumer of this component,
+   *   whereas Ariakit will automatically provide the inline autocompletion
+   *   behavior.
+   * - `none`: the items are static and the input value will _not_ change based
+   *   on the active item.
+   *
+   * Live examples:
+   * - [ComboboxGroup](https://ariakit.com/examples/combobox-group)
+   * @default "list"
+   */
+  autoComplete?: StringWithValue<Required<AriaAttributes>["aria-autocomplete"]>;
+  /**
+   * Determines if the highlighted item should lose focus when the user clicks
+   * on the combobox input element. By default, this prop's value is set
+   * according to the
+   * [`includesBaseElement`](https://ariakit.com/reference/combobox-provider#includesbaseelement)
+   * value.
+   */
+  blurActiveItemOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+  /**
+   * Specifies the minimum character count the input value should have before
+   * the [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components are displayed.
+   *
+   * The [`showOnChange`](https://ariakit.com/reference/combobox#showonchange),
+   * [`showOnClick`](https://ariakit.com/reference/combobox#showonclick), and
+   * [`showOnKeyPress`](https://ariakit.com/reference/combobox#showonkeypress)
+   * props allow you to tailor the behavior for each unique event.
+   * @default 0
+   * @example
+   * In the following example, the combobox list will be shown when the input
+   * value has at least one character. However, if the user presses the arrow
+   * keys, the list will be shown regardless of the input value length.
+   * ```jsx
+   * <Combobox showMinLength={1} showOnKeyPress />
+   * ```
+   */
+  showMinLength?: number;
+  /**
+   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)
+   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components should be shown when the input value changes.
+   *
+   * Live examples:
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * @default true
+   * @example
+   * ```jsx
+   * <Combobox showOnChange={(event) => event.target.value.length > 1} />
+   * ```
+   */
+  showOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+  /**
+   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)
+   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components should be shown when the input is clicked.
+   * @deprecated Use
+   * [`showOnClick`](https://ariakit.com/reference/combobox#showonclick)
+   * instead.
+   * @default true
+   */
+  showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+  /**
+   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)
+   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components should be shown when the input is clicked.
+   *
+   * Live examples:
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * @default true
+   * @example
+   * ```jsx
+   * <Combobox showOnClick={value.length > 1} />
+   * ```
+   */
+  showOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+  /**
+   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)
+   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components should be shown when the user presses the arrow up or down keys
+   * while focusing on the combobox input element.
+   * @deprecated Use
+   * [`showOnKeyPress`](https://ariakit.com/reference/combobox#showonkeypress)
+   * instead.
+   * @default true
+   */
+  showOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)
+   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components should be shown when the user presses the arrow up or down keys
+   * while focusing on the combobox input element.
+   *
+   * Live examples:
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * @default true
+   * @example
+   * ```jsx
+   * <Combobox showOnKeyPress={value.length > 1} />
+   * ```
+   */
+  showOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+  /**
+   * Whether the combobox
+   * [`value`](https://ariakit.com/reference/combobox-provider#value) state
+   * should be updated when the input value changes. This is useful if you want
+   * to customize how the store
+   * [`value`](https://ariakit.com/reference/combobox-provider#value) is updated
+   * based on the input element's value.
+   *
+   * Live examples:
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   * @default true
+   */
+  setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+  /**
+   * Whether the combobox
+   * [`value`](https://ariakit.com/reference/combobox-provider#value) state
+   * should be updated when the combobox input element gets clicked. This
+   * usually only applies when
+   * [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete) is
+   * `both` or `inline`, because the input value will temporarily change based
+   * on the active item and the store
+   * [`value`](https://ariakit.com/reference/combobox-provider#value) will not
+   * be updated until the user confirms the selection.
+   * @default true
+   */
+  setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+}
+type ComboboxProps<T extends ElementType = TagName> = Props<T, ComboboxOptions<T>>;
+//#endregion
+export { Combobox, ComboboxOptions, ComboboxProps, useCombobox };
+//# sourceMappingURL=combobox.d.ts.map

package/dist/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","names":["Props","BooleanOrCallback","StringWithValue","AriaAttributes","ChangeEvent","ElementType","MouseEvent","KeyboardEvent","ReactKeyboardEvent","CompositeOptions","PopoverAnchorOptions","ComboboxStore","ComboboxStoreState","TagName","useCombobox","ComboboxOptions","Hook","Combobox","ComboboxProps","props","ReactElement","JSXElementConstructor","T","Required","HTMLElement","store","autoSelect","getAutoSelectId","renderedItems","autoComplete","blurActiveItemOnClick","showMinLength","showOnChange","showOnMouseDown","showOnClick","showOnKeyDown","showOnKeyPress","setValueOnChange","setValueOnClick"],"sources":["../../src/combobox/combobox.d.ts"],"mappings":";;;;;;;;cAMca,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgD;;;;AACxD;AAAA;;;;AACQ;AAgB7B;;;;AAA8F;AAlBjB,cAkBxDC,WAAAA,iCAA4CE,IAAAA,UAAcD,eAAe;;;;;;;;;AAgB2C;AACzI;;;;;;cADqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnGN,eAAAA,WAA0BV,WAAAA,GAAcQ,OAAAA,UAAiBJ,gBAAAA,CAAiBa,CAAAA,GAAIZ,oBAAAA,CAAqBY,CAAAA;EAoE9EV;;;;;;;EA5DlCa,KAAAA,GAAQd,aAAAA;EAqIyBP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAnGjCsB,UAAAA;EA0BAC;;;;;;;;;;;;;;;;;;;;;;;;;EAAAA,eAAAA,IAAmBC,aAAAA,EAAehB,kBAAAA;EA6GAJ;;;;;;;;;;;;;;;AA2CwB;AAE9D;;;;;;;;;;;;;EA5HIqB,YAAAA,GAAe3B,eAAAA,CAAgBqB,QAAAA,CAASpB,cAAAA;EA4HiBH;;;;;AAA0B;;EApHnF8B,qBAAAA,GAAwB7B,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;;;;;;;;;;EAoBrDO,aAAAA;;;;;;;;;;;;;;;EAeAC,YAAAA,GAAe/B,iBAAAA,CAAkBG,WAAAA,CAAYoB,WAAAA;;;;;;;;;;EAU7CS,eAAAA,GAAkBhC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;;;;;EAe/CU,WAAAA,GAAcjC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;EAW3CW,aAAAA,GAAgBlC,iBAAAA,CAAkBO,aAAAA,CAAmBgB,WAAAA;;;;;;;;;;;;;;;;EAgBrDY,cAAAA,GAAiBnC,iBAAAA,CAAkBO,aAAAA,CAAmBgB,WAAAA;;;;;;;;;;;;;;EActDa,gBAAAA,GAAmBpC,iBAAAA,CAAkBG,WAAAA,CAAYoB,WAAAA;;;;;;;;;;;;;EAajDc,eAAAA,GAAkBrC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;AAAAA;AAAAA,KAEvCN,aAAAA,WAAwBb,WAAAA,GAAcQ,OAAAA,IAAWb,KAAAA,CAAMsB,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}