@doist/reactist 21.1.1 → 22.0.0-beta

package/es/base-field/base-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_540a88ff = {"container":"_2e189908","auxiliaryLabel":"_83051e0a","bordered":"fd20ef50","error":"d1a17d92","primaryLabel":"_75e0afa0","secondaryLabel":"d04a867d","messageIcon":"_77b2107e"};
+var modules_540a88ff = {"container":"_616a033e","auxiliaryLabel":"_0b88d85e","bordered":"c466cda3","error":"_4156d9cb","primaryLabel":"_274ef80a","secondaryLabel":"_2c4a8aed","messageIcon":"cd105f69"};
 
 export default modules_540a88ff;
 //# sourceMappingURL=base-field.module.css.js.map

package/es/index.js

@@ -28,7 +28,7 @@ export { Avatar } from './avatar/avatar.js';
 export { Badge } from './badge/badge.js';
 export { Modal, ModalActions, ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from './modal/modal.js';
 export { Tab, TabAwareSlot, TabList, TabPanel, Tabs } from './tabs/tabs.js';
-export { ContextMenuTrigger, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu } from './menu/menu.js';
+export { ContextMenuTrigger, IconMenuItem, IconsMenuGroup, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu, SubMenuItem, SubMenuList } from './menu/menu.js';
 export { default as DeprecatedButton } from './components/deprecated-button/index.js';
 export { default as DeprecatedDropdown } from './components/deprecated-dropdown/index.js';
 export { COLORS } from './components/color-picker/color-picker.js';

package/es/menu/menu.js

@@ -1,16 +1,25 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useMemo, useEffect, useCallback, createElement, useContext, forwardRef, Children, cloneElement, createContext } from 'react';
+import { forwardRef, useState, useMemo, useEffect, useImperativeHandle, useCallback, createElement, useContext, Children, cloneElement, createContext } from 'react';
 import classNames from 'classnames';
 import { polymorphicComponent } from '../utils/polymorphism.js';
+import { Box } from '../box/box.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import { useId } from '../utils/common-helpers.js';
+import { Text } from '../text/text.js';
 import { Portal } from 'ariakit/portal';
 import { useMenuState, MenuButton as MenuButton$1, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from 'ariakit/menu';
+import styles from './menu.module.css.js';
 
 const _excluded = ["children", "onItemSelect"],
       _excluded2 = ["exceptionallySetClassName"],
-      _excluded3 = ["as"],
-      _excluded4 = ["exceptionallySetClassName", "modal"],
-      _excluded5 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
-      _excluded6 = ["label", "children", "exceptionallySetClassName"];
+      _excluded3 = ["exceptionallySetClassName", "label", "icon"],
+      _excluded4 = ["as"],
+      _excluded5 = ["exceptionallySetClassName", "modal"],
+      _excluded6 = ["exceptionallySetClassName", "modal"],
+      _excluded7 = ["value", "label", "description", "icon", "shortcut", "tone", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded8 = ["label", "info", "children", "exceptionallySetClassName"],
+      _excluded9 = ["value", "label", "description", "icon", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded10 = ["children"];
 const MenuContext = /*#__PURE__*/createContext( // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn
 // (it is normally obtained by calling useMenuState but we can't call hooks outside components).
 // This is however of little consequence since this value is only used if some of the components
@@ -22,7 +31,7 @@ const MenuContext = /*#__PURE__*/createContext( // Ariakit gives us no means to
  * management for the menu components inside it.
  */
 
-function Menu(_ref) {
+const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, ref) {
   let {
     children,
     onItemSelect
@@ -42,6 +51,9 @@ function Menu(_ref) {
   useEffect(() => {
     if (!state.open) handleAnchorRectChange(null);
   }, [state.open]);
+  useImperativeHandle(ref, () => ({
+    open: state.show
+  }));
   const handleItemSelect = useCallback(function handleItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
   }, [onItemSelect]);
@@ -53,12 +65,11 @@ function Menu(_ref) {
   return /*#__PURE__*/createElement(MenuContext.Provider, {
     value: value
   }, children);
-}
+});
 /**
  * A button to toggle a dropdown menu open or closed.
  */
 
-
 const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2, ref) {
   let {
     exceptionallySetClassName
@@ -71,17 +82,104 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
   return /*#__PURE__*/createElement(MenuButton$1, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     ref: ref,
-    className: classNames('reactist_menubutton', exceptionallySetClassName)
+    className: exceptionallySetClassName
+  }));
+});
+/**
+ * Renders the content inside a standard MenuItem. It is extracted into a component for reuse in
+ * the SubMenuItem, which is a MenuItem visually, but semantically it's closer to be a MenuButton.
+ * @private
+ */
+
+function MenuItemContent({
+  label,
+  description,
+  icon,
+  shortcut,
+  id
+}) {
+  if (!label) return null;
+  return /*#__PURE__*/createElement(Box, {
+    display: "flex",
+    gap: "small",
+    alignItems: "center",
+    width: "full",
+    "aria-hidden": true
+  }, icon ? /*#__PURE__*/createElement("div", {
+    className: styles.menuItemIcon
+  }, icon) : null, /*#__PURE__*/createElement(Box, {
+    display: "inlineFlex",
+    flexDirection: "column",
+    gap: "xsmall",
+    paddingY: "xsmall",
+    alignItems: "flexStart",
+    overflow: "hidden",
+    flexGrow: 1
+  }, /*#__PURE__*/createElement(Text, {
+    id: id + "-label",
+    weight: description ? 'semibold' : 'regular',
+    size: "copy",
+    lineClamp: 1,
+    exceptionallySetClassName: styles.menuItemLabel
+  }, label), description ? /*#__PURE__*/createElement(Text, {
+    id: id + "-description",
+    size: "copy",
+    tone: "secondary",
+    exceptionallySetClassName: styles.menuItemDescription
+  }, description) : null), shortcut ? /*#__PURE__*/createElement("div", null, shortcut) : null);
+} //
+// SubMenuItem
+//
+
+
+function ArrowRightIcon() {
+  return /*#__PURE__*/createElement("svg", {
+    width: "24",
+    height: "24"
+  }, /*#__PURE__*/createElement("path", {
+    d: "M14.243 12L9.646 7.404a.5.5 0 1 1 .708-.707l4.95 4.95a.5.5 0 0 1 0 .707l-4.95 4.95a.5.5 0 0 1-.708-.708L14.243 12z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+}
+/**
+ * A menu item to toggle a sub-menu open or closed.
+ */
+
+
+const SubMenuItem = /*#__PURE__*/polymorphicComponent(function SubMenuItem(_ref3, ref) {
+  let {
+    exceptionallySetClassName,
+    label,
+    icon
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const id = useId(props.id);
+  const {
+    state
+  } = useContext(MenuContext);
+  return /*#__PURE__*/createElement(MenuButton$1, _objectSpread2(_objectSpread2({
+    "aria-labelledby": label && !props['aria-label'] ? id + "-label" : undefined
+  }, props), {}, {
+    state: state,
+    ref: ref,
+    className: classNames(styles.menuItem, exceptionallySetClassName)
+  }), /*#__PURE__*/createElement(MenuItemContent, {
+    id: id,
+    icon: icon,
+    label: label,
+    shortcut: /*#__PURE__*/createElement(ArrowRightIcon, null)
   }));
 }); //
 // ContextMenuTrigger
 //
 
-const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
+const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref4, ref) {
   let {
     as: component = 'div'
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
 
   const {
     handleAnchorRectChange,
@@ -104,42 +202,59 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
  * The dropdown menu itself, containing a list of menu items.
  */
 
-const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
+const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref5, ref) {
   let {
     exceptionallySetClassName,
     modal = true
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded4);
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5);
 
   const {
     state
   } = useContext(MenuContext);
-  return state.open ? /*#__PURE__*/createElement(Portal, {
+  if (!state.open) return null;
+  return /*#__PURE__*/createElement(Portal, {
     preserveTabOrder: true
   }, /*#__PURE__*/createElement(Menu$1, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     ref: ref,
-    className: classNames('reactist_menulist', exceptionallySetClassName),
+    className: classNames(styles.menuList, exceptionallySetClassName),
     modal: modal
-  }))) : null;
+  })));
 });
 /**
- * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
- * callback.
+ * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.
  */
 
-const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
+const SubMenuList = /*#__PURE__*/polymorphicComponent(function SubMenuList(_ref6, ref) {
   let {
-    value,
-    children,
-    onSelect,
-    hideOnSelect = true,
-    onClick,
     exceptionallySetClassName,
-    as = 'button'
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded5);
+    modal = true
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
 
+  const {
+    state
+  } = useContext(MenuContext);
+  if (!state.open) return null;
+  return /*#__PURE__*/createElement(Portal, {
+    preserveTabOrder: true
+  }, /*#__PURE__*/createElement(Menu$1, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
+    ref: ref,
+    className: classNames(styles.menuList, styles.subMenuList, exceptionallySetClassName),
+    modal: modal
+  })));
+}); //
+// MenuItem
+//
+
+function useMenuItemClickHandler({
+  value,
+  hideOnSelect,
+  onClick,
+  onSelect
+}) {
   const {
     handleItemSelect,
     state
@@ -147,42 +262,95 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
   const {
     hide
   } = state;
-  const handleClick = useCallback(function handleClick(event) {
+  return useCallback(function handleClick(event) {
     onClick == null ? void 0 : onClick(event);
     const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
     const shouldClose = onSelectResult !== false && hideOnSelect;
     handleItemSelect(value);
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
-  return /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({}, props), {}, {
+}
+/**
+ * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
+ * callback.
+ */
+
+
+const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref7, ref) {
+  let {
+    value,
+    label,
+    description,
+    icon,
+    shortcut,
+    tone,
+    children,
+    onSelect,
+    hideOnSelect = true,
+    onClick,
+    exceptionallySetClassName,
+    as = 'button'
+  } = _ref7,
+      props = _objectWithoutProperties(_ref7, _excluded7);
+
+  const id = useId(props.id);
+  const {
+    state
+  } = useContext(MenuContext);
+  const handleClick = useMenuItemClickHandler({
+    value,
+    onSelect,
+    onClick,
+    hideOnSelect
+  });
+  return /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({
+    "aria-labelledby": label && !props['aria-label'] ? id + "-label" : undefined,
+    "aria-describedby": label && description ? id + "-description" : undefined
+  }, props), {}, {
     as: as,
     state: state,
     ref: ref,
     onClick: handleClick,
-    className: exceptionallySetClassName,
+    className: classNames(styles.menuItem, tone === 'destructive' ? styles.destructive : null, exceptionallySetClassName),
     hideOnClick: false
-  }), children);
+  }), children ? /*#__PURE__*/createElement(Box, {
+    width: "full",
+    className: label ? undefined : styles.legacyLayout
+  }, children) : null, /*#__PURE__*/createElement(MenuItemContent, {
+    id: id,
+    icon: icon,
+    label: label,
+    description: description,
+    shortcut: shortcut
+  }));
 });
 /**
- * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
- * a sub-menu.
+ * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a
+ * sub-menu.
+ *
+ * Its children are expected to be exactly two elements, in the following order:
+ *
+ * 1. A `SubMenuItem` element: the menu item that triggers the sub-menu to open.
+ * 2. A `SubMenuList` element: the list of menu items that will be shown when the sub-menu is open.
  *
- * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
- * `MenuList`).
+ * ## Usage
  *
  * ```jsx
- * <MenuItem label="Edit profile" />
- * <SubMenu>
- *   <MenuButton>More options</MenuButton>
+ * <Menu>
+ *   <MenuButton>Menu</MenuButton>
  *   <MenuList>
- *     <MenuItem label="Preferences" />
- *     <MenuItem label="Sign out" />
+ *     <MenuItem label="Item 1" />
+ *     <MenuItem label="Item 2" />
+ *     <SubMenu>
+ *       <SubMenuItem label="Submenu" />
+ *       <SubMenuList>
+ *         <MenuItem label="Submenu Item 1" />
+ *         <MenuItem label="Submenu Item 2" />
+ *       </SubMenuList>
+ *     </SubMenu>
  *   </MenuList>
- * </SubMenu>
+ * </Menu>
  * ```
- *
- * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
- * opening a sub-menu with the menu items list below it.
  */
 
 const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
@@ -214,7 +382,9 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
     state: state,
     ref: ref,
     hideOnClick: false
-  }, renderMenuButton), list);
+  }, renderMenuButton), /*#__PURE__*/createElement("div", {
+    className: styles.subMenuContainer
+  }, list));
 });
 /**
  * A way to semantically group some menu items.
@@ -223,26 +393,101 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
  * before and/or after the group if you so wish.
  */
 
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
+const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref8, ref) {
   let {
     label,
+    info,
     children,
     exceptionallySetClassName
-  } = _ref6,
-      props = _objectWithoutProperties(_ref6, _excluded6);
+  } = _ref8,
+      props = _objectWithoutProperties(_ref8, _excluded8);
 
+  const id = useId(props.id);
   const {
     state
   } = useContext(MenuContext);
-  return /*#__PURE__*/createElement(MenuGroup$1, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/createElement(MenuGroup$1, _objectSpread2(_objectSpread2({
+    "aria-labelledby": "menugroup-label-" + id
+  }, props), {}, {
+    id: id,
     ref: ref,
     state: state,
     className: exceptionallySetClassName
-  }), label ? /*#__PURE__*/createElement("div", {
-    role: "presentation",
-    className: "reactist_menugroup__label"
-  }, label) : null, children);
+  }), /*#__PURE__*/createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    gap: "small",
+    className: styles.menuGroupLabel
+  }, /*#__PURE__*/createElement(Text, {
+    id: "menugroup-label-" + id,
+    size: "copy",
+    weight: "semibold"
+  }, label), info ? /*#__PURE__*/createElement(Box, {
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    className: styles.menuGroupInfo
+  }, info) : null), children);
+});
+/**
+ * A menu item that visually only shows as an icon. It must be used inside an `IconsMenuGroup`.
+ */
+
+const IconMenuItem = /*#__PURE__*/polymorphicComponent(function IconMenuItem(_ref9, ref) {
+  let {
+    value,
+    label,
+    description,
+    icon,
+    onSelect,
+    hideOnSelect = true,
+    onClick,
+    exceptionallySetClassName,
+    as = 'button'
+  } = _ref9,
+      props = _objectWithoutProperties(_ref9, _excluded9);
+
+  const id = useId(props.id);
+  const {
+    state
+  } = useContext(MenuContext);
+  const handleClick = useMenuItemClickHandler({
+    value,
+    onSelect,
+    onClick,
+    hideOnSelect
+  });
+  return /*#__PURE__*/createElement(Tooltip, {
+    content: label
+  }, /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({
+    "aria-label": label,
+    "aria-describedby": id + "-description"
+  }, props), {}, {
+    as: as,
+    state: state,
+    ref: ref,
+    onClick: handleClick,
+    className: classNames(styles.iconMenuItem, exceptionallySetClassName),
+    hideOnClick: false
+  }), icon));
+});
+/**
+ * Semantically equivalent to `MenuGroup`, but meant to group `IconMenuItem`s only.
+ */
+
+const IconsMenuGroup = /*#__PURE__*/polymorphicComponent(function IconsMenuGroup(_ref10, ref) {
+  let {
+    children
+  } = _ref10,
+      props = _objectWithoutProperties(_ref10, _excluded10);
+
+  return /*#__PURE__*/createElement(MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref
+  }), /*#__PURE__*/createElement("div", {
+    className: styles.iconsMenuGroup
+  }, children));
 });
 
-export { ContextMenuTrigger, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu };
+export { ContextMenuTrigger, IconMenuItem, IconsMenuGroup, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu, SubMenuItem, SubMenuList };
 //# sourceMappingURL=menu.js.map

package/es/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n    handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n        null,\n    )\n    const getAnchorRect = React.useMemo(() => {\n        return anchorRect ? () => anchorRect : undefined\n    }, [anchorRect])\n\n    const state = Ariakit.useMenuState({\n        focusLoop: true,\n        gutter: 8,\n        shift: 4,\n        getAnchorRect,\n        ...props,\n    })\n\n    React.useEffect(() => {\n        if (!state.open) handleAnchorRectChange(null)\n    }, [state.open])\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n            handleAnchorRectChange,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n    const handleContextMenu = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault()\n            handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n            state.show()\n        },\n        [handleAnchorRectChange, state],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n\n    return state.open ? (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton\n    // and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </Ariakit.MenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":";;;;;;;;;;;;;AA4BA,MAAMA,WAAW,gBAAGC,aAAA;AAEhB;AACA;AACA;AACA;AACA,EANgB,CAApB;AA8BA;;;;;AAIA,SAASC,IAAT;MAAc;IAAEC,QAAF;IAAYC;;MAAiBC;;EACvC,MAAM,CAACC,UAAD,EAAaC,sBAAb,IAAuCN,QAAA,CACzC,IADyC,CAA7C;EAGA,MAAMO,aAAa,GAAGP,OAAA,CAAc;IAChC,OAAOK,UAAU,GAAG,MAAMA,UAAT,GAAsBG,SAAvC;GADkB,EAEnB,CAACH,UAAD,CAFmB,CAAtB;EAIA,MAAMI,KAAK,GAAGC,YAAA;IACVC,SAAS,EAAE,IADD;IAEVC,MAAM,EAAE,CAFE;IAGVC,KAAK,EAAE,CAHG;IAIVN;KACGH,KALO,EAAd;EAQAJ,SAAA,CAAgB;IACZ,IAAI,CAACS,KAAK,CAACK,IAAX,EAAiBR,sBAAsB,CAAC,IAAD,CAAtB;GADrB,EAEG,CAACG,KAAK,CAACK,IAAP,CAFH;EAIA,MAAMC,gBAAgB,GAAGf,WAAA,CACrB,SAASe,gBAAT,CAA0BC,KAA1B;IACI,IAAIb,YAAJ,EAAkBA,YAAY,CAACa,KAAD,CAAZ;GAFD,EAIrB,CAACb,YAAD,CAJqB,CAAzB;EAOA,MAAMa,KAAK,GAAqBhB,OAAA,CAC5B,OAAO;IACHS,KADG;IAEHM,gBAFG;IAGHT;GAHJ,CAD4B,EAM5B,CAACG,KAAD,EAAQM,gBAAR,CAN4B,CAAhC;EASA,oBAAOf,aAAA,CAACD,WAAW,CAACkB,QAAb;IAAsBD,KAAK,EAAEA;GAA7B,EAAqCd,QAArC,CAAP;AACH;AAQD;;;;;MAGMgB,UAAU,gBAAGC,oBAAoB,CAA4B,SAASD,UAAT,QAE/DE,GAF+D;MAC/D;IAAEC;;MAA8BjB;;EAGhC,MAAM;IAAEK;MAAUT,UAAA,CAAiBD,WAAjB,CAAlB;EACA,oBACIC,aAAA,CAACU,YAAD,oCACQN,KADR;IAEIK,KAAK,EAAEA,KAFX;IAGIW,GAAG,EAAEA,GAHT;IAIIE,SAAS,EAAEC,UAAU,CAAC,qBAAD,EAAwBF,yBAAxB;KAL7B;AAQH,CAbsC;AAgBvC;AACA;;MACMG,kBAAkB,gBAAGL,oBAAoB,CAAiB,SAASK,kBAAT,QAE5DJ,GAF4D;MAC5D;IAAEK,EAAE,EAAEC,SAAS,GAAG;;MAAUtB;;EAG5B,MAAM;IAAEE,sBAAF;IAA0BG;MAAUT,UAAA,CAAiBD,WAAjB,CAA1C;EACA,MAAM4B,iBAAiB,GAAG3B,WAAA,CACrB4B,KAAD;IACIA,KAAK,CAACC,cAAN;IACAvB,sBAAsB,CAAC;MAAEwB,CAAC,EAAEF,KAAK,CAACG,OAAX;MAAoBC,CAAC,EAAEJ,KAAK,CAACK;KAA9B,CAAtB;IACAxB,KAAK,CAACyB,IAAN;GAJkB,EAMtB,CAAC5B,sBAAD,EAAyBG,KAAzB,CANsB,CAA1B;EASA,oBAAOT,aAAA,CAAoB0B,SAApB,oCAAoCtB,KAApC;IAA2C+B,aAAa,EAAER,iBAA1D;IAA6EP;KAApF;AACH,CAf8C;AAuB/C;;;;MAGMgB,QAAQ,gBAAGjB,oBAAoB,CAAuB,SAASiB,QAAT,QAExDhB,GAFwD;MACxD;IAAEC,yBAAF;IAA6BgB,KAAK,GAAG;;MAASjC;;EAG9C,MAAM;IAAEK;MAAUT,UAAA,CAAiBD,WAAjB,CAAlB;EAEA,OAAOU,KAAK,CAACK,IAAN,gBACHd,aAAA,CAACsC,MAAD;IAAQC,gBAAgB;GAAxB,eACIvC,aAAA,CAACU,MAAD,oCACQN,KADR;IAEIK,KAAK,EAAEA,KAFX;IAGIW,GAAG,EAAEA,GAHT;IAIIE,SAAS,EAAEC,UAAU,CAAC,mBAAD,EAAsBF,yBAAtB,CAJzB;IAKIgB,KAAK,EAAEA;KANf,CADG,GAUH,IAVJ;AAWH,CAjBoC;AA0ErC;;;;;MAIMG,QAAQ,gBAAGrB,oBAAoB,CAA0B,SAASqB,QAAT,QAW3DpB,GAX2D;MAC3D;IACIJ,KADJ;IAEId,QAFJ;IAGIuC,QAHJ;IAIIC,YAAY,GAAG,IAJnB;IAKIC,OALJ;IAMItB,yBANJ;IAOII,EAAE,GAAG;;MACFrB;;EAIP,MAAM;IAAEW,gBAAF;IAAoBN;MAAUT,UAAA,CAAiBD,WAAjB,CAApC;EACA,MAAM;IAAE6C;MAASnC,KAAjB;EAEA,MAAMoC,WAAW,GAAG7C,WAAA,CAChB,SAAS6C,WAAT,CAAqBjB,KAArB;IACIe,OAAO,QAAP,YAAAA,OAAO,CAAGf,KAAH,CAAP;IACA,MAAMkB,cAAc,GAChBL,QAAQ,IAAI,CAACb,KAAK,CAACmB,gBAAnB,GAAsCN,QAAQ,EAA9C,GAAmDjC,SADvD;IAEA,MAAMwC,WAAW,GAAGF,cAAc,KAAK,KAAnB,IAA4BJ,YAAhD;IACA3B,gBAAgB,CAACC,KAAD,CAAhB;IACA,IAAIgC,WAAJ,EAAiBJ,IAAI;GAPT,EAShB,CAACH,QAAD,EAAWE,OAAX,EAAoB5B,gBAApB,EAAsC2B,YAAtC,EAAoDE,IAApD,EAA0D5B,KAA1D,CATgB,CAApB;EAYA,oBACIhB,aAAA,CAACU,UAAD,oCACQN,KADR;IAEIqB,EAAE,EAAEA,EAFR;IAGIhB,KAAK,EAAEA,KAHX;IAIIW,GAAG,EAAEA,GAJT;IAKIuB,OAAO,EAAEE,WALb;IAMIvB,SAAS,EAAED,yBANf;IAOI4B,WAAW,EAAE;MAEZ/C,QATL,CADJ;AAaH,CAzCoC;AAiDrC;;;;;;;;;;;;;;;;;;;;;;MAqBMgD,OAAO,gBAAGlD,UAAA,CAA+C,SAASkD,OAAT,CAC3D;EAAEhD,QAAF;EAAYC;AAAZ,CAD2D,EAE3DiB,GAF2D;EAI3D,MAAM;IAAEL,gBAAgB,EAAEoC,oBAApB;IAA0C1C;MAAUT,UAAA,CAAiBD,WAAjB,CAA1D;EACA,MAAM;IAAE6C,IAAI,EAAEQ;MAAmB3C,KAAjC;EAEA,MAAM4C,mBAAmB,GAAGrD,WAAA,CACxB,SAASqD,mBAAT,CAA6BrC,KAA7B;IACI,IAAIb,YAAJ,EAAkBA,YAAY,CAACa,KAAD,CAAZ;IAClBmC,oBAAoB,CAACnC,KAAD,CAApB;IACAoC,cAAc;GAJM,EAMxB,CAACA,cAAD,EAAiBD,oBAAjB,EAAuChD,YAAvC,CANwB,CAA5B;EASA,MAAM,CAACmD,MAAD,EAASC,IAAT,IAAiBvD,QAAA,CAAewD,OAAf,CAAuBtD,QAAvB,CAAvB;;;EAIA,MAAMuD,gBAAgB,GAAGzD,WAAA,CACrB,SAASyD,gBAAT,CAA0BrD,KAA1B;IACI,oBAAOJ,YAAA,CAAmBsD,MAAnB,EAAiDlD,KAAjD,CAAP;GAFiB,EAIrB,CAACkD,MAAD,CAJqB,CAAzB;EAOA,oBACItD,aAAA,CAACC,IAAD;IAAME,YAAY,EAAEkD;GAApB,eACIrD,aAAA,CAACU,UAAD;IAAkBe,EAAE,EAAC;IAAMhB,KAAK,EAAEA;IAAOW,GAAG,EAAEA;IAAK6B,WAAW,EAAE;GAAhE,EACKQ,gBADL,CADJ,EAIKF,IAJL,CADJ;AAQH,CAnCe;AAgDhB;;;;;;;MAMMG,SAAS,gBAAGvC,oBAAoB,CAAwB,SAASuC,SAAT,QAE1DtC,GAF0D;MAC1D;IAAEuC,KAAF;IAASzD,QAAT;IAAmBmB;;MAA8BjB;;EAGjD,MAAM;IAAEK;MAAUT,UAAA,CAAiBD,WAAjB,CAAlB;EACA,oBACIC,aAAA,CAACU,WAAD,oCAAuBN,KAAvB;IAA8BgB,GAAG,EAAEA,GAAnC;IAAwCX,KAAK,EAAEA,KAA/C;IAAsDa,SAAS,EAAED;MAC5DsC,KAAK,gBACF3D,aAAA,MAAA;IAAK4D,IAAI,EAAC;IAAetC,SAAS,EAAC;GAAnC,EACKqC,KADL,CADE,GAIF,IALR,EAMKzD,QANL,CADJ;AAUH,CAfqC;;;;"}
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './menu.module.css'\nimport { Tooltip } from '../tooltip'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n    handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\ntype MenuHandle = {\n    open: () => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nconst Menu = React.forwardRef<MenuHandle, MenuProps>(function Menu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n        null,\n    )\n    const getAnchorRect = React.useMemo(() => {\n        return anchorRect ? () => anchorRect : undefined\n    }, [anchorRect])\n\n    const state = Ariakit.useMenuState({\n        focusLoop: true,\n        gutter: 8,\n        shift: 4,\n        getAnchorRect,\n        ...props,\n    })\n\n    React.useEffect(() => {\n        if (!state.open) handleAnchorRectChange(null)\n    }, [state.open])\n\n    React.useImperativeHandle(ref, () => ({ open: state.show }))\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n            handleAnchorRectChange,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n})\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={exceptionallySetClassName}\n        />\n    )\n})\n\n//\n// MenuItemContent\n//\n\ntype MenuItemContentProps = {\n    id: string\n\n    /**\n     * The menu item's label.\n     */\n    label?: NonNullable<React.ReactNode>\n\n    /**\n     * The menu item's description, typically used to provide additional information about what the\n     * menu item does.\n     *\n     * When used, it is rendered below the label. The label is also shown more prominently (e.g.\n     * using bold text), while the description is rendered using text in secondary tone.\n     *\n     * Therefore, for the description to be rendered, you must also provide a `label`.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional icon to render next to the menu item's label.\n     *\n     * For the icon to be rendered, you must also provide a `label`.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * An optional element to render to the right of the menu item's label. It is often used to\n     * show a keyboard shortcut for the menu item.\n     *\n     * For the shortcut to be rendered, you must also provide a `label`.\n     */\n    shortcut?: React.ReactNode\n}\n\n/**\n * Renders the content inside a standard MenuItem. It is extracted into a component for reuse in\n * the SubMenuItem, which is a MenuItem visually, but semantically it's closer to be a MenuButton.\n * @private\n */\nfunction MenuItemContent({ label, description, icon, shortcut, id }: MenuItemContentProps) {\n    if (!label) return null\n    return (\n        <Box\n            display=\"flex\"\n            gap=\"small\"\n            alignItems=\"center\"\n            width=\"full\"\n            aria-hidden // the menu item is labelled via aria-labelledby and aria-describedby\n        >\n            {icon ? <div className={styles.menuItemIcon}>{icon}</div> : null}\n            <Box\n                display=\"inlineFlex\"\n                flexDirection=\"column\"\n                gap=\"xsmall\"\n                paddingY=\"xsmall\"\n                alignItems=\"flexStart\"\n                overflow=\"hidden\"\n                flexGrow={1}\n            >\n                <Text\n                    id={`${id}-label`}\n                    weight={description ? 'semibold' : 'regular'}\n                    size=\"copy\"\n                    lineClamp={1}\n                    exceptionallySetClassName={styles.menuItemLabel}\n                >\n                    {label}\n                </Text>\n                {description ? (\n                    <Text\n                        id={`${id}-description`}\n                        size=\"copy\"\n                        tone=\"secondary\"\n                        exceptionallySetClassName={styles.menuItemDescription}\n                    >\n                        {description}\n                    </Text>\n                ) : null}\n            </Box>\n            {shortcut ? <div>{shortcut}</div> : null}\n        </Box>\n    )\n}\n\n//\n// SubMenuItem\n//\n\nfunction ArrowRightIcon() {\n    return (\n        <svg width=\"24\" height=\"24\">\n            <path\n                d=\"M14.243 12L9.646 7.404a.5.5 0 1 1 .708-.707l4.95 4.95a.5.5 0 0 1 0 .707l-4.95 4.95a.5.5 0 0 1-.708-.708L14.243 12z\"\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\ntype SubMenuItemProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as' | 'children'> &\n    Pick<MenuItemProps, 'label' | 'icon'>\n\n/**\n * A menu item to toggle a sub-menu open or closed.\n */\nconst SubMenuItem = polymorphicComponent<'button', SubMenuItemProps>(function SubMenuItem(\n    { exceptionallySetClassName, label, icon, ...props },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            aria-labelledby={label && !props['aria-label'] ? `${id}-label` : undefined}\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames(styles.menuItem, exceptionallySetClassName)}\n        >\n            <MenuItemContent id={id} icon={icon} label={label} shortcut={<ArrowRightIcon />} />\n        </Ariakit.MenuButton>\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n    const handleContextMenu = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault()\n            handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n            state.show()\n        },\n        [handleAnchorRectChange, state],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList and SubMenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    if (!state.open) return null\n\n    return (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames(styles.menuList, exceptionallySetClassName)}\n                modal={modal}\n            />\n        </Portal>\n    )\n})\n\n/**\n * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.\n */\nconst SubMenuList = polymorphicComponent<'div', MenuListProps>(function SubMenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    if (!state.open) return null\n\n    return (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames(\n                    styles.menuList,\n                    styles.subMenuList,\n                    exceptionallySetClassName,\n                )}\n                modal={modal}\n            />\n        </Portal>\n    )\n})\n\n//\n// MenuItem\n//\n\nfunction useMenuItemClickHandler({\n    value,\n    hideOnSelect,\n    onClick,\n    onSelect,\n}: Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onClick' | 'onSelect'>) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    return React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n}\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item.\n     *\n     * It is passed on to the parent `Menu`'s `onItemSelect` when you provide that instead of (or\n     * alongside) providing individual `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * The menu item's content.\n     *\n     * Prefer using `label` instead. In addition to `label`, you can also use `description`, `icon`\n     * and `shortcut`, to provide richer content inside the menu item.\n     *\n     * However, you can still use `children` to provide arbitrary content inside the menu item. You\n     * can even combine `children` with the other props to provide a richer menu item. The\n     * `children` content will be rendered first, followed by the regular menu item content\n     * generated using the `label`, `description`, `icon` and `shortcut` props (if the `label` is\n     * present).\n     */\n    children?: React.ReactNode\n\n    /**\n     * The menu item's label.\n     */\n    label?: NonNullable<React.ReactNode>\n\n    /**\n     * The menu item's description, typically used to provide additional information about what the\n     * menu item does.\n     *\n     * When used, it is rendered below the label. The label is also shown more prominently (e.g.\n     * using bold text), while the description is rendered using text in secondary tone.\n     *\n     * Therefore, for the description to be rendered, you must also provide a `label`.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional icon to render next to the menu item's label.\n     *\n     * For the icon to be rendered, you must also provide a `label`.\n     */\n    icon?: NonNullable<React.ReactNode>\n\n    /**\n     * An optional element to render to the right of the menu item's label. It is often used to\n     * show a keyboard shortcut for the menu item.\n     *\n     * For the shortcut to be rendered, you must also provide a `label`.\n     */\n    shortcut?: React.ReactNode\n\n    /**\n     * The tone to use for the menu item.\n     */\n    tone?: 'normal' | 'destructive'\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        label,\n        description,\n        icon,\n        shortcut,\n        tone,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    const handleClick = useMenuItemClickHandler({ value, onSelect, onClick, hideOnSelect })\n\n    return (\n        <Ariakit.MenuItem\n            aria-labelledby={label && !props['aria-label'] ? `${id}-label` : undefined}\n            aria-describedby={label && description ? `${id}-description` : undefined}\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={classNames(\n                styles.menuItem,\n                tone === 'destructive' ? styles.destructive : null,\n                exceptionallySetClassName,\n            )}\n            hideOnClick={false}\n        >\n            {children ? (\n                <Box width=\"full\" className={label ? undefined : styles.legacyLayout}>\n                    {children}\n                </Box>\n            ) : null}\n\n            <MenuItemContent\n                id={id}\n                icon={icon}\n                label={label}\n                description={description}\n                shortcut={shortcut}\n            />\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a\n * sub-menu.\n *\n * Its children are expected to be exactly two elements, in the following order:\n *\n * 1. A `SubMenuItem` element: the menu item that triggers the sub-menu to open.\n * 2. A `SubMenuList` element: the list of menu items that will be shown when the sub-menu is open.\n *\n * ## Usage\n *\n * ```jsx\n * <Menu>\n *   <MenuButton>Menu</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Item 1\" />\n *     <MenuItem label=\"Item 2\" />\n *     <SubMenu>\n *       <SubMenuItem label=\"Submenu\" />\n *       <SubMenuList>\n *         <MenuItem label=\"Submenu Item 1\" />\n *         <MenuItem label=\"Submenu Item 2\" />\n *       </SubMenuList>\n *     </SubMenu>\n *   </MenuList>\n * </Menu>\n * ```\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton\n    // and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </Ariakit.MenuItem>\n            <div className={styles.subMenuContainer}>{list}</div>\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: NonNullable<React.ReactNode>\n\n    /**\n     * An optional info element to be shown to the right of the label.\n     *\n     * This is useful and often used to:\n     * - Provide a link to any documentation related to the menu items in the group\n     * - Show a keyboard shortcut that triggers the menu items in the group\n     *\n     * It is strongly recommended that this should be a icon-only element. It is also strongly\n     * recommended that, when using it to provide a link, you use the very `IconMenuItem` component\n     * to make the link be yet another menu item accessible in the menu via keyboard navigation.\n     * Here's an example of how to do that:\n     *\n     * ```jsx\n     * <MenuGroup\n     *   label=\"A group of related options\"\n     *   info={\n     *     <IconMenuItem\n     *       label=\"Help about this group of options\"\n     *       icon=\"ℹ️\"\n     *       as=\"a\"\n     *       href=\"http://help.example.com\"\n     *       target=\"_blank\"\n     *       rel=\"noreferrer noopener\"\n     *     />\n     *   }\n     * >\n     *   <MenuItem label=\"First option\" icon={<FirstIcon />} />\n     *   <MenuItem label=\"Second option\" icon={<SecondIcon />} />\n     * </MenuGroup>\n     * ```\n     */\n    info?: React.ReactNode\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, info, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup\n            aria-labelledby={`menugroup-label-${id}`}\n            {...props}\n            id={id}\n            ref={ref}\n            state={state}\n            className={exceptionallySetClassName}\n        >\n            <Box display=\"flex\" alignItems=\"center\" gap=\"small\" className={styles.menuGroupLabel}>\n                <Text id={`menugroup-label-${id}`} size=\"copy\" weight=\"semibold\">\n                    {label}\n                </Text>\n                {info ? (\n                    <Box\n                        flexShrink={0}\n                        display=\"flex\"\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        className={styles.menuGroupInfo}\n                    >\n                        {info}\n                    </Box>\n                ) : null}\n            </Box>\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\n//\n// IconMenuItem & IconsMenuGroup\n//\n\ntype IconMenuItemProps = Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onSelect' | 'onClick'> & {\n    /**\n     * A label for assistive technologies to describe the menu item.\n     *\n     * When not provided, the `label` is used. But this is useful when you want the tooltip label\n     * to be different from the label for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * The menu item's label, which is not shown visually on the menu item, but it is used to\n     * show a tooltip for the menu item when hovered or focused.\n     *\n     * It is also used as the semantic label for assistive technologies, unless you provide an\n     * `aria-label` as well.\n     */\n    label: string\n\n    /**\n     * A description for assistive technologies to describe the menu item.\n     */\n    description?: React.ReactNode\n\n    /**\n     * The icon to show on the menu item.\n     */\n    icon: NonNullable<React.ReactNode>\n}\n\n/**\n * A menu item that visually only shows as an icon. It must be used inside an `IconsMenuGroup`.\n */\nconst IconMenuItem = polymorphicComponent<'button', IconMenuItemProps>(function IconMenuItem(\n    {\n        value,\n        label,\n        description,\n        icon,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    const handleClick = useMenuItemClickHandler({ value, onSelect, onClick, hideOnSelect })\n\n    return (\n        <Tooltip content={label}>\n            <Ariakit.MenuItem\n                aria-label={label}\n                aria-describedby={`${id}-description`}\n                {...props}\n                as={as}\n                state={state}\n                ref={ref}\n                onClick={handleClick}\n                className={classNames(styles.iconMenuItem, exceptionallySetClassName)}\n                hideOnClick={false}\n            >\n                {icon}\n            </Ariakit.MenuItem>\n        </Tooltip>\n    )\n})\n\n/**\n * Semantically equivalent to `MenuGroup`, but meant to group `IconMenuItem`s only.\n */\nconst IconsMenuGroup = polymorphicComponent<'div', MenuGroupProps>(function IconsMenuGroup(\n    { children, ...props },\n    ref,\n) {\n    return (\n        <MenuGroup {...props} ref={ref}>\n            <div className={styles.iconsMenuGroup}>{children}</div>\n        </MenuGroup>\n    )\n})\n\nexport {\n    ContextMenuTrigger,\n    IconMenuItem,\n    IconsMenuGroup,\n    Menu,\n    MenuButton,\n    MenuGroup,\n    MenuItem,\n    MenuList,\n    SubMenu,\n    SubMenuItem,\n    SubMenuList,\n}\n\nexport type {\n    IconMenuItemProps,\n    MenuButtonProps,\n    MenuGroupProps,\n    MenuHandle,\n    MenuItemProps,\n    MenuListProps,\n    MenuProps,\n    SubMenuItemProps,\n    SubMenuProps,\n}\n"],"names":["MenuContext","React","Menu","ref","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","show","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","exceptionallySetClassName","className","MenuItemContent","label","description","icon","shortcut","id","Box","display","gap","alignItems","width","styles","menuItemIcon","flexDirection","paddingY","overflow","flexGrow","Text","weight","size","lineClamp","menuItemLabel","tone","menuItemDescription","ArrowRightIcon","height","d","fill","fillRule","SubMenuItem","useId","classNames","menuItem","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","onContextMenu","MenuList","modal","Portal","preserveTabOrder","menuList","SubMenuList","subMenuList","useMenuItemClickHandler","hideOnSelect","onClick","onSelect","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","MenuItem","destructive","hideOnClick","legacyLayout","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","subMenuContainer","MenuGroup","info","menuGroupLabel","flexShrink","justifyContent","menuGroupInfo","IconMenuItem","Tooltip","content","iconMenuItem","IconsMenuGroup","iconsMenuGroup"],"mappings":"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"}

package/es/menu/menu.module.css.js

@@ -0,0 +1,4 @@
+var modules_2befbba6 = {"menuList":"c63e79f3","subMenuList":"_1e89cfc6","iconMenuItem":"_1b808bea","menuItem":"_8607099d","legacyLayout":"_609759d5","menuGroupLabel":"f1730843","menuItemIcon":"_7cec7dce","menuItemLabel":"_91c012d8","menuItemDescription":"bb494fd4","destructive":"_503b074a","menuGroupInfo":"ad6d2e4a","iconsMenuGroup":"_410b11f2"};
+
+export default modules_2befbba6;
+//# sourceMappingURL=menu.module.css.js.map

package/es/menu/menu.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/es/select-field/select-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_1fa9b208 = {"selectWrapper":"a804edbf","bordered":"_50a3655f","error":"a6d38abf"};
+var modules_1fa9b208 = {"selectWrapper":"a9cbb3a6","bordered":"f3869290","error":"aefdbdaa"};
 
 export default modules_1fa9b208;
 //# sourceMappingURL=select-field.module.css.js.map