@ariakit/react-core 0.0.1 → 0.1.1

package/esm/select/select.js

@@ -0,0 +1,248 @@
+import {
+  usePopoverDisclosure
+} from "../__chunks/JKSMOXA4.js";
+import "../__chunks/NRA7DRSD.js";
+import "../__chunks/57UTLR6J.js";
+import "../__chunks/I4MLEPTM.js";
+import {
+  SelectArrow
+} from "../__chunks/A2DUDEP2.js";
+import "../__chunks/KHFKAEA6.js";
+import {
+  useCompositeTypeahead
+} from "../__chunks/6OCAIYRY.js";
+import {
+  SelectContext
+} from "../__chunks/EEVSGAZW.js";
+import "../__chunks/6GS36SYX.js";
+import "../__chunks/RNWB46DZ.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  VisuallyHidden
+} from "../__chunks/SDULECC7.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useBooleanEvent,
+  useEvent,
+  useForkRef,
+  useWrapElement
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/select/select.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { getPopupRole } from "@ariakit/core/utils/dom";
+import { queueBeforeEvent } from "@ariakit/core/utils/events";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function getSelectedValues(select) {
+  return Array.from(select.selectedOptions).map((option) => option.value);
+}
+function nextWithValue(store, next) {
+  return () => {
+    const nextId = next();
+    if (!nextId)
+      return;
+    let i = 0;
+    let nextItem = store.item(nextId);
+    const firstItem = nextItem;
+    while (nextItem && nextItem.value == null) {
+      const nextId2 = next(++i);
+      if (!nextId2)
+        return;
+      nextItem = store.item(nextId2);
+      if (nextItem === firstItem)
+        break;
+    }
+    return nextItem?.id;
+  };
+}
+var useSelect = createHook(
+  ({
+    store,
+    name,
+    form,
+    required,
+    showOnKeyDown = true,
+    moveOnKeyDown = true,
+    toggleOnClick = false,
+    toggleOnPress = !toggleOnClick,
+    ...props
+  }) => {
+    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) => {
+      onKeyDownProp?.(event);
+      if (event.defaultPrevented)
+        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 = !!items2.find(
+        (item) => !item.disabled && item.value != null
+      )?.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.show();
+        store.move(activeId);
+      }
+    });
+    const onMouseDownProp = props.onMouseDown;
+    const onMouseDown = useEvent((event) => {
+      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.setDisclosureElement(element);
+        store.toggle();
+      });
+    });
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(SelectContext.Provider, { 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) => state.labelElement?.id);
+    const label = props["aria-label"];
+    const labelledBy = props["aria-labelledby"] || labelId;
+    const items = store.useState("items");
+    const values = useMemo(
+      // Filter out items without value and duplicate values.
+      () => [...new Set(items.map((i) => i.value).filter((v) => v != null))],
+      [items]
+    );
+    props = useWrapElement(
+      props,
+      (element) => {
+        if (!name)
+          return element;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            VisuallyHidden,
+            {
+              as: "select",
+              tabIndex: -1,
+              "aria-hidden": true,
+              "aria-label": label,
+              "aria-labelledby": labelledBy,
+              name,
+              form,
+              required,
+              value,
+              multiple: multiSelectable,
+              onFocus: () => store.getState().selectElement?.focus(),
+              onChange: (event) => {
+                nativeSelectChangedRef.current = true;
+                setAutofill(true);
+                store.setValue(
+                  multiSelectable ? getSelectedValues(event.target) : event.target.value
+                );
+              },
+              children: 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: [
+      value,
+      /* @__PURE__ */ jsx(SelectArrow, {})
+    ] });
+    const contentElement = store.useState("contentElement");
+    props = {
+      role: "combobox",
+      "aria-autocomplete": "none",
+      "aria-labelledby": labelId,
+      "aria-haspopup": getPopupRole(contentElement, "listbox"),
+      "data-autofill": autofill ? "" : void 0,
+      "data-name": name,
+      children,
+      ...props,
+      ref: useForkRef(store.setSelectElement, props.ref),
+      onKeyDown,
+      onMouseDown
+    };
+    props = usePopoverDisclosure({ store, toggleOnClick, ...props });
+    props = useCompositeTypeahead({ store, ...props });
+    return props;
+  }
+);
+var Select = createComponent((props) => {
+  const htmlProps = useSelect(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Select.displayName = "Select";
+}
+export {
+  Select,
+  useSelect
+};

package/esm/separator/separator.d.ts

@@ -0,0 +1,28 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `Separator` component.
+ * @see https://ariakit.org/components/separator
+ * @example
+ * ```jsx
+ * const props = useSeparator({ orientation: "horizontal" });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useSeparator: import("../utils/types.js").Hook<SeparatorOptions<"hr">>;
+/**
+ * Renders a separator element.
+ * @see https://ariakit.org/components/separator
+ * @example
+ * ```jsx
+ * <Separator orientation="horizontal" />
+ * ```
+ */
+export declare const Separator: import("../utils/types.js").Component<SeparatorOptions<"hr">>;
+export interface SeparatorOptions<T extends As = "hr"> extends Options<T> {
+    /**
+     * The orientation of the separator.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+}
+export type SeparatorProps<T extends As = "hr"> = Props<SeparatorOptions<T>>;

package/esm/separator/separator.js

@@ -0,0 +1,9 @@
+import {
+  Separator,
+  useSeparator
+} from "../__chunks/HOVZF3TA.js";
+import "../__chunks/JE5NWDDX.js";
+export {
+  Separator,
+  useSeparator
+};

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

@@ -0,0 +1,2 @@
+import type { TabStore } from "./tab-store.js";
+export declare const TabContext: import("react").Context<TabStore | undefined>;

package/esm/tab/tab-context.js

@@ -0,0 +1,6 @@
+import {
+  TabContext
+} from "../__chunks/UZKBEGMB.js";
+export {
+  TabContext
+};

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

@@ -0,0 +1,41 @@
+import type { CompositeOptions } from "../composite/composite.js";
+import type { As, Props } from "../utils/types.js";
+import type { TabStore } from "./tab-store.js";
+/**
+ * Returns props to create a `TabList` component.
+ * @see https://ariakit.org/components/tab
+ * @example
+ * ```jsx
+ * const store = useTabStore();
+ * const props = useTabList({ store });
+ * <Role {...props}>
+ *   <Tab>Tab 1</Tab>
+ *   <Tab>Tab 2</Tab>
+ * </Role>
+ * <TabPanel store={store}>Panel 1</TabPanel>
+ * <TabPanel store={store}>Panel 2</TabPanel>
+ * ```
+ */
+export declare const useTabList: import("../utils/types.js").Hook<TabListOptions<"div">>;
+/**
+ * Renders a tab list element.
+ * @see https://ariakit.org/components/tab
+ * @example
+ * ```jsx
+ * const tab = useTabStore();
+ * <TabList store={tab}>
+ *   <Tab>Tab 1</Tab>
+ *   <Tab>Tab 2</Tab>
+ * </TabList>
+ * <TabPanel store={tab}>Panel 1</TabPanel>
+ * <TabPanel store={tab}>Panel 2</TabPanel>
+ * ```
+ */
+export declare const TabList: import("../utils/types.js").Component<TabListOptions<"div">>;
+export interface TabListOptions<T extends As = "div"> extends CompositeOptions<T> {
+    /**
+     * Object returned by the `useTabStore` hook.
+     */
+    store: TabStore;
+}
+export type TabListProps<T extends As = "div"> = Props<TabListOptions<T>>;

package/esm/tab/tab-list.js

@@ -0,0 +1,49 @@
+import {
+  TabContext
+} from "../__chunks/UZKBEGMB.js";
+import {
+  useComposite
+} from "../__chunks/FXC76SFN.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useWrapElement
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/tab/tab-list.tsx
+import { jsx } from "react/jsx-runtime";
+var useTabList = createHook(({ store, ...props }) => {
+  const orientation = store.useState(
+    (state) => state.orientation === "both" ? void 0 : state.orientation
+  );
+  props = useWrapElement(
+    props,
+    (element) => /* @__PURE__ */ jsx(TabContext.Provider, { value: store, children: element }),
+    [store]
+  );
+  props = {
+    role: "tablist",
+    "aria-orientation": orientation,
+    ...props
+  };
+  props = useComposite({ store, ...props });
+  return props;
+});
+var TabList = createComponent((props) => {
+  const htmlProps = useTabList(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  TabList.displayName = "TabList";
+}
+export {
+  TabList,
+  useTabList
+};

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

@@ -0,0 +1,46 @@
+import type { CollectionItemOptions } from "../collection/collection-item.js";
+import type { DisclosureContentOptions } from "../disclosure/disclosure-content.js";
+import type { FocusableOptions } from "../focusable/focusable.js";
+import type { As, Props } from "../utils/types.js";
+import type { TabStore } from "./tab-store.js";
+/**
+ * Returns props to create a `TabPanel` component.
+ * @see https://ariakit.org/components/tab
+ * @example
+ * ```jsx
+ * const store = useTabStore();
+ * const props = useTabPanel({ store });
+ * <TabList store={store}>
+ *   <Tab>Tab 1</Tab>
+ * </TabList>
+ * <Role {...props}>Panel 1</Role>
+ * ```
+ */
+export declare const useTabPanel: import("../utils/types.js").Hook<TabPanelOptions<"div">>;
+/**
+ * Renders a tab panel element.
+ * @see https://ariakit.org/components/tab
+ * @example
+ * ```jsx
+ * const tab = useTabStore();
+ * <TabList store={tab}>
+ *   <Tab>Tab 1</Tab>
+ *   <Tab>Tab 2</Tab>
+ * </TabList>
+ * <TabPanel store={tab}>Panel 1</TabPanel>
+ * <TabPanel store={tab}>Panel 2</TabPanel>
+ * ```
+ */
+export declare const TabPanel: import("../utils/types.js").Component<TabPanelOptions<"div">>;
+export interface TabPanelOptions<T extends As = "div"> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store"> {
+    /**
+     * Object returned by the `useTabStore` hook.
+     */
+    store: TabStore;
+    /**
+     * The id of the tab that controls this panel. By default, this value will
+     * be inferred based on the order of the tabs and the panels.
+     */
+    tabId?: string | null;
+}
+export type TabPanelProps<T extends As = "div"> = Props<TabPanelOptions<T>>;

package/esm/tab/tab-panel.js

@@ -0,0 +1,81 @@
+import {
+  useCollectionItem
+} from "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import {
+  useFocusable
+} from "../__chunks/5TGAWEHD.js";
+import {
+  useDisclosureContent
+} from "../__chunks/FFRIGW5T.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useDisclosureStore
+} from "../__chunks/OXIHLN45.js";
+import "../__chunks/6DAEYZ43.js";
+import {
+  useForkRef,
+  useId
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/tab/tab-panel.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getAllTabbableIn } from "@ariakit/core/utils/focus";
+var useTabPanel = createHook(
+  ({ store, tabId: tabIdProp, getItem: getItemProp, ...props }) => {
+    const ref = useRef(null);
+    const id = useId(props.id);
+    const [hasTabbableChildren, setHasTabbableChildren] = useState(false);
+    useEffect(() => {
+      const element = ref.current;
+      if (!element)
+        return;
+      const tabbable = getAllTabbableIn(element);
+      setHasTabbableChildren(!!tabbable.length);
+    }, []);
+    const getItem = useCallback(
+      (item) => {
+        const nextItem = { ...item, id: id || item.id, tabId: tabIdProp };
+        if (getItemProp) {
+          return getItemProp(nextItem);
+        }
+        return nextItem;
+      },
+      [id, tabIdProp, getItemProp]
+    );
+    const tabId = store.panels.useState(
+      () => tabIdProp || store.panels.item(id)?.tabId
+    );
+    const open = store.useState(
+      (state) => !!tabId && state.selectedId === tabId
+    );
+    props = {
+      id,
+      role: "tabpanel",
+      "aria-labelledby": tabId || void 0,
+      ...props,
+      ref: useForkRef(ref, props.ref)
+    };
+    const disclosure = useDisclosureStore({ open });
+    props = useFocusable({ focusable: !hasTabbableChildren, ...props });
+    props = useDisclosureContent({ store: disclosure, ...props });
+    props = useCollectionItem({ store: store.panels, ...props, getItem });
+    return props;
+  }
+);
+var TabPanel = createComponent((props) => {
+  const htmlProps = useTabPanel(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  TabPanel.displayName = "TabPanel";
+}
+export {
+  TabPanel,
+  useTabPanel
+};

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

@@ -0,0 +1,60 @@
+import * as Core from "@ariakit/core/tab/tab-store";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { Store } from "../utils/store.js";
+type Item = Core.TabStoreItem;
+export declare function useTabStoreOptions(props: TabStoreProps): Partial<import("../collection/collection-store.js").CollectionStoreOptions<{
+    id: string;
+    element?: HTMLElement | null | undefined;
+} & {
+    rowId?: string | undefined;
+    disabled?: boolean | undefined;
+    children?: string | undefined;
+} & {
+    dimmed?: boolean | undefined;
+}>>;
+export declare function useTabStoreProps<T extends Store<Core.TabStore>>(store: T, props: TabStoreProps): T & {
+    panels: Store<import("@ariakit/core/collection/collection-store").CollectionStore<{
+        id: string;
+        element?: HTMLElement | null | undefined;
+    } & {
+        tabId?: string | null | undefined;
+    }>>;
+};
+/**
+ * Creates a tab store.
+ * @see https://ariakit.org/components/tab
+ * @example
+ * ```jsx
+ * const tab = useTabStore();
+ * <TabList store={tab}>
+ *   <Tab>Tab 1</Tab>
+ *   <Tab>Tab 2</Tab>
+ * </TabList>
+ * <TabPanel store={tab}>Panel 1</TabPanel>
+ * <TabPanel store={tab}>Panel 2</TabPanel>
+ * ```
+ */
+export declare function useTabStore(props?: TabStoreProps): TabStore;
+export type TabStoreItem = Item;
+export interface TabStoreState extends Core.TabStoreState, CompositeStoreState<Item> {
+}
+export interface TabStoreFunctions extends Core.TabStoreFunctions, CompositeStoreFunctions<Item> {
+    panels: Store<Core.TabStoreFunctions["panels"]>;
+}
+export interface TabStoreOptions extends Core.TabStoreOptions, CompositeStoreOptions<Item> {
+    /**
+     * Function that will be called when the `selectedId` state changes.
+     * @param selectedId The new selected id.
+     * @example
+     * function Tabs({ visibleTab, onTabChange }) {
+     *   const tab = useTabStore({
+     *     selectedId: visibleTab,
+     *     setSelectedId: onTabChange,
+     *   });
+     * }
+     */
+    setSelectedId?: (selectedId: TabStoreState["selectedId"]) => void;
+}
+export type TabStoreProps = TabStoreOptions & Core.TabStoreProps;
+export type TabStore = TabStoreFunctions & Store<Core.TabStore>;
+export {};

package/esm/tab/tab-store.js

@@ -0,0 +1,35 @@
+import {
+  useCompositeStoreOptions,
+  useCompositeStoreProps
+} from "../__chunks/2EP53RLR.js";
+import "../__chunks/56XURSTF.js";
+import {
+  useStore,
+  useStoreProps
+} from "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/tab/tab-store.ts
+import { useMemo } from "react";
+import * as Core from "@ariakit/core/tab/tab-store";
+function useTabStoreOptions(props) {
+  return useCompositeStoreOptions(props);
+}
+function useTabStoreProps(store, props) {
+  store = useCompositeStoreProps(store, props);
+  useStoreProps(store, props, "selectedId", "setSelectedId");
+  useStoreProps(store, props, "selectOnMove");
+  const panels = useStore(() => store.panels);
+  return useMemo(() => ({ ...store, panels }), []);
+}
+function useTabStore(props = {}) {
+  const options = useTabStoreOptions(props);
+  const store = useStore(() => Core.createTabStore({ ...props, ...options }));
+  return useTabStoreProps(store, props);
+}
+export {
+  useTabStore,
+  useTabStoreOptions,
+  useTabStoreProps
+};

package/esm/tab/tab.d.ts

@@ -0,0 +1,45 @@
+import type { CompositeItemOptions } from "../composite/composite-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { TabStore } from "./tab-store.js";
+/**
+ * Returns props to create a `Tab` component.
+ * @see https://ariakit.org/components/tab
+ * @example
+ * ```jsx
+ * const store = useTabStore();
+ * const props = useTab({ store });
+ * <TabList store={store}>
+ *   <Role {...props}>Tab 1</Role>
+ * </TabList>
+ * <TabPanel store={store}>Panel 1</TabPanel>
+ * ```
+ */
+export declare const useTab: import("../utils/types.js").Hook<TabOptions<"button">>;
+/**
+ * Renders a tab element. The underlying element must be wrapped in a `TabList`
+ * component.
+ * @see https://ariakit.org/components/tab
+ * @example
+ * ```jsx
+ * const tab = useTabStore();
+ * <TabList store={tab}>
+ *   <Tab>Tab 1</Tab>
+ *   <Tab>Tab 2</Tab>
+ * </TabList>
+ * <TabPanel store={tab}>Panel 1</TabPanel>
+ * <TabPanel store={tab}>Panel 2</TabPanel>
+ * ```
+ */
+export declare const Tab: import("../utils/types.js").Component<TabOptions<"button">>;
+export interface TabOptions<T extends As = "button"> extends CompositeItemOptions<T> {
+    /**
+     * Object returned by the `useTabStore` hook. If not provided, the parent
+     * `TabList` component's context will be used.
+     */
+    store?: TabStore;
+    /**
+     * @default true
+     */
+    accessibleWhenDisabled?: CompositeItemOptions["accessibleWhenDisabled"];
+}
+export type TabProps<T extends As = "button"> = Props<TabOptions<T>>;