@doist/reactist 22.0.0-beta → 22.0.1-beta

package/es/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './menu.module.css'\nimport { Tooltip } from '../tooltip'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n    handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\ntype MenuHandle = {\n    open: () => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nconst Menu = React.forwardRef<MenuHandle, MenuProps>(function Menu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n        null,\n    )\n    const getAnchorRect = React.useMemo(() => {\n        return anchorRect ? () => anchorRect : undefined\n    }, [anchorRect])\n\n    const state = Ariakit.useMenuState({\n        focusLoop: true,\n        gutter: 8,\n        shift: 4,\n        getAnchorRect,\n        ...props,\n    })\n\n    React.useEffect(() => {\n        if (!state.open) handleAnchorRectChange(null)\n    }, [state.open])\n\n    React.useImperativeHandle(ref, () => ({ open: state.show }))\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n            handleAnchorRectChange,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n})\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={exceptionallySetClassName}\n        />\n    )\n})\n\n//\n// MenuItemContent\n//\n\ntype MenuItemContentProps = {\n    id: string\n\n    /**\n     * The menu item's label.\n     */\n    label?: NonNullable<React.ReactNode>\n\n    /**\n     * The menu item's description, typically used to provide additional information about what the\n     * menu item does.\n     *\n     * When used, it is rendered below the label. The label is also shown more prominently (e.g.\n     * using bold text), while the description is rendered using text in secondary tone.\n     *\n     * Therefore, for the description to be rendered, you must also provide a `label`.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional icon to render next to the menu item's label.\n     *\n     * For the icon to be rendered, you must also provide a `label`.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * An optional element to render to the right of the menu item's label. It is often used to\n     * show a keyboard shortcut for the menu item.\n     *\n     * For the shortcut to be rendered, you must also provide a `label`.\n     */\n    shortcut?: React.ReactNode\n}\n\n/**\n * Renders the content inside a standard MenuItem. It is extracted into a component for reuse in\n * the SubMenuItem, which is a MenuItem visually, but semantically it's closer to be a MenuButton.\n * @private\n */\nfunction MenuItemContent({ label, description, icon, shortcut, id }: MenuItemContentProps) {\n    if (!label) return null\n    return (\n        <Box\n            display=\"flex\"\n            gap=\"small\"\n            alignItems=\"center\"\n            width=\"full\"\n            aria-hidden // the menu item is labelled via aria-labelledby and aria-describedby\n        >\n            {icon ? <div className={styles.menuItemIcon}>{icon}</div> : null}\n            <Box\n                display=\"inlineFlex\"\n                flexDirection=\"column\"\n                gap=\"xsmall\"\n                paddingY=\"xsmall\"\n                alignItems=\"flexStart\"\n                overflow=\"hidden\"\n                flexGrow={1}\n            >\n                <Text\n                    id={`${id}-label`}\n                    weight={description ? 'semibold' : 'regular'}\n                    size=\"copy\"\n                    lineClamp={1}\n                    exceptionallySetClassName={styles.menuItemLabel}\n                >\n                    {label}\n                </Text>\n                {description ? (\n                    <Text\n                        id={`${id}-description`}\n                        size=\"copy\"\n                        tone=\"secondary\"\n                        exceptionallySetClassName={styles.menuItemDescription}\n                    >\n                        {description}\n                    </Text>\n                ) : null}\n            </Box>\n            {shortcut ? <div>{shortcut}</div> : null}\n        </Box>\n    )\n}\n\n//\n// SubMenuItem\n//\n\nfunction ArrowRightIcon() {\n    return (\n        <svg width=\"24\" height=\"24\">\n            <path\n                d=\"M14.243 12L9.646 7.404a.5.5 0 1 1 .708-.707l4.95 4.95a.5.5 0 0 1 0 .707l-4.95 4.95a.5.5 0 0 1-.708-.708L14.243 12z\"\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\ntype SubMenuItemProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as' | 'children'> &\n    Pick<MenuItemProps, 'label' | 'icon'>\n\n/**\n * A menu item to toggle a sub-menu open or closed.\n */\nconst SubMenuItem = polymorphicComponent<'button', SubMenuItemProps>(function SubMenuItem(\n    { exceptionallySetClassName, label, icon, ...props },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            aria-labelledby={label && !props['aria-label'] ? `${id}-label` : undefined}\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames(styles.menuItem, exceptionallySetClassName)}\n        >\n            <MenuItemContent id={id} icon={icon} label={label} shortcut={<ArrowRightIcon />} />\n        </Ariakit.MenuButton>\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n    const handleContextMenu = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault()\n            handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n            state.show()\n        },\n        [handleAnchorRectChange, state],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList and SubMenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    if (!state.open) return null\n\n    return (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames(styles.menuList, exceptionallySetClassName)}\n                modal={modal}\n            />\n        </Portal>\n    )\n})\n\n/**\n * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.\n */\nconst SubMenuList = polymorphicComponent<'div', MenuListProps>(function SubMenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    if (!state.open) return null\n\n    return (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames(\n                    styles.menuList,\n                    styles.subMenuList,\n                    exceptionallySetClassName,\n                )}\n                modal={modal}\n            />\n        </Portal>\n    )\n})\n\n//\n// MenuItem\n//\n\nfunction useMenuItemClickHandler({\n    value,\n    hideOnSelect,\n    onClick,\n    onSelect,\n}: Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onClick' | 'onSelect'>) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    return React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n}\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item.\n     *\n     * It is passed on to the parent `Menu`'s `onItemSelect` when you provide that instead of (or\n     * alongside) providing individual `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * The menu item's content.\n     *\n     * Prefer using `label` instead. In addition to `label`, you can also use `description`, `icon`\n     * and `shortcut`, to provide richer content inside the menu item.\n     *\n     * However, you can still use `children` to provide arbitrary content inside the menu item. You\n     * can even combine `children` with the other props to provide a richer menu item. The\n     * `children` content will be rendered first, followed by the regular menu item content\n     * generated using the `label`, `description`, `icon` and `shortcut` props (if the `label` is\n     * present).\n     */\n    children?: React.ReactNode\n\n    /**\n     * The menu item's label.\n     */\n    label?: NonNullable<React.ReactNode>\n\n    /**\n     * The menu item's description, typically used to provide additional information about what the\n     * menu item does.\n     *\n     * When used, it is rendered below the label. The label is also shown more prominently (e.g.\n     * using bold text), while the description is rendered using text in secondary tone.\n     *\n     * Therefore, for the description to be rendered, you must also provide a `label`.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional icon to render next to the menu item's label.\n     *\n     * For the icon to be rendered, you must also provide a `label`.\n     */\n    icon?: NonNullable<React.ReactNode>\n\n    /**\n     * An optional element to render to the right of the menu item's label. It is often used to\n     * show a keyboard shortcut for the menu item.\n     *\n     * For the shortcut to be rendered, you must also provide a `label`.\n     */\n    shortcut?: React.ReactNode\n\n    /**\n     * The tone to use for the menu item.\n     */\n    tone?: 'normal' | 'destructive'\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        label,\n        description,\n        icon,\n        shortcut,\n        tone,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    const handleClick = useMenuItemClickHandler({ value, onSelect, onClick, hideOnSelect })\n\n    return (\n        <Ariakit.MenuItem\n            aria-labelledby={label && !props['aria-label'] ? `${id}-label` : undefined}\n            aria-describedby={label && description ? `${id}-description` : undefined}\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={classNames(\n                styles.menuItem,\n                tone === 'destructive' ? styles.destructive : null,\n                exceptionallySetClassName,\n            )}\n            hideOnClick={false}\n        >\n            {children ? (\n                <Box width=\"full\" className={label ? undefined : styles.legacyLayout}>\n                    {children}\n                </Box>\n            ) : null}\n\n            <MenuItemContent\n                id={id}\n                icon={icon}\n                label={label}\n                description={description}\n                shortcut={shortcut}\n            />\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a\n * sub-menu.\n *\n * Its children are expected to be exactly two elements, in the following order:\n *\n * 1. A `SubMenuItem` element: the menu item that triggers the sub-menu to open.\n * 2. A `SubMenuList` element: the list of menu items that will be shown when the sub-menu is open.\n *\n * ## Usage\n *\n * ```jsx\n * <Menu>\n *   <MenuButton>Menu</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Item 1\" />\n *     <MenuItem label=\"Item 2\" />\n *     <SubMenu>\n *       <SubMenuItem label=\"Submenu\" />\n *       <SubMenuList>\n *         <MenuItem label=\"Submenu Item 1\" />\n *         <MenuItem label=\"Submenu Item 2\" />\n *       </SubMenuList>\n *     </SubMenu>\n *   </MenuList>\n * </Menu>\n * ```\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton\n    // and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </Ariakit.MenuItem>\n            <div className={styles.subMenuContainer}>{list}</div>\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: NonNullable<React.ReactNode>\n\n    /**\n     * An optional info element to be shown to the right of the label.\n     *\n     * This is useful and often used to:\n     * - Provide a link to any documentation related to the menu items in the group\n     * - Show a keyboard shortcut that triggers the menu items in the group\n     *\n     * It is strongly recommended that this should be a icon-only element. It is also strongly\n     * recommended that, when using it to provide a link, you use the very `IconMenuItem` component\n     * to make the link be yet another menu item accessible in the menu via keyboard navigation.\n     * Here's an example of how to do that:\n     *\n     * ```jsx\n     * <MenuGroup\n     *   label=\"A group of related options\"\n     *   info={\n     *     <IconMenuItem\n     *       label=\"Help about this group of options\"\n     *       icon=\"ℹ️\"\n     *       as=\"a\"\n     *       href=\"http://help.example.com\"\n     *       target=\"_blank\"\n     *       rel=\"noreferrer noopener\"\n     *     />\n     *   }\n     * >\n     *   <MenuItem label=\"First option\" icon={<FirstIcon />} />\n     *   <MenuItem label=\"Second option\" icon={<SecondIcon />} />\n     * </MenuGroup>\n     * ```\n     */\n    info?: React.ReactNode\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, info, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup\n            aria-labelledby={`menugroup-label-${id}`}\n            {...props}\n            id={id}\n            ref={ref}\n            state={state}\n            className={exceptionallySetClassName}\n        >\n            <Box display=\"flex\" alignItems=\"center\" gap=\"small\" className={styles.menuGroupLabel}>\n                <Text id={`menugroup-label-${id}`} size=\"copy\" weight=\"semibold\">\n                    {label}\n                </Text>\n                {info ? (\n                    <Box\n                        flexShrink={0}\n                        display=\"flex\"\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        className={styles.menuGroupInfo}\n                    >\n                        {info}\n                    </Box>\n                ) : null}\n            </Box>\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\n//\n// IconMenuItem & IconsMenuGroup\n//\n\ntype IconMenuItemProps = Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onSelect' | 'onClick'> & {\n    /**\n     * A label for assistive technologies to describe the menu item.\n     *\n     * When not provided, the `label` is used. But this is useful when you want the tooltip label\n     * to be different from the label for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * The menu item's label, which is not shown visually on the menu item, but it is used to\n     * show a tooltip for the menu item when hovered or focused.\n     *\n     * It is also used as the semantic label for assistive technologies, unless you provide an\n     * `aria-label` as well.\n     */\n    label: string\n\n    /**\n     * A description for assistive technologies to describe the menu item.\n     */\n    description?: React.ReactNode\n\n    /**\n     * The icon to show on the menu item.\n     */\n    icon: NonNullable<React.ReactNode>\n}\n\n/**\n * A menu item that visually only shows as an icon. It must be used inside an `IconsMenuGroup`.\n */\nconst IconMenuItem = polymorphicComponent<'button', IconMenuItemProps>(function IconMenuItem(\n    {\n        value,\n        label,\n        description,\n        icon,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    const handleClick = useMenuItemClickHandler({ value, onSelect, onClick, hideOnSelect })\n\n    return (\n        <Tooltip content={label}>\n            <Ariakit.MenuItem\n                aria-label={label}\n                aria-describedby={`${id}-description`}\n                {...props}\n                as={as}\n                state={state}\n                ref={ref}\n                onClick={handleClick}\n                className={classNames(styles.iconMenuItem, exceptionallySetClassName)}\n                hideOnClick={false}\n            >\n                {icon}\n            </Ariakit.MenuItem>\n        </Tooltip>\n    )\n})\n\n/**\n * Semantically equivalent to `MenuGroup`, but meant to group `IconMenuItem`s only.\n */\nconst IconsMenuGroup = polymorphicComponent<'div', MenuGroupProps>(function IconsMenuGroup(\n    { children, ...props },\n    ref,\n) {\n    return (\n        <MenuGroup {...props} ref={ref}>\n            <div className={styles.iconsMenuGroup}>{children}</div>\n        </MenuGroup>\n    )\n})\n\nexport {\n    ContextMenuTrigger,\n    IconMenuItem,\n    IconsMenuGroup,\n    Menu,\n    MenuButton,\n    MenuGroup,\n    MenuItem,\n    MenuList,\n    SubMenu,\n    SubMenuItem,\n    SubMenuList,\n}\n\nexport type {\n    IconMenuItemProps,\n    MenuButtonProps,\n    MenuGroupProps,\n    MenuHandle,\n    MenuItemProps,\n    MenuListProps,\n    MenuProps,\n    SubMenuItemProps,\n    SubMenuProps,\n}\n"],"names":["MenuContext","React","Menu","ref","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","show","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","exceptionallySetClassName","className","MenuItemContent","label","description","icon","shortcut","id","Box","display","gap","alignItems","width","styles","menuItemIcon","flexDirection","paddingY","overflow","flexGrow","Text","weight","size","lineClamp","menuItemLabel","tone","menuItemDescription","ArrowRightIcon","height","d","fill","fillRule","SubMenuItem","useId","classNames","menuItem","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","onContextMenu","MenuList","modal","Portal","preserveTabOrder","menuList","SubMenuList","subMenuList","useMenuItemClickHandler","hideOnSelect","onClick","onSelect","hide","handleClick","onSelectResult","defaultPrevented","shouldClose","MenuItem","destructive","hideOnClick","legacyLayout","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","subMenuContainer","MenuGroup","info","menuGroupLabel","flexShrink","justifyContent","menuGroupInfo","IconMenuItem","Tooltip","content","iconMenuItem","IconsMenuGroup","iconsMenuGroup"],"mappings":"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"}
+{"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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"}

package/es/modal/modal.js

@@ -5,12 +5,11 @@ import { Box } from '../box/box.js';
 import { Columns, Column } from '../columns/columns.js';
 import { Divider } from '../divider/divider.js';
 import { Inline } from '../inline/inline.js';
+import { useDialogStore, Portal, Dialog } from '@ariakit/react';
 import { Button } from '../button/button.js';
 import { CloseIcon } from '../icons/close-icon.js';
-import { Portal } from 'ariakit/portal';
 import FocusLock from 'react-focus-lock';
 import { hideOthers } from 'aria-hidden';
-import { useDialogState, Dialog } from 'ariakit/dialog';
 import styles from './modal.module.css.js';
 
 const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement"],
@@ -58,7 +57,7 @@ function Modal(_ref) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
-  const state = useDialogState({
+  const store = useDialogStore({
     open: isOpen,
     setOpen
   });
@@ -114,7 +113,7 @@ function Modal(_ref) {
   }, /*#__PURE__*/createElement(Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
     as: Box,
-    state: state,
+    store: store,
     hideOnEscape: hideOnEscape,
     preventBodyScroll: true,
     borderRadius: "full",

package/es/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogState } from 'ariakit/dialog'\nimport { Portal, PortalOptions } from 'ariakit/portal'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent\n                 * the modal from closing when the click starts inside the modal\n                 * and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        state={state}\n                        hideOnEscape={hideOnEscape}\n                        preventBodyScroll\n                        borderRadius=\"full\"\n                        background=\"default\"\n                        display=\"flex\"\n                        flexDirection=\"column\"\n                        overflow=\"hidden\"\n                        height={height === 'expand' ? 'full' : undefined}\n                        flexGrow={height === 'expand' ? 1 : 0}\n                        className={[exceptionallySetClassName, styles.container]}\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","props","setOpen","visible","state","useDialogState","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","Portal","Box","className","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","as","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent\n                 * the modal from closing when the click starts inside the modal\n                 * and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        store={store}\n                        hideOnEscape={hideOnEscape}\n                        preventBodyScroll\n                        borderRadius=\"full\"\n                        background=\"default\"\n                        display=\"flex\"\n                        flexDirection=\"column\"\n                        overflow=\"hidden\"\n                        height={height === 'expand' ? 'full' : undefined}\n                        flexGrow={height === 'expand' ? 1 : 0}\n                        className={[exceptionallySetClassName, styles.container]}\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","props","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","Portal","Box","className","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","as","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}

package/es/tabs/tabs.js

@@ -1,11 +1,10 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useEffect, useMemo, createElement, useContext, useState, createContext } from 'react';
+import { useMemo, createElement, useContext, useState, useEffect, createContext } from 'react';
 import classNames from 'classnames';
 import { polymorphicComponent } from '../utils/polymorphism.js';
 import { Box } from '../box/box.js';
 import { Inline } from '../inline/inline.js';
-import { useTabState, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from 'ariakit/tab';
-import { usePrevious } from '../hooks/use-previous/use-previous.js';
+import { useTabStore, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from '@ariakit/react';
 import styles from './tabs.module.css.js';
 
 const _excluded = ["as", "children", "id", "exceptionallySetClassName"],
@@ -23,26 +22,21 @@ function Tabs({
   variant = 'neutral',
   onSelectedIdChange
 }) {
-  const tabState = useTabState({
+  const tabStore = useTabStore({
+    defaultSelectedId,
     selectedId,
     setSelectedId: onSelectedIdChange
   });
-  const previousDefaultSelectedId = usePrevious(defaultSelectedId);
-  const {
-    selectedId: actualSelectedId,
-    select
-  } = tabState;
-  useEffect(function selectDefaultTab() {
-    if (!selectedId && defaultSelectedId !== previousDefaultSelectedId && defaultSelectedId !== actualSelectedId && defaultSelectedId !== undefined) {
-      select(defaultSelectedId);
-    }
-  }, [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId]);
-  const memoizedTabState = useMemo(function memoizeTabState() {
+  const actualSelectedId = tabStore.useState('selectedId');
+  const memoizedTabState = useMemo(() => {
+    var _ref;
+
     return {
-      tabState,
-      variant
+      tabStore,
+      variant,
+      selectedId: (_ref = selectedId != null ? selectedId : actualSelectedId) != null ? _ref : null
     };
-  }, [variant, tabState]);
+  }, [variant, tabStore, selectedId, actualSelectedId]);
   return /*#__PURE__*/createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -52,30 +46,27 @@ function Tabs({
  */
 
 
-const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
+const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref2, ref) {
   let {
     as,
     children,
     id,
     exceptionallySetClassName
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   const tabContextValue = useContext(TabsContext);
-
-  if (!tabContextValue) {
-    return null;
-  }
-
+  if (!tabContextValue) return null;
   const {
     variant,
-    tabState
+    tabStore
   } = tabContextValue;
+  const className = classNames(exceptionallySetClassName, styles.tab, styles["tab-" + variant]);
   return /*#__PURE__*/createElement(Tab$1, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: classNames(exceptionallySetClassName, styles.tab, styles["tab-" + variant]),
+    className: className,
     id: id,
-    state: tabState,
+    store: tabStore,
     ref: ref
   }), children);
 });
@@ -83,12 +74,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
  * A component used to group `<Tab>` elements together.
  */
 
-function TabList(_ref2) {
+function TabList(_ref3) {
   let {
     children,
     space
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2);
 
   const tabContextValue = useContext(TabsContext);
 
@@ -97,7 +88,7 @@ function TabList(_ref2) {
   }
 
   const {
-    tabState,
+    tabStore,
     variant
   } = tabContextValue;
   return (
@@ -105,7 +96,7 @@ function TabList(_ref2) {
     // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
     // which will render the track with the wrong height
     createElement(Box, null, /*#__PURE__*/createElement(TabList$1, _objectSpread2({
-      state: tabState,
+      store: tabStore,
       as: Box,
       position: "relative",
       width: "maxContent"
@@ -117,22 +108,24 @@ function TabList(_ref2) {
   );
 }
 /**
- * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
+ * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
+ * corresponding `<Tab>` component.
  */
 
 
-const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
+const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
   let {
     children,
     id,
     as,
     render = 'always'
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded3);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded3);
 
   const tabContextValue = useContext(TabsContext);
   const [tabRendered, setTabRendered] = useState(false);
-  const tabIsActive = (tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId) === id;
+  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
+  const tabIsActive = selectedId === id;
   useEffect(function trackTabRenderedState() {
     if (!tabRendered && tabIsActive) {
       setTabRendered(true);
@@ -144,28 +137,28 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref)
   }
 
   const {
-    tabState
+    tabStore
   } = tabContextValue;
   const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
-  return shouldRender ? /*#__PURE__*/createElement(TabPanel$1, _objectSpread2(_objectSpread2({
-    tabId: id
-  }, props), {}, {
-    state: tabState,
+  return shouldRender ? /*#__PURE__*/createElement(TabPanel$1, _objectSpread2(_objectSpread2({}, props), {}, {
+    tabId: id,
+    store: tabStore,
     as: as,
     ref: ref
   }), children) : null;
 });
 /**
- * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
- * component. Can be placed freely within the main `<Tabs>` component.
+ * Allows content to be rendered based on the current tab being selected while outside of the
+ * TabPanel component. Can be placed freely within the main `<Tabs>` component.
  */
 
 function TabAwareSlot({
   children
 }) {
   const tabContextValue = useContext(TabsContext);
+  const selectedId = tabContextValue == null ? void 0 : tabContextValue.tabStore.useState('selectedId');
   return tabContextValue ? children({
-    selectedId: tabContextValue == null ? void 0 : tabContextValue.tabState.selectedId
+    selectedId
   }) : null;
 }
 

package/es/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../hooks/use-previous'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport type { Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n    { children, id, as, render = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabStore,\n} from '@ariakit/react'\nimport { Inline } from '../inline'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport type { Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\n    )\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab {...props} as={as} className={className} id={id} store={tabStore} ref={ref}>\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                store={tabStore}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n    { children, id, as, render = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will\n     * be called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabStore","useTabStore","setSelectedId","actualSelectedId","useState","memoizedTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","className","classNames","styles","tab","BaseTab","store","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

package/es/toast/use-toasts.js

@@ -2,10 +2,10 @@ import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWith
 import React__default from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
+import { Portal } from '@ariakit/react';
 import { generateElementId } from '../utils/common-helpers.js';
 import styles from './toast.module.css.js';
 import { isActionObject, StaticToast } from './static-toast.js';
-import { Portal } from 'ariakit/portal';
 import { useToastsAnimation } from './toast-animation.js';
 
 const _excluded = ["toastId"];