@doist/reactist 24.1.0-beta → 24.1.1-beta

package/es/menu/menu.js

@@ -1,5 +1,5 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useMemo, useCallback, createElement, useContext, forwardRef, Children, cloneElement, createContext } from 'react';
+import { useState, useMemo, createElement, useContext, useCallback, 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';
@@ -33,15 +33,12 @@ function Menu(_ref) {
   const menuStore = useMenuStore(_objectSpread2({
     focusLoop: true
   }, props));
-  const handleItemSelect = useCallback(function handleItemSelect(value) {
-    onItemSelect == null ? void 0 : onItemSelect(value);
-  }, [onItemSelect]);
   const value = useMemo(() => ({
     menuStore,
-    handleItemSelect,
+    handleItemSelect: onItemSelect,
     getAnchorRect,
     setAnchorRect
-  }), [menuStore, handleItemSelect, getAnchorRect, setAnchorRect]);
+  }), [menuStore, onItemSelect, getAnchorRect, setAnchorRect]);
   return /*#__PURE__*/createElement(MenuContext.Provider, {
     value: value
   }, children);
@@ -117,7 +114,15 @@ const MenuList = /*#__PURE__*/polymorphicComponent(function MenuList(_ref4, ref)
     ref: ref,
     className: classNames('reactist_menulist', exceptionallySetClassName),
     getAnchorRect: getAnchorRect != null ? getAnchorRect : undefined,
-    modal: modal
+    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();
+    }
   }))) : null;
 });
 /**
@@ -148,7 +153,7 @@ const MenuItem = /*#__PURE__*/polymorphicComponent(function MenuItem(_ref5, ref)
     onClick == null ? void 0 : onClick(event);
     const onSelectResult = onSelect && !event.defaultPrevented ? onSelect() : undefined;
     const shouldClose = onSelectResult !== false && hideOnSelect;
-    handleItemSelect(value);
+    handleItemSelect == null ? void 0 : handleItemSelect(value);
     if (shouldClose) hide();
   }, [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value]);
   return /*#__PURE__*/createElement(MenuItem$1, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -195,7 +200,7 @@ const SubMenu = /*#__PURE__*/forwardRef(function SubMenu({
   } = menuStore;
   const handleSubItemSelect = useCallback(function handleSubItemSelect(value) {
     if (onItemSelect) onItemSelect(value);
-    parentMenuItemSelect(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

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 handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, handleItemSelect, 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            />\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","handleItemSelect","value","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","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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"}
+{"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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"}

package/es/tooltip/tooltip.js

@@ -1,5 +1,4 @@
-import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { Children, createElement, Fragment, cloneElement } from 'react';
+import { Children, createElement, Fragment } from 'react';
 import { Box } from '../box/box.js';
 import { useTooltipStore, TooltipAnchor, Tooltip as Tooltip$1, TooltipArrow } from '@ariakit/react';
 import styles from './tooltip.module.css.js';
@@ -27,54 +26,9 @@ function Tooltip({
   if (typeof child.ref === 'string') {
     throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded');
   }
-  /**
-   * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
-   * tooltips from showing when the trigger element is focused back after a popover or dialog that
-   * it opened was closed. See link below for more details.
-   * @see https://github.com/ariakit/ariakit/discussions/749
-   */
-
-
-  function handleFocus(event) {
-    var _child$props;
-
-    // If focus is not followed by a key up event, does it mean that it's not an intentional
-    // keyboard focus? Not sure but it seems to work.
-    // This may be resolved soon in an upcoming version of ariakit:
-    // https://github.com/ariakit/ariakit/issues/750
-    function handleKeyUp(event) {
-      const eventKey = event.key;
-
-      if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        tooltip.show();
-      }
-    }
-
-    event.currentTarget.addEventListener('keyup', handleKeyUp, {
-      once: true
-    });
-    event.preventDefault(); // Prevent tooltip.show from being called by TooltipReference
-
-    child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
-  }
-
-  function handleBlur(event) {
-    var _child$props2;
-
-    tooltip.hide();
-    child == null ? void 0 : (_child$props2 = child.props) == null ? void 0 : _child$props2.onBlur == null ? void 0 : _child$props2.onBlur(event);
-  }
 
   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(TooltipAnchor, {
-    render: anchorProps => {
-      // Let child props override anchor props so user can specify attributes like tabIndex
-      // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
-      // by applying the replacement component/element twice
-      return /*#__PURE__*/cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, child.props), anchorProps), {}, {
-        onFocus: handleFocus,
-        onBlur: handleBlur
-      }));
-    },
+    render: child,
     store: tooltip,
     ref: child.ref
   }), isOpen && content ? /*#__PURE__*/createElement(Box, {

package/es/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/ariakit/ariakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not an intentional\n        // keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of ariakit:\n        // https://github.com/ariakit/ariakit/issues/750\n        function handleKeyUp(event: Event) {\n            const eventKey = (event as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                tooltip.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n        child?.props?.onFocus?.(event)\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n        tooltip.hide()\n        child?.props?.onBlur?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor\n                render={(anchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, {\n                        ...child.props,\n                        ...anchorProps,\n                        onFocus: handleFocus,\n                        onBlur: handleBlur,\n                    })\n                }}\n                store={tooltip}\n                ref={child.ref}\n            />\n            {isOpen && content ? (\n                <Box\n                    as={AriakitTooltip}\n                    gutter={gapSize}\n                    store={tooltip}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","only","ref","Error","handleFocus","event","handleKeyUp","eventKey","key","show","currentTarget","addEventListener","once","preventDefault","props","onFocus","handleBlur","hide","onBlur","TooltipAnchor","render","anchorProps","store","Box","as","AriakitTooltip","gutter","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":";;;;;;AA0EA,SAASA,OAAT,CAAiB;EACbC,QADa;EAEbC,OAFa;EAGbC,QAAQ,GAAG,KAHE;EAIbC,OAAO,GAAG,CAJG;EAKbC,SAAS,GAAG,KALC;EAMbC;AANa,CAAjB;EAQI,MAAMC,OAAO,GAAGC,eAAe,CAAC;IAAEC,SAAS,EAAEN,QAAb;IAAuBO,WAAW,EAAE,GAApC;IAAyCC,WAAW,EAAE;GAAvD,CAA/B;EACA,MAAMC,MAAM,GAAGL,OAAO,CAACM,QAAR,CAAiB,MAAjB,CAAf;EAEA,MAAMC,KAAK,GAAGC,QAAA,CAAeC,IAAf,CACVf,QADU,CAAd;;EAIA,IAAI,CAACa,KAAL,EAAY;IACR,OAAOA,KAAP;;;EAGJ,IAAI,OAAOA,KAAK,CAACG,GAAb,KAAqB,QAAzB,EAAmC;IAC/B,MAAM,IAAIC,KAAJ,CAAU,iEAAV,CAAN;;;;;;;;;;EASJ,SAASC,WAAT,CAAqBC,KAArB;;;;;;;IAKI,SAASC,WAAT,CAAqBD,KAArB;MACI,MAAME,QAAQ,GAAIF,KAAuB,CAACG,GAA1C;;MACA,IAAID,QAAQ,KAAK,QAAb,IAAyBA,QAAQ,KAAK,OAAtC,IAAiDA,QAAQ,KAAK,OAAlE,EAA2E;QACvEf,OAAO,CAACiB,IAAR;;;;IAGRJ,KAAK,CAACK,aAAN,CAAoBC,gBAApB,CAAqC,OAArC,EAA8CL,WAA9C,EAA2D;MAAEM,IAAI,EAAE;KAAnE;IACAP,KAAK,CAACQ,cAAN;;IACAd,KAAK,QAAL,4BAAAA,KAAK,CAAEe,KAAP,kCAAcC,OAAd,iCAAcA,OAAd,CAAwBV,KAAxB;;;EAGJ,SAASW,UAAT,CAAoBX,KAApB;;;IACIb,OAAO,CAACyB,IAAR;IACAlB,KAAK,QAAL,6BAAAA,KAAK,CAAEe,KAAP,mCAAcI,MAAd,kCAAcA,MAAd,CAAuBb,KAAvB;;;EAGJ,oBACIL,aAAA,SAAA,MAAA,eACIA,aAAA,CAACmB,aAAD;IACIC,MAAM,EAAGC,WAAD;;;;MAIJ,oBAAOrB,YAAA,CAAmBD,KAAnB,mDACAA,KAAK,CAACe,KADN,GAEAO,WAFA;QAGHN,OAAO,EAAEX,WAHN;QAIHc,MAAM,EAAEF;SAJZ;;IAOJM,KAAK,EAAE9B;IACPU,GAAG,EAAEH,KAAK,CAACG;GAbf,CADJ,EAgBKL,MAAM,IAAIV,OAAV,gBACGa,aAAA,CAACuB,GAAD;IACIC,EAAE,EAAEC;IACJC,MAAM,EAAErC;IACRiC,KAAK,EAAE9B;IACPmC,SAAS,EAAE,CAACC,MAAM,CAACpC,OAAR,EAAiBD,yBAAjB;IACXsC,UAAU,EAAC;IACXC,YAAY,EAAC;IACbC,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,KAAK,EAAC;IACNC,QAAQ,EAAC;IACTC,SAAS,EAAC;GAZd,EAcK9C,SAAS,gBAAGU,aAAA,CAACqC,YAAD,MAAA,CAAH,GAAsB,IAdpC,EAeK,OAAOlD,OAAP,KAAmB,UAAnB,GAAgCA,OAAO,EAAvC,GAA4CA,OAfjD,CADH,GAkBG,IAlCR,CADJ;AAsCH;;;;"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <Box\n                    as={AriakitTooltip}\n                    gutter={gapSize}\n                    store={tooltip}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["Tooltip","children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","only","ref","Error","TooltipAnchor","render","store","Box","as","AriakitTooltip","gutter","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":";;;;;AA0EA,SAASA,OAAT,CAAiB;EACbC,QADa;EAEbC,OAFa;EAGbC,QAAQ,GAAG,KAHE;EAIbC,OAAO,GAAG,CAJG;EAKbC,SAAS,GAAG,KALC;EAMbC;AANa,CAAjB;EAQI,MAAMC,OAAO,GAAGC,eAAe,CAAC;IAAEC,SAAS,EAAEN,QAAb;IAAuBO,WAAW,EAAE,GAApC;IAAyCC,WAAW,EAAE;GAAvD,CAA/B;EACA,MAAMC,MAAM,GAAGL,OAAO,CAACM,QAAR,CAAiB,MAAjB,CAAf;EAEA,MAAMC,KAAK,GAAGC,QAAA,CAAeC,IAAf,CACVf,QADU,CAAd;;EAIA,IAAI,CAACa,KAAL,EAAY;IACR,OAAOA,KAAP;;;EAGJ,IAAI,OAAOA,KAAK,CAACG,GAAb,KAAqB,QAAzB,EAAmC;IAC/B,MAAM,IAAIC,KAAJ,CAAU,iEAAV,CAAN;;;EAGJ,oBACIH,aAAA,SAAA,MAAA,eACIA,aAAA,CAACI,aAAD;IAAeC,MAAM,EAAEN;IAAOO,KAAK,EAAEd;IAASU,GAAG,EAAEH,KAAK,CAACG;GAAzD,CADJ,EAEKL,MAAM,IAAIV,OAAV,gBACGa,aAAA,CAACO,GAAD;IACIC,EAAE,EAAEC;IACJC,MAAM,EAAErB;IACRiB,KAAK,EAAEd;IACPmB,SAAS,EAAE,CAACC,MAAM,CAACpB,OAAR,EAAiBD,yBAAjB;IACXsB,UAAU,EAAC;IACXC,YAAY,EAAC;IACbC,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,QAAQ,EAAC;IACTC,KAAK,EAAC;IACNC,QAAQ,EAAC;IACTC,SAAS,EAAC;GAZd,EAcK9B,SAAS,gBAAGU,aAAA,CAACqB,YAAD,MAAA,CAAH,GAAsB,IAdpC,EAeK,OAAOlC,OAAP,KAAmB,UAAnB,GAAgCA,OAAO,EAAvC,GAA4CA,OAfjD,CADH,GAkBG,IApBR,CADJ;AAwBH;;;;"}

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.useCallback((function(e){null==r||r(e)}),[r]),S=n.useMemo(()=>({menuStore:m,handleItemSelect:d,getAnchorRect:i,setAnchorRect:s}),[m,d,i,s]);return n.createElement(p.Provider,{value:S},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}))):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;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),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"],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;
 //# 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 handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, handleItemSelect, 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            />\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","handleItemSelect","value","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","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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"}
+{"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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"}

package/lib/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../box/box.js"),r=require("@ariakit/react"),n=require("./tooltip.module.css.js");exports.Tooltip=function({children:l,content:i,position:u="top",gapSize:a=3,withArrow:s=!1,exceptionallySetClassName:c}){const p=r.useTooltipStore({placement:u,showTimeout:500,hideTimeout:100}),d=p.useState("open"),f=t.Children.only(l);if(!f)return f;if("string"==typeof f.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");function m(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&p.show()}),{once:!0}),e.preventDefault(),null==f||null==(t=f.props)||null==t.onFocus||t.onFocus(e)}function h(e){var t;p.hide(),null==f||null==(t=f.props)||null==t.onBlur||t.onBlur(e)}return t.createElement(t.Fragment,null,t.createElement(r.TooltipAnchor,{render:o=>t.cloneElement(f,e.objectSpread2(e.objectSpread2(e.objectSpread2({},f.props),o),{},{onFocus:m,onBlur:h})),store:p,ref:f.ref}),d&&i?t.createElement(o.Box,{as:r.Tooltip,gutter:a,store:p,className:[n.default.tooltip,c],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"},s?t.createElement(r.TooltipArrow,null):null,"function"==typeof i?i():i):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../box/box.js"),r=require("@ariakit/react"),o=require("./tooltip.module.css.js");exports.Tooltip=function({children:n,content:i,position:l="top",gapSize:a=3,withArrow:s=!1,exceptionallySetClassName:u}){const d=r.useTooltipStore({placement:l,showTimeout:500,hideTimeout:100}),c=d.useState("open"),p=e.Children.only(n);if(!p)return p;if("string"==typeof p.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return e.createElement(e.Fragment,null,e.createElement(r.TooltipAnchor,{render:p,store:d,ref:p.ref}),c&&i?e.createElement(t.Box,{as:r.Tooltip,gutter:a,store:d,className:[o.default.tooltip,u],background:"toast",borderRadius:"standard",paddingX:"small",paddingY:"xsmall",maxWidth:"medium",width:"fitContent",overflow:"hidden",textAlign:"center"},s?e.createElement(r.TooltipArrow,null):null,"function"==typeof i?i():i):null)};
 //# sourceMappingURL=tooltip.js.map

package/lib/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/ariakit/ariakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not an intentional\n        // keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of ariakit:\n        // https://github.com/ariakit/ariakit/issues/750\n        function handleKeyUp(event: Event) {\n            const eventKey = (event as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                tooltip.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        event.preventDefault() // Prevent tooltip.show from being called by TooltipReference\n        child?.props?.onFocus?.(event)\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n        tooltip.hide()\n        child?.props?.onBlur?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor\n                render={(anchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, {\n                        ...child.props,\n                        ...anchorProps,\n                        onFocus: handleFocus,\n                        onBlur: handleBlur,\n                    })\n                }}\n                store={tooltip}\n                ref={child.ref}\n            />\n            {isOpen && content ? (\n                <Box\n                    as={AriakitTooltip}\n                    gutter={gapSize}\n                    store={tooltip}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","only","ref","Error","handleFocus","event","currentTarget","addEventListener","eventKey","key","show","once","preventDefault","props","onFocus","handleBlur","hide","onBlur","TooltipAnchor","render","anchorProps","store","Box","as","AriakitTooltip","gutter","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":"6PA0EA,UAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCC,0BAMbA,IAEA,MAAMC,EAAUC,kBAAgB,CAAEC,UAAWN,EAAUO,YAAa,IAAKC,YAAa,MAChFC,EAASL,EAAQM,SAAS,QAE1BC,EAAQC,WAAeC,KACzBf,GAGJ,IAAKa,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMG,IACb,MAAM,IAAIC,MAAM,mEASpB,SAASC,EAAYC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBF,GACjB,MAAMG,EAAYH,EAAwBI,IACzB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjDhB,EAAQkB,SAG2C,CAAEC,MAAM,IACnEN,EAAMO,uBACNb,YAAAA,EAAOc,gBAAOC,WAAAA,QAAUT,GAG5B,SAASU,EAAWV,SAChBb,EAAQwB,aACRjB,YAAAA,EAAOc,gBAAOI,UAAAA,OAASZ,GAG3B,OACIL,gCACIA,gBAACkB,iBACGC,OAASC,GAIEpB,eAAmBD,qDACnBA,EAAMc,OACNO,OACHN,QAASV,EACTa,OAAQF,KAGhBM,MAAO7B,EACPU,IAAKH,EAAMG,MAEdL,GAAUV,EACPa,gBAACsB,OACGC,GAAIC,UACJC,OAAQpC,EACRgC,MAAO7B,EACPkC,UAAW,CAACC,UAAOnC,QAASD,GAC5BqC,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,UAET7C,EAAYU,gBAACoC,qBAAkB,KACZ,mBAAZjD,EAAyBA,IAAYA,GAEjD"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    useTooltipStore,\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n} from '@ariakit/react'\nimport { Box } from '../box'\n\nimport type { TooltipStoreState } from '@ariakit/react'\n\nimport styles from './tooltip.module.css'\n\ntype TooltipProps = {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * An escape hatch, in case you need to provide a custom class name to the tooltip.\n     */\n    exceptionallySetClassName?: string\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    withArrow = false,\n    exceptionallySetClassName,\n}: TooltipProps) {\n    const tooltip = useTooltipStore({ placement: position, showTimeout: 500, hideTimeout: 100 })\n    const isOpen = tooltip.useState('open')\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    return (\n        <>\n            <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n            {isOpen && content ? (\n                <Box\n                    as={AriakitTooltip}\n                    gutter={gapSize}\n                    store={tooltip}\n                    className={[styles.tooltip, exceptionallySetClassName]}\n                    background=\"toast\"\n                    borderRadius=\"standard\"\n                    paddingX=\"small\"\n                    paddingY=\"xsmall\"\n                    maxWidth=\"medium\"\n                    width=\"fitContent\"\n                    overflow=\"hidden\"\n                    textAlign=\"center\"\n                >\n                    {withArrow ? <TooltipArrow /> : null}\n                    {typeof content === 'function' ? content() : content}\n                </Box>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n"],"names":["children","content","position","gapSize","withArrow","exceptionallySetClassName","tooltip","useTooltipStore","placement","showTimeout","hideTimeout","isOpen","useState","child","React","only","ref","Error","TooltipAnchor","render","store","Box","as","AriakitTooltip","gutter","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow"],"mappings":"uMA0EA,UAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,GAAY,EALCC,0BAMbA,IAEA,MAAMC,EAAUC,kBAAgB,CAAEC,UAAWN,EAAUO,YAAa,IAAKC,YAAa,MAChFC,EAASL,EAAQM,SAAS,QAE1BC,EAAQC,WAAeC,KACzBf,GAGJ,IAAKa,EACD,OAAOA,EAGX,GAAyB,iBAAdA,EAAMG,IACb,MAAM,IAAIC,MAAM,mEAGpB,OACIH,gCACIA,gBAACI,iBAAcC,OAAQN,EAAOO,MAAOd,EAASU,IAAKH,EAAMG,MACxDL,GAAUV,EACPa,gBAACO,OACGC,GAAIC,UACJC,OAAQrB,EACRiB,MAAOd,EACPmB,UAAW,CAACC,UAAOpB,QAASD,GAC5BsB,WAAW,QACXC,aAAa,WACbC,SAAS,QACTC,SAAS,SACTC,SAAS,SACTC,MAAM,aACNC,SAAS,SACTC,UAAU,UAET9B,EAAYU,gBAACqB,qBAAkB,KACZ,mBAAZlC,EAAyBA,IAAYA,GAEjD"}

package/package.json

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