@ariakit/react-core 0.0.1 → 0.1.0

package/esm/menu/menu-button.js

@@ -0,0 +1,177 @@
+import {
+  useHovercardAnchor
+} from "../__chunks/4IVDKH63.js";
+import {
+  MenuBarContext,
+  MenuContext
+} from "../__chunks/HVBRRKV4.js";
+import {
+  hasExpandedMenuButton
+} from "../__chunks/SJEKLK5Q.js";
+import {
+  usePopoverDisclosure
+} from "../__chunks/JKSMOXA4.js";
+import "../__chunks/NRA7DRSD.js";
+import "../__chunks/57UTLR6J.js";
+import "../__chunks/I4MLEPTM.js";
+import {
+  useCompositeTypeahead
+} from "../__chunks/6OCAIYRY.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 {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useStoreState
+} from "../__chunks/6DAEYZ43.js";
+import {
+  useEvent,
+  useForkRef,
+  useId
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/menu/menu-button.ts
+import { useContext, useEffect, useRef } from "react";
+import { getPopupItemRole, getPopupRole } from "@ariakit/core/utils/dom";
+function getInitialFocus(event, dir) {
+  const keyMap = {
+    ArrowDown: dir === "bottom" || dir === "top" ? "first" : false,
+    ArrowUp: dir === "bottom" || dir === "top" ? "last" : false,
+    ArrowRight: dir === "right" ? "first" : false,
+    ArrowLeft: dir === "left" ? "first" : false
+  };
+  return keyMap[event.key];
+}
+var useMenuButton = createHook(
+  ({ store, focusable, accessibleWhenDisabled, showOnHover, ...props }) => {
+    const ref = useRef(null);
+    const parentMenu = useContext(MenuContext);
+    const parentMenuBar = useContext(MenuBarContext);
+    const hasParentMenu = !!parentMenu;
+    const parentIsMenuBar = !!parentMenuBar && !hasParentMenu;
+    const disabled = props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true";
+    useEffect(() => {
+      store.setDisclosureElement(ref.current);
+    });
+    const onFocusProp = props.onFocus;
+    const onFocus = useEvent((event) => {
+      onFocusProp?.(event);
+      if (disabled)
+        return;
+      if (event.defaultPrevented)
+        return;
+      store.setAutoFocusOnShow(false);
+      store.setActiveId(null);
+      if (!parentMenuBar)
+        return;
+      if (!parentIsMenuBar)
+        return;
+      const { items } = parentMenuBar.getState();
+      if (hasExpandedMenuButton(items, event.currentTarget)) {
+        store.show();
+      }
+    });
+    const dir = store.useState(
+      (state) => state.placement.split("-")[0]
+    );
+    const onKeyDownProp = props.onKeyDown;
+    const onKeyDown = useEvent((event) => {
+      onKeyDownProp?.(event);
+      if (disabled)
+        return;
+      if (event.defaultPrevented)
+        return;
+      const initialFocus = getInitialFocus(event, dir);
+      if (initialFocus) {
+        event.preventDefault();
+        store.show();
+        store.setAutoFocusOnShow(true);
+        store.setInitialFocus(initialFocus);
+      }
+    });
+    const onClickProp = props.onClick;
+    const onClick = useEvent((event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      const isKeyboardClick = !event.detail;
+      const { open } = store.getState();
+      if (!open || isKeyboardClick) {
+        if (!hasParentMenu || isKeyboardClick) {
+          store.setAutoFocusOnShow(true);
+        }
+        store.setInitialFocus(isKeyboardClick ? "first" : "container");
+      }
+      if (hasParentMenu) {
+        store.show();
+      }
+    });
+    if (hasParentMenu) {
+      props = { as: "div", ...props };
+    }
+    const id = useId(props.id);
+    const parentContentElement = useStoreState(parentMenu, "contentElement");
+    const role = hasParentMenu || parentIsMenuBar ? getPopupItemRole(parentContentElement, "menuitem") : void 0;
+    const contentElement = store.useState("contentElement");
+    props = {
+      id,
+      role,
+      "aria-haspopup": getPopupRole(contentElement, "menu"),
+      ...props,
+      ref: useForkRef(ref, props.ref),
+      onFocus,
+      onKeyDown,
+      onClick
+    };
+    props = useHovercardAnchor({
+      store,
+      focusable,
+      accessibleWhenDisabled,
+      ...props,
+      showOnHover: (event) => {
+        if (typeof showOnHover === "function")
+          return showOnHover(event);
+        if (showOnHover != null)
+          return showOnHover;
+        if (hasParentMenu)
+          return true;
+        if (!parentMenuBar)
+          return false;
+        const { items } = parentMenuBar.getState();
+        return parentIsMenuBar && hasExpandedMenuButton(items);
+      }
+    });
+    props = usePopoverDisclosure({
+      store,
+      toggleOnClick: !hasParentMenu,
+      focusable,
+      accessibleWhenDisabled,
+      ...props
+    });
+    props = useCompositeTypeahead({
+      store,
+      typeahead: parentIsMenuBar,
+      ...props
+    });
+    return props;
+  }
+);
+var MenuButton = createComponent((props) => {
+  const htmlProps = useMenuButton(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  MenuButton.displayName = "MenuButton";
+}
+export {
+  MenuButton,
+  useMenuButton
+};

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

@@ -0,0 +1,5 @@
+import type { MenuBarStore } from "./menu-bar-store.js";
+import type { MenuStore } from "./menu-store.js";
+export declare const MenuBarContext: import("react").Context<MenuBarStore | undefined>;
+export declare const MenuContext: import("react").Context<MenuStore | undefined>;
+export declare const MenuItemCheckedContext: import("react").Context<boolean | undefined>;

package/esm/menu/menu-context.js

@@ -0,0 +1,10 @@
+import {
+  MenuBarContext,
+  MenuContext,
+  MenuItemCheckedContext
+} from "../__chunks/HVBRRKV4.js";
+export {
+  MenuBarContext,
+  MenuContext,
+  MenuItemCheckedContext
+};

package/esm/menu/menu-description.d.ts

@@ -0,0 +1,37 @@
+import type { HovercardDescriptionOptions } from "../hovercard/hovercard-description.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuDescription` component. This hook must be used
+ * in a component that's wrapped with `Menu` so the `aria-describedby` prop is
+ * properly set on the menu element.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Menu
+ * const props = useMenuDescription();
+ * <Role {...props}>Description</Role>
+ * ```
+ */
+export declare const useMenuDescription: import("../utils/types.js").Hook<MenuDescriptionOptions<"p">>;
+/**
+ * Renders a description in a menu. This component must be wrapped with `Menu`
+ * so the `aria-describedby` prop is properly set on the menu element.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore();
+ * <Menu store={menu}>
+ *   <MenuDescription>Description</MenuDescription>
+ * </Menu>
+ * ```
+ */
+export declare const MenuDescription: import("../utils/types.js").Component<MenuDescriptionOptions<"p">>;
+export interface MenuDescriptionOptions<T extends As = "p"> extends HovercardDescriptionOptions<T> {
+    /**
+     * Object returned by the `useMenuStore` hook. If not provided, the parent
+     * `Menu` component's context will be used.
+     */
+    store?: MenuStore;
+}
+export type MenuDescriptionProps<T extends As = "p"> = Props<MenuDescriptionOptions<T>>;

package/esm/menu/menu-description.js

@@ -0,0 +1,34 @@
+import {
+  useHovercardDescription
+} from "../__chunks/TTILJGKR.js";
+import "../__chunks/HMJVMCGK.js";
+import "../__chunks/DGTYZREX.js";
+import "../__chunks/LNHZLQEK.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/menu/menu-description.ts
+var useMenuDescription = createHook(
+  (props) => {
+    props = useHovercardDescription(props);
+    return props;
+  }
+);
+var MenuDescription = createComponent(
+  (props) => {
+    const htmlProps = useMenuDescription(props);
+    return createElement("p", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  MenuDescription.displayName = "MenuDescription";
+}
+export {
+  MenuDescription,
+  useMenuDescription
+};

package/esm/menu/menu-dismiss.d.ts

@@ -0,0 +1,36 @@
+import type { HovercardDismissOptions } from "../hovercard/hovercard-dismiss.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuDismiss` component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const props = useMenuDismiss({ store });
+ * <Menu store={store}>
+ *   <Role {...props} />
+ * </Menu>
+ * ```
+ */
+export declare const useMenuDismiss: import("../utils/types.js").Hook<MenuDismissOptions<"button">>;
+/**
+ * Renders a button that hides a menu.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore();
+ * <Menu store={menu}>
+ *   <MenuDismiss />
+ * </Menu>
+ * ```
+ */
+export declare const MenuDismiss: import("../utils/types.js").Component<MenuDismissOptions<"button">>;
+export interface MenuDismissOptions<T extends As = "button"> extends HovercardDismissOptions<T> {
+    /**
+     * Object returned by the `useMenuStore` hook. If not provided, the parent
+     * `Menu` component's context will be used.
+     */
+    store?: MenuStore;
+}
+export type MenuDismissProps<T extends As = "button"> = Props<MenuDismissOptions<T>>;

package/esm/menu/menu-dismiss.js

@@ -0,0 +1,33 @@
+import {
+  useHovercardDismiss
+} from "../__chunks/BIFSQ6O4.js";
+import "../__chunks/B3AF63GK.js";
+import "../__chunks/6THLPTJO.js";
+import "../__chunks/I4MLEPTM.js";
+import "../__chunks/LNHZLQEK.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/menu/menu-dismiss.ts
+var useMenuDismiss = createHook((props) => {
+  props = useHovercardDismiss(props);
+  return props;
+});
+var MenuDismiss = createComponent((props) => {
+  const htmlProps = useMenuDismiss(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  MenuDismiss.displayName = "MenuDismiss";
+}
+export {
+  MenuDismiss,
+  useMenuDismiss
+};

package/esm/menu/menu-group-label.d.ts

@@ -0,0 +1,42 @@
+import type { CompositeGroupLabelOptions } from "../composite/composite-group-label.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuGroupLabel` component. This hook must be used
+ * in a component that's wrapped with `MenuGroup` so the `aria-labelledby` prop
+ * is properly set on the menu group element.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * // This component must be wrapped with MenuGroup
+ * const props = useMenuGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export declare const useMenuGroupLabel: import("../utils/types.js").Hook<MenuGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a menu group. This component must be wrapped with
+ * `MenuGroup` so the `aria-labelledby` prop is properly set on the menu group
+ * element.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore();
+ * <MenuButton store={menu}>Recent Items</MenuButton>
+ * <Menu store={menu}>
+ *   <MenuGroup>
+ *     <MenuGroupLabel>Applications</MenuGroupLabel>
+ *     <MenuItem>Google Chrome.app</MenuItem>
+ *     <MenuItem>Safari.app</MenuItem>
+ *   </MenuGroup>
+ * </Menu>
+ * ```
+ */
+export declare const MenuGroupLabel: import("../utils/types.js").Component<MenuGroupLabelOptions<"div">>;
+export interface MenuGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<T> {
+    /**
+     * Object returned by the `useMenuStore` hook.
+     */
+    store?: MenuStore;
+}
+export type MenuGroupLabelProps<T extends As = "div"> = Props<MenuGroupLabelOptions<T>>;

package/esm/menu/menu-group-label.js

@@ -0,0 +1,31 @@
+import {
+  useCompositeGroupLabel
+} from "../__chunks/NYJYNUSY.js";
+import "../__chunks/SE7IFIBU.js";
+import "../__chunks/F5VAC7MB.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/menu/menu-group-label.ts
+var useMenuGroupLabel = createHook((props) => {
+  props = useCompositeGroupLabel(props);
+  return props;
+});
+var MenuGroupLabel = createComponent(
+  (props) => {
+    const htmlProps = useMenuGroupLabel(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  MenuGroupLabel.displayName = "MenuGroupLabel";
+}
+export {
+  MenuGroupLabel,
+  useMenuGroupLabel
+};

package/esm/menu/menu-group.d.ts

@@ -0,0 +1,45 @@
+import type { CompositeGroupOptions } from "../composite/composite-group.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuGroup` component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const props = useMenuGroup({ store });
+ * <MenuButton store={store}>Recent Items</MenuButton>
+ * <Menu store={store}>
+ *   <Role {...props}>
+ *     <MenuGroupLabel>Applications</MenuGroupLabel>
+ *     <MenuItem>Google Chrome.app</MenuItem>
+ *     <MenuItem>Safari.app</MenuItem>
+ *   </Role>
+ * </Menu>
+ * ```
+ */
+export declare const useMenuGroup: import("../utils/types.js").Hook<MenuGroupOptions<"div">>;
+/**
+ * Renders a menu group inside a menu.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore();
+ * <MenuButton store={menu}>Recent Items</MenuButton>
+ * <Menu store={menu}>
+ *   <MenuGroup>
+ *     <MenuGroupLabel>Applications</MenuGroupLabel>
+ *     <MenuItem>Google Chrome.app</MenuItem>
+ *     <MenuItem>Safari.app</MenuItem>
+ *   </MenuGroup>
+ * </Menu>
+ * ```
+ */
+export declare const MenuGroup: import("../utils/types.js").Component<MenuGroupOptions<"div">>;
+export interface MenuGroupOptions<T extends As = "div"> extends CompositeGroupOptions<T> {
+    /**
+     * Object returned by the `useMenuStore` hook.
+     */
+    store?: MenuStore;
+}
+export type MenuGroupProps<T extends As = "div"> = Props<MenuGroupOptions<T>>;

package/esm/menu/menu-group.js

@@ -0,0 +1,29 @@
+import {
+  useCompositeGroup
+} from "../__chunks/TCSUGBIK.js";
+import "../__chunks/SG5D3YRB.js";
+import "../__chunks/F5VAC7MB.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/menu/menu-group.ts
+var useMenuGroup = createHook((props) => {
+  props = useCompositeGroup(props);
+  return props;
+});
+var MenuGroup = createComponent((props) => {
+  const htmlProps = useMenuGroup(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  MenuGroup.displayName = "MenuGroup";
+}
+export {
+  MenuGroup,
+  useMenuGroup
+};

package/esm/menu/menu-heading.d.ts

@@ -0,0 +1,37 @@
+import type { HovercardHeadingOptions } from "../hovercard/hovercard-heading.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuHeading` component. This hook must be used in
+ * a component that's wrapped with `Menu` so the `aria-labelledby` prop is
+ * properly set on the menu element.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Menu
+ * const props = useMenuHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+export declare const useMenuHeading: import("../utils/types.js").Hook<MenuHeadingOptions<"h1">>;
+/**
+ * Renders a heading in a menu. This component must be wrapped with `Menu` so
+ * the `aria-labelledby` prop is properly set on the menu element.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore();
+ * <Menu store={menu}>
+ *   <MenuHeading>Heading</MenuHeading>
+ * </Menu>
+ * ```
+ */
+export declare const MenuHeading: import("../utils/types.js").Component<MenuHeadingOptions<"h1">>;
+export interface MenuHeadingOptions<T extends As = "h1"> extends HovercardHeadingOptions<T> {
+    /**
+     * Object returned by the `useMenuStore` hook. If not provided, the parent
+     * `Menu` component's context will be used.
+     */
+    store?: MenuStore;
+}
+export type MenuHeadingProps<T extends As = "h1"> = Props<MenuHeadingOptions<T>>;

package/esm/menu/menu-heading.js

@@ -0,0 +1,32 @@
+import {
+  useHovercardHeading
+} from "../__chunks/DVR5Q5UR.js";
+import "../__chunks/SE2URGHN.js";
+import "../__chunks/HTHL3GU7.js";
+import "../__chunks/HS4EASQI.js";
+import "../__chunks/COQHFAEN.js";
+import "../__chunks/LNHZLQEK.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/menu/menu-heading.ts
+var useMenuHeading = createHook((props) => {
+  props = useHovercardHeading(props);
+  return props;
+});
+var MenuHeading = createComponent((props) => {
+  const htmlProps = useMenuHeading(props);
+  return createElement("h1", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  MenuHeading.displayName = "MenuHeading";
+}
+export {
+  MenuHeading,
+  useMenuHeading
+};

package/esm/menu/menu-item-check.d.ts

@@ -0,0 +1,44 @@
+import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuItemCheck` component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const props = useMenuItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useMenuItemCheck: import("../utils/types.js").Hook<MenuItemCheckOptions<"span">>;
+/**
+ * Renders a checkmark inside a `MenuItemCheckbox` or `MenuItemRadio`
+ * components. This component must be wrapped with one of those components or
+ * the `checked` prop must be explicitly passed to the component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore({
+ *   defaultValues: { apple: true, orange: false },
+ * });
+ * <MenuButton store={menu}>Fruits</MenuButton>
+ * <Menu store={menu}>
+ *   <MenuItemCheckbox name="apple">
+ *     <MenuItemCheck />
+ *     Apple
+ *   </MenuItemCheckbox>
+ *   <MenuItemCheckbox name="orange">
+ *     <MenuItemCheck />
+ *     Orange
+ *   </MenuItemCheckbox>
+ * </Menu>
+ * ```
+ */
+export declare const MenuItemCheck: import("../utils/types.js").Component<MenuItemCheckOptions<"span">>;
+export interface MenuItemCheckOptions<T extends As = "span"> extends Omit<CheckboxCheckOptions<T>, "store"> {
+    /**
+     * Object returned by the `useMenuStore` hook.
+     */
+    store?: MenuStore;
+}
+export type MenuItemCheckProps<T extends As = "span"> = Props<MenuItemCheckOptions<T>>;

package/esm/menu/menu-item-check.js

@@ -0,0 +1,34 @@
+import {
+  MenuItemCheckedContext
+} from "../__chunks/HVBRRKV4.js";
+import {
+  useCheckboxCheck
+} from "../__chunks/H5L4MRQM.js";
+import "../__chunks/M5KYRTQG.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+
+// src/menu/menu-item-check.ts
+import { useContext } from "react";
+var useMenuItemCheck = createHook(
+  ({ store, checked, ...props }) => {
+    const context = useContext(MenuItemCheckedContext);
+    checked = checked ?? context;
+    props = useCheckboxCheck({ ...props, checked });
+    return props;
+  }
+);
+var MenuItemCheck = createComponent((props) => {
+  const htmlProps = useMenuItemCheck(props);
+  return createElement("span", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  MenuItemCheck.displayName = "MenuItemCheck";
+}
+export {
+  MenuItemCheck,
+  useMenuItemCheck
+};