@ariakit/react-core 0.3.14 → 0.4.1

package/esm/select/select.js

@@ -1,36 +1,36 @@
 "use client";
 import {
   usePopoverDisclosure
-} from "../__chunks/4ZEZYKUR.js";
-import "../__chunks/H3TG2CZP.js";
-import "../__chunks/BHEJ6NUH.js";
-import "../__chunks/JCH6MLL2.js";
-import "../__chunks/VDNZBO4W.js";
+} from "../__chunks/Z72LDQLY.js";
+import "../__chunks/5SF76VVA.js";
+import "../__chunks/AFNONYRE.js";
+import "../__chunks/NLT7LY5Y.js";
+import "../__chunks/JJ3MV4KB.js";
 import {
   SelectArrow
-} from "../__chunks/NUNVG4IK.js";
-import "../__chunks/JHO32H4J.js";
+} from "../__chunks/6PC3IJNK.js";
+import "../__chunks/HA4U57LH.js";
 import {
   useCompositeTypeahead
-} from "../__chunks/346FK57L.js";
+} from "../__chunks/DMSZFK7W.js";
 import {
   SelectScopedContextProvider,
   useSelectProviderContext
-} from "../__chunks/5HVNGX6D.js";
-import "../__chunks/NWCBQ4CV.js";
+} from "../__chunks/TKSBJDO3.js";
+import "../__chunks/KSZPJCUA.js";
 import "../__chunks/3IEDWLST.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/KK7H3W2B.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/WAZE6NXP.js";
 import "../__chunks/SHA3WOPI.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -51,6 +51,7 @@ import { getPopupRole } from "@ariakit/core/utils/dom";
 import { queueBeforeEvent } from "@ariakit/core/utils/events";
 import { invariant } from "@ariakit/core/utils/misc";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TagName = "button";
 function getSelectedValues(select) {
   return Array.from(select.selectedOptions).map((option) => option.value);
 }
@@ -73,230 +74,223 @@ function nextWithValue(store, next) {
     return nextItem == null ? void 0 : nextItem.id;
   };
 }
-var useSelect = createHook(
-  (_a) => {
-    var _b = _a, {
-      store,
-      name,
-      form,
-      required,
-      showOnKeyDown = true,
-      moveOnKeyDown = true,
-      toggleOnClick = false,
-      toggleOnPress = !toggleOnClick
-    } = _b, props = __objRest(_b, [
-      "store",
-      "name",
-      "form",
-      "required",
-      "showOnKeyDown",
-      "moveOnKeyDown",
-      "toggleOnClick",
-      "toggleOnPress"
-    ]);
-    const context = useSelectProviderContext();
-    store = store || context;
-    invariant(
-      store,
-      process.env.NODE_ENV !== "production" && "Select must receive a `store` prop or be wrapped in a SelectProvider component."
-    );
-    toggleOnPress = toggleOnClick ? false : toggleOnPress;
-    const onKeyDownProp = props.onKeyDown;
-    const showOnKeyDownProp = useBooleanEvent(showOnKeyDown);
-    const moveOnKeyDownProp = useBooleanEvent(moveOnKeyDown);
-    const toggleOnPressProp = useBooleanEvent(toggleOnPress);
-    const placement = store.useState("placement");
-    const dir = placement.split("-")[0];
-    const value = store.useState("value");
-    const multiSelectable = Array.isArray(value);
-    const onKeyDown = useEvent((event) => {
-      var _a2;
-      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
-      if (event.defaultPrevented)
-        return;
-      if (!store)
-        return;
-      const { orientation, items: items2, activeId } = store.getState();
-      if (event.key === " " || event.key === "Enter") {
-        if (toggleOnPressProp(event)) {
-          event.preventDefault();
-          store.toggle();
-        }
-      }
-      const isVertical = orientation !== "horizontal";
-      const isHorizontal = orientation !== "vertical";
-      const isGrid = !!((_a2 = items2.find(
-        (item) => !item.disabled && item.value != null
-      )) == null ? void 0 : _a2.rowId);
-      const moveKeyMap = {
-        ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up),
-        ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next),
-        ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down),
-        ArrowLeft: (isGrid || isHorizontal) && nextWithValue(store, store.previous)
-      };
-      const getId = moveKeyMap[event.key];
-      if (getId && moveOnKeyDownProp(event)) {
-        event.preventDefault();
-        store.move(getId());
-      }
-      const isTopOrBottom = dir === "top" || dir === "bottom";
-      const isLeft = dir === "left";
-      const isRight = dir === "right";
-      const canShowKeyMap = {
-        ArrowDown: isTopOrBottom,
-        ArrowUp: isTopOrBottom,
-        ArrowLeft: isLeft,
-        ArrowRight: isRight
-      };
-      const canShow = canShowKeyMap[event.key];
-      if (canShow && showOnKeyDownProp(event)) {
+var useSelect = createHook(function useSelect2(_a) {
+  var _b = _a, {
+    store,
+    name,
+    form,
+    required,
+    showOnKeyDown = true,
+    moveOnKeyDown = true,
+    toggleOnClick = false,
+    toggleOnPress = !toggleOnClick
+  } = _b, props = __objRest(_b, [
+    "store",
+    "name",
+    "form",
+    "required",
+    "showOnKeyDown",
+    "moveOnKeyDown",
+    "toggleOnClick",
+    "toggleOnPress"
+  ]);
+  const context = useSelectProviderContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "Select must receive a `store` prop or be wrapped in a SelectProvider component."
+  );
+  toggleOnPress = toggleOnClick ? false : toggleOnPress;
+  const onKeyDownProp = props.onKeyDown;
+  const showOnKeyDownProp = useBooleanEvent(showOnKeyDown);
+  const moveOnKeyDownProp = useBooleanEvent(moveOnKeyDown);
+  const toggleOnPressProp = useBooleanEvent(toggleOnPress);
+  const placement = store.useState("placement");
+  const dir = placement.split("-")[0];
+  const value = store.useState("value");
+  const multiSelectable = Array.isArray(value);
+  const onKeyDown = useEvent((event) => {
+    var _a2;
+    onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (!store)
+      return;
+    const { orientation, items: items2, activeId } = store.getState();
+    if (event.key === " " || event.key === "Enter") {
+      if (toggleOnPressProp(event)) {
         event.preventDefault();
-        store.move(activeId);
-        queueBeforeEvent(event.currentTarget, "keyup", store.show);
+        store.toggle();
       }
+    }
+    const isVertical = orientation !== "horizontal";
+    const isHorizontal = orientation !== "vertical";
+    const isGrid = !!((_a2 = items2.find((item) => !item.disabled && item.value != null)) == null ? void 0 : _a2.rowId);
+    const moveKeyMap = {
+      ArrowUp: (isGrid || isVertical) && nextWithValue(store, store.up),
+      ArrowRight: (isGrid || isHorizontal) && nextWithValue(store, store.next),
+      ArrowDown: (isGrid || isVertical) && nextWithValue(store, store.down),
+      ArrowLeft: (isGrid || isHorizontal) && nextWithValue(store, store.previous)
+    };
+    const getId = moveKeyMap[event.key];
+    if (getId && moveOnKeyDownProp(event)) {
+      event.preventDefault();
+      store.move(getId());
+    }
+    const isTopOrBottom = dir === "top" || dir === "bottom";
+    const isLeft = dir === "left";
+    const isRight = dir === "right";
+    const canShowKeyMap = {
+      ArrowDown: isTopOrBottom,
+      ArrowUp: isTopOrBottom,
+      ArrowLeft: isLeft,
+      ArrowRight: isRight
+    };
+    const canShow = canShowKeyMap[event.key];
+    if (canShow && showOnKeyDownProp(event)) {
+      event.preventDefault();
+      store.move(activeId);
+      queueBeforeEvent(event.currentTarget, "keyup", store.show);
+    }
+  });
+  const onMouseDownProp = props.onMouseDown;
+  const onMouseDown = useEvent((event) => {
+    onMouseDownProp == null ? void 0 : onMouseDownProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (event.button)
+      return;
+    if (event.ctrlKey)
+      return;
+    if (!toggleOnPressProp(event))
+      return;
+    const element = event.currentTarget;
+    queueBeforeEvent(element, "focusin", () => {
+      store == null ? void 0 : store.setDisclosureElement(element);
+      store == null ? void 0 : store.toggle();
     });
-    const onMouseDownProp = props.onMouseDown;
-    const onMouseDown = useEvent((event) => {
-      onMouseDownProp == null ? void 0 : onMouseDownProp(event);
-      if (event.defaultPrevented)
-        return;
-      if (event.button)
-        return;
-      if (event.ctrlKey)
-        return;
-      if (!toggleOnPressProp(event))
-        return;
-      const element = event.currentTarget;
-      queueBeforeEvent(element, "focusin", () => {
-        store == null ? void 0 : store.setDisclosureElement(element);
-        store == null ? void 0 : store.toggle();
-      });
-    });
-    props = useWrapElement(
-      props,
-      (element) => /* @__PURE__ */ jsx(SelectScopedContextProvider, { value: store, children: element }),
-      [store]
-    );
-    const [autofill, setAutofill] = useState(false);
-    const nativeSelectChangedRef = useRef(false);
-    useEffect(() => {
-      const nativeSelectChanged = nativeSelectChangedRef.current;
-      nativeSelectChangedRef.current = false;
-      if (nativeSelectChanged)
-        return;
-      setAutofill(false);
-    }, [value]);
-    const labelId = store.useState((state) => {
-      var _a2;
-      return (_a2 = state.labelElement) == null ? void 0 : _a2.id;
-    });
-    const label = props["aria-label"];
-    const labelledBy = props["aria-labelledby"] || labelId;
-    const items = store.useState((state) => {
+  });
+  props = useWrapElement(
+    props,
+    (element) => /* @__PURE__ */ jsx(SelectScopedContextProvider, { value: store, children: element }),
+    [store]
+  );
+  const [autofill, setAutofill] = useState(false);
+  const nativeSelectChangedRef = useRef(false);
+  useEffect(() => {
+    const nativeSelectChanged = nativeSelectChangedRef.current;
+    nativeSelectChangedRef.current = false;
+    if (nativeSelectChanged)
+      return;
+    setAutofill(false);
+  }, [value]);
+  const labelId = store.useState((state) => {
+    var _a2;
+    return (_a2 = state.labelElement) == null ? void 0 : _a2.id;
+  });
+  const label = props["aria-label"];
+  const labelledBy = props["aria-labelledby"] || labelId;
+  const items = store.useState((state) => {
+    if (!name)
+      return;
+    return state.items;
+  });
+  const values = useMemo(() => {
+    return [...new Set(items == null ? void 0 : items.map((i) => i.value).filter((v) => v != null))];
+  }, [items]);
+  props = useWrapElement(
+    props,
+    (element) => {
       if (!name)
-        return;
-      return state.items;
-    });
-    const values = useMemo(() => {
-      return [...new Set(items == null ? void 0 : items.map((i) => i.value).filter((v) => v != null))];
-    }, [items]);
-    props = useWrapElement(
-      props,
-      (element) => {
-        if (!name)
-          return element;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              style: {
-                border: 0,
-                clip: "rect(0 0 0 0)",
-                height: "1px",
-                margin: "-1px",
-                overflow: "hidden",
-                padding: 0,
-                position: "absolute",
-                whiteSpace: "nowrap",
-                width: "1px"
-              },
-              tabIndex: -1,
-              "aria-hidden": true,
-              "aria-label": label,
-              "aria-labelledby": labelledBy,
-              name,
-              form,
-              required,
-              value,
-              multiple: multiSelectable,
-              onFocus: () => {
-                var _a2;
-                return (_a2 = store == null ? void 0 : store.getState().selectElement) == null ? void 0 : _a2.focus();
-              },
-              onChange: (event) => {
-                nativeSelectChangedRef.current = true;
-                setAutofill(true);
-                store == null ? void 0 : store.setValue(
-                  multiSelectable ? getSelectedValues(event.target) : event.target.value
-                );
-              },
-              children: [
-                toArray(value).map((value2) => {
-                  if (value2 == null)
-                    return null;
-                  if (values.includes(value2))
-                    return null;
-                  return /* @__PURE__ */ jsx("option", { value: value2, children: value2 }, value2);
-                }),
-                values.map((value2) => /* @__PURE__ */ jsx("option", { value: value2, children: value2 }, value2))
-              ]
-            }
-          ),
-          element
-        ] });
-      },
-      [
-        store,
-        label,
-        labelledBy,
-        name,
-        form,
-        required,
-        value,
-        multiSelectable,
-        values
-      ]
-    );
-    const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+        return element;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            style: {
+              border: 0,
+              clip: "rect(0 0 0 0)",
+              height: "1px",
+              margin: "-1px",
+              overflow: "hidden",
+              padding: 0,
+              position: "absolute",
+              whiteSpace: "nowrap",
+              width: "1px"
+            },
+            tabIndex: -1,
+            "aria-hidden": true,
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+            name,
+            form,
+            required,
+            value,
+            multiple: multiSelectable,
+            onFocus: () => {
+              var _a2;
+              return (_a2 = store == null ? void 0 : store.getState().selectElement) == null ? void 0 : _a2.focus();
+            },
+            onChange: (event) => {
+              nativeSelectChangedRef.current = true;
+              setAutofill(true);
+              store == null ? void 0 : store.setValue(
+                multiSelectable ? getSelectedValues(event.target) : event.target.value
+              );
+            },
+            children: [
+              toArray(value).map((value2) => {
+                if (value2 == null)
+                  return null;
+                if (values.includes(value2))
+                  return null;
+                return /* @__PURE__ */ jsx("option", { value: value2, children: value2 }, value2);
+              }),
+              values.map((value2) => /* @__PURE__ */ jsx("option", { value: value2, children: value2 }, value2))
+            ]
+          }
+        ),
+        element
+      ] });
+    },
+    [
+      store,
+      label,
+      labelledBy,
+      name,
+      form,
+      required,
       value,
-      /* @__PURE__ */ jsx(SelectArrow, {})
-    ] });
-    const contentElement = store.useState("contentElement");
-    props = __spreadProps(__spreadValues({
-      role: "combobox",
-      "aria-autocomplete": "none",
-      "aria-labelledby": labelId,
-      "aria-haspopup": getPopupRole(contentElement, "listbox"),
-      "data-autofill": autofill ? "" : void 0,
-      "data-name": name,
-      children
-    }, props), {
-      ref: useMergeRefs(store.setSelectElement, props.ref),
-      onKeyDown,
-      onMouseDown
-    });
-    props = usePopoverDisclosure(__spreadValues({ store, toggleOnClick }, props));
-    props = useCompositeTypeahead(__spreadValues({ store }, props));
-    return props;
-  }
-);
-var Select = createComponent((props) => {
+      multiSelectable,
+      values
+    ]
+  );
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    value,
+    /* @__PURE__ */ jsx(SelectArrow, {})
+  ] });
+  const contentElement = store.useState("contentElement");
+  props = __spreadProps(__spreadValues({
+    role: "combobox",
+    "aria-autocomplete": "none",
+    "aria-labelledby": labelId,
+    "aria-haspopup": getPopupRole(contentElement, "listbox"),
+    "data-autofill": autofill || void 0,
+    "data-name": name,
+    children
+  }, props), {
+    ref: useMergeRefs(store.setSelectElement, props.ref),
+    onKeyDown,
+    onMouseDown
+  });
+  props = usePopoverDisclosure(__spreadValues({ store, toggleOnClick }, props));
+  props = useCompositeTypeahead(__spreadValues({ store }, props));
+  return props;
+});
+var Select = forwardRef(function Select2(props) {
   const htmlProps = useSelect(props);
-  return createElement("button", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Select.displayName = "Select";
-}
 export {
   Select,
   useSelect

package/esm/separator/separator.d.ts

@@ -1,4 +1,7 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "hr";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Separator` component.
  * @see https://ariakit.org/components/separator
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useSeparator: import("../utils/types.js").Hook<SeparatorOptions<"hr">>;
+export declare const useSeparator: import("../utils/types.js").Hook<"hr", SeparatorOptions<"hr">>;
 /**
  * Renders a separator element.
  * @see https://ariakit.org/components/separator
@@ -17,12 +20,13 @@ export declare const useSeparator: import("../utils/types.js").Hook<SeparatorOpt
  * <Separator orientation="horizontal" />
  * ```
  */
-export declare const Separator: import("../utils/types.js").Component<SeparatorOptions<"hr">>;
-export interface SeparatorOptions<T extends As = "hr"> extends Options<T> {
+export declare const Separator: (props: SeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SeparatorOptions<_T extends ElementType = TagName> extends Options {
     /**
      * The orientation of the separator.
      * @default "horizontal"
      */
     orientation?: "horizontal" | "vertical";
 }
-export type SeparatorProps<T extends As = "hr"> = Props<SeparatorOptions<T>>;
+export type SeparatorProps<T extends ElementType = TagName> = Props<T, SeparatorOptions<T>>;
+export {};

package/esm/separator/separator.js

@@ -2,8 +2,8 @@
 import {
   Separator,
   useSeparator
-} from "../__chunks/YZEJGRDQ.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/SDQLXKEV.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/tab/tab-context.js

@@ -5,10 +5,10 @@ import {
   useTabContext,
   useTabProviderContext,
   useTabScopedContext
-} from "../__chunks/4B73HROV.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/32VQXIYR.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CompositeOptions } from "../composite/composite.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { TabStore } from "./tab-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `TabList` component.
  * @see https://ariakit.org/components/tab
@@ -16,7 +19,7 @@ import type { TabStore } from "./tab-store.js";
  * <TabPanel store={store}>Panel 2</TabPanel>
  * ```
  */
-export declare const useTabList: import("../utils/types.js").Hook<TabListOptions<"div">>;
+export declare const useTabList: import("../utils/types.js").Hook<"div", TabListOptions<"div">>;
 /**
  * Renders a composite tab list wrapper for
  * [`Tab`](https://ariakit.org/reference/tab) elements.
@@ -33,8 +36,8 @@ export declare const useTabList: import("../utils/types.js").Hook<TabListOptions
  * </TabProvider>
  * ```
  */
-export declare const TabList: import("../utils/types.js").Component<TabListOptions<"div">>;
-export interface TabListOptions<T extends As = "div"> extends CompositeOptions<T> {
+export declare const TabList: (props: TabListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TabListOptions<T extends ElementType = TagName> extends CompositeOptions<T> {
     /**
      * Object returned by the
      * [`useTabStore`](https://ariakit.org/reference/use-tab-store) hook. If not
@@ -44,4 +47,5 @@ export interface TabListOptions<T extends As = "div"> extends CompositeOptions<T
      */
     store?: TabStore;
 }
-export type TabListProps<T extends As = "div"> = Props<TabListOptions<T>>;
+export type TabListProps<T extends ElementType = TagName> = Props<T, TabListOptions<T>>;
+export {};