@ariakit/react-core 0.4.3 → 0.4.5

package/esm/tag/tag-remove.js

@@ -0,0 +1,119 @@
+"use client";
+import {
+  useTouchDevice
+} from "../__chunks/L7IM35RU.js";
+import {
+  TagRemoveIdContext,
+  TagValueContext,
+  useTagContext
+} from "../__chunks/WYDDZRWN.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import {
+  Role
+} from "../__chunks/4MFOHMLS.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "../__chunks/GUCZNEAD.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useId
+} from "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag-remove.tsx
+import { useContext, useEffect } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TagName = "button";
+var useTagRemove = createHook(
+  function useTagRemove2(_a) {
+    var _b = _a, {
+      store,
+      value: valueProp,
+      removeOnClick = true
+    } = _b, props = __objRest(_b, [
+      "store",
+      "value",
+      "removeOnClick"
+    ]);
+    const context = useTagContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "TagRemove must receive a `store` prop or be wrapped in a TagProvider component."
+    );
+    const id = useId(props.id);
+    const setRemoveId = useContext(TagRemoveIdContext);
+    const valueFromContext = useContext(TagValueContext);
+    const withinTag = valueFromContext !== null;
+    const value = valueProp != null ? valueProp : valueFromContext;
+    useEffect(() => {
+      setRemoveId == null ? void 0 : setRemoveId(id);
+      return () => setRemoveId == null ? void 0 : setRemoveId();
+    }, [id, setRemoveId]);
+    const onClickProp = props.onClick;
+    const removeOnClickProp = useBooleanEvent(removeOnClick);
+    const onClick = useEvent((event) => {
+      onClickProp == null ? void 0 : onClickProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (!store)
+        return;
+      if (!value)
+        return;
+      if (!removeOnClickProp(event))
+        return;
+      const { inputElement } = store.getState();
+      store.removeValue(value);
+      inputElement == null ? void 0 : inputElement.focus();
+    });
+    const children = /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        display: "block",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        height: "1em",
+        width: "1em",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M7.28782 5.46243C7.80963 4.92308 8.07054 4.65341 8.37751 4.46038C8.64963 4.28926 8.94749 4.16299 9.25969 4.0864C9.61186 4 9.98709 4 10.7375 4H16.8C17.9201 4 18.4802 4 18.908 4.21799C19.2843 4.40973 19.5903 4.71569 19.782 5.09202C20 5.51984 20 6.0799 20 7.2V16.8C20 17.9201 20 18.4802 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.4802 20 17.9201 20 16.8 20H10.7512C9.99584 20 9.61818 20 9.264 19.9126C8.95004 19.8351 8.65067 19.7073 8.37748 19.5342C8.06931 19.339 7.80802 19.0663 7.28544 18.521L2.59879 13.63C2.03714 13.0439 1.75631 12.7508 1.65115 12.4158C1.55859 12.121 1.55935 11.8048 1.65332 11.5104C1.7601 11.1759 2.04233 10.8842 2.60679 10.3008L7.28782 5.46243Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M10.052 9L16 15M15.948 9L10 15" })
+        ]
+      }
+    );
+    const touchDevice = useTouchDevice() && withinTag;
+    props = __spreadProps(__spreadValues({
+      id,
+      children,
+      role: touchDevice ? "button" : void 0,
+      "aria-hidden": !touchDevice,
+      "aria-label": touchDevice ? `Remove ${value}` : withinTag ? "Press Delete or Backspace to remove" : void 0
+    }, props), {
+      onClick,
+      render: withinTag ? /* @__PURE__ */ jsx(Role.span, { render: props.render }) : props.render
+    });
+    return props;
+  }
+);
+var TagRemove = forwardRef(function TagRemove2(props) {
+  const htmlProps = useTagRemove(props);
+  return createElement(TagName, htmlProps);
+});
+export {
+  TagRemove,
+  useTagRemove
+};

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

@@ -0,0 +1,49 @@
+import * as Core from "@ariakit/core/tag/tag-store";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { Store } from "../utils/store.js";
+export declare function useTagStoreProps<T extends Core.TagStore>(store: T, update: () => void, props: TagStoreProps): T;
+/**
+ * Creates a tag store to control the state of
+ * [Tag](https://ariakit.org/components/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const tag = useTagStore({ defaultValues: ["Apple", "Banana"]});
+ * const values = tag.useState("values");
+ *
+ * <TagList store={tag}>
+ *   {values.map((value) => (
+ *     <Tag key={value} value={value}>
+ *       {value}
+ *       <TagRemove />
+ *     </Tag>
+ *   ))}
+ *   <TagInput />
+ * </TagList>
+ * ```
+ */
+export declare function useTagStore(props?: TagStoreProps): TagStore;
+export interface TagStoreItem extends Core.TagStoreItem {
+}
+export interface TagStoreState extends Core.TagStoreState, CompositeStoreState<TagStoreItem> {
+}
+export interface TagStoreFunctions extends Core.TagStoreFunctions, CompositeStoreFunctions<TagStoreItem> {
+}
+export interface TagStoreOptions extends Core.TagStoreOptions, CompositeStoreOptions<TagStoreItem> {
+    /**
+     * A callback that gets called when the
+     * [`value`](https://ariakit.org/reference/tag-provider#value) state
+     * changes.
+     */
+    setValue?: (value: TagStoreState["value"]) => void;
+    /**
+     * A callback that gets called when the
+     * [`values`](https://ariakit.org/reference/tag-provider#values) state
+     * changes.
+     */
+    setValues?: (values: TagStoreState["values"]) => void;
+}
+export interface TagStoreProps extends TagStoreOptions, Core.TagStoreProps {
+}
+export interface TagStore extends TagStoreFunctions, Store<Core.TagStore> {
+}

package/esm/tag/tag-store.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  useTagStore,
+  useTagStoreProps
+} from "../__chunks/QNNHZL3W.js";
+import "../__chunks/ZR5N62ZV.js";
+import "../__chunks/LGWSZOP2.js";
+import "../__chunks/PWUXK5IM.js";
+import "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import "../__chunks/4R3V3JGP.js";
+export {
+  useTagStore,
+  useTagStoreProps
+};

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import type { TagStore, TagStoreState } from "./tag-store.js";
+/**
+ * Renders the current
+ * [`value`](https://ariakit.org/reference/use-tag-store#value) state in
+ * the [tag store](https://ariakit.org/reference/use-tag-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.org/reference/tag-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the tag value in a custom way.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {3-5}
+ * <TagProvider>
+ *   <TagInput />
+ *   <TagValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </TagValue>
+ * </TagProvider>
+ * ```
+ */
+export declare function TagValue({ store, children }?: TagValueProps): ReactNode;
+export interface TagValueProps {
+    /**
+     * 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;
+    /**
+     * A function that gets called with the current value as an argument. It can
+     * be used to render the tag value in a custom way.
+     */
+    children?: (value: TagStoreState["value"]) => ReactNode;
+}

package/esm/tag/tag-value.js

@@ -0,0 +1,29 @@
+"use client";
+import {
+  useTagContext
+} from "../__chunks/WYDDZRWN.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/GUCZNEAD.js";
+import "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag-value.tsx
+import { invariant } from "@ariakit/core/utils/misc";
+function TagValue({ store, children } = {}) {
+  const context = useTagContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "TagValue must receive a `store` prop or be wrapped in a TagProvider component."
+  );
+  const value = store.useState("value");
+  if (children) {
+    return children(value);
+  }
+  return value;
+}
+export {
+  TagValue
+};

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

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import type { TagStore, TagStoreState } from "./tag-store.js";
+/**
+ * Renders the current
+ * [`values`](https://ariakit.org/reference/use-tag-store#values) state in the
+ * [tag store](https://ariakit.org/reference/use-tag-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.org/reference/tag-values#children)
+ * function that gets called with the current values as an argument. This can be
+ * used as an uncontrolled API to render
+ * [`Tag`](https://ariakit.org/reference/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {4-13}
+ * <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 TagValues({ store, children }?: TagValuesProps): ReactNode;
+export interface TagValuesProps {
+    /**
+     * 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;
+    /**
+     * A function that gets called with the current values as an argument. This
+     * can be used as an uncontrolled API to render
+     * [`Tag`](https://ariakit.org/reference/tag) components.
+     */
+    children?: (values: TagStoreState["values"]) => ReactNode;
+}

package/esm/tag/tag-values.js

@@ -0,0 +1,29 @@
+"use client";
+import {
+  useTagContext
+} from "../__chunks/WYDDZRWN.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/GUCZNEAD.js";
+import "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag-values.tsx
+import { invariant } from "@ariakit/core/utils/misc";
+function TagValues({ store, children } = {}) {
+  const context = useTagContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "TagValues must receive a `store` prop or be wrapped in a TagProvider component."
+  );
+  const values = store.useState("values");
+  if (children) {
+    return children(values);
+  }
+  return values;
+}
+export {
+  TagValues
+};

package/esm/tag/tag.d.ts

@@ -0,0 +1,74 @@
+import type { ElementType, KeyboardEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { CompositeItemOptions } from "../composite/composite-item.js";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+/**
+ * Returns props to create a `Tag` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTag();
+ * <Role.div {...props} />
+ * ```
+ */
+export declare const useTag: import("../utils/types.js").Hook<"div", TagOptions<"div">>;
+/**
+ * Renders a tag element inside a
+ * [`TagList`](https://ariakit.org/reference/tag-list) wrapper.
+ *
+ * The user can remove the tag by pressing `Backspace` or `Delete` keys when the
+ * tag is focused. The
+ * [`removeOnKeyPress`](https://ariakit.org/reference/tag#removeonkeypress) prop
+ * can be used to disable this behavior.
+ *
+ * When a printable key is pressed, the focus is automatically moved to the
+ * input element.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {7-10}
+ * <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 Tag: (props: TagProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest [`TagList`](https://ariakit.org/reference/tag-list)
+     * component's context will be used.
+     */
+    store?: TagStore;
+    /**
+     * The unique value of the tag. This is automatically rendered as the tag's
+     * content if no children are provided.
+     */
+    value: string;
+    /**
+     * Defines the behavior of the `Backspace` and `Delete` keys when the tag is
+     * focused. If `true`, the tag is removed. If it's a function, it's invoked
+     * with the key event and should return a boolean.
+     * @default true
+     */
+    removeOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLType>>;
+}
+export type TagProps<T extends ElementType = TagName> = Props<T, TagOptions<T>>;
+export {};

package/esm/tag/tag.js

@@ -0,0 +1,130 @@
+"use client";
+import {
+  useCompositeItem
+} from "../__chunks/VGORKDMQ.js";
+import "../__chunks/IFMAUEA7.js";
+import "../__chunks/PJ7ERAIM.js";
+import {
+  useTouchDevice
+} from "../__chunks/L7IM35RU.js";
+import {
+  TagRemoveIdContext,
+  TagValueContext,
+  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,
+  memo
+} from "../__chunks/GUCZNEAD.js";
+import "../__chunks/PWUXK5IM.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useId,
+  useWrapElement
+} from "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4R3V3JGP.js";
+
+// src/tag/tag.tsx
+import { useCallback, useState } from "react";
+import { invariant } from "@ariakit/core/utils/misc";
+import { isApple } from "@ariakit/core/utils/platform";
+import { jsx } from "react/jsx-runtime";
+var TagName = "div";
+var useTag = createHook(function useTag2(_a) {
+  var _b = _a, {
+    store,
+    value,
+    getItem: getItemProp,
+    removeOnKeyPress = true
+  } = _b, props = __objRest(_b, [
+    "store",
+    "value",
+    "getItem",
+    "removeOnKeyPress"
+  ]);
+  const context = useTagContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "Tag must be wrapped in a TagList component."
+  );
+  const id = useId(props.id);
+  const touchDevice = useTouchDevice();
+  const getItem = useCallback(
+    (item) => {
+      const nextItem = __spreadProps(__spreadValues({}, item), { value });
+      if (getItemProp) {
+        return getItemProp(nextItem);
+      }
+      return nextItem;
+    },
+    [value, getItemProp]
+  );
+  const onKeyDownProp = props.onKeyDown;
+  const removeOnKeyPressProp = useBooleanEvent(removeOnKeyPress);
+  const onKeyDown = useEvent((event) => {
+    onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+    if (event.defaultPrevented)
+      return;
+    const { inputElement } = store.getState();
+    const isBackspace = event.key === "Backspace";
+    const isRemoveKey = isBackspace || event.key === "Delete";
+    if (isRemoveKey && removeOnKeyPressProp(event)) {
+      event.preventDefault();
+      store.removeValue(value);
+      const nextId = isBackspace ? store.previous() || store.next() : store.next();
+      store.move(nextId);
+    }
+    const isPrintableKey = !event.ctrlKey && !event.metaKey && event.key.length === 1;
+    const pc = !isApple();
+    const v = event.key === "v" || event.key === "V";
+    const mod = pc ? event.ctrlKey : event.metaKey;
+    const isPaste = mod && v;
+    if (isPrintableKey || isPaste) {
+      inputElement == null ? void 0 : inputElement.focus();
+    }
+  });
+  const [removeId, setRemoveId] = useState();
+  props = useWrapElement(
+    props,
+    (element) => /* @__PURE__ */ jsx(TagValueContext.Provider, { value, children: /* @__PURE__ */ jsx(TagRemoveIdContext.Provider, { value: setRemoveId, children: element }) }),
+    [value]
+  );
+  props = __spreadProps(__spreadValues({
+    id,
+    role: !touchDevice ? "option" : "listitem",
+    children: value,
+    "aria-describedby": removeId
+  }, props), {
+    onKeyDown
+  });
+  props = useCompositeItem(__spreadProps(__spreadValues({
+    store
+  }, props), {
+    getItem
+  }));
+  return props;
+});
+var Tag = memo(
+  forwardRef(function Tag2(props) {
+    const htmlProps = useTag(props);
+    return createElement(TagName, htmlProps);
+  })
+);
+export {
+  Tag,
+  useTag
+};

package/esm/tag/utils.d.ts

@@ -0,0 +1 @@
+export declare function useTouchDevice(): boolean;

package/esm/tag/utils.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  useTouchDevice
+} from "../__chunks/L7IM35RU.js";
+import "../__chunks/4R3V3JGP.js";
+export {
+  useTouchDevice
+};

package/esm/toolbar/toolbar-container.js

@@ -4,10 +4,10 @@ import {
 } from "../__chunks/LQCUPYIB.js";
 import {
   useToolbarItem
-} from "../__chunks/XK6CE2M5.js";
-import "../__chunks/ONUY4D7O.js";
-import "../__chunks/PJ7ERAIM.js";
+} from "../__chunks/UKDZLPKH.js";
+import "../__chunks/VGORKDMQ.js";
 import "../__chunks/IFMAUEA7.js";
+import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/3IEDWLST.js";
 import {
   useToolbarContext

package/esm/toolbar/toolbar-input.d.ts

@@ -1,5 +1,4 @@
 import type { ElementType } from "react";
-import type { CompositeInputOptions } from "../composite/composite-input.js";
 import type { Props } from "../utils/types.js";
 import type { ToolbarItemOptions } from "./toolbar-item.js";
 declare const TagName = "input";
@@ -7,6 +6,7 @@ type TagName = typeof TagName;
 /**
  * Returns props to create a `ToolbarInput` component.
  * @see https://ariakit.org/components/toolbar
+ * @deprecated Use `useToolbarItem` instead.
  * @example
  * ```jsx
  * const store = useToolbarStore();
@@ -21,6 +21,7 @@ export declare const useToolbarInput: import("../utils/types.js").Hook<"input",
  * Renders a text input as a toolbar item, maintaining arrow key navigation on
  * the toolbar.
  * @see https://ariakit.org/components/toolbar
+ * @deprecated Use `<ToolbarItem render={<input />}>` instead.
  * @example
  * ```jsx {2}
  * <Toolbar>
@@ -29,7 +30,7 @@ export declare const useToolbarInput: import("../utils/types.js").Hook<"input",
  * ```
  */
 export declare const ToolbarInput: (props: ToolbarInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface ToolbarInputOptions<T extends ElementType = TagName> extends ToolbarItemOptions<T>, Omit<CompositeInputOptions<T>, "store"> {
+export interface ToolbarInputOptions<T extends ElementType = TagName> extends ToolbarItemOptions<T> {
 }
 export type ToolbarInputProps<T extends ElementType = TagName> = Props<T, ToolbarInputOptions<T>>;
 export {};

package/esm/toolbar/toolbar-input.js

@@ -1,13 +1,10 @@
 "use client";
-import {
-  useCompositeInput
-} from "../__chunks/RPGNBKKU.js";
 import {
   useToolbarItem
-} from "../__chunks/XK6CE2M5.js";
-import "../__chunks/ONUY4D7O.js";
-import "../__chunks/PJ7ERAIM.js";
+} from "../__chunks/UKDZLPKH.js";
+import "../__chunks/VGORKDMQ.js";
 import "../__chunks/IFMAUEA7.js";
+import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/3IEDWLST.js";
 import {
   useToolbarContext
@@ -37,7 +34,6 @@ var useToolbarInput = createHook(
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useToolbarContext();
     store = store || context;
-    props = useCompositeInput(__spreadValues({ store }, props));
     props = useToolbarItem(__spreadValues({ store }, props));
     return props;
   }

package/esm/toolbar/toolbar-item.js

@@ -2,10 +2,10 @@
 import {
   ToolbarItem,
   useToolbarItem
-} from "../__chunks/XK6CE2M5.js";
-import "../__chunks/ONUY4D7O.js";
-import "../__chunks/PJ7ERAIM.js";
+} from "../__chunks/UKDZLPKH.js";
+import "../__chunks/VGORKDMQ.js";
 import "../__chunks/IFMAUEA7.js";
+import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/3IEDWLST.js";
 import "../__chunks/766APSLG.js";
 import "../__chunks/QFI3MCMR.js";