@ariakit/react-components 0.1.0

package/src/menu/menu-heading.tsx

@@ -0,0 +1,67 @@
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import type { ElementType } from "react";
+import type { HovercardHeadingOptions } from "../hovercard/hovercard-heading.tsx";
+import { useHovercardHeading } from "../hovercard/hovercard-heading.tsx";
+import type { MenuStore } from "./menu-store.ts";
+
+const TagName = "h1" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * 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.com/components/menu
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Menu
+ * const props = useMenuHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+export const useMenuHeading = createHook<TagName, MenuHeadingOptions>(
+  function useMenuHeading(props) {
+    props = useHovercardHeading(props);
+    return props;
+  },
+);
+
+/**
+ * Renders a heading in a menu. This component must be wrapped within
+ * [`Menu`](https://ariakit.com/reference/menu) so the `aria-labelledby` prop is
+ * properly set on the content element.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * <MenuProvider>
+ *   <Menu>
+ *     <MenuHeading>Heading</MenuHeading>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export const MenuHeading = forwardRef(function MenuHeading(
+  props: MenuHeadingProps,
+) {
+  const htmlProps = useMenuHeading(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface MenuHeadingOptions<
+  T extends ElementType = TagName,
+> extends HovercardHeadingOptions<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 MenuHeadingProps<T extends ElementType = TagName> = Props<
+  T,
+  MenuHeadingOptions<T>
+>;

package/src/menu/menu-item-check.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 { useContext } from "react";
+import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.tsx";
+import { useCheckboxCheck } from "../checkbox/checkbox-check.tsx";
+import { MenuItemCheckedContext } from "./menu-context.tsx";
+import type { MenuStore } from "./menu-store.ts";
+
+const TagName = "span" satisfies ElementType;
+type TagName = typeof TagName;
+
+/**
+ * Returns props to create a `MenuItemCheck` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const props = useMenuItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export const useMenuItemCheck = createHook<TagName, MenuItemCheckOptions>(
+  function useMenuItemCheck({ store, checked, ...props }) {
+    const context = useContext(MenuItemCheckedContext);
+    checked = checked ?? context;
+    props = useCheckboxCheck({ ...props, checked });
+    return props;
+  },
+);
+
+/**
+ * Renders a checkmark icon when the
+ * [`checked`](https://ariakit.com/reference/menu-item-check#checked) prop is
+ * `true`. The icon can be overridden by providing a different one as children.
+ *
+ * When rendered inside
+ * [`MenuItemCheckbox`](https://ariakit.com/reference/menu-item-checkbox) or
+ * [`MenuItemRadio`](https://ariakit.com/reference/menu-item-radio) components,
+ * the [`checked`](https://ariakit.com/reference/menu-item-check#checked) prop
+ * is automatically derived from the context.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx {5,9}
+ * <MenuProvider defaultValues={{ apple: true, orange: false }}>
+ *   <MenuButton>Fruits</MenuButton>
+ *   <Menu>
+ *     <MenuItemCheckbox name="apple">
+ *       <MenuItemCheck />
+ *       Apple
+ *     </MenuItemCheckbox>
+ *     <MenuItemCheckbox name="orange">
+ *       <MenuItemCheck />
+ *       Orange
+ *     </MenuItemCheckbox>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export const MenuItemCheck = forwardRef(function MenuItemCheck(
+  props: MenuItemCheckProps,
+) {
+  const htmlProps = useMenuItemCheck(props);
+  return createElement(TagName, htmlProps);
+});
+
+export interface MenuItemCheckOptions<
+  T extends ElementType = TagName,
+> extends Omit<CheckboxCheckOptions<T>, "store"> {
+  /**
+   * Object returned by the
+   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook.
+   */
+  store?: MenuStore;
+}
+
+export type MenuItemCheckProps<T extends ElementType = TagName> = Props<
+  T,
+  MenuItemCheckOptions<T>
+>;

package/src/menu/menu-item-checkbox.tsx

@@ -0,0 +1,227 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useInitialValue,
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { invariant, shallowEqual } from "@ariakit/utils";
+import type { ElementType } from "react";
+import { useEffect } from "react";
+import { useCheckboxStore } from "../checkbox/checkbox-store.ts";
+import type { CheckboxOptions } from "../checkbox/checkbox.tsx";
+import { useCheckbox } from "../checkbox/checkbox.tsx";
+import { useMenuScopedContext } from "./menu-context.tsx";
+import type { MenuItemOptions } from "./menu-item.tsx";
+import { useMenuItem } from "./menu-item.tsx";
+import type { MenuStore, MenuStoreValues } from "./menu-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+type ValueState = MenuStoreValues[string];
+
+function getPrimitiveValue<T>(value: T) {
+  if (Array.isArray(value)) {
+    return value.toString();
+  }
+  return value as Exclude<T, readonly any[]>;
+}
+
+function getValue(
+  storeValue: ValueState,
+  value?: MenuItemCheckboxOptions["value"],
+  checked?: MenuItemCheckboxOptions["checked"],
+) {
+  if (value === undefined) {
+    if (Array.isArray(storeValue)) return storeValue;
+    return !!checked;
+  }
+  const primitiveValue = getPrimitiveValue(value);
+  if (!Array.isArray(storeValue)) {
+    if (checked) {
+      return primitiveValue;
+    }
+    return storeValue === primitiveValue ? false : storeValue;
+  }
+  if (checked) {
+    if (storeValue.includes(primitiveValue)) {
+      return storeValue;
+    }
+    return [...storeValue, primitiveValue];
+  }
+  return storeValue.filter((v) => v !== primitiveValue);
+}
+
+/**
+ * Returns props to create a `MenuItemCheckbox` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore({ defaultValues: { apple: false } });
+ * const props = useMenuItemCheckbox({ store, name: "apple" });
+ * <MenuButton store={store}>Fruits</MenuButton>
+ * <Menu store={store}>
+ *   <Role {...props}>Apple</Role>
+ * </Menu>
+ * ```
+ */
+export const useMenuItemCheckbox = createHook<TagName, MenuItemCheckboxOptions>(
+  function useMenuItemCheckbox({
+    store,
+    name,
+    value,
+    checked,
+    defaultChecked: defaultCheckedProp,
+    hideOnClick = false,
+    ...props
+  }) {
+    const context = useMenuScopedContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "MenuItemCheckbox must be wrapped in a MenuList or Menu component",
+    );
+
+    const defaultChecked = useInitialValue(defaultCheckedProp);
+
+    // Sets defaultChecked in store
+    useEffect(() => {
+      store?.setValue(name, (prevValue = []) => {
+        if (!defaultChecked) return prevValue;
+        return getValue(prevValue, value, true);
+      });
+    }, [store, name, value, defaultChecked]);
+
+    // Sets checked in store
+    useEffect(() => {
+      if (checked === undefined) return;
+      store?.setValue(name, (prevValue) => {
+        return getValue(prevValue, value, checked);
+      });
+    }, [store, name, value, checked]);
+
+    const checkboxStore = useCheckboxStore({
+      value: useStoreState(store, (state) => state.values[name]),
+      setValue(internalValue) {
+        store?.setValue(name, () => {
+          if (checked === undefined) return internalValue;
+          const nextValue = getValue(internalValue, value, checked);
+          if (!Array.isArray(nextValue)) return nextValue;
+          if (!Array.isArray(internalValue)) return nextValue;
+          if (shallowEqual(internalValue, nextValue)) return internalValue;
+          return nextValue;
+        });
+      },
+    });
+
+    props = {
+      role: "menuitemcheckbox",
+      ...props,
+    };
+
+    props = useCheckbox<TagName>({
+      store: checkboxStore,
+      name,
+      value,
+      checked,
+      ...props,
+    });
+    props = useMenuItem({ store, hideOnClick, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a [`menuitemcheckbox`](https://w3c.github.io/aria/#menuitemcheckbox)
+ * element within a [`Menu`](https://ariakit.com/reference/menu) component. The
+ * [`name`](https://ariakit.com/reference/menu-item-checkbox#name) prop must be
+ * provided to identify the field in the
+ * [`values`](https://ariakit.com/reference/menu-provider#values) state.
+ *
+ * A [`MenuItemCheck`](https://ariakit.com/reference/menu-item-check) can be
+ * used to render a checkmark inside this component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * The [`name`](https://ariakit.com/reference/menu-item-checkbox#name) prop can
+ * refer to a single value in the state:
+ * ```jsx {4-7}
+ * <MenuProvider defaultValues={{ warnBeforeQuitting: true }}>
+ *   <MenuButton>Chrome</MenuButton>
+ *   <Menu>
+ *     <MenuItemCheckbox name="warnBeforeQuitting">
+ *       <MenuItemCheck />
+ *       Warn Before Quitting
+ *     </MenuItemCheckbox>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ * @example
+ * Or it can refer to an array of values, in which case the
+ * [`value`](https://ariakit.com/reference/menu-item-checkbox#value) prop must
+ * be provided:
+ * ```jsx {4-9}
+ * <MenuProvider defaultValues={{ watching: ["issues"] }}>
+ *   <MenuButton>Watch</MenuButton>
+ *   <Menu>
+ *     <MenuItemCheckbox name="watching" value="issues">
+ *       Issues
+ *     </MenuItemCheckbox>
+ *     <MenuItemCheckbox name="watching" value="pull-requests">
+ *       Pull Requests
+ *     </MenuItemCheckbox>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export const MenuItemCheckbox = memo(
+  forwardRef(function MenuItemCheckbox(props: MenuItemCheckboxProps) {
+    const htmlProps = useMenuItemCheckbox(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface MenuItemCheckboxOptions<T extends ElementType = TagName>
+  extends MenuItemOptions<T>, Omit<CheckboxOptions<T>, "store"> {
+  /**
+   * 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;
+  /**
+   * The name of the field in the
+   * [`values`](https://ariakit.com/reference/menu-provider#values) state.
+   *
+   * Live examples:
+   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)
+   */
+  name: string;
+  /**
+   * The controlled checked state of the element. It will set the menu
+   * [`values`](https://ariakit.com/reference/menu-provider#values) state if
+   * provided.
+   */
+  checked?: boolean;
+  /**
+   * The default checked state of the element. It will set the default value in
+   * the menu [`values`](https://ariakit.com/reference/menu-provider#values)
+   * state if provided.
+   */
+  defaultChecked?: boolean;
+  /**
+   * @default false
+   */
+  hideOnClick?: MenuItemOptions<T>["hideOnClick"];
+}
+
+export type MenuItemCheckboxProps<T extends ElementType = TagName> = Props<
+  T,
+  MenuItemCheckboxOptions<T>
+>;

package/src/menu/menu-item-radio.tsx

@@ -0,0 +1,198 @@
+import { useStoreState } from "@ariakit/react-store";
+import {
+  useInitialValue,
+  useWrapElement,
+  createElement,
+  createHook,
+  forwardRef,
+  memo,
+} from "@ariakit/react-utils";
+import type { Props } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import type { ElementType } from "react";
+import { useEffect } from "react";
+import type { RadioOptions } from "../radio/radio.tsx";
+import { useRadio } from "../radio/radio.tsx";
+import {
+  MenuItemCheckedContext,
+  useMenuScopedContext,
+} from "./menu-context.tsx";
+import type { MenuItemOptions } from "./menu-item.tsx";
+import { useMenuItem } from "./menu-item.tsx";
+import type { MenuStore } from "./menu-store.ts";
+
+const TagName = "div" satisfies ElementType;
+type TagName = typeof TagName;
+
+function getValue<T>(prevValue: T, value: T, checked?: boolean): T | false {
+  if (checked === undefined) return prevValue;
+  if (checked) return value;
+  return prevValue === value ? false : prevValue;
+}
+
+/**
+ * Returns props to create a `MenuItemRadio` component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore({ defaultValues: { fruit: "apple" } });
+ * const apple = useMenuItemRadio({ store, name: "fruit", value: "apple" });
+ * const orange = useMenuItemRadio({ store, name: "fruit", value: "orange" });
+ * <MenuButton store={store}>Fruit</MenuButton>
+ * <Menu store={store}>
+ *   <Role {...apple}>Apple</Role>
+ *   <Role {...orange}>Orange</Role>
+ * </Menu>
+ * ```
+ */
+export const useMenuItemRadio = createHook<TagName, MenuItemRadioOptions>(
+  function useMenuItemRadio({
+    store,
+    name,
+    value,
+    checked,
+    onChange: onChangeProp,
+    hideOnClick = false,
+    ...props
+  }) {
+    const context = useMenuScopedContext();
+    store = store || context;
+
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" &&
+        "MenuItemRadio must be wrapped in a MenuList or Menu component",
+    );
+
+    const defaultChecked = useInitialValue(props.defaultChecked);
+
+    // Sets defaultChecked in store
+    useEffect(() => {
+      store?.setValue(name, (prevValue = false) => {
+        return getValue(prevValue, value, defaultChecked);
+      });
+    }, [store, name, value, defaultChecked]);
+
+    // Sets checked in store
+    useEffect(() => {
+      if (checked === undefined) return;
+      store?.setValue(name, (prevValue) => {
+        return getValue(prevValue, value, checked);
+      });
+    }, [store, name, value, checked]);
+
+    const isChecked = useStoreState(
+      store,
+      (state) => state.values[name] === value,
+    );
+
+    props = useWrapElement(
+      props,
+      (element) => (
+        <MenuItemCheckedContext.Provider value={isChecked}>
+          {element}
+        </MenuItemCheckedContext.Provider>
+      ),
+      [isChecked],
+    );
+
+    props = {
+      role: "menuitemradio",
+      ...props,
+    };
+
+    props = useRadio<TagName>({
+      name,
+      value,
+      checked: isChecked,
+      onChange(event) {
+        onChangeProp?.(event);
+        if (event.defaultPrevented) return;
+        const element = event.currentTarget;
+        store?.setValue(name, (prevValue) => {
+          return getValue(prevValue, value, checked ?? element.checked);
+        });
+      },
+      ...props,
+    });
+
+    props = useMenuItem({ store, hideOnClick, ...props });
+
+    return props;
+  },
+);
+
+/**
+ * Renders a [`menuitemradio`](https://w3c.github.io/aria/#menuitemradio)
+ * element within a [`Menu`](https://ariakit.com/reference/menu) component. The
+ * [`name`](https://ariakit.com/reference/menu-item-radio#name) prop must be
+ * provided to identify the field in the
+ * [`values`](https://ariakit.com/reference/menu-provider#values) state.
+ *
+ * A [`MenuItemCheck`](https://ariakit.com/reference/menu-item-check) can be
+ * used to render a checkmark inside this component.
+ * @see https://ariakit.com/components/menu
+ * @example
+ * ```jsx {4-11}
+ * <MenuProvider defaultValues={{ profile: "john" }}>
+ *   <MenuButton>Profiles</MenuButton>
+ *   <Menu>
+ *     <MenuItemRadio name="profile" value="john">
+ *       <MenuItemCheck />
+ *       John Doe
+ *     </MenuItemRadio>
+ *     <MenuItemRadio name="profile" value="jane">
+ *       <MenuItemCheck />
+ *       Jane Doe
+ *     </MenuItemRadio>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export const MenuItemRadio = memo(
+  forwardRef(function MenuItemRadio(props: MenuItemRadioProps) {
+    const htmlProps = useMenuItemRadio(props);
+    return createElement(TagName, htmlProps);
+  }),
+);
+
+export interface MenuItemRadioOptions<T extends ElementType = TagName>
+  extends MenuItemOptions<T>, Omit<RadioOptions<T>, "store"> {
+  /**
+   * 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;
+  /**
+   * The name of the field in the
+   * [`values`](https://ariakit.com/reference/menu-provider#values) state.
+   *
+   * Live examples:
+   * - [MenuItemRadio](https://ariakit.com/examples/menu-item-radio)
+   */
+  name: string;
+  /**
+   * The controlled checked state of the element. It will set the menu
+   * [`values`](https://ariakit.com/reference/menu-provider#values) state if
+   * provided.
+   */
+  checked?: boolean;
+  /**
+   * The default checked state of the element. It will set the default value in
+   * the menu [`values`](https://ariakit.com/reference/menu-provider#values)
+   * state if provided.
+   */
+  defaultChecked?: boolean;
+  /**
+   * @default false
+   */
+  hideOnClick?: MenuItemOptions<T>["hideOnClick"];
+}
+
+export type MenuItemRadioProps<T extends ElementType = TagName> = Props<
+  T,
+  MenuItemRadioOptions<T>
+>;