@ariakit/react-core 0.0.1 → 0.1.1

package/esm/menu/menu-bar.js

@@ -0,0 +1,53 @@
+import {
+  MenuBarContext
+} from "../__chunks/HVBRRKV4.js";
+import {
+  useComposite
+} from "../__chunks/FXC76SFN.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useWrapElement
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/menu/menu-bar.tsx
+import { jsx } from "react/jsx-runtime";
+var useMenuBar = createHook(
+  ({ store, composite = true, ...props }) => {
+    const orientation = store.useState(
+      (state) => !composite || state.orientation === "both" ? void 0 : state.orientation
+    );
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(MenuBarContext.Provider, { value: store, children: element }),
+      [store]
+    );
+    if (composite) {
+      props = {
+        role: "menubar",
+        "aria-orientation": orientation,
+        ...props
+      };
+    }
+    props = useComposite({ store, composite, ...props });
+    return props;
+  }
+);
+var MenuBar = createComponent((props) => {
+  const htmlProps = useMenuBar(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  MenuBar.displayName = "MenuBar";
+}
+export {
+  MenuBar,
+  useMenuBar
+};

package/esm/menu/menu-button-arrow.d.ts

@@ -0,0 +1,47 @@
+import type { PopoverDisclosureArrowOptions } from "../popover/popover-disclosure-arrow.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuButtonArrow` component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const props = useMenuButtonArrow({ store });
+ * <MenuButton store={store}>
+ *   Edit
+ *   <Role {...props} />
+ * </MenuButton>
+ * <Menu store={store}>
+ *   <MenuItem>Undo</MenuItem>
+ *   <MenuItem>Redo</MenuItem>
+ * </Menu>
+ * ```
+ */
+export declare const useMenuButtonArrow: import("../utils/types.js").Hook<MenuButtonArrowOptions<"span">>;
+/**
+ * Renders an arrow pointing to the menu position, usually inside a
+ * `MenuButton`.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore();
+ * <MenuButton store={menu}>
+ *   Edit
+ *   <MenuButtonArrow />
+ * </MenuButton>
+ * <Menu store={menu}>
+ *   <MenuItem>Undo</MenuItem>
+ *   <MenuItem>Redo</MenuItem>
+ * </Menu>
+ * ```
+ */
+export declare const MenuButtonArrow: import("../utils/types.js").Component<MenuButtonArrowOptions<"span">>;
+export interface MenuButtonArrowOptions<T extends As = "span"> extends PopoverDisclosureArrowOptions<T> {
+    /**
+     * Object returned by the `useMenuStore` hook. If not provided, the parent
+     * `MenuButton` component's context will be used.
+     */
+    store?: MenuStore;
+}
+export type MenuButtonArrowProps<T extends As = "span"> = Props<MenuButtonArrowOptions<T>>;

package/esm/menu/menu-button-arrow.js

@@ -0,0 +1,30 @@
+import {
+  usePopoverDisclosureArrow
+} from "../__chunks/KHFKAEA6.js";
+import "../__chunks/6GS36SYX.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+
+// src/menu/menu-button-arrow.ts
+var useMenuButtonArrow = createHook(
+  ({ store, ...props }) => {
+    props = usePopoverDisclosureArrow({ store, ...props });
+    return props;
+  }
+);
+var MenuButtonArrow = createComponent(
+  (props) => {
+    const htmlProps = useMenuButtonArrow(props);
+    return createElement("span", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  MenuButtonArrow.displayName = "MenuButtonArrow";
+}
+export {
+  MenuButtonArrow,
+  useMenuButtonArrow
+};

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

@@ -0,0 +1,50 @@
+import type { CompositeTypeaheadOptions } from "../composite/composite-typeahead.js";
+import type { HovercardAnchorOptions } from "../hovercard/hovercard-anchor.js";
+import type { PopoverDisclosureOptions } from "../popover/popover-disclosure.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuButton` component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const props = useMenuButton({ store });
+ * <Role {...props}>Edit</Role>
+ * <Menu store={store}>
+ *   <MenuItem>Undo</MenuItem>
+ *   <MenuItem>Redo</MenuItem>
+ * </Menu>
+ * ```
+ */
+export declare const useMenuButton: import("../utils/types.js").Hook<MenuButtonOptions<"button" | "div">>;
+/**
+ * Renders a menu button that triggers a dropdown menu. Usually, this is
+ * rendered as a native `button` element, but if it's a submenu button rendered
+ * as a menu item inside another menu, it'll be rendered as a `div`.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const menu = useMenuStore();
+ * <MenuButton store={menu}>Edit</MenuButton>
+ * <Menu store={menu}>
+ *   <MenuItem>Undo</MenuItem>
+ *   <MenuItem>Redo</MenuItem>
+ * </Menu>
+ * ```
+ */
+export declare const MenuButton: import("../utils/types.js").Component<MenuButtonOptions<"button" | "div">>;
+export interface MenuButtonOptions<T extends As = "button" | "div"> extends HovercardAnchorOptions<T>, PopoverDisclosureOptions<T>, CompositeTypeaheadOptions<T> {
+    /**
+     * Object returned by the `useMenuStore` hook.
+     */
+    store: MenuStore;
+    /**
+     * Determines whether pressing a character key while focusing on the
+     * `MenuButton` should move focus to the `MenuItem` starting with that
+     * character. By default, it's `true` for menu buttons in a `MenuBar`, but
+     * `false` for other menu buttons.
+     */
+    typeahead?: boolean;
+}
+export type MenuButtonProps<T extends As = "button" | "div"> = Props<MenuButtonOptions<T>>;

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
+};