@ariakit/react-components 0.1.0

package/dist/menu/menu-item-checkbox.js

@@ -0,0 +1,151 @@
+"use client";
+import { useCheckboxStore } from "../checkbox/checkbox-store.js";
+import { useCheckbox } from "../checkbox/checkbox.js";
+import { useMenuScopedContext } from "./menu-context.js";
+import { useMenuItem } from "./menu-item.js";
+import { createElement, createHook, forwardRef, memo, useInitialValue } from "@ariakit/react-utils";
+import { invariant, shallowEqual } from "@ariakit/utils";
+import { useEffect } from "react";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/menu/menu-item-checkbox.tsx
+const TagName = "div";
+function getPrimitiveValue(value) {
+	if (Array.isArray(value)) return value.toString();
+	return value;
+}
+function getValue(storeValue, value, checked) {
+	if (value === void 0) {
+		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>
+* ```
+*/
+const useMenuItemCheckbox = createHook(function useMenuItemCheckbox({ store, name, value, checked, defaultChecked: defaultCheckedProp, hideOnClick = false, ...props }) {
+	const context = useMenuScopedContext();
+	store = store || context;
+	invariant(store, "MenuItemCheckbox must be wrapped in a MenuList or Menu component");
+	const defaultChecked = useInitialValue(defaultCheckedProp);
+	useEffect(() => {
+		store?.setValue(name, (prevValue = []) => {
+			if (!defaultChecked) return prevValue;
+			return getValue(prevValue, value, true);
+		});
+	}, [
+		store,
+		name,
+		value,
+		defaultChecked
+	]);
+	useEffect(() => {
+		if (checked === void 0) 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 === void 0) 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({
+		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>
+* ```
+*/
+const MenuItemCheckbox = memo(forwardRef(function MenuItemCheckbox(props) {
+	return createElement(TagName, useMenuItemCheckbox(props));
+}));
+//#endregion
+export { MenuItemCheckbox, useMenuItemCheckbox };
+
+//# sourceMappingURL=menu-item-checkbox.js.map

package/dist/menu/menu-item-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-checkbox.js","names":[],"sources":["../../src/menu/menu-item-checkbox.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useInitialValue,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant, shallowEqual } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useEffect } from \"react\";\nimport { useCheckboxStore } from \"../checkbox/checkbox-store.ts\";\nimport type { CheckboxOptions } from \"../checkbox/checkbox.tsx\";\nimport { useCheckbox } from \"../checkbox/checkbox.tsx\";\nimport { useMenuScopedContext } from \"./menu-context.tsx\";\nimport type { MenuItemOptions } from \"./menu-item.tsx\";\nimport { useMenuItem } from \"./menu-item.tsx\";\nimport type { MenuStore, MenuStoreValues } from \"./menu-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype ValueState = MenuStoreValues[string];\n\nfunction getPrimitiveValue<T>(value: T) {\n  if (Array.isArray(value)) {\n    return value.toString();\n  }\n  return value as Exclude<T, readonly any[]>;\n}\n\nfunction getValue(\n  storeValue: ValueState,\n  value?: MenuItemCheckboxOptions[\"value\"],\n  checked?: MenuItemCheckboxOptions[\"checked\"],\n) {\n  if (value === undefined) {\n    if (Array.isArray(storeValue)) return storeValue;\n    return !!checked;\n  }\n  const primitiveValue = getPrimitiveValue(value);\n  if (!Array.isArray(storeValue)) {\n    if (checked) {\n      return primitiveValue;\n    }\n    return storeValue === primitiveValue ? false : storeValue;\n  }\n  if (checked) {\n    if (storeValue.includes(primitiveValue)) {\n      return storeValue;\n    }\n    return [...storeValue, primitiveValue];\n  }\n  return storeValue.filter((v) => v !== primitiveValue);\n}\n\n/**\n * Returns props to create a `MenuItemCheckbox` component.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * const store = useMenuStore({ defaultValues: { apple: false } });\n * const props = useMenuItemCheckbox({ store, name: \"apple\" });\n * <MenuButton store={store}>Fruits</MenuButton>\n * <Menu store={store}>\n *   <Role {...props}>Apple</Role>\n * </Menu>\n * ```\n */\nexport const useMenuItemCheckbox = createHook<TagName, MenuItemCheckboxOptions>(\n  function useMenuItemCheckbox({\n    store,\n    name,\n    value,\n    checked,\n    defaultChecked: defaultCheckedProp,\n    hideOnClick = false,\n    ...props\n  }) {\n    const context = useMenuScopedContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"MenuItemCheckbox must be wrapped in a MenuList or Menu component\",\n    );\n\n    const defaultChecked = useInitialValue(defaultCheckedProp);\n\n    // Sets defaultChecked in store\n    useEffect(() => {\n      store?.setValue(name, (prevValue = []) => {\n        if (!defaultChecked) return prevValue;\n        return getValue(prevValue, value, true);\n      });\n    }, [store, name, value, defaultChecked]);\n\n    // Sets checked in store\n    useEffect(() => {\n      if (checked === undefined) return;\n      store?.setValue(name, (prevValue) => {\n        return getValue(prevValue, value, checked);\n      });\n    }, [store, name, value, checked]);\n\n    const checkboxStore = useCheckboxStore({\n      value: useStoreState(store, (state) => state.values[name]),\n      setValue(internalValue) {\n        store?.setValue(name, () => {\n          if (checked === undefined) return internalValue;\n          const nextValue = getValue(internalValue, value, checked);\n          if (!Array.isArray(nextValue)) return nextValue;\n          if (!Array.isArray(internalValue)) return nextValue;\n          if (shallowEqual(internalValue, nextValue)) return internalValue;\n          return nextValue;\n        });\n      },\n    });\n\n    props = {\n      role: \"menuitemcheckbox\",\n      ...props,\n    };\n\n    props = useCheckbox<TagName>({\n      store: checkboxStore,\n      name,\n      value,\n      checked,\n      ...props,\n    });\n    props = useMenuItem({ store, hideOnClick, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a [`menuitemcheckbox`](https://w3c.github.io/aria/#menuitemcheckbox)\n * element within a [`Menu`](https://ariakit.com/reference/menu) component. The\n * [`name`](https://ariakit.com/reference/menu-item-checkbox#name) prop must be\n * provided to identify the field in the\n * [`values`](https://ariakit.com/reference/menu-provider#values) state.\n *\n * A [`MenuItemCheck`](https://ariakit.com/reference/menu-item-check) can be\n * used to render a checkmark inside this component.\n * @see https://ariakit.com/components/menu\n * @example\n * The [`name`](https://ariakit.com/reference/menu-item-checkbox#name) prop can\n * refer to a single value in the state:\n * ```jsx {4-7}\n * <MenuProvider defaultValues={{ warnBeforeQuitting: true }}>\n *   <MenuButton>Chrome</MenuButton>\n *   <Menu>\n *     <MenuItemCheckbox name=\"warnBeforeQuitting\">\n *       <MenuItemCheck />\n *       Warn Before Quitting\n *     </MenuItemCheckbox>\n *   </Menu>\n * </MenuProvider>\n * ```\n * @example\n * Or it can refer to an array of values, in which case the\n * [`value`](https://ariakit.com/reference/menu-item-checkbox#value) prop must\n * be provided:\n * ```jsx {4-9}\n * <MenuProvider defaultValues={{ watching: [\"issues\"] }}>\n *   <MenuButton>Watch</MenuButton>\n *   <Menu>\n *     <MenuItemCheckbox name=\"watching\" value=\"issues\">\n *       Issues\n *     </MenuItemCheckbox>\n *     <MenuItemCheckbox name=\"watching\" value=\"pull-requests\">\n *       Pull Requests\n *     </MenuItemCheckbox>\n *   </Menu>\n * </MenuProvider>\n * ```\n */\nexport const MenuItemCheckbox = memo(\n  forwardRef(function MenuItemCheckbox(props: MenuItemCheckboxProps) {\n    const htmlProps = useMenuItemCheckbox(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface MenuItemCheckboxOptions<T extends ElementType = TagName>\n  extends MenuItemOptions<T>, Omit<CheckboxOptions<T>, \"store\"> {\n  /**\n   * Object returned by the\n   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not\n   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or\n   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'\n   * context will be used.\n   */\n  store?: MenuStore;\n  /**\n   * The name of the field in the\n   * [`values`](https://ariakit.com/reference/menu-provider#values) state.\n   *\n   * Live examples:\n   * - [MenuItemCheckbox](https://ariakit.com/examples/menu-item-checkbox)\n   */\n  name: string;\n  /**\n   * The controlled checked state of the element. It will set the menu\n   * [`values`](https://ariakit.com/reference/menu-provider#values) state if\n   * provided.\n   */\n  checked?: boolean;\n  /**\n   * The default checked state of the element. It will set the default value in\n   * the menu [`values`](https://ariakit.com/reference/menu-provider#values)\n   * state if provided.\n   */\n  defaultChecked?: boolean;\n  /**\n   * @default false\n   */\n  hideOnClick?: MenuItemOptions<T>[\"hideOnClick\"];\n}\n\nexport type MenuItemCheckboxProps<T extends ElementType = TagName> = Props<\n  T,\n  MenuItemCheckboxOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AAwBA,MAAA,UAAS;SACH,kBACF,OAAO;CAET,IAAA,MAAO,QAAA,KAAA,GAAA,OAAA,MAAA,SAAA;CACT,OAAA;AAEA;SAKM,SAAU,YAAW,OAAA,SAAA;KACvB,UAAU,KAAQ,GAAA;EAClB,IAAA,MAAS,QAAA,UAAA,GAAA,OAAA;EACX,OAAA,CAAA,CAAA;CACA;CACA,MAAK,iBAAc,kBAAa,KAAA;KAC9B,CAAI,MAAA,QACF,UAAO,GAAA;EAET,IAAA,SAAO,OAAA;EACT,OAAA,eAAA,iBAAA,QAAA;CACA;KACE,SAAI;EAGJ,IAAA,WAAW,SAAY,cAAc,GAAA,OAAA;EACvC,OAAA,CAAA,GAAA,YAAA,cAAA;CACA;CACF,OAAA,WAAA,QAAA,MAAA,MAAA,cAAA;;;;;;;;;;;;;;;MAyBI,sBAAgB,WAAqB,SAAA,oBAAA,EAAA,OAAA,MAAA,OAAA,SAAA,gBAAA,oBAAA,cAAA,OAAA,GAAA,SAAA;CACrC,MAAA,UAAQ,qBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,kEAAmD;CAGzD,MAAA,iBAAgB,gBAAA,kBAAA;iBACP;SACA,SAAA,OAAgB,YAAO,CAAA,MAAA;GAC5B,IAAA,CAAA,gBAAgB,OAAW;GAC5B,OAAA,SAAA,WAAA,OAAA,IAAA;EACH,CAAA;IAAI;EAAO;EAAM;EAAO;EAAe;CAGvC,CAAA;iBACM;EACJ,IAAA,YAAgB,KAAA,GAAO;SACrB,SAAO,OAAS,cAAkB;GACnC,OAAA,SAAA,WAAA,OAAA,OAAA;EACH,CAAA;IAAI;EAAO;EAAM;EAAO;EAAQ;CAEhC,CAAA;OACE,gBAAqB,iBAAQ;EAC7B,OAAA,cAAS,QAAe,UAAA,MAAA,OAAA,KAAA;WACf,eAAS;UACV,SAAA,YAAuB;IAC3B,IAAA,YAAM,KAAY,GAAA,OAAS;IAC3B,MAAK,YAAM,SAAQ,eAAmB,OAAA,OAAA;IACtC,IAAI,CAAC,MAAM,QAAQ,SAAA,GAAA,OAAgB;IACnC,IAAI,CAAA,MAAA,QAAa,aAAe,GAAA,OAAS;IACzC,IAAA,aAAO,eAAA,SAAA,GAAA,OAAA;IACR,OAAA;GACH,CAAA;EACD;CAED,CAAA;SACQ;EACN,MAAG;EACL,GAAA;CAEA;SACS,YAAA;EACP,OAAA;EACA;EACA;EACA;EACD,GAAA;CACD,CAAA;SAAsB,YAAA;EAAO;EAAa;EAAU,GAAA;CAEpD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+CI,mBAAqB,KAAA,WADH,SAAA,iBACqB,OAAA;CACxC,OACH,cAAA,SAAA,oBAAA,KAAA,CAAA"}

package/dist/menu/menu-item-radio.d.ts

@@ -0,0 +1,91 @@
+import { RadioOptions } from "../radio/radio.js";
+import { t as MenuStore } from "../menu-store-0CKKmNek.js";
+import { MenuItemOptions } from "./menu-item.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/menu/menu-item-radio.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * 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>
+ * ```
+ */
+declare const useMenuItemRadio: import("@ariakit/react-utils").Hook<"div", MenuItemRadioOptions<"div">>;
+/**
+ * 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>
+ * ```
+ */
+declare const MenuItemRadio: (props: MenuItemRadioProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+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"];
+}
+type MenuItemRadioProps<T extends ElementType = TagName> = Props<T, MenuItemRadioOptions<T>>;
+//#endregion
+export { MenuItemRadio, MenuItemRadioOptions, MenuItemRadioProps, useMenuItemRadio };
+//# sourceMappingURL=menu-item-radio.d.ts.map

package/dist/menu/menu-item-radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-radio.d.ts","names":["Props","ElementType","RadioOptions","MenuItemOptions","MenuStore","TagName","useMenuItemRadio","MenuItemRadioOptions","Hook","MenuItemRadio","MenuItemRadioProps","props","ReactElement","JSXElementConstructor","T","Omit","store","name","checked","defaultChecked","hideOnClick"],"sources":["../../src/menu/menu-item-radio.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAgB7B;;;;AAAsG;AAlBrD,cAkB5BC,gBAAAA,iCAAiDE,IAAAA,QAAYD,oBAAoB;;;;;;;;;AA4B6C;AACnJ;;;;;;;;;;;;;;;;;;cADqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,WAA+BN,WAAAA,GAAcI,OAAAA,UAAiBF,eAAAA,CAAgBW,CAAAA,GAAIC,IAAAA,CAAKb,YAAAA,CAAaY,CAAAA;EAAlBC;;;;;;;EAQ/FC,KAAAA,GAAQZ,SAAAA;EAwBRgB;;;;AAA+B;AAEnC;;EAlBIH,IAAAA;EAkBqChB;;;;;EAZrCiB,OAAAA;EAYmE;;;;;EANnEC,cAAAA;EAMoEL;;;EAFpEM,WAAAA,GAAcjB,eAAAA,CAAgBW,CAAAA;AAAAA;AAAAA,KAEtBJ,kBAAAA,WAA6BT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}

package/dist/menu/menu-item-radio.js

@@ -0,0 +1,121 @@
+"use client";
+import { useRadio } from "../radio/radio.js";
+import { MenuItemCheckedContext, useMenuScopedContext } from "./menu-context.js";
+import { useMenuItem } from "./menu-item.js";
+import { createElement, createHook, forwardRef, memo, useInitialValue, useWrapElement } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/menu/menu-item-radio.tsx
+const TagName = "div";
+function getValue(prevValue, value, checked) {
+	if (checked === void 0) 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>
+* ```
+*/
+const useMenuItemRadio = createHook(function useMenuItemRadio({ store, name, value, checked, onChange: onChangeProp, hideOnClick = false, ...props }) {
+	const context = useMenuScopedContext();
+	store = store || context;
+	invariant(store, "MenuItemRadio must be wrapped in a MenuList or Menu component");
+	const defaultChecked = useInitialValue(props.defaultChecked);
+	useEffect(() => {
+		store?.setValue(name, (prevValue = false) => {
+			return getValue(prevValue, value, defaultChecked);
+		});
+	}, [
+		store,
+		name,
+		value,
+		defaultChecked
+	]);
+	useEffect(() => {
+		if (checked === void 0) 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) => /* @__PURE__ */ jsx(MenuItemCheckedContext.Provider, {
+		value: isChecked,
+		children: element
+	}), [isChecked]);
+	props = {
+		role: "menuitemradio",
+		...props
+	};
+	props = useRadio({
+		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>
+* ```
+*/
+const MenuItemRadio = memo(forwardRef(function MenuItemRadio(props) {
+	return createElement(TagName, useMenuItemRadio(props));
+}));
+//#endregion
+export { MenuItemRadio, useMenuItemRadio };
+
+//# sourceMappingURL=menu-item-radio.js.map

package/dist/menu/menu-item-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-radio.js","names":[],"sources":["../../src/menu/menu-item-radio.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useInitialValue,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useEffect } from \"react\";\nimport type { RadioOptions } from \"../radio/radio.tsx\";\nimport { useRadio } from \"../radio/radio.tsx\";\nimport {\n  MenuItemCheckedContext,\n  useMenuScopedContext,\n} from \"./menu-context.tsx\";\nimport type { MenuItemOptions } from \"./menu-item.tsx\";\nimport { useMenuItem } from \"./menu-item.tsx\";\nimport type { MenuStore } from \"./menu-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nfunction getValue<T>(prevValue: T, value: T, checked?: boolean): T | false {\n  if (checked === undefined) return prevValue;\n  if (checked) return value;\n  return prevValue === value ? false : prevValue;\n}\n\n/**\n * Returns props to create a `MenuItemRadio` component.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * const store = useMenuStore({ defaultValues: { fruit: \"apple\" } });\n * const apple = useMenuItemRadio({ store, name: \"fruit\", value: \"apple\" });\n * const orange = useMenuItemRadio({ store, name: \"fruit\", value: \"orange\" });\n * <MenuButton store={store}>Fruit</MenuButton>\n * <Menu store={store}>\n *   <Role {...apple}>Apple</Role>\n *   <Role {...orange}>Orange</Role>\n * </Menu>\n * ```\n */\nexport const useMenuItemRadio = createHook<TagName, MenuItemRadioOptions>(\n  function useMenuItemRadio({\n    store,\n    name,\n    value,\n    checked,\n    onChange: onChangeProp,\n    hideOnClick = false,\n    ...props\n  }) {\n    const context = useMenuScopedContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"MenuItemRadio must be wrapped in a MenuList or Menu component\",\n    );\n\n    const defaultChecked = useInitialValue(props.defaultChecked);\n\n    // Sets defaultChecked in store\n    useEffect(() => {\n      store?.setValue(name, (prevValue = false) => {\n        return getValue(prevValue, value, defaultChecked);\n      });\n    }, [store, name, value, defaultChecked]);\n\n    // Sets checked in store\n    useEffect(() => {\n      if (checked === undefined) return;\n      store?.setValue(name, (prevValue) => {\n        return getValue(prevValue, value, checked);\n      });\n    }, [store, name, value, checked]);\n\n    const isChecked = useStoreState(\n      store,\n      (state) => state.values[name] === value,\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <MenuItemCheckedContext.Provider value={isChecked}>\n          {element}\n        </MenuItemCheckedContext.Provider>\n      ),\n      [isChecked],\n    );\n\n    props = {\n      role: \"menuitemradio\",\n      ...props,\n    };\n\n    props = useRadio<TagName>({\n      name,\n      value,\n      checked: isChecked,\n      onChange(event) {\n        onChangeProp?.(event);\n        if (event.defaultPrevented) return;\n        const element = event.currentTarget;\n        store?.setValue(name, (prevValue) => {\n          return getValue(prevValue, value, checked ?? element.checked);\n        });\n      },\n      ...props,\n    });\n\n    props = useMenuItem({ store, hideOnClick, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a [`menuitemradio`](https://w3c.github.io/aria/#menuitemradio)\n * element within a [`Menu`](https://ariakit.com/reference/menu) component. The\n * [`name`](https://ariakit.com/reference/menu-item-radio#name) prop must be\n * provided to identify the field in the\n * [`values`](https://ariakit.com/reference/menu-provider#values) state.\n *\n * A [`MenuItemCheck`](https://ariakit.com/reference/menu-item-check) can be\n * used to render a checkmark inside this component.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx {4-11}\n * <MenuProvider defaultValues={{ profile: \"john\" }}>\n *   <MenuButton>Profiles</MenuButton>\n *   <Menu>\n *     <MenuItemRadio name=\"profile\" value=\"john\">\n *       <MenuItemCheck />\n *       John Doe\n *     </MenuItemRadio>\n *     <MenuItemRadio name=\"profile\" value=\"jane\">\n *       <MenuItemCheck />\n *       Jane Doe\n *     </MenuItemRadio>\n *   </Menu>\n * </MenuProvider>\n * ```\n */\nexport const MenuItemRadio = memo(\n  forwardRef(function MenuItemRadio(props: MenuItemRadioProps) {\n    const htmlProps = useMenuItemRadio(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface MenuItemRadioOptions<T extends ElementType = TagName>\n  extends MenuItemOptions<T>, Omit<RadioOptions<T>, \"store\"> {\n  /**\n   * Object returned by the\n   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) hook. If not\n   * provided, the closest [`Menu`](https://ariakit.com/reference/menu) or\n   * [`MenuProvider`](https://ariakit.com/reference/menu-provider) components'\n   * context will be used.\n   */\n  store?: MenuStore;\n  /**\n   * The name of the field in the\n   * [`values`](https://ariakit.com/reference/menu-provider#values) state.\n   *\n   * Live examples:\n   * - [MenuItemRadio](https://ariakit.com/examples/menu-item-radio)\n   */\n  name: string;\n  /**\n   * The controlled checked state of the element. It will set the menu\n   * [`values`](https://ariakit.com/reference/menu-provider#values) state if\n   * provided.\n   */\n  checked?: boolean;\n  /**\n   * The default checked state of the element. It will set the default value in\n   * the menu [`values`](https://ariakit.com/reference/menu-provider#values)\n   * state if provided.\n   */\n  defaultChecked?: boolean;\n  /**\n   * @default false\n   */\n  hideOnClick?: MenuItemOptions<T>[\"hideOnClick\"];\n}\n\nexport type MenuItemRadioProps<T extends ElementType = TagName> = Props<\n  T,\n  MenuItemRadioOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AA0BA,MAAA,UAAS;SACH,SAAY,WAAW,OAAO,SAAA;CAClC,IAAI,YAAS,KAAO,GAAA,OAAA;CACpB,IAAA,SAAO,OAAA;CACT,OAAA,cAAA,QAAA,QAAA;;;;;;;;;;;;;;;;;MA2BI,mBAAgB,WAAA,SAAqB,iBAAA,EAAA,OAAA,MAAA,OAAA,SAAA,UAAA,cAAA,cAAA,OAAA,GAAA,SAAA;CACrC,MAAA,UAAQ,qBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,+DAAqD;CAG3D,MAAA,iBAAgB,gBAAA,MAAA,cAAA;iBACP;SACL,SAAO,OAAS,YAAkB,UAAA;GACnC,OAAA,SAAA,WAAA,OAAA,cAAA;EACH,CAAA;IAAI;EAAO;EAAM;EAAO;EAAe;CAGvC,CAAA;iBACM;EACJ,IAAA,YAAgB,KAAA,GAAO;SACrB,SAAO,OAAS,cAAkB;GACnC,OAAA,SAAA,WAAA,OAAA,OAAA;EACH,CAAA;IAAI;EAAO;EAAM;EAAO;EAAQ;CAEhC,CAAA;CAKA,MAAA,YAAQ,cAEL,QAAA,UACC,MAAA,OAAC,UAAA,KAAA;SAAuC,eAAA,QAAA,YAAA,oBAAA,uBAAA,UAAA;;EAEP,UAElC;CAGH,CAAA,GAAA,CAAA,SAAQ,CAAA;SACA;EACN,MAAG;EACL,GAAA;CAEA;SACE,SAAA;EACA;EACA;EACA,SAAS;WACP,OAAe;GACf,eAAU,KAAA;GACV,IAAA,MAAM,kBAAgB;GACtB,MAAA,UAAgB,MAAA;UACd,SAAO,OAAS,cAAkB;IACnC,OAAA,SAAA,WAAA,OAAA,WAAA,QAAA,OAAA;GACH,CAAA;EACA;EACD,GAAA;CAED,CAAA;SAAsB,YAAA;EAAO;EAAa;EAAU,GAAA;CAEpD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCI,gBAAqB,KAAA,WADH,SAAA,cACqB,OAAA;CACxC,OACH,cAAA,SAAA,iBAAA,KAAA,CAAA"}

package/dist/menu/menu-item.d.ts

@@ -0,0 +1,75 @@
+import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { n as CompositeHoverOptions } from "../composite-hover-C7ul163w.js";
+import { t as MenubarStore } from "../menubar-store-3h0eNIbS.js";
+import { t as MenuStore } from "../menu-store-0CKKmNek.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, MouseEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/menu/menu-item.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * 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>
+ * ```
+ */
+declare const useMenuItem: import("@ariakit/react-utils").Hook<"div", MenuItemOptions<"div">>;
+/**
+ * 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>
+ * ```
+ */
+declare const MenuItem: (props: MenuItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+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>>;
+}
+type MenuItemProps<T extends ElementType = TagName> = Props<T, MenuItemOptions<T>>;
+//#endregion
+export { MenuItem, MenuItemOptions, MenuItemProps, useMenuItem };
+//# sourceMappingURL=menu-item.d.ts.map

package/dist/menu/menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","names":["Props","BooleanOrCallback","ElementType","MouseEvent","CompositeHoverOptions","CompositeItemOptions","MenubarStore","MenuStore","TagName","useMenuItem","MenuItemOptions","Hook","MenuItem","MenuItemProps","props","ReactElement","JSXElementConstructor","T","HTMLElement","store","hideOnClick"],"sources":["../../src/menu/menu-item.d.ts"],"mappings":";;;;;;;;;cAOcQ,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAgB7B;;;;AAA4F;AAlB3C,cAkB5BC,WAAAA,iCAA4CE,IAAAA,QAAYD,eAAe;;;;;;;;;AAkB6C;AACzI;;;;;;;;cADqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnGN,eAAAA,WAA0BR,WAAAA,GAAcM,OAAAA,UAAiBH,oBAAAA,CAAqBY,CAAAA,GAAIb,qBAAAA,CAAsBa,CAAAA;EAwBrFd;;;;;;;;;;;EAZhCgB,KAAAA,GAAQb,YAAAA,GAAeC,SAAAA;EAZ8FU;;;;;;;;;AAwB/D;AAE1D;EAFIG,WAAAA,GAAcnB,iBAAAA,CAAkBE,UAAAA,CAAWe,WAAAA;AAAAA;AAAAA,KAEnCL,aAAAA,WAAwBX,WAAAA,GAAcM,OAAAA,IAAWR,KAAAA,CAAMiB,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}

package/dist/menu/menu-item.js

@@ -0,0 +1,122 @@
+"use client";
+import { useCompositeItem } from "../composite/composite-item.js";
+import { useCompositeHover } from "../composite/composite-hover.js";
+import { useMenubarScopedContext } from "../menubar/menubar-context.js";
+import { useMenuScopedContext } from "./menu-context.js";
+import { createElement, createHook, forwardRef, memo, useBooleanEvent, useEvent } from "@ariakit/react-utils";
+import { getDocument, getPopupItemRole, hasFocusWithin, invariant, isDownloading, isOpeningInNewTab } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/menu/menu-item.tsx
+const TagName = "div";
+function menuHasFocus(baseElement, items, currentTarget) {
+	if (!baseElement) return false;
+	if (hasFocusWithin(baseElement)) return true;
+	const expandedMenuId = (items?.find((item) => {
+		if (item.element === currentTarget) return false;
+		return item.element?.getAttribute("aria-expanded") === "true";
+	}))?.element?.getAttribute("aria-controls");
+	if (!expandedMenuId) return false;
+	const expandedMenu = getDocument(baseElement).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>
+* ```
+*/
+const useMenuItem = createHook(function useMenuItem({ store, hideOnClick = true, preventScrollOnKeyDown = true, focusOnHover, blurOnHoverEnd, ...props }) {
+	const menuContext = useMenuScopedContext(true);
+	const menubarContext = useMenubarScopedContext();
+	store = store || menuContext || menubarContext;
+	invariant(store, "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 : void 0;
+	const isWithinMenu = !!hideMenu;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (isDownloading(event)) return;
+		if (isOpeningInNewTab(event)) return;
+		if (!hideMenu) return;
+		const popupType = event.currentTarget.getAttribute("aria-haspopup");
+		if (popupType && popupType !== "false") return;
+		if (!hideOnClickProp(event)) return;
+		hideMenu();
+	});
+	props = {
+		role: getPopupItemRole(useStoreState(store, (state) => "contentElement" in state ? state.contentElement : null), "menuitem"),
+		...props,
+		onClick
+	};
+	props = useCompositeItem({
+		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 (isWithinMenu) {
+				if (event.currentTarget.hasAttribute("aria-expanded")) event.currentTarget.focus();
+				return true;
+			}
+			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;
+			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>
+* ```
+*/
+const MenuItem = memo(forwardRef(function MenuItem(props) {
+	return createElement(TagName, useMenuItem(props));
+}));
+//#endregion
+export { MenuItem, useMenuItem };
+
+//# sourceMappingURL=menu-item.js.map

package/dist/menu/menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../src/menu/menu-item.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  getDocument,\n  getPopupItemRole,\n  isDownloading,\n  isOpeningInNewTab,\n  hasFocusWithin,\n  invariant,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport type { CompositeHoverOptions } from \"../composite/composite-hover.tsx\";\nimport { useCompositeHover } from \"../composite/composite-hover.tsx\";\nimport type { CompositeItemOptions } from \"../composite/composite-item.tsx\";\nimport { useCompositeItem } from \"../composite/composite-item.tsx\";\nimport { useMenubarScopedContext } from \"../menubar/menubar-context.tsx\";\nimport type { MenubarStore } from \"../menubar/menubar-store.ts\";\nimport { useMenuScopedContext } from \"./menu-context.tsx\";\nimport type { MenuStore, MenuStoreState } from \"./menu-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction menuHasFocus(\n  baseElement?: MenuStoreState[\"baseElement\"],\n  items?: MenuStoreState[\"items\"],\n  currentTarget?: Element,\n) {\n  if (!baseElement) return false;\n  if (hasFocusWithin(baseElement)) return true;\n  const expandedItem = items?.find((item) => {\n    if (item.element === currentTarget) return false;\n    return item.element?.getAttribute(\"aria-expanded\") === \"true\";\n  });\n  const expandedMenuId = expandedItem?.element?.getAttribute(\"aria-controls\");\n  if (!expandedMenuId) return false;\n  const doc = getDocument(baseElement);\n  const expandedMenu = doc.getElementById(expandedMenuId);\n  if (!expandedMenu) return false;\n  if (hasFocusWithin(expandedMenu)) return true;\n  return !!expandedMenu.querySelector(\"[role=menuitem][aria-expanded=true]\");\n}\n\n/**\n * Returns props to create a `MenuItem` component.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx\n * const store = useMenuStore();\n * const undo = useMenuItem({ store });\n * const redo = useMenuItem({ store });\n * <MenuButton store={store}>Edit</MenuButton>\n * <Menu store={store}>\n *   <Role {...undo}>Undo</Role>\n *   <Role {...redo}>Redo</Role>\n * </Menu>\n * ```\n */\nexport const useMenuItem = createHook<TagName, MenuItemOptions>(\n  function useMenuItem({\n    store,\n    hideOnClick = true,\n    preventScrollOnKeyDown = true,\n    focusOnHover,\n    blurOnHoverEnd,\n    ...props\n  }) {\n    const menuContext = useMenuScopedContext(true);\n    const menubarContext = useMenubarScopedContext();\n    store = store || menuContext || (menubarContext as any);\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"MenuItem must be wrapped in a MenuList, Menu or Menubar component\",\n    );\n\n    const onClickProp = props.onClick;\n    const hideOnClickProp = useBooleanEvent(hideOnClick);\n    const hideMenu = \"hideAll\" in store ? store.hideAll : undefined;\n    const isWithinMenu = !!hideMenu;\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      if (isDownloading(event)) return;\n      if (isOpeningInNewTab(event)) return;\n      if (!hideMenu) return;\n      // If this item is also a submenu button or any other disclosure, we\n      // don't want to hide the menu.\n      const popupType = event.currentTarget.getAttribute(\"aria-haspopup\");\n      if (popupType && popupType !== \"false\") return;\n      if (!hideOnClickProp(event)) return;\n      hideMenu();\n    });\n\n    const contentElement = useStoreState(store, (state) =>\n      \"contentElement\" in state ? state.contentElement : null,\n    );\n\n    const role = getPopupItemRole(contentElement, \"menuitem\");\n\n    props = {\n      role,\n      ...props,\n      onClick,\n    };\n\n    props = useCompositeItem<TagName>({\n      store,\n      preventScrollOnKeyDown,\n      ...props,\n    });\n\n    props = useCompositeHover({\n      store,\n      ...props,\n      focusOnHover(event) {\n        const getFocusOnHover = () => {\n          if (typeof focusOnHover === \"function\") return focusOnHover(event);\n          if (focusOnHover != null) return focusOnHover;\n          return true;\n        };\n        if (!store) return false;\n        if (!getFocusOnHover()) return false;\n        const { baseElement, items } = store.getState();\n        // If the menu item is also a submenu button, we should move actual DOM\n        // focus to it so that the submenu will not close when the user moves\n        // the cursor back to the menu button.\n        if (isWithinMenu) {\n          if (event.currentTarget.hasAttribute(\"aria-expanded\")) {\n            event.currentTarget.focus();\n          }\n          return true;\n        }\n        // If the menu item is inside a menu bar, we should move DOM focus to\n        // the menu item if focus is somewhere on the widget. Without this, the\n        // open menus in the menu bar wouldn't close.\n        if (menuHasFocus(baseElement, items, event.currentTarget)) {\n          event.currentTarget.focus();\n          return true;\n        }\n        return false;\n      },\n      blurOnHoverEnd(event) {\n        if (typeof blurOnHoverEnd === \"function\") return blurOnHoverEnd(event);\n        if (blurOnHoverEnd != null) return blurOnHoverEnd;\n        // The menu container should be focused on mouseleave only if the menu\n        // item is inside a menu, not a menu bar.\n        return isWithinMenu;\n      },\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a menu item inside\n * [`MenuList`](https://ariakit.com/reference/menu-list) or\n * [`Menu`](https://ariakit.com/reference/menu)\n * components.\n * @see https://ariakit.com/components/menu\n * @example\n * ```jsx {4-5}\n * <MenuProvider>\n *   <MenuButton>Edit</MenuButton>\n *   <Menu>\n *     <MenuItem>Undo</MenuItem>\n *     <MenuItem>Redo</MenuItem>\n *   </Menu>\n * </MenuProvider>\n * ```\n */\nexport const MenuItem = memo(\n  forwardRef(function MenuItem(props: MenuItemProps) {\n    const htmlProps = useMenuItem(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface MenuItemOptions<T extends ElementType = TagName>\n  extends CompositeItemOptions<T>, CompositeHoverOptions<T> {\n  /**\n   * Object returned by the\n   * [`useMenuStore`](https://ariakit.com/reference/use-menu-store) or\n   * [`useMenubarStore`](https://ariakit.com/reference/use-menubar-store)\n   * hooks. If not provided, the closest\n   * [`Menu`](https://ariakit.com/reference/menu),\n   * [`MenuProvider`](https://ariakit.com/reference/menu-provider),\n   * [`Menubar`](https://ariakit.com/reference/menubar), or\n   * [`MenubarProvider`](https://ariakit.com/reference/menubar-provider)\n   * components' context will be used.\n   */\n  store?: MenubarStore | MenuStore;\n  /**\n   * Determines if the menu should hide when this item is clicked.\n   *\n   * **Note**: This behavior isn't triggered if this menu item is rendered as a\n   * link and modifier keys are used to either open the link in a new tab or\n   * download it.\n   *\n   * Live examples:\n   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)\n   * @default true\n   */\n  hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n}\n\nexport type MenuItemProps<T extends ElementType = TagName> = Props<\n  T,\n  MenuItemOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAiCA,MAAA,UAAS;SAKF,aAAa,aAAO,OAAA,eAAA;CACzB,IAAI,CAAA,aAAA,OAAe;CAKnB,IAAA,eAAM,WAJe,GAAO,OAAM;OAC5B,kBAAiB,OAAA,MAAe,SAAO;EAC3C,IAAA,KAAO,YAAc,eAAa,OAAA;EACnC,OACoC,KAAA,SAAS,aAAa,eAAe,MAAA;CAC1E,CAAA,IAAK,SAAA,aAAgB,eAAO;CAE5B,IAAA,CAAA,gBADY,OAAA;CAEZ,MAAK,eAAc,YAAO,WAAA,EAAA,eAAA,cAAA;CAC1B,IAAI,CAAA,cAAe,OAAA;CACnB,IAAA,eAAS,YAAa,GAAA,OAAc;CACtC,OAAA,CAAA,CAAA,aAAA,cAAA,qCAAA;;;;;;;;;;;;;;;;;MA0BI,cAAM,WAAc,SAAA,YAAyB,EAAA,OAAA,cAAA,MAAA,yBAAA,MAAA,cAAA,gBAAA,GAAA,SAAA;CAC7C,MAAM,cAAA,qBAAiB,IAAA;CACvB,MAAA,iBAAiB,wBAAgB;CAEjC,QAAA,SAGI,eAAA;CAGJ,UAAM,OAAA,mEAAoB;CAC1B,MAAM,cAAA,MAAkB;CACxB,MAAM,kBAAW,gBAAqB,WAAM;CAC5C,MAAM,WAAA,aAAiB,QAAA,MAAA,UAAA,KAAA;CAEvB,MAAM,eAAU,CAAA,CAAA;OACd,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAA,kBAAsB;EAC1B,IAAI,cAAA,KAAkB,GAAA;EACtB,IAAI,kBAAW,KAAA,GAAA;EAGf,IAAA,CAAA,UAAM;EACN,MAAI,YAAa,MAAA,cAAc,aAAS,eAAA;EACxC,IAAI,aAAC,cAAwB,SAAA;EAC7B,IAAA,CAAA,gBAAS,KAAA,GAAA;EACV,SAAA;CAQD,CAAA;SAFa;EAIX,MAAG,iBAAA,cAAA,QAAA,UAAA,oBAAA,QAAA,MAAA,iBAAA,IAAA,GAAA,UAAA;EACH,GAAA;EACF;CAEA;SACE,iBAAA;EACA;EACA;EACD,GAAA;CAED,CAAA;SACE,kBAAA;EACA;EACA,GAAA;eACQ,OAAA;SACA,wBAAwB;IAC5B,IAAI,OAAA,iBAAsB,YAAO,OAAA,aAAA,KAAA;IACjC,IAAA,gBAAO,MAAA,OAAA;IACT,OAAA;GACA;GACA,IAAI,CAAC,OAAA,OAAA;GACL,IAAA,CAAA,gBAAqB,GAAA,OAAU;GAI/B,MAAI,EAAA,aAAc,UAAA,MAAA,SAAA;OAChB,cAAU;IAGV,IAAA,MAAO,cAAA,aAAA,eAAA,GAAA,MAAA,cAAA,MAAA;IACT,OAAA;GAIA;OACE,aAAM,aAAoB,OAAA,MAAA,aAAA,GAAA;IAC1B,MAAA,cAAO,MAAA;IACT,OAAA;GACA;GACF,OAAA;EACA;iBACa,OAAA;GACX,IAAI,OAAA,mBAAwB,YAAO,OAAA,eAAA,KAAA;GAGnC,IAAA,kBAAO,MAAA,OAAA;GACT,OAAA;EACD;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;MAsBI,WAAO,KAAc,WADH,SAAA,SACqB,OAAA;CACxC,OACH,cAAA,SAAA,YAAA,KAAA,CAAA"}