@doist/reactist 24.1.1-beta → 24.1.2-beta

package/es/menu/menu.js

@@ -1,5 +1,5 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useMemo, createElement, useContext, useCallback, forwardRef, Children, cloneElement, createContext } from 'react';
+import { useState, useMemo, createElement, useContext, useCallback, useEffect, forwardRef, Children, cloneElement, createContext } from 'react';
 import classNames from 'classnames';
 import { polymorphicComponent } from '../utils/polymorphism.js';
 import { useMenuStore, MenuButton as MenuButton$1, Portal, Menu as Menu$1, MenuItem as MenuItem$1, MenuGroup as MenuGroup$1 } from '@ariakit/react';
@@ -84,6 +84,10 @@ const ContextMenuTrigger = /*#__PURE__*/polymorphicComponent(function ContextMen
     });
     menuStore.show();
   }, [setAnchorRect, menuStore]);
+  const isOpen = menuStore.useState('open');
+  useEffect(() => {
+    if (!isOpen) setAnchorRect(null);
+  }, [isOpen, setAnchorRect]);
   return /*#__PURE__*/createElement(component, _objectSpread2(_objectSpread2({}, props), {}, {
     onContextMenu: handleContextMenu,
     ref
@@ -114,15 +118,7 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName),
     getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
-    modal: modal,
-    onBlur: event => {
-      var _event$relatedTarget;
-
-      if (!event.relatedTarget) return;
-      if (event.currentTarget.contains(event.relatedTarget)) return;
-      if ((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.closest('[role^="menu"]')) return;
-      menuStore.hide();
-    }
+    modal: modal
   }))) : null;
 });
 /**
@@ -199,12 +195,11 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
     hide: parentMenuHide
   } = menuStore;
   const handleSubItemSelect = useCallback(function handleSubItemSelect(value) {
-    if (onItemSelect) onItemSelect(value);
+    onItemSelect == null ? void 0 : onItemSelect(value);
     parentMenuItemSelect == null ? void 0 : parentMenuItemSelect(value);
     parentMenuHide();
   }, [parentMenuHide, parentMenuItemSelect, onItemSelect]);
-  const [button, list] = Children.toArray(children); // Ariakit needs to be able to pass props to the MenuButton
-  // and combine it with the MenuItem component
+  const [button, list] = Children.toArray(children); // Ariakit needs to be able to pass props to the MenuButton and combine it with the MenuItem component
 
   const renderMenuButton = useCallback(function renderMenuButton(props) {
     return /*#__PURE__*/cloneElement(button, props);

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 {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n} from '@ariakit/react'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    menuStore: MenuStore\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { 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<MenuStoreProps, '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, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | '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 { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\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 { setAnchorRect, menuStore } = React.useContext(MenuContext)\n\n    const handleContextMenu = React.useCallback(\n        function handleContextMenu(event: React.MouseEvent) {\n            event.preventDefault()\n            setAnchorRect({ x: event.clientX, y: event.clientY })\n            menuStore.show()\n        },\n        [setAnchorRect, menuStore],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<AriakitMenuProps, 'store' | '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 { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\n                modal={modal}\n                onBlur={(event) => {\n                    if (!event.relatedTarget) return\n                    if (event.currentTarget.contains(event.relatedTarget)) return\n                    if (event.relatedTarget?.closest('[role^=\"menu\"]')) return\n                    menuStore.hide()\n                }}\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, menuStore } = React.useContext(MenuContext)\n    const { hide } = menuStore\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        <AriakitMenuItem\n            {...props}\n            as={as}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\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, menuStore } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = menuStore\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            <AriakitMenuItem as=\"div\" store={menuStore} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </AriakitMenuItem>\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 { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\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","setAnchorRect","getAnchorRect","menuStore","useMenuStore","focusLoop","value","handleItemSelect","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","isOpen","useState","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","onBlur","relatedTarget","currentTarget","contains","closest","hide","MenuItem","onSelect","hideOnSelect","onClick","handleClick","onSelectResult","defaultPrevented","shouldClose","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}
+{"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 {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n} from '@ariakit/react'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    menuStore: MenuStore\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { 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<MenuStoreProps, '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, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | '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 { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\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 { setAnchorRect, menuStore } = React.useContext(MenuContext)\n\n    const handleContextMenu = React.useCallback(\n        function handleContextMenu(event: React.MouseEvent) {\n            event.preventDefault()\n            setAnchorRect({ x: event.clientX, y: event.clientY })\n            menuStore.show()\n        },\n        [setAnchorRect, menuStore],\n    )\n\n    const isOpen = menuStore.useState('open')\n    React.useEffect(() => {\n        if (!isOpen) setAnchorRect(null)\n    }, [isOpen, setAnchorRect])\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<AriakitMenuProps, 'store' | '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 { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\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    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\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        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    const { hide } = menuStore\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        <AriakitMenuItem\n            {...props}\n            as={as}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\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, menuStore } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = menuStore\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            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 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            <AriakitMenuItem as=\"div\" store={menuStore} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </AriakitMenuItem>\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 { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\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","setAnchorRect","getAnchorRect","menuStore","useMenuStore","focusLoop","value","handleItemSelect","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","isOpen","useState","onContextMenu","MenuList","modal","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}

package/lib/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),r=require("../utils/polymorphism.js"),l=require("@ariakit/react");const c=["children","onItemSelect"],a=["exceptionallySetClassName"],u=["as"],s=["exceptionallySetClassName","modal"],i=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],m=["label","children","exceptionallySetClassName"],p=n.createContext({});function d(e){let{children:o,onItemSelect:r}=e,a=t.objectWithoutProperties(e,c);const[u,s]=n.useState(null),i=n.useMemo(()=>u?()=>u:null,[u]),m=l.useMenuStore(t.objectSpread2({focusLoop:!0},a)),d=n.useMemo(()=>({menuStore:m,handleItemSelect:r,getAnchorRect:i,setAnchorRect:s}),[m,r,i,s]);return n.createElement(p.Provider,{value:d},o)}const S=r.polymorphicComponent((function(e,r){let{exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,a);const{menuStore:s}=n.useContext(p);return n.createElement(l.MenuButton,t.objectSpread2(t.objectSpread2({},u),{},{store:s,ref:r,className:o("reactist_menubutton",c)}))})),h=r.polymorphicComponent((function(e,o){let{as:r="div"}=e,l=t.objectWithoutProperties(e,u);const{setAnchorRect:c,menuStore:a}=n.useContext(p),s=n.useCallback((function(e){e.preventDefault(),c({x:e.clientX,y:e.clientY}),a.show()}),[c,a]);return n.createElement(r,t.objectSpread2(t.objectSpread2({},l),{},{onContextMenu:s,ref:o}))})),C=r.polymorphicComponent((function(e,r){let{exceptionallySetClassName:c,modal:a=!0}=e,u=t.objectWithoutProperties(e,s);const{menuStore:i,getAnchorRect:m}=n.useContext(p);return i.useState("open")?n.createElement(l.Portal,{preserveTabOrder:!0},n.createElement(l.Menu,t.objectSpread2(t.objectSpread2({},u),{},{store:i,gutter:8,shift:4,ref:r,className:o("reactist_menulist",c),getAnchorRect:null!=m?m:void 0,modal:a,onBlur:e=>{var t;e.relatedTarget&&(e.currentTarget.contains(e.relatedTarget)||null!=(t=e.relatedTarget)&&t.closest('[role^="menu"]')||i.hide())}}))):null})),b=r.polymorphicComponent((function(e,o){let{value:r,children:c,onSelect:a,hideOnSelect:u=!0,onClick:s,exceptionallySetClassName:m,as:d="button"}=e,S=t.objectWithoutProperties(e,i);const{handleItemSelect:h,menuStore:C}=n.useContext(p),{hide:b}=C,f=n.useCallback((function(e){null==s||s(e);const t=!1!==(a&&!e.defaultPrevented?a():void 0)&&u;null==h||h(r),t&&b()}),[a,s,h,u,b,r]);return n.createElement(l.MenuItem,t.objectSpread2(t.objectSpread2({},S),{},{as:d,store:C,ref:o,onClick:f,className:m,hideOnClick:!1}),c)})),f=n.forwardRef((function({children:e,onItemSelect:t},o){const{handleItemSelect:r,menuStore:c}=n.useContext(p),{hide:a}=c,u=n.useCallback((function(e){t&&t(e),null==r||r(e),a()}),[a,r,t]),[s,i]=n.Children.toArray(e),m=n.useCallback((function(e){return n.cloneElement(s,e)}),[s]);return n.createElement(d,{onItemSelect:u},n.createElement(l.MenuItem,{as:"div",store:c,ref:o,hideOnClick:!1},m),i)})),x=r.polymorphicComponent((function(e,o){let{label:r,children:c,exceptionallySetClassName:a}=e,u=t.objectWithoutProperties(e,m);const{menuStore:s}=n.useContext(p);return n.createElement(l.MenuGroup,t.objectSpread2(t.objectSpread2({},u),{},{ref:o,store:s,className:a}),r?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},r):null,c)}));exports.ContextMenuTrigger=h,exports.Menu=d,exports.MenuButton=S,exports.MenuGroup=x,exports.MenuItem=b,exports.MenuList=C,exports.SubMenu=f;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),r=require("../utils/polymorphism.js"),l=require("@ariakit/react");const c=["children","onItemSelect"],a=["exceptionallySetClassName"],u=["as"],s=["exceptionallySetClassName","modal"],i=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],p=["label","children","exceptionallySetClassName"],m=n.createContext({});function d(e){let{children:o,onItemSelect:r}=e,a=t.objectWithoutProperties(e,c);const[u,s]=n.useState(null),i=n.useMemo(()=>u?()=>u:null,[u]),p=l.useMenuStore(t.objectSpread2({focusLoop:!0},a)),d=n.useMemo(()=>({menuStore:p,handleItemSelect:r,getAnchorRect:i,setAnchorRect:s}),[p,r,i,s]);return n.createElement(m.Provider,{value:d},o)}const S=r.polymorphicComponent((function(e,r){let{exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,a);const{menuStore:s}=n.useContext(m);return n.createElement(l.MenuButton,t.objectSpread2(t.objectSpread2({},u),{},{store:s,ref:r,className:o("reactist_menubutton",c)}))})),h=r.polymorphicComponent((function(e,o){let{as:r="div"}=e,l=t.objectWithoutProperties(e,u);const{setAnchorRect:c,menuStore:a}=n.useContext(m),s=n.useCallback((function(e){e.preventDefault(),c({x:e.clientX,y:e.clientY}),a.show()}),[c,a]),i=a.useState("open");return n.useEffect(()=>{i||c(null)},[i,c]),n.createElement(r,t.objectSpread2(t.objectSpread2({},l),{},{onContextMenu:s,ref:o}))})),C=r.polymorphicComponent((function(e,r){let{exceptionallySetClassName:c,modal:a=!0}=e,u=t.objectWithoutProperties(e,s);const{menuStore:i,getAnchorRect:p}=n.useContext(m);return i.useState("open")?n.createElement(l.Portal,{preserveTabOrder:!0},n.createElement(l.Menu,t.objectSpread2(t.objectSpread2({},u),{},{store:i,gutter:8,shift:4,ref:r,className:o("reactist_menulist",c),getAnchorRect:null!=p?p:void 0,modal:a}))):null})),b=r.polymorphicComponent((function(e,o){let{value:r,children:c,onSelect:a,hideOnSelect:u=!0,onClick:s,exceptionallySetClassName:p,as:d="button"}=e,S=t.objectWithoutProperties(e,i);const{handleItemSelect:h,menuStore:C}=n.useContext(m),{hide:b}=C,f=n.useCallback((function(e){null==s||s(e);const t=!1!==(a&&!e.defaultPrevented?a():void 0)&&u;null==h||h(r),t&&b()}),[a,s,h,u,b,r]);return n.createElement(l.MenuItem,t.objectSpread2(t.objectSpread2({},S),{},{as:d,store:C,ref:o,onClick:f,className:p,hideOnClick:!1}),c)})),f=n.forwardRef((function({children:e,onItemSelect:t},o){const{handleItemSelect:r,menuStore:c}=n.useContext(m),{hide:a}=c,u=n.useCallback((function(e){null==t||t(e),null==r||r(e),a()}),[a,r,t]),[s,i]=n.Children.toArray(e),p=n.useCallback((function(e){return n.cloneElement(s,e)}),[s]);return n.createElement(d,{onItemSelect:u},n.createElement(l.MenuItem,{as:"div",store:c,ref:o,hideOnClick:!1},p),i)})),x=r.polymorphicComponent((function(e,o){let{label:r,children:c,exceptionallySetClassName:a}=e,u=t.objectWithoutProperties(e,p);const{menuStore:s}=n.useContext(m);return n.createElement(l.MenuGroup,t.objectSpread2(t.objectSpread2({},u),{},{ref:o,store:s,className:a}),r?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},r):null,c)}));exports.ContextMenuTrigger=h,exports.Menu=d,exports.MenuButton=S,exports.MenuGroup=x,exports.MenuItem=b,exports.MenuList=C,exports.SubMenu=f;
 //# sourceMappingURL=menu.js.map

package/lib/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 {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n} from '@ariakit/react'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    menuStore: MenuStore\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { 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<MenuStoreProps, '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, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | '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 { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\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 { setAnchorRect, menuStore } = React.useContext(MenuContext)\n\n    const handleContextMenu = React.useCallback(\n        function handleContextMenu(event: React.MouseEvent) {\n            event.preventDefault()\n            setAnchorRect({ x: event.clientX, y: event.clientY })\n            menuStore.show()\n        },\n        [setAnchorRect, menuStore],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<AriakitMenuProps, 'store' | '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 { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\n                modal={modal}\n                onBlur={(event) => {\n                    if (!event.relatedTarget) return\n                    if (event.currentTarget.contains(event.relatedTarget)) return\n                    if (event.relatedTarget?.closest('[role^=\"menu\"]')) return\n                    menuStore.hide()\n                }}\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, menuStore } = React.useContext(MenuContext)\n    const { hide } = menuStore\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        <AriakitMenuItem\n            {...props}\n            as={as}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\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, menuStore } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = menuStore\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            <AriakitMenuItem as=\"div\" store={menuStore} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </AriakitMenuItem>\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 { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\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","setAnchorRect","getAnchorRect","menuStore","useMenuStore","focusLoop","value","handleItemSelect","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","useState","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","onBlur","relatedTarget","currentTarget","contains","_event$relatedTarget","closest","hide","MenuItem","onSelect","hideOnSelect","onClick","handleClick","shouldClose","defaultPrevented","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}
+{"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 {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n} from '@ariakit/react'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    menuStore: MenuStore\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { 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<MenuStoreProps, '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, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | '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 { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\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 { setAnchorRect, menuStore } = React.useContext(MenuContext)\n\n    const handleContextMenu = React.useCallback(\n        function handleContextMenu(event: React.MouseEvent) {\n            event.preventDefault()\n            setAnchorRect({ x: event.clientX, y: event.clientY })\n            menuStore.show()\n        },\n        [setAnchorRect, menuStore],\n    )\n\n    const isOpen = menuStore.useState('open')\n    React.useEffect(() => {\n        if (!isOpen) setAnchorRect(null)\n    }, [isOpen, setAnchorRect])\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<AriakitMenuProps, 'store' | '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 { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\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    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\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        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    const { hide } = menuStore\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        <AriakitMenuItem\n            {...props}\n            as={as}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\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, menuStore } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = menuStore\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            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 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            <AriakitMenuItem as=\"div\" store={menuStore} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </AriakitMenuItem>\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 { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\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","setAnchorRect","getAnchorRect","menuStore","useMenuStore","focusLoop","value","handleItemSelect","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","isOpen","useState","onContextMenu","MenuList","modal","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "24.1.1-beta",
+    "version": "24.1.2-beta",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {