@doist/reactist 22.0.0-beta → 22.0.1-beta

package/es/checkbox-field/checkbox-field.js

@@ -2,9 +2,9 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { forwardRef, useState, useRef, useEffect, createElement } from 'react';
 import { Box } from '../box/box.js';
 import { Text } from '../text/text.js';
-import { useForkRef } from 'ariakit-react-utils';
 import { CheckboxIcon } from './checkbox-icon.js';
 import styles from './checkbox-field.module.css.js';
+import { useForkRef } from './use-fork-ref.js';
 
 const _excluded = ["label", "icon", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/forwardRef(function CheckboxField(_ref, ref) {

package/es/checkbox-field/checkbox-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** The icon that should be added to the checkbox label. */\n    icon?: React.ReactChild\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"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"}
+{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** The icon that should be added to the checkbox label. */\n    icon?: React.ReactChild\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"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"}

package/es/checkbox-field/use-fork-ref.js

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+/**
+ * Sets both a function and object React ref.
+ */
+
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+/**
+ * Merges React Refs into a single memoized function ref so you can pass it to an element.
+ * @example
+ * const Component = React.forwardRef((props, ref) => {
+ *   const internalRef = React.useRef();
+ *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
+ * });
+ */
+
+
+function useForkRef(...refs) {
+  return useMemo(() => {
+    if (!refs.some(Boolean)) return;
+    return value => {
+      refs.forEach(ref => setRef(ref, value));
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
+}
+
+export { useForkRef };
+//# sourceMappingURL=use-fork-ref.js.map

package/es/checkbox-field/use-fork-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fork-ref.js","sources":["../../src/checkbox-field/use-fork-ref.ts"],"sourcesContent":["import { useMemo } from 'react'\n\n/**\n * Sets both a function and object React ref.\n */\nfunction setRef<T>(\n    ref: React.RefCallback<T> | React.MutableRefObject<T> | null | undefined,\n    value: T,\n) {\n    if (typeof ref === 'function') {\n        ref(value)\n    } else if (ref) {\n        ref.current = value\n    }\n}\n\n/**\n * Merges React Refs into a single memoized function ref so you can pass it to an element.\n * @example\n * const Component = React.forwardRef((props, ref) => {\n *   const internalRef = React.useRef();\n *   return <div {...props} ref={useForkRef(internalRef, ref)} />;\n * });\n */\nfunction useForkRef(...refs: Array<React.Ref<unknown> | undefined>) {\n    return useMemo(\n        () => {\n            if (!refs.some(Boolean)) return\n            return (value: unknown) => {\n                refs.forEach((ref) => setRef(ref, value))\n            }\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        refs,\n    )\n}\n\nexport { useForkRef }\n"],"names":["setRef","ref","value","current","useForkRef","refs","useMemo","some","Boolean","forEach"],"mappings":";;AAEA;;;;AAGA,SAASA,MAAT,CACIC,GADJ,EAEIC,KAFJ;EAII,IAAI,OAAOD,GAAP,KAAe,UAAnB,EAA+B;IAC3BA,GAAG,CAACC,KAAD,CAAH;GADJ,MAEO,IAAID,GAAJ,EAAS;IACZA,GAAG,CAACE,OAAJ,GAAcD,KAAd;;AAEP;AAED;;;;;;;;;;AAQA,SAASE,UAAT,CAAoB,GAAGC,IAAvB;EACI,OAAOC,OAAO,CACV;IACI,IAAI,CAACD,IAAI,CAACE,IAAL,CAAUC,OAAV,CAAL,EAAyB;IACzB,OAAQN,KAAD;MACHG,IAAI,CAACI,OAAL,CAAcR,GAAD,IAASD,MAAM,CAACC,GAAD,EAAMC,KAAN,CAA5B;KADJ;GAHM;EAQVG,IARU,CAAd;AAUH;;;;"}

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, IconMenuItem, IconsMenuGroup, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu, SubMenuItem, SubMenuList } from './menu/menu.js';
+export { ContextMenuTrigger, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu } 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,25 +1,15 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, useState, useMemo, useEffect, useImperativeHandle, useCallback, createElement, useContext, Children, cloneElement, createContext } from 'react';
+import { useState, useMemo, useCallback, createElement, useContext, forwardRef, 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';
+import { useMenuStore, MenuButton as MenuButton$1, Portal, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from '@ariakit/react';
 
 const _excluded = ["children", "onItemSelect"],
       _excluded2 = ["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"];
+      _excluded3 = ["as"],
+      _excluded4 = ["exceptionallySetClassName", "modal"],
+      _excluded5 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
+      _excluded6 = ["label", "children", "exceptionallySetClassName"];
 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
@@ -31,45 +21,36 @@ const MenuContext = /*#__PURE__*/createContext( // Ariakit gives us no means to
  * management for the menu components inside it.
  */
 
-const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, ref) {
+function Menu(_ref) {
   let {
     children,
     onItemSelect
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const [anchorRect, handleAnchorRectChange] = useState(null);
-  const getAnchorRect = useMemo(() => {
-    return anchorRect ? () => anchorRect : undefined;
-  }, [anchorRect]);
-  const state = useMenuState(_objectSpread2({
-    focusLoop: true,
-    gutter: 8,
-    shift: 4,
-    getAnchorRect
+  const [anchorRect, setAnchorRect] = useState(null);
+  const getAnchorRect = useMemo(() => anchorRect ? () => anchorRect : null, [anchorRect]);
+  const menuStore = useMenuStore(_objectSpread2({
+    focusLoop: true
   }, props));
-  useEffect(() => {
-    if (!state.open) handleAnchorRectChange(null);
-  }, [state.open]);
-  useImperativeHandle(ref, () => ({
-    open: state.show
-  }));
   const handleItemSelect = useCallback(function handleItemSelect(value) {
-    if (onItemSelect) onItemSelect(value);
+    onItemSelect == null ? void 0 : onItemSelect(value);
   }, [onItemSelect]);
   const value = useMemo(() => ({
-    state,
+    menuStore,
     handleItemSelect,
-    handleAnchorRectChange
-  }), [state, handleItemSelect]);
+    getAnchorRect,
+    setAnchorRect
+  }), [menuStore, handleItemSelect, getAnchorRect, setAnchorRect]);
   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
@@ -77,122 +58,35 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
   const {
-    state
+    menuStore
   } = useContext(MenuContext);
   return /*#__PURE__*/createElement(MenuButton$1, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
+    store: menuStore,
     ref: ref,
-    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)
+    className: classNames('reactist_menubutton', exceptionallySetClassName)
   }));
 }); //
 // ContextMenuTrigger
 //
 
-const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref4, ref) {
+const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMenuTrigger(_ref3, ref) {
   let {
     as: component = 'div'
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded4);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
 
   const {
-    handleAnchorRectChange,
-    state
+    setAnchorRect,
+    menuStore
   } = useContext(MenuContext);
-  const handleContextMenu = useCallback(event => {
+  const handleContextMenu = useCallback(function handleContextMenu(event) {
     event.preventDefault();
-    handleAnchorRectChange({
+    setAnchorRect({
       x: event.clientX,
       y: event.clientY
     });
-    state.show();
-  }, [handleAnchorRectChange, state]);
+    menuStore.show();
+  }, [setAnchorRect, menuStore]);
   return /*#__PURE__*/createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
     ref
@@ -202,155 +96,90 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
  * The dropdown menu itself, containing a list of menu items.
  */
 
-const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref5, ref) {
+const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref) {
   let {
     exceptionallySetClassName,
     modal = true
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded5);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
 
   const {
-    state
+    menuStore,
+    getAnchorRect
   } = useContext(MenuContext);
-  if (!state.open) return null;
-  return /*#__PURE__*/createElement(Portal, {
+  const isOpen = menuStore.useState('open');
+  return isOpen ? /*#__PURE__*/createElement(Portal, {
     preserveTabOrder: true
   }, /*#__PURE__*/createElement(Menu$1, _objectSpread2(_objectSpread2({}, props), {}, {
-    state: state,
+    store: menuStore,
+    gutter: 8,
+    shift: 4,
     ref: ref,
-    className: classNames(styles.menuList, exceptionallySetClassName),
+    className: classNames('reactist_menulist', exceptionallySetClassName),
+    getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
     modal: modal
-  })));
+  }))) : null;
 });
 /**
- * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.
+ * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
+ * callback.
  */
 
-const SubMenuList = /*#__PURE__*/polymorphicComponent(function SubMenuList(_ref6, ref) {
+const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref) {
   let {
+    value,
+    children,
+    onSelect,
+    hideOnSelect = true,
+    onClick,
     exceptionallySetClassName,
-    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
-//
+    as = 'button'
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5);
 
-function useMenuItemClickHandler({
-  value,
-  hideOnSelect,
-  onClick,
-  onSelect
-}) {
   const {
     handleItemSelect,
-    state
+    menuStore
   } = useContext(MenuContext);
   const {
     hide
-  } = state;
-  return useCallback(function handleClick(event) {
+  } = menuStore;
+  const handleClick = 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]);
-}
-/**
- * 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), {}, {
+  return /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    state: state,
+    store: menuStore,
     ref: ref,
     onClick: handleClick,
-    className: classNames(styles.menuItem, tone === 'destructive' ? styles.destructive : null, exceptionallySetClassName),
+    className: exceptionallySetClassName,
     hideOnClick: false
-  }), 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
-  }));
+  }), children);
 });
 /**
- * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a
- * sub-menu.
+ * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
+ * 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.
- *
- * ## Usage
+ * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
+ * `MenuList`).
  *
  * ```jsx
- * <Menu>
- *   <MenuButton>Menu</MenuButton>
+ * <MenuItem label="Edit profile" />
+ * <SubMenu>
+ *   <MenuButton>More options</MenuButton>
  *   <MenuList>
- *     <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>
+ *     <MenuItem label="Preferences" />
+ *     <MenuItem label="Sign out" />
  *   </MenuList>
- * </Menu>
+ * </SubMenu>
  * ```
+ *
+ * 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({
@@ -359,11 +188,11 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
 }, ref) {
   const {
     handleItemSelect: parentMenuItemSelect,
-    state
+    menuStore
   } = useContext(MenuContext);
   const {
     hide: parentMenuHide
-  } = state;
+  } = menuStore;
   const handleSubItemSelect = useCallback(function handleSubItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
     parentMenuItemSelect(value);
@@ -379,12 +208,10 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
     onItemSelect: handleSubItemSelect
   }, /*#__PURE__*/createElement(MenuItem$1, {
     as: "div",
-    state: state,
+    store: menuStore,
     ref: ref,
     hideOnClick: false
-  }, renderMenuButton), /*#__PURE__*/createElement("div", {
-    className: styles.subMenuContainer
-  }, list));
+  }, renderMenuButton), list);
 });
 /**
  * A way to semantically group some menu items.
@@ -393,101 +220,26 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
  * before and/or after the group if you so wish.
  */
 
-const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref8, ref) {
+const MenuGroup = /*#__PURE__*/polymorphicComponent(function MenuGroup(_ref6, ref) {
   let {
     label,
-    info,
     children,
     exceptionallySetClassName
-  } = _ref8,
-      props = _objectWithoutProperties(_ref8, _excluded8);
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
 
-  const id = useId(props.id);
   const {
-    state
+    menuStore
   } = useContext(MenuContext);
-  return /*#__PURE__*/createElement(MenuGroup$1, _objectSpread2(_objectSpread2({
-    "aria-labelledby": "menugroup-label-" + id
-  }, props), {}, {
-    id: id,
+  return /*#__PURE__*/createElement(MenuGroup$1, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
-    state: state,
+    store: menuStore,
     className: exceptionallySetClassName
-  }), /*#__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));
+  }), label ? /*#__PURE__*/createElement("div", {
+    role: "presentation",
+    className: "reactist_menugroup__label"
+  }, label) : null, children);
 });
 
-export { ContextMenuTrigger, IconMenuItem, IconsMenuGroup, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu, SubMenuItem, SubMenuList };
+export { ContextMenuTrigger, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu };
 //# sourceMappingURL=menu.js.map