@ariakit/react-components 0.1.0

package/src/menu/menu-item.tsx

@@ -0,0 +1,223 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useBooleanEvent,
+  useEvent,
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import {
+  getDocument,
+  getPopupItemRole,
+  isDownloading,
+  isOpeningInNewTab,
+  hasFocusWithin,
+  invariant,
+} from "@ariakit/utils";
+import type { BooleanOrCallback } from "@ariakit/utils";
+import type { ElementType, MouseEvent } from "react";
+import type { CompositeHoverOptions } from "../composite/composite-hover.tsx";
+import { useCompositeHover } from "../composite/composite-hover.tsx";
+import type { CompositeItemOptions } from "../composite/composite-item.tsx";
+import { useCompositeItem } from "../composite/composite-item.tsx";
+import { useMenubarScopedContext } from "../menubar/menubar-context.tsx";
+import type { MenubarStore } from "../menubar/menubar-store.ts";
+import { useMenuScopedContext } from "./menu-context.tsx";
+import type { MenuStore, MenuStoreState } from "./menu-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+
+function menuHasFocus(
+  baseElement?: MenuStoreState["baseElement"],
+  items?: MenuStoreState["items"],
+  currentTarget?: Element,
+) {
+  if (!baseElement) return false;
+  if (hasFocusWithin(baseElement)) return true;
+  const expandedItem = items?.find((item) => {
+    if (item.element === currentTarget) return false;
+    return item.element?.getAttribute("aria-expanded") === "true";
+  });
+  const expandedMenuId = expandedItem?.element?.getAttribute("aria-controls");
+  if (!expandedMenuId) return false;
+  const doc = getDocument(baseElement);
+  const expandedMenu = doc.getElementById(expandedMenuId);
+  if (!expandedMenu) return false;
+  if (hasFocusWithin(expandedMenu)) return true;
+  return !!expandedMenu.querySelector("[role=menuitem][aria-expanded=true]");
+}
+
+/**
+ * Returns props to create a `MenuItem` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const undo = useMenuItem({ store });
+ * const redo = useMenuItem({ store });
+ * <MenuButton store={store}>Edit</MenuButton>
+ * <Menu store={store}>
+ *   <Role {...undo}>Undo</Role>
+ *   <Role {...redo}>Redo</Role>
+ * </Menu>
+ * ```
+ */
+export const useMenuItem = createHook<TagName, MenuItemOptions>(
+  function useMenuItem({
+    store,
+    hideOnClick = true,
+    preventScrollOnKeyDown = true,
+    focusOnHover,
+    blurOnHoverEnd,
+    ...props
+  }) {
+    const menuContext = useMenuScopedContext(true);
+    const menubarContext = useMenubarScopedContext();
+    store = store || menuContext || (menubarContext as any);
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "MenuItem must be wrapped in a MenuList, Menu or Menubar component",
+    );
+
+    const onClickProp = props.onClick;
+    const hideOnClickProp = useBooleanEvent(hideOnClick);
+    const hideMenu = "hideAll" in store ? store.hideAll : undefined;
+    const isWithinMenu = !!hideMenu;
+
+    const onClick = useEvent((event: MouseEvent<HTMLType>) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      if (isDownloading(event)) return;
+      if (isOpeningInNewTab(event)) return;
+      if (!hideMenu) return;
+      // If this item is also a submenu button or any other disclosure, we
+      // don't want to hide the menu.
+      const popupType = event.currentTarget.getAttribute("aria-haspopup");
+      if (popupType && popupType !== "false") return;
+      if (!hideOnClickProp(event)) return;
+      hideMenu();
+    });
+
+    const contentElement = useStoreState(store, (state) =>
+      "contentElement" in state ? state.contentElement : null,
+    );
+
+    const role = getPopupItemRole(contentElement, "menuitem");
+
+    props = {
+      role,
+      ...props,
+      onClick,
+    };
+
+    props = useCompositeItem<TagName>({
+      store,
+      preventScrollOnKeyDown,
+      ...props,
+    });
+
+    props = useCompositeHover({
+      store,
+      ...props,
+      focusOnHover(event) {
+        const getFocusOnHover = () => {
+          if (typeof focusOnHover === "function") return focusOnHover(event);
+          if (focusOnHover != null) return focusOnHover;
+          return true;
+        };
+        if (!store) return false;
+        if (!getFocusOnHover()) return false;
+        const { baseElement, items } = store.getState();
+        // If the menu item is also a submenu button, we should move actual DOM
+        // focus to it so that the submenu will not close when the user moves
+        // the cursor back to the menu button.
+        if (isWithinMenu) {
+          if (event.currentTarget.hasAttribute("aria-expanded")) {
+            event.currentTarget.focus();
+          }
+          return true;
+        }
+        // If the menu item is inside a menu bar, we should move DOM focus to
+        // the menu item if focus is somewhere on the widget. Without this, the
+        // open menus in the menu bar wouldn't close.
+        if (menuHasFocus(baseElement, items, event.currentTarget)) {
+          event.currentTarget.focus();
+          return true;
+        }
+        return false;
+      },
+      blurOnHoverEnd(event) {
+        if (typeof blurOnHoverEnd === "function") return blurOnHoverEnd(event);
+        if (blurOnHoverEnd != null) return blurOnHoverEnd;
+        // The menu container should be focused on mouseleave only if the menu
+        // item is inside a menu, not a menu bar.
+        return isWithinMenu;
+      },
+    });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a menu item inside
+ * [`MenuList`](https://ariakit.com/reference/menu-list) or
+ * [`Menu`](https://ariakit.com/reference/menu)
+ * components.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx {4-5}
+ * <MenuProvider>
+ *   <MenuButton>Edit</MenuButton>
+ *   <Menu>
+ *     <MenuItem>Undo</MenuItem>
+ *     <MenuItem>Redo</MenuItem>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export const MenuItem = memo(
+  forwardRef(function MenuItem(props: MenuItemProps) {
+    const htmlProps = useMenuItem(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface MenuItemOptions<T extends ElementType = TagName>
+  extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) or
+   * [`useMenubarStore`](https://ariakit.com/reference/use-menubar-store)
+   * hooks. If not provided, the closest
+   * [`Menu`](https://ariakit.com/reference/menu),
+   * [`MenuProvider`](https://ariakit.com/reference/menu-provider),
+   * [`Menubar`](https://ariakit.com/reference/menubar), or
+   * [`MenubarProvider`](https://ariakit.com/reference/menubar-provider)
+   * components' context will be used.
+   */
+  store?: MenubarStore | MenuStore;
+  /**
+   * Determines if the menu should hide when this item is clicked.
+   *
+   * **Note**: This behavior isn't triggered if this menu item is rendered as a
+   * link and modifier keys are used to either open the link in a new tab or
+   * download it.
+   *
+   * Live examples:
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   * @default true
+   */
+  hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+}
+
+export type MenuItemProps<T extends ElementType = TagName> = Props<
+  T,
+  MenuItemOptions<T>
+>;

package/src/menu/menu-list.tsx

@@ -0,0 +1,230 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useEvent,
+  useId,
+  useMergeRefs,
+  useWrapElement,
+  createElement,
+  createHook,
+  forwardRef,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import type { ElementType, KeyboardEvent } from "react";
+import { useEffect, useState } from "react";
+import type { CompositeTypeaheadOptions } from "../composite/composite-typeahead.tsx";
+import { useCompositeTypeahead } from "../composite/composite-typeahead.tsx";
+import type { CompositeOptions } from "../composite/composite.tsx";
+import { useComposite } from "../composite/composite.tsx";
+import type { DisclosureContentOptions } from "../disclosure/disclosure-content.tsx";
+import { isHidden } from "../disclosure/disclosure-content.tsx";
+import {
+  MenuScopedContextProvider,
+  useMenuProviderContext,
+} from "./menu-context.tsx";
+import type { MenuStore } from "./menu-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+type BasePlacement = "top" | "bottom" | "left" | "right";
+
+function useAriaLabelledBy({ store, ...props }: MenuListProps) {
+  const [id, setId] = useState<string | undefined>(undefined);
+  const label = props["aria-label"];
+
+  const disclosureElement = useStoreState(store, "disclosureElement");
+  const contentElement = useStoreState(store, "contentElement");
+
+  useEffect(() => {
+    const disclosure = disclosureElement;
+    if (!disclosure) return;
+    const menu = contentElement;
+    if (!menu) return;
+    const menuLabel = label || menu.hasAttribute("aria-label");
+    if (menuLabel) {
+      setId(undefined);
+    } else if (disclosure.id) {
+      setId(disclosure.id);
+    }
+  }, [label, disclosureElement, contentElement]);
+
+  return id;
+}
+
+/**
+ * Returns props to create a `MenuList` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const props = useMenuList({ store });
+ * <MenuButton store={store}>Edit</MenuButton>
+ * <Role {...props}>
+ *   <MenuItem>Undo</MenuItem>
+ *   <MenuItem>Redo</MenuItem>
+ * </Role>
+ * ```
+ */
+export const useMenuList = createHook<TagName, MenuListOptions>(
+  function useMenuList({ store, alwaysVisible, composite, ...props }) {
+    const context = useMenuProviderContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "MenuList must receive a `store` prop or be wrapped in a MenuProvider component.",
+    );
+
+    const parentMenu = store.parent;
+    const parentMenubar = store.menubar;
+    const hasParentMenu = !!parentMenu;
+    const id = useId(props.id);
+
+    const onKeyDownProp = props.onKeyDown;
+    const dir = useStoreState(
+      store,
+      (state) => state.placement.split("-")[0] as BasePlacement,
+    );
+    const orientation = useStoreState(store, (state) =>
+      state.orientation === "both" ? undefined : state.orientation,
+    );
+    const isHorizontal = orientation !== "vertical";
+    const isMenubarHorizontal = useStoreState(
+      parentMenubar,
+      (state) => !!state && state.orientation !== "vertical",
+    );
+
+    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {
+      onKeyDownProp?.(event);
+      if (event.defaultPrevented) return;
+      if (hasParentMenu || (parentMenubar && !isHorizontal)) {
+        const hideMap = {
+          ArrowRight: () => dir === "left" && !isHorizontal,
+          ArrowLeft: () => dir === "right" && !isHorizontal,
+          ArrowUp: () => dir === "bottom" && isHorizontal,
+          ArrowDown: () => dir === "top" && isHorizontal,
+        };
+        const action = hideMap[event.key as keyof typeof hideMap];
+        if (action?.()) {
+          event.stopPropagation();
+          event.preventDefault();
+          return store?.hide();
+        }
+      }
+      if (parentMenubar) {
+        const keyMap = {
+          ArrowRight: () => {
+            if (!isMenubarHorizontal) return;
+            return parentMenubar.next();
+          },
+          ArrowLeft: () => {
+            if (!isMenubarHorizontal) return;
+            return parentMenubar.previous();
+          },
+          ArrowDown: () => {
+            if (isMenubarHorizontal) return;
+            return parentMenubar.next();
+          },
+          ArrowUp: () => {
+            if (isMenubarHorizontal) return;
+            return parentMenubar.previous();
+          },
+        };
+        const action = keyMap[event.key as keyof typeof keyMap];
+        const id = action?.();
+        if (id !== undefined) {
+          event.stopPropagation();
+          event.preventDefault();
+          parentMenubar.move(id);
+        }
+      }
+    });
+
+    props = useWrapElement(
+      props,
+      (element) => (
+        <MenuScopedContextProvider value={store}>
+          {element}
+        </MenuScopedContextProvider>
+      ),
+      [store],
+    );
+
+    const ariaLabelledBy = useAriaLabelledBy({ store, ...props });
+    const mounted = useStoreState(store, "mounted");
+    const hidden = isHidden(mounted, props.hidden, alwaysVisible);
+    const style = hidden ? { ...props.style, display: "none" } : props.style;
+
+    props = {
+      "aria-labelledby": ariaLabelledBy,
+      hidden,
+      ...props,
+      id,
+      ref: useMergeRefs(id ? store.setContentElement : null, props.ref),
+      style,
+      onKeyDown,
+    };
+
+    const hasCombobox = !!store.combobox;
+    composite = composite ?? !hasCombobox;
+
+    if (composite) {
+      props = {
+        role: "menu",
+        "aria-orientation": orientation,
+        ...props,
+      };
+    }
+
+    props = useComposite({ store, composite, ...props });
+    props = useCompositeTypeahead({ store, typeahead: !hasCombobox, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a menu list element. This is the primitive component used by the
+ * [`Menu`](https://ariakit.com/reference/menu) component.
+ *
+ * Unlike [`Menu`](https://ariakit.com/reference/menu), this component doesn't
+ * render a popover and therefore doesn't automatically focus on items when
+ * opened.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx {3-6}
+ * <MenuProvider>
+ *   <MenuButton>Edit</MenuButton>
+ *   <MenuList>
+ *     <MenuItem>Undo</MenuItem>
+ *     <MenuItem>Redo</MenuItem>
+ *   </MenuList>
+ * </MenuProvider>
+ * ```
+ */
+export const MenuList = forwardRef(function MenuList(props: MenuListProps) {
+  const htmlProps = useMenuList(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface MenuListOptions<T extends ElementType = TagName>
+  extends
+    CompositeOptions<T>,
+    CompositeTypeaheadOptions<T>,
+    Pick<DisclosureContentOptions, "alwaysVisible"> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not
+   * provided, the closest
+   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) component's
+   * context will be used.
+   */
+  store?: MenuStore;
+}
+
+export type MenuListProps<T extends ElementType = TagName> = Props<
+  T,
+  MenuListOptions<T>
+>;

package/src/menu/menu-provider.tsx

@@ -0,0 +1,42 @@
+import type { PickRequired } from "@ariakit/utils";
+import type { ReactElement, ReactNode } from "react";
+import { MenuContextProvider } from "./menu-context.tsx";
+import type { MenuStoreProps, MenuStoreValues } from "./menu-store.ts";
+import { useMenuStore } from "./menu-store.ts";
+
+type Values = MenuStoreValues;
+
+/**
+ * Provides a menu store to [Menu](https://ariakit.com/components/menu)
+ * components.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * <MenuProvider placement="top">
+ *   <MenuButton>Edit</MenuButton>
+ *   <Menu>
+ *     <MenuItem>Undo</MenuItem>
+ *     <MenuItem>Redo</MenuItem>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+
+export function MenuProvider<T extends Values = Values>(
+  props: PickRequired<MenuProviderProps<T>, "values" | "defaultValues">,
+): ReactElement;
+
+export function MenuProvider(props?: MenuProviderProps): ReactElement;
+
+export function MenuProvider(props: MenuProviderProps = {}) {
+  const store = useMenuStore(props);
+  return (
+    <MenuContextProvider value={store}>{props.children}</MenuContextProvider>
+  );
+}
+
+export interface MenuProviderProps<
+  T extends Values = Values,
+> extends MenuStoreProps<T> {
+  children?: ReactNode;
+}

package/src/menu/menu-separator.tsx

@@ -0,0 +1,79 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { CompositeSeparatorOptions } from "../composite/composite-separator.tsx";
+import { useCompositeSeparator } from "../composite/composite-separator.tsx";
+import { useMenuContext } from "./menu-context.tsx";
+import type { MenuStore } from "./menu-store.ts";
+
+const TagName = "hr" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `MenuSeparator` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const props = useMenuSeparator({ store });
+ * <MenuButton store={store}>Edit</MenuButton>
+ * <Menu store={store}>
+ *   <MenuItem>Undo</MenuItem>
+ *   <MenuItem>Redo</MenuItem>
+ *   <Role {...props} />
+ *   <MenuItem>Cut</MenuItem>
+ * </Menu>
+ * ```
+ */
+export const useMenuSeparator = createHook<TagName, MenuSeparatorOptions>(
+  function useMenuSeparator({ store, ...props }) {
+    const context = useMenuContext();
+    store = store || context;
+    props = useCompositeSeparator({ store, ...props });
+    return props;
+  },
+);
+
+/**
+ * Renders a divider between
+ * [`MenuItem`](https://ariakit.com/reference/menu-item),
+ * [`MenuItemCheckbox`](https://ariakit.com/reference/menu-item-checkbox), and
+ * [`MenuItemRadio`](https://ariakit.com/reference/menu-item-radio) elements.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx {6}
+ * <MenuProvider>
+ *   <MenuButton>Edit</MenuButton>
+ *   <Menu>
+ *     <MenuItem>Undo</MenuItem>
+ *     <MenuItem>Redo</MenuItem>
+ *     <MenuSeparator />
+ *     <MenuItem>Cut</MenuItem>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export const MenuSeparator = forwardRef(function MenuSeparator(
+  props: MenuSeparatorProps,
+) {
+  const htmlProps = useMenuSeparator(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface MenuSeparatorOptions<
+  T extends ElementType = TagName,
+> extends CompositeSeparatorOptions<T> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not
+   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or
+   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'
+   * context will be used.
+   */
+  store?: MenuStore;
+}
+
+export type MenuSeparatorProps<T extends ElementType = TagName> = Props<
+  T,
+  MenuSeparatorOptions<T>
+>;