@ariakit/react-core 0.4.3 → 0.4.5

package/esm/tag/tag-input.js

@@ -0,0 +1,191 @@
+"use client";
+import {
+  useCompositeItem
+} from "../__chunks/VGORKDMQ.js";
+import "../__chunks/IFMAUEA7.js";
+import "../__chunks/PJ7ERAIM.js";
+import {
+  useTagContext
+} from "../__chunks/WYDDZRWN.js";
+import "../__chunks/3IEDWLST.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/7JCFLN3D.js";
+import "../__chunks/SHA3WOPI.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "../__chunks/GUCZNEAD.js";
+import "../__chunks/PWUXK5IM.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useMergeRefs
+} from "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag-input.tsx
+import { toArray } from "@ariakit/core/utils/array";
+import {
+  getTextboxSelection,
+  setSelectionRange
+} from "@ariakit/core/utils/dom";
+import { getInputType } from "@ariakit/core/utils/events";
+import { invariant } from "@ariakit/core/utils/misc";
+import { UndoManager } from "@ariakit/core/utils/undo";
+var TagName = "input";
+var DEFAULT_DELIMITER = ["\n", ";", ",", /\s/];
+function getDelimiters(delimiter, defaultDelimiter = DEFAULT_DELIMITER) {
+  const finalDelimiter = delimiter === void 0 ? defaultDelimiter : delimiter;
+  if (!finalDelimiter)
+    return [];
+  return toArray(finalDelimiter);
+}
+function splitValueByDelimiter(value, delimiters) {
+  for (const delimiter of delimiters) {
+    let match = value.match(delimiter);
+    while ((match == null ? void 0 : match.index) === 0) {
+      value = value.slice(match[0].length);
+      match = value.match(delimiter);
+    }
+    if (!match)
+      continue;
+    return value.split(delimiter);
+  }
+  return [];
+}
+var useTagInput = createHook(
+  function useTagInput2(_a) {
+    var _b = _a, {
+      store,
+      tabbable = true,
+      delimiter,
+      addValueOnPaste = true,
+      addValueOnChange = true,
+      setValueOnChange = true,
+      removeOnBackspace = true
+    } = _b, props = __objRest(_b, [
+      "store",
+      "tabbable",
+      "delimiter",
+      "addValueOnPaste",
+      "addValueOnChange",
+      "setValueOnChange",
+      "removeOnBackspace"
+    ]);
+    const context = useTagContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "TagInput must receive a `store` prop or be wrapped in a TagProvider component."
+    );
+    const value = store.useState("value");
+    const onPasteProp = props.onPaste;
+    const addValueOnPasteProp = useBooleanEvent(addValueOnPaste);
+    const onPaste = useEvent((event) => {
+      onPasteProp == null ? void 0 : onPasteProp(event);
+      if (event.defaultPrevented)
+        return;
+      const text = event.clipboardData.getData("text");
+      const delimiters = getDelimiters(delimiter);
+      const values = splitValueByDelimiter(text, delimiters).map((value2) => value2.trim()).filter((value2) => value2 !== "");
+      const eventWithValues = Object.assign(event, { values });
+      if (!addValueOnPasteProp(eventWithValues))
+        return;
+      if (!values.length)
+        return;
+      event.preventDefault();
+      for (const tagValue of values) {
+        store.addValue(tagValue);
+      }
+    });
+    const onChangeProp = props.onChange;
+    const setValueOnChangeProp = useBooleanEvent(setValueOnChange);
+    const addValueOnChangeProp = useBooleanEvent(addValueOnChange);
+    const onChange = useEvent((event) => {
+      onChangeProp == null ? void 0 : onChangeProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (!store)
+        return;
+      const { value: prevValue } = store.getState();
+      const inputType = getInputType(event);
+      const currentTarget = event.currentTarget;
+      const { start, end } = getTextboxSelection(currentTarget);
+      const { value: value2 } = currentTarget;
+      if (setValueOnChangeProp(event)) {
+        UndoManager.execute(() => {
+          store.setValue(value2);
+          queueMicrotask(() => {
+            setSelectionRange(currentTarget, start, end);
+          });
+          if (value2 === prevValue)
+            return;
+          return () => store.setValue(prevValue);
+        }, inputType);
+      }
+      const isTrailingCaret = start === end && start === value2.length;
+      if (isTrailingCaret) {
+        const delimiters = getDelimiters(delimiter);
+        let values = splitValueByDelimiter(value2, delimiters);
+        const trailingvalue = values.pop() || "";
+        values = values.map((value3) => value3.trim()).filter((value3) => value3 !== "");
+        const eventWithValues = Object.assign(event, { values });
+        if (values.length && addValueOnChangeProp(eventWithValues)) {
+          event.preventDefault();
+          for (const tagValue of values) {
+            store.addValue(tagValue);
+          }
+          UndoManager.execute(() => {
+            store.setValue(trailingvalue);
+            if (trailingvalue === prevValue)
+              return;
+            return () => store.setValue(prevValue);
+          }, inputType);
+        }
+      }
+    });
+    const onKeyDownProp = props.onKeyDown;
+    const removeOnBackspaceProp = useBooleanEvent(removeOnBackspace);
+    const onKeyDown = useEvent((event) => {
+      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (event.key === "Backspace" && removeOnBackspaceProp(event)) {
+        const { start, end } = getTextboxSelection(event.currentTarget);
+        const isLeadingCaret = start === end && start === 0;
+        if (!isLeadingCaret)
+          return;
+        store.setValues((values) => {
+          if (!values.length)
+            return values;
+          return values.slice(0, -1);
+        });
+      }
+    });
+    props = __spreadProps(__spreadValues({
+      value
+    }, props), {
+      ref: useMergeRefs(store.setInputElement, props.ref),
+      onPaste,
+      onChange,
+      onKeyDown
+    });
+    props = useCompositeItem(__spreadValues({ store, tabbable }, props));
+    return props;
+  }
+);
+var TagInput = forwardRef(function TagInput2(props) {
+  const htmlProps = useTagInput(props);
+  return createElement(TagName, htmlProps);
+});
+export {
+  TagInput,
+  useTagInput
+};

package/esm/tag/tag-list-label.d.ts

@@ -0,0 +1,55 @@
+import type { ElementType } from "react";
+import type { CompositeOptions } from "../composite/composite.jsx";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "label";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `TagListLabel` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagListLabel();
+ * <Role.label {...props} />
+ * ```
+ */
+export declare const useTagListLabel: import("../utils/types.js").Hook<"label", TagListLabelOptions<"label">>;
+/**
+ * Renders a label element for the
+ * [`TagInput`](https://ariakit.org/reference/tag-input) and also acts as the
+ * accessible name for the listbox element rendered by
+ * [`TagList`](https://ariakit.org/reference/tag-list).
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {2}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare const TagListLabel: (props: TagListLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagListLabelOptions<T extends ElementType = TagName> extends CompositeOptions<T> {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+}
+export type TagListLabelProps<T extends ElementType = TagName> = Props<T, TagListLabelOptions<T>>;
+export {};

package/esm/tag/tag-list-label.js

@@ -0,0 +1,56 @@
+"use client";
+import {
+  useTagContext
+} from "../__chunks/WYDDZRWN.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "../__chunks/GUCZNEAD.js";
+import {
+  useId,
+  useMergeRefs
+} from "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag-list-label.tsx
+import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "label";
+var useTagListLabel = createHook(
+  function useTagListLabel2(_a) {
+    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+    const context = useTagContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "TagListLabel must receive a `store` prop or be wrapped in a TagProvider component."
+    );
+    const id = useId(props.id);
+    const htmlFor = store.useState((state) => {
+      var _a2;
+      return (_a2 = state.inputElement) == null ? void 0 : _a2.id;
+    });
+    props = __spreadProps(__spreadValues({
+      id,
+      htmlFor
+    }, props), {
+      ref: useMergeRefs(store.setLabelElement, props.ref)
+    });
+    return props;
+  }
+);
+var TagListLabel = forwardRef(function TagListLabel2(props) {
+  const htmlProps = useTagListLabel(props);
+  return createElement(TagName, htmlProps);
+});
+export {
+  TagListLabel,
+  useTagListLabel
+};

package/esm/tag/tag-list.d.ts

@@ -0,0 +1,58 @@
+import type { ElementType } from "react";
+import type { CompositeOptions } from "../composite/composite.js";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `TagList` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagList();
+ * <Role.div {...props} />
+ * ```
+ */
+export declare const useTagList: import("../utils/types.js").Hook<"div", TagListOptions<"div">>;
+/**
+ * Renders a wrapper for [`Tag`](https://ariakit.org/reference/tag) and
+ * [`TagInput`](https://ariakit.org/reference/tag-input) components. This
+ * component is typically styled as an input field.
+ *
+ * The [`TagListLabel`](https://ariakit.org/reference/tag-list-label) component
+ * can be used to provide an accessible name for the listbox element that owns
+ * the tags.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {3-15}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare const TagList: (props: TagListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagListOptions<T extends ElementType = TagName> extends CompositeOptions<T> {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+}
+export type TagListProps<T extends ElementType = TagName> = Props<T, TagListOptions<T>>;
+export {};

package/esm/tag/tag-list.js

@@ -0,0 +1,141 @@
+"use client";
+import {
+  useTouchDevice
+} from "../__chunks/L7IM35RU.js";
+import {
+  TagScopedContextProvider,
+  useTagProviderContext
+} from "../__chunks/WYDDZRWN.js";
+import {
+  useComposite
+} from "../__chunks/CDZXDIC7.js";
+import "../__chunks/3IEDWLST.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/7JCFLN3D.js";
+import "../__chunks/SHA3WOPI.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "../__chunks/GUCZNEAD.js";
+import {
+  useEvent,
+  useWrapElement
+} from "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag-list.tsx
+import { queueBeforeEvent } from "@ariakit/core/utils/events";
+import { getClosestFocusable } from "@ariakit/core/utils/focus";
+import { invariant } from "@ariakit/core/utils/misc";
+import { isApple } from "@ariakit/core/utils/platform";
+import { UndoManager } from "@ariakit/core/utils/undo";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TagName = "div";
+var useTagList = createHook(
+  function useTagList2(_a) {
+    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+    const context = useTagProviderContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "TagList must receive a `store` prop or be wrapped in a TagProvider component."
+    );
+    const onMouseDownProp = props.onMouseDown;
+    const onMouseDown = useEvent((event) => {
+      onMouseDownProp == null ? void 0 : onMouseDownProp(event);
+      if (event.defaultPrevented)
+        return;
+      const target = event.target;
+      const currentTarget = event.currentTarget;
+      const focusableTarget = getClosestFocusable(target);
+      const isSelfFocusable = focusableTarget === currentTarget;
+      if (!isSelfFocusable && currentTarget.contains(focusableTarget))
+        return;
+      const { inputElement } = store.getState();
+      queueBeforeEvent(event.currentTarget, "mouseup", () => {
+        inputElement == null ? void 0 : inputElement.focus();
+      });
+    });
+    const onKeyDownProp = props.onKeyDown;
+    const onKeyDown = useEvent((event) => {
+      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+      if (event.defaultPrevented)
+        return;
+      const pc = !isApple();
+      const z = event.key === "z" || event.key === "Z";
+      const mod = pc ? event.ctrlKey : event.metaKey;
+      const shiftZ = event.shiftKey && z || pc && event.key === "y";
+      if (mod && shiftZ) {
+        event.preventDefault();
+        UndoManager.redo();
+      } else if (mod && z) {
+        event.preventDefault();
+        UndoManager.undo();
+      }
+    });
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(TagScopedContextProvider, { value: store, children: element }),
+      [store]
+    );
+    props = __spreadProps(__spreadValues({}, props), {
+      onMouseDown,
+      onKeyDown
+    });
+    props = useComposite(__spreadValues({ store }, props));
+    const orientation = store.useState(
+      (state) => state.orientation === "both" ? void 0 : state.orientation
+    );
+    const items = store.useState((state) => state.renderedItems);
+    const itemIds = items.filter((item) => !!item.value).map((item) => item.id);
+    const labelId = store.useState((state) => {
+      var _a2;
+      return (_a2 = state.labelElement) == null ? void 0 : _a2.id;
+    });
+    const listboxProps = {};
+    for (const key in props) {
+      if (key === "role" || key.startsWith("aria-")) {
+        const prop = key;
+        listboxProps[prop] = props[prop];
+        delete props[prop];
+      }
+    }
+    const touchDevice = useTouchDevice();
+    const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          role: touchDevice ? "list" : "listbox",
+          "aria-live": "polite",
+          "aria-relevant": "all",
+          "aria-atomic": true,
+          "aria-labelledby": labelId,
+          "aria-orientation": orientation,
+          "aria-owns": itemIds.join(" ")
+        }, listboxProps), {
+          style: { position: "fixed" }
+        })
+      ),
+      props.children
+    ] });
+    props = __spreadProps(__spreadValues({}, props), {
+      children
+    });
+    return props;
+  }
+);
+var TagList = forwardRef(function TagList2(props) {
+  const htmlProps = useTagList(props);
+  return createElement(TagName, htmlProps);
+});
+export {
+  TagList,
+  useTagList
+};

package/esm/tag/tag-provider.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type { TagStoreProps } from "./tag-store.js";
+/**
+ * Provides a tag store to [Tag](https://ariakit.org/components/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare function TagProvider(props?: TagProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface TagProviderProps extends TagStoreProps {
+    children?: ReactNode;
+}

package/esm/tag/tag-provider.js

@@ -0,0 +1,26 @@
+"use client";
+import {
+  useTagStore
+} from "../__chunks/QNNHZL3W.js";
+import {
+  TagContextProvider
+} from "../__chunks/WYDDZRWN.js";
+import "../__chunks/ZR5N62ZV.js";
+import "../__chunks/LGWSZOP2.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/GUCZNEAD.js";
+import "../__chunks/PWUXK5IM.js";
+import "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag-provider.tsx
+import { jsx } from "react/jsx-runtime";
+function TagProvider(props = {}) {
+  const store = useTagStore(props);
+  return /* @__PURE__ */ jsx(TagContextProvider, { value: store, children: props.children });
+}
+export {
+  TagProvider
+};

package/esm/tag/tag-remove.d.ts

@@ -0,0 +1,67 @@
+import type { ElementType, MouseEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { Options, Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+/**
+ * Returns props to create a `TagRemove` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagRemove();
+ * <Role.button {...props} />
+ * ```
+ */
+export declare const useTagRemove: import("../utils/types.js").Hook<"button", TagRemoveOptions<"button">>;
+/**
+ * Renders a `Backspace` icon inside a
+ * [`Tag`](https://ariakit.org/reference/tag) component that removes the tag
+ * when clicked with a mouse.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {9}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare const TagRemove: (props: TagRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagRemoveOptions<_T extends ElementType = TagName> extends Options {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+    /**
+     * The value of the tag to remove. If not provided, the value will be inferred
+     * from the parent [`Tag`](https://ariakit.org/reference/tag) component.
+     */
+    value?: string;
+    /**
+     * Determines if the tag should be removed when clicked with a mouse. If a
+     * function is provided, it will be called with the click event and should
+     * return a boolean.
+     * @default true
+     */
+    removeOnClick?: BooleanOrCallback<MouseEvent<HTMLType>>;
+}
+export type TagRemoveProps<T extends ElementType = TagName> = Props<T, TagRemoveOptions<T>>;
+export {};