@doist/reactist 21.2.0 → 22.0.0-beta

package/dist/reactist.cjs.development.js

@@ -2647,12 +2647,18 @@ function TabAwareSlot({
   }) : null;
 }
 
+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"};
+
 const _excluded$t = ["children", "onItemSelect"],
       _excluded2$3 = ["exceptionallySetClassName"],
-      _excluded3$2 = ["as"],
-      _excluded4$1 = ["exceptionallySetClassName", "modal"],
-      _excluded5$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
-      _excluded6 = ["label", "children", "exceptionallySetClassName"];
+      _excluded3$2 = ["exceptionallySetClassName", "label", "icon"],
+      _excluded4$1 = ["as"],
+      _excluded5$1 = ["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__*/React.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
@@ -2664,7 +2670,7 @@ const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no mea
  * management for the menu components inside it.
  */
 
-function Menu(_ref) {
+const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, ref) {
   let {
     children,
     onItemSelect
@@ -2684,6 +2690,9 @@ function Menu(_ref) {
   React.useEffect(() => {
     if (!state.open) handleAnchorRectChange(null);
   }, [state.open]);
+  React.useImperativeHandle(ref, () => ({
+    open: state.show
+  }));
   const handleItemSelect = React.useCallback(function handleItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
   }, [onItemSelect]);
@@ -2695,12 +2704,11 @@ function Menu(_ref) {
   return /*#__PURE__*/React.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
@@ -2713,17 +2721,104 @@ const MenuButton = /*#__PURE__*/polymorphicComponent(function MenuButton(_ref2,
   return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _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__*/React.createElement(Box, {
+    display: "flex",
+    gap: "small",
+    alignItems: "center",
+    width: "full",
+    "aria-hidden": true
+  }, icon ? /*#__PURE__*/React.createElement("div", {
+    className: modules_2befbba6.menuItemIcon
+  }, icon) : null, /*#__PURE__*/React.createElement(Box, {
+    display: "inlineFlex",
+    flexDirection: "column",
+    gap: "xsmall",
+    paddingY: "xsmall",
+    alignItems: "flexStart",
+    overflow: "hidden",
+    flexGrow: 1
+  }, /*#__PURE__*/React.createElement(Text, {
+    id: id + "-label",
+    weight: description ? 'semibold' : 'regular',
+    size: "copy",
+    lineClamp: 1,
+    exceptionallySetClassName: modules_2befbba6.menuItemLabel
+  }, label), description ? /*#__PURE__*/React.createElement(Text, {
+    id: id + "-description",
+    size: "copy",
+    tone: "secondary",
+    exceptionallySetClassName: modules_2befbba6.menuItemDescription
+  }, description) : null), shortcut ? /*#__PURE__*/React.createElement("div", null, shortcut) : null);
+} //
+// SubMenuItem
+//
+
+
+function ArrowRightIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24"
+  }, /*#__PURE__*/React.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$2);
+
+  const id = useId(props.id);
+  const {
+    state
+  } = React.useContext(MenuContext);
+  return /*#__PURE__*/React.createElement(Ariakit.MenuButton, _objectSpread2(_objectSpread2({
+    "aria-labelledby": label && !props['aria-label'] ? id + "-label" : undefined
+  }, props), {}, {
+    state: state,
+    ref: ref,
+    className: classNames(modules_2befbba6.menuItem, exceptionallySetClassName)
+  }), /*#__PURE__*/React.createElement(MenuItemContent, {
+    id: id,
+    icon: icon,
+    label: label,
+    shortcut: /*#__PURE__*/React.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$2);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4$1);
 
   const {
     handleAnchorRectChange,
@@ -2746,42 +2841,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$1);
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5$1);
 
   const {
     state
   } = React.useContext(MenuContext);
-  return state.open ? /*#__PURE__*/React.createElement(portal.Portal, {
+  if (!state.open) return null;
+  return /*#__PURE__*/React.createElement(portal.Portal, {
     preserveTabOrder: true
   }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     ref: ref,
-    className: classNames('reactist_menulist', exceptionallySetClassName),
+    className: classNames(modules_2befbba6.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$1);
+    modal = true
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
 
+  const {
+    state
+  } = React.useContext(MenuContext);
+  if (!state.open) return null;
+  return /*#__PURE__*/React.createElement(portal.Portal, {
+    preserveTabOrder: true
+  }, /*#__PURE__*/React.createElement(Ariakit.Menu, _objectSpread2(_objectSpread2({}, props), {}, {
+    state: state,
+    ref: ref,
+    className: classNames(modules_2befbba6.menuList, modules_2befbba6.subMenuList, exceptionallySetClassName),
+    modal: modal
+  })));
+}); //
+// MenuItem
+//
+
+function useMenuItemClickHandler({
+  value,
+  hideOnSelect,
+  onClick,
+  onSelect
+}) {
   const {
     handleItemSelect,
     state
@@ -2789,42 +2901,95 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
   const {
     hide
   } = state;
-  const handleClick = React.useCallback(function handleClick(event) {
+  return React.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__*/React.createElement(Ariakit.MenuItem, _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
+  } = React.useContext(MenuContext);
+  const handleClick = useMenuItemClickHandler({
+    value,
+    onSelect,
+    onClick,
+    hideOnSelect
+  });
+  return /*#__PURE__*/React.createElement(Ariakit.MenuItem, _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(modules_2befbba6.menuItem, tone === 'destructive' ? modules_2befbba6.destructive : null, exceptionallySetClassName),
     hideOnClick: false
-  }), children);
+  }), children ? /*#__PURE__*/React.createElement(Box, {
+    width: "full",
+    className: label ? undefined : modules_2befbba6.legacyLayout
+  }, children) : null, /*#__PURE__*/React.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__*/React.forwardRef(function SubMenu({
@@ -2856,7 +3021,9 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function SubMenu({
     state: state,
     ref: ref,
     hideOnClick: false
-  }, renderMenuButton), list);
+  }, renderMenuButton), /*#__PURE__*/React.createElement("div", {
+    className: modules_2befbba6.subMenuContainer
+  }, list));
 });
 /**
  * A way to semantically group some menu items.
@@ -2865,25 +3032,100 @@ const SubMenu = /*#__PURE__*/React.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
   } = React.useContext(MenuContext);
-  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(Ariakit.MenuGroup, _objectSpread2(_objectSpread2({
+    "aria-labelledby": "menugroup-label-" + id
+  }, props), {}, {
+    id: id,
     ref: ref,
     state: state,
     className: exceptionallySetClassName
-  }), label ? /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
-    className: "reactist_menugroup__label"
-  }, label) : null, children);
+  }), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    gap: "small",
+    className: modules_2befbba6.menuGroupLabel
+  }, /*#__PURE__*/React.createElement(Text, {
+    id: "menugroup-label-" + id,
+    size: "copy",
+    weight: "semibold"
+  }, label), info ? /*#__PURE__*/React.createElement(Box, {
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    className: modules_2befbba6.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
+  } = React.useContext(MenuContext);
+  const handleClick = useMenuItemClickHandler({
+    value,
+    onSelect,
+    onClick,
+    hideOnSelect
+  });
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: label
+  }, /*#__PURE__*/React.createElement(Ariakit.MenuItem, _objectSpread2(_objectSpread2({
+    "aria-label": label,
+    "aria-describedby": id + "-description"
+  }, props), {}, {
+    as: as,
+    state: state,
+    ref: ref,
+    onClick: handleClick,
+    className: classNames(modules_2befbba6.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__*/React.createElement(MenuGroup, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("div", {
+    className: modules_2befbba6.iconsMenuGroup
+  }, children));
 });
 
 const _excluded$u = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
@@ -3970,6 +4212,8 @@ exports.Divider = Divider;
 exports.Heading = Heading;
 exports.Hidden = Hidden;
 exports.HiddenVisually = HiddenVisually;
+exports.IconMenuItem = IconMenuItem;
+exports.IconsMenuGroup = IconsMenuGroup;
 exports.Inline = Inline;
 exports.KeyCapturer = KeyCapturer;
 exports.KeyboardShortcut = KeyboardShortcut;
@@ -3994,6 +4238,8 @@ exports.SelectField = SelectField;
 exports.Stack = Stack;
 exports.StaticToast = StaticToast;
 exports.SubMenu = SubMenu;
+exports.SubMenuItem = SubMenuItem;
+exports.SubMenuList = SubMenuList;
 exports.SwitchField = SwitchField;
 exports.Tab = Tab;
 exports.TabAwareSlot = TabAwareSlot;