@doist/reactist 24.2.0-beta → 25.0.0-beta.1

package/lib/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n} from '@ariakit/react'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    menuStore: MenuStore\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<MenuStoreProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { setAnchorRect, menuStore } = React.useContext(MenuContext)\n\n    const handleContextMenu = React.useCallback(\n        function handleContextMenu(event: React.MouseEvent) {\n            event.preventDefault()\n            setAnchorRect({ x: event.clientX, y: event.clientY })\n            menuStore.show()\n        },\n        [setAnchorRect, menuStore],\n    )\n\n    const isOpen = menuStore.useState('open')\n    React.useEffect(() => {\n        if (!isOpen) setAnchorRect(null)\n    }, [isOpen, setAnchorRect])\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<AriakitMenuProps, 'store' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    const { hide } = menuStore\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect?.(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <AriakitMenuItem\n            {...props}\n            as={as}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, menuStore } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = menuStore\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n            parentMenuItemSelect?.(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem as=\"div\" store={menuStore} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </AriakitMenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","setAnchorRect","getAnchorRect","menuStore","useMenuStore","focusLoop","value","handleItemSelect","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","isOpen","useState","onContextMenu","MenuList","modal","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\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    MenuItemProps as AriakitMenuItemProps,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n    Role,\n    RoleProps,\n} from '@ariakit/react'\n\nimport './menu.less'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype MenuContextState = {\n    menuStore: MenuStore | null\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    menuStore: null,\n    handleItemSelect: () => undefined,\n    getAnchorRect: null,\n    setAnchorRect: () => undefined,\n})\n\n//\n// Menu\n//\n\ninterface MenuProps extends Omit<MenuStoreProps, 'visible'> {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ninterface MenuButtonProps\n    extends Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>,\n        ObfuscatedClassName {}\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuButton must be wrapped in <Menu/>')\n    }\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//\n\ninterface ContextMenuTriggerProps\n    extends ObfuscatedClassName,\n        React.HTMLAttributes<HTMLDivElement>,\n        Pick<RoleProps, 'render'> {}\n\nconst ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(\n    function ContextMenuTrigger({ render, ...props }, ref) {\n        const { setAnchorRect, menuStore } = React.useContext(MenuContext)\n        if (!menuStore) {\n            throw new Error('ContextMenuTrigger must be wrapped in <Menu/>')\n        }\n\n        const handleContextMenu = React.useCallback(\n            function handleContextMenu(event: React.MouseEvent) {\n                event.preventDefault()\n                setAnchorRect({ x: event.clientX, y: event.clientY })\n                menuStore.show()\n            },\n            [setAnchorRect, menuStore],\n        )\n\n        const isOpen = menuStore.useState('open')\n        React.useEffect(() => {\n            if (!isOpen) setAnchorRect(null)\n        }, [isOpen, setAnchorRect])\n\n        return <Role.div {...props} onContextMenu={handleContextMenu} ref={ref} render={render} />\n    },\n)\n\n//\n// MenuList\n//\n\ninterface MenuListProps\n    extends Omit<AriakitMenuProps, 'store' | 'className'>,\n        ObfuscatedClassName {}\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuList must be wrapped in <Menu/>')\n    }\n\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\ninterface MenuItemProps extends AriakitMenuItemProps, ObfuscatedClassName {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * 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 = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuItem must be wrapped in <Menu/>')\n    }\n\n    const { hide } = menuStore\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent) {\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            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    if (!menuStore) {\n        throw new Error('SubMenu must be wrapped in <Menu/>')\n    }\n\n    const { hide: parentMenuHide } = menuStore\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n            parentMenuItemSelect?.(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n    const buttonElement = button as React.ReactElement<MenuButtonProps>\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem store={menuStore} ref={ref} hideOnClick={false} render={buttonElement}>\n                {buttonElement.props.children}\n            </AriakitMenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ninterface MenuGroupProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>,\n        ObfuscatedClassName {\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 = React.forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuGroup must be wrapped in <Menu/>')\n    }\n\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","menuStore","handleItemSelect","getAnchorRect","setAnchorRect","Menu","children","onItemSelect","props","anchorRect","useMenuStore","focusLoop","value","Provider","MenuButton","ref","exceptionallySetClassName","Error","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","render","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","isOpen","useState","Role","div","onContextMenu","MenuList","modal","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"whBA6BMA,EAAcC,gBAAsC,CACtDC,UAAW,KACXC,iBAAkB,OAClBC,cAAe,KACfC,cAAe,SA4BnB,SAASC,SAAKC,SAAEA,EAAFC,aAAYA,KAAiBC,iCACvC,MAAOC,EAAYL,GAAiBJ,WAAgD,MAC9EG,EAAgBH,UAAc,IAAOS,EAAa,IAAMA,EAAa,KAAO,CAACA,IAC7ER,EAAYS,gCAAeC,WAAW,GAASH,IAE/CI,EAA0BZ,UAC5B,MAASC,UAAAA,EAAWC,iBAAkBK,EAAcJ,cAAAA,EAAeC,cAAAA,IACnE,CAACH,EAAWM,EAAcJ,EAAeC,IAG7C,OAAOJ,gBAACD,EAAYc,UAASD,MAAOA,GAAQN,SAc1CQ,EAAad,cAAqD,WAEpEe,OADAC,0BAAEA,KAA8BR,iCAGhC,MAAMP,UAAEA,GAAcD,aAAiBD,GACvC,IAAKE,EACD,MAAM,IAAIgB,MAAM,yCAEpB,OACIjB,gBAACkB,gDACOV,OACJW,MAAOlB,EACPc,IAAKA,EACLK,UAAWC,EAAW,sBAAuBL,SAcnDM,EAAqBtB,cACvB,WAAkDe,OAAtBQ,OAAEA,KAAWf,iCACrC,MAAMJ,cAAEA,EAAFH,UAAiBA,GAAcD,aAAiBD,GACtD,IAAKE,EACD,MAAM,IAAIgB,MAAM,iDAGpB,MAAMO,EAAoBxB,eACtB,SAA2ByB,GACvBA,EAAMC,iBACNtB,EAAc,CAAEuB,EAAGF,EAAMG,QAASC,EAAGJ,EAAMK,UAC3C7B,EAAU8B,SAEd,CAAC3B,EAAeH,IAGd+B,EAAS/B,EAAUgC,SAAS,QAKlC,OAJAjC,YAAgB,KACPgC,GAAQ5B,EAAc,OAC5B,CAAC4B,EAAQ5B,IAELJ,gBAACkC,OAAKC,uCAAQ3B,OAAO4B,cAAeZ,EAAmBT,IAAKA,EAAKQ,OAAQA,QAelFc,EAAWrC,cAAgD,WAE7De,OADAC,0BAAEA,EAAFsB,MAA6BA,GAAQ,KAAS9B,iCAG9C,MAAMP,UAAEA,EAAFE,cAAaA,GAAkBH,aAAiBD,GACtD,IAAKE,EACD,MAAM,IAAIgB,MAAM,uCAKpB,OAFehB,EAAUgC,SAAS,QAG9BjC,gBAACuC,UAAOC,qBACJxC,gBAACyC,0CACOjC,OACJW,MAAOlB,EACPyC,OAAQ,EACRC,MAAO,EACP5B,IAAKA,EACLK,UAAWC,EAAW,oBAAqBL,GAC3Cb,oBAAeA,EAAAA,OAAiByC,EAChCN,MAAOA,MAGf,QA8DFO,EAAW7C,cAAgD,WAU7De,OATAH,MACIA,EADJN,SAEIA,EAFJwC,SAGIA,EAHJC,aAIIA,GAAe,EAJnBC,QAKIA,EALJhC,0BAMIA,KACGR,iCAIP,MAAMN,iBAAEA,EAAFD,UAAoBA,GAAcD,aAAiBD,GACzD,IAAKE,EACD,MAAM,IAAIgB,MAAM,uCAGpB,MAAMgC,KAAEA,GAAShD,EACXiD,EAAclD,eAChB,SAAqByB,SACjBuB,GAAAA,EAAUvB,GACV,MAEM0B,GAAiC,KADnCL,IAAarB,EAAM2B,iBAAmBN,SAAaF,IACPG,QAChD7C,GAAAA,EAAmBU,GACfuC,GAAaF,MAErB,CAACH,EAAUE,EAAS9C,EAAkB6C,EAAcE,EAAMrC,IAG9D,OACIZ,gBAACqD,8CACO7C,OACJW,MAAOlB,EACPc,IAAKA,EACLiC,QAASE,EACT9B,UAAWJ,EACXsC,aAAa,IAEZhD,MAgCPiD,EAAUvD,cAA+C,UAC3DM,SAAEA,EAAFC,aAAYA,GACZQ,GAEA,MAAQb,iBAAkBsD,EAApBvD,UAA0CA,GAAcD,aAAiBD,GAC/E,IAAKE,EACD,MAAM,IAAIgB,MAAM,sCAGpB,MAAQgC,KAAMQ,GAAmBxD,EAC3ByD,EAAsB1D,eACxB,SAA6BY,SACzBL,GAAAA,EAAeK,SACf4C,GAAAA,EAAuB5C,GACvB6C,MAEJ,CAACA,EAAgBD,EAAsBjD,KAGpCoD,EAAQC,GAAQ5D,WAAe6D,QAAQvD,GAG9C,OACIN,gBAACK,GAAKE,aAAcmD,GAChB1D,gBAACqD,YAAgBlC,MAAOlB,EAAWc,IAAKA,EAAKuC,aAAa,EAAO/B,OAJnDoC,GAAAA,EAKKnD,MAAMF,UAExBsD,MAwBPE,EAAY9D,cAAiD,WAE/De,OADAgD,MAAEA,EAAFzD,SAASA,EAATU,0BAAmBA,KAA8BR,iCAGjD,MAAMP,UAAEA,GAAcD,aAAiBD,GACvC,IAAKE,EACD,MAAM,IAAIgB,MAAM,wCAGpB,OACIjB,gBAACgE,+CACOxD,OACJO,IAAKA,EACLI,MAAOlB,EACPmB,UAAWJ,IAEV+C,EACG/D,uBAAKiE,KAAK,eAAe7C,UAAU,6BAC9B2C,GAEL,KACHzD"}

package/lib/modal/modal-stories-components.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ModalComponents from './modal';
 import type { ModalProps, ModalHeaderProps, ModalFooterProps } from './modal';
-declare function Link({ children, ...props }: JSX.IntrinsicElements['a']): JSX.Element;
+declare function Link({ children, ...props }: JSX.IntrinsicElements['a']): React.JSX.Element;
 declare type ModalStoryState = Pick<ModalProps, 'width' | 'height'> & {
     button: 'true' | 'false' | 'custom';
     hideOn: 'escapeAndOverlay' | 'escape' | 'overlay';
@@ -10,29 +10,29 @@ declare type ModalStoryState = Pick<ModalProps, 'width' | 'height'> & {
 declare function ModalStoryStateProvider({ initialState, children, }: {
     initialState?: Partial<ModalStoryState>;
     children: React.ReactNode;
-}): JSX.Element;
+}): React.JSX.Element;
 declare function ScrollableContent({ label, count }: {
     label?: string;
     count?: number;
-}): JSX.Element;
+}): React.JSX.Element;
 declare function ModalOptionsForm({ title }: {
     title?: React.ReactNode;
-}): JSX.Element;
+}): React.JSX.Element;
 declare function ModalButton({ variant, size, children, action, }: {
     variant: 'primary' | 'secondary' | 'danger';
     action?: 'open' | 'close';
     size?: 'small';
     children: NonNullable<React.ReactNode>;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace ModalButton {
     var displayName: string;
 }
 declare type WithOptionals<Props, Keys extends keyof Props> = Omit<Props, Keys> & Partial<Pick<Props, Keys>>;
-declare function Modal(props: WithOptionals<ModalProps, 'isOpen' | 'onDismiss' | 'width' | 'height'>): JSX.Element;
-declare function ModalHeader(props: WithOptionals<ModalHeaderProps, 'withDivider' | 'button'>): JSX.Element;
+declare function Modal(props: WithOptionals<ModalProps, 'isOpen' | 'onDismiss' | 'width' | 'height'>): React.JSX.Element;
+declare function ModalHeader(props: WithOptionals<ModalHeaderProps, 'withDivider' | 'button'>): React.JSX.Element;
 declare const ModalBody: typeof ModalComponents.ModalBody;
-declare function ModalFooter(props: WithOptionals<ModalFooterProps, 'withDivider'>): JSX.Element;
-declare function ModalActions(props: WithOptionals<ModalFooterProps, 'withDivider'>): JSX.Element;
+declare function ModalFooter(props: WithOptionals<ModalFooterProps, 'withDivider'>): React.JSX.Element;
+declare function ModalActions(props: WithOptionals<ModalFooterProps, 'withDivider'>): React.JSX.Element;
 /**
  * Used by stories in storybooks to programmatically open the modal on each story.
  *

package/lib/modal/modal.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { DialogOptions, PortalOptions } from '@ariakit/react';
-import { ButtonProps } from '../button';
+import { IconButtonProps } from '../button';
+import type { ObfuscatedClassName } from '../utils/common-types';
 declare type ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full';
 declare type ModalHeightMode = 'expand' | 'fitContent';
 declare type DivProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className' | 'children' | `aria-label` | `aria-labelledby`>;
-export declare type ModalProps = DivProps & {
+export interface ModalProps extends DivProps, ObfuscatedClassName {
     /**
      * The content of the modal.
      */
@@ -50,17 +51,17 @@ export declare type ModalProps = DivProps & {
      * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.
      */
     hideOnInteractOutside?: DialogOptions['hideOnInteractOutside'];
-    /**
-     * An escape hatch in case you need to provide a custom class name to the container element.
-     */
-    exceptionallySetClassName?: string;
     /**
      * An escape hatch in case you need to provide a custom class name to the overlay element.
      */
     exceptionallySetOverlayClassName?: string;
-    /** Defines a string value that labels the current modal for assistive technologies. */
+    /**
+     * Defines a string value that labels the current modal for assistive technologies.
+     */
     'aria-label'?: string;
-    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */
+    /**
+     * Identifies the element (or elements) that labels the current modal for assistive technologies.
+     */
     'aria-labelledby'?: string;
     /**
      * An HTML element or a memoized callback function that returns an HTML element to be used as
@@ -84,7 +85,7 @@ export declare type ModalProps = DivProps & {
      * <Portal portalElement={getPortalElement} />;
      */
     portalElement?: PortalOptions['portalElement'];
-};
+}
 /**
  * Renders a modal that sits on top of the rest of the content in the entire page.
  *
@@ -94,21 +95,21 @@ export declare type ModalProps = DivProps & {
  * @see ModalFooter
  * @see ModalBody
  */
-export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, exceptionallySetOverlayClassName, autoFocus, hideOnEscape, hideOnInteractOutside, children, portalElement, onKeyDown, ...props }: ModalProps): JSX.Element | null;
-export declare type ModalCloseButtonProps = Omit<ButtonProps, 'type' | 'children' | 'variant' | 'icon' | 'startIcon' | 'endIcon' | 'disabled' | 'loading' | 'tabIndex' | 'width' | 'align'> & {
+export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, exceptionallySetOverlayClassName, autoFocus, hideOnEscape, hideOnInteractOutside, children, portalElement, onKeyDown, className, ...props }: ModalProps): React.JSX.Element | null;
+export interface ModalCloseButtonProps extends Omit<IconButtonProps, 'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'> {
     /**
      * The descriptive label of the button.
      */
     'aria-label': string;
-};
+}
 /**
  * The close button rendered by ModalHeader. Provided independently so that consumers can customize
  * the button's label.
  *
  * @see ModalHeader
  */
-export declare function ModalCloseButton(props: ModalCloseButtonProps): JSX.Element;
-export declare type ModalHeaderProps = DivProps & {
+export declare function ModalCloseButton(props: ModalCloseButtonProps): React.JSX.Element;
+export interface ModalHeaderProps extends DivProps, ObfuscatedClassName {
     /**
      * The content of the header.
      */
@@ -123,11 +124,7 @@ export declare type ModalHeaderProps = DivProps & {
      * @default false
      */
     withDivider?: boolean;
-    /**
-     * A escape hatch in case you need to provide a custom class name to the container element.
-     */
-    exceptionallySetClassName?: string;
-};
+}
 /**
  * Renders a standard modal header area with an optional close button.
  *
@@ -135,17 +132,13 @@ export declare type ModalHeaderProps = DivProps & {
  * @see ModalFooter
  * @see ModalBody
  */
-export declare function ModalHeader({ children, button, withDivider, exceptionallySetClassName, ...props }: ModalHeaderProps): JSX.Element;
-export declare type ModalBodyProps = DivProps & {
+export declare function ModalHeader({ children, button, withDivider, exceptionallySetClassName, ...props }: ModalHeaderProps): React.JSX.Element;
+export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
     /**
      * The content of the modal body.
      */
     children: React.ReactNode;
-    /**
-     * A escape hatch in case you need to provide a custom class name to the container element.
-     */
-    exceptionallySetClassName?: string;
-};
+}
 /**
  * Renders the body of a modal.
  *
@@ -158,8 +151,8 @@ export declare type ModalBodyProps = DivProps & {
  * @see ModalHeader
  * @see ModalFooter
  */
-export declare function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps): JSX.Element;
-export declare type ModalFooterProps = DivProps & {
+export declare function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps): React.JSX.Element;
+export interface ModalFooterProps extends DivProps, ObfuscatedClassName {
     /**
      * The contant of the modal footer.
      */
@@ -169,11 +162,7 @@ export declare type ModalFooterProps = DivProps & {
      * @default false
      */
     withDivider?: boolean;
-    /**
-     * A escape hatch in case you need to provide a custom class name to the container element.
-     */
-    exceptionallySetClassName?: string;
-};
+}
 /**
  * Renders a standard modal footer area.
  *
@@ -181,11 +170,11 @@ export declare type ModalFooterProps = DivProps & {
  * @see ModalHeader
  * @see ModalBody
  */
-export declare function ModalFooter({ exceptionallySetClassName, withDivider, ...props }: ModalFooterProps): JSX.Element;
+export declare function ModalFooter({ exceptionallySetClassName, withDivider, ...props }: ModalFooterProps): React.JSX.Element;
 export declare type ModalActionsProps = ModalFooterProps;
 /**
  * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
  * @see ModalFooter
  */
-export declare function ModalActions({ children, ...props }: ModalActionsProps): JSX.Element;
+export declare function ModalActions({ children, ...props }: ModalActionsProps): React.JSX.Element;
 export {};

package/lib/modal/modal.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),n=(e(a),e(require("classnames"))),l=require("../box/box.js"),o=require("../columns/columns.js"),r=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("@ariakit/react"),u=require("../button/button.js"),c=require("../icons/close-icon.js"),d=e(require("react-focus-lock")),m=require("aria-hidden"),p=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown"],f=["children","button","withDivider","exceptionallySetClassName"],x=["exceptionallySetClassName","children"],b=["exceptionallySetClassName","withDivider"],g=["children"],E=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:n}=a.useContext(E),[l,o]=a.useState(!1),[r,i]=a.useState(!1);return a.useEffect((function(){r?o(!0):i(!0)}),[r]),a.createElement(u.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:n,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function y(e){let{exceptionallySetClassName:n,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,b);return a.createElement(a.Fragment,null,o?a.createElement(r.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:n,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:r,height:i="fitContent",width:u="medium",exceptionallySetClassName:c,exceptionallySetOverlayClassName:f,autoFocus:x=!0,hideOnEscape:b=!0,hideOnInteractOutside:g=!0,children:C,portalElement:y,onKeyDown:S}=e,j=t.objectWithoutProperties(e,h);const w=a.useCallback(e=>{e||null==r||r()},[r]),D=s.useDialogStore({open:o,setOpen:w}),N=a.useMemo(()=>({onDismiss:r,height:i}),[r,i]),O=a.useRef(null),q=a.useRef(null),P=a.useRef(null),B=a.useCallback(e=>{var t,a;null!=(t=q.current)&&t.contains(e.target)||null==(a=P.current)||!a.contains(e.target)||(e.stopPropagation(),null==r||r())},[r]);a.useLayoutEffect((function(){if(o&&O.current)return m.hideOthers(O.current)}),[o]);const F=a.useCallback((function(e){b&&null!=r&&"Escape"===e.key&&!e.defaultPrevented&&(e.stopPropagation(),r()),null==S||S(e)}),[r,b,S]);return o?a.createElement(s.Portal,{portalRef:O,portalElement:y},a.createElement(l.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:n(p.default.overlay,p.default[i],p.default[u],f),onPointerDown:g?B:void 0,ref:P},a.createElement(d,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(s.Dialog,t.objectSpread2(t.objectSpread2({},j),{},{ref:q,as:l.Box,store:D,preventBodyScroll:!0,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,p.default.container],modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1,hideOnEscape:!1,onKeyDown:F}),a.createElement(E.Provider,{value:N},C))))):null},exports.ModalActions=function(e){let{children:n}=e,l=t.objectWithoutProperties(e,g);return a.createElement(y,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},n))},exports.ModalBody=function(e){let{exceptionallySetClassName:n,children:o}=e,r=t.objectWithoutProperties(e,x);const{height:i}=a.useContext(E);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},r),{},{className:n,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=C,exports.ModalFooter=y,exports.ModalHeader=function(e){let{children:n,button:i=!0,withDivider:s=!1,exceptionallySetClassName:u}=e,c=t.objectWithoutProperties(e,f);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},c),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:u}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},n),!1===i||null===i?a.createElement("div",{className:p.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:p.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(r.Divider,null):null)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),n=(e(a),e(require("classnames"))),l=require("../box/box.js"),o=require("../columns/columns.js"),r=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("@ariakit/react"),c=require("../button/button.js"),u=require("../icons/close-icon.js"),d=e(require("react-focus-lock")),m=require("aria-hidden"),p=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className"],f=["children","button","withDivider","exceptionallySetClassName"],x=["exceptionallySetClassName","children"],b=["exceptionallySetClassName","withDivider"],g=["children"],E=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:n}=a.useContext(E),[l,o]=a.useState(!1),[r,i]=a.useState(!1);return a.useEffect((function(){r?o(!0):i(!0)}),[r]),a.createElement(c.IconButton,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:n,icon:a.createElement(u.CloseIcon,null),tabIndex:l?0:-1}))}function y(e){let{exceptionallySetClassName:n,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,b);return a.createElement(a.Fragment,null,o?a.createElement(r.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:n,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:r,height:i="fitContent",width:c="medium",exceptionallySetClassName:u,exceptionallySetOverlayClassName:f,autoFocus:x=!0,hideOnEscape:b=!0,hideOnInteractOutside:g=!0,children:C,portalElement:y,onKeyDown:S}=e,j=t.objectWithoutProperties(e,h);const w=a.useCallback(e=>{e||null==r||r()},[r]),D=s.useDialogStore({open:o,setOpen:w}),N=a.useMemo(()=>({onDismiss:r,height:i}),[r,i]),O=a.useRef(null),q=a.useRef(null),P=a.useRef(null),B=a.useCallback(e=>{var t,a;null!=(t=q.current)&&t.contains(e.target)||null==(a=P.current)||!a.contains(e.target)||(e.stopPropagation(),null==r||r())},[r]);a.useLayoutEffect((function(){if(o&&O.current)return m.hideOthers(O.current)}),[o]);const F=a.useCallback((function(e){b&&null!=r&&"Escape"===e.key&&!e.defaultPrevented&&(e.stopPropagation(),r()),null==S||S(e)}),[r,b,S]);return o?a.createElement(s.Portal,{portalRef:O,portalElement:y},a.createElement(l.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:n(p.default.overlay,p.default[i],p.default[c],f),onPointerDown:g?B:void 0,ref:P},a.createElement(d,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(s.Dialog,t.objectSpread2(t.objectSpread2({},j),{},{ref:q,render:a.createElement(l.Box,{borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0}),className:n(u,p.default.container),store:D,preventBodyScroll:!0,modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1,hideOnEscape:!1,onKeyDown:F}),a.createElement(E.Provider,{value:N},C))))):null},exports.ModalActions=function(e){let{children:n}=e,l=t.objectWithoutProperties(e,g);return a.createElement(y,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},n))},exports.ModalBody=function(e){let{exceptionallySetClassName:n,children:o}=e,r=t.objectWithoutProperties(e,x);const{height:i}=a.useContext(E);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},r),{},{className:n,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=C,exports.ModalFooter=y,exports.ModalHeader=function(e){let{children:n,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,f);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},n),!1===i||null===i?a.createElement("div",{className:p.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:p.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(r.Divider,null):null)};
 //# sourceMappingURL=modal.js.map

package/lib/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, 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    onKeyDown,\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    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\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                        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                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\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","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","handleKeyDown","key","defaultPrevented","Portal","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"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 { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\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 interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\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    /**\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    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\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    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\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    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\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 the modal from\n                 * closing when the click starts inside the modal 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                        render={\n                            <Box\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                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\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                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\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 interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\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        <IconButton\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 interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\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    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\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 interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\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 interface ModalFooterProps extends DivProps, ObfuscatedClassName {\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\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","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","handleKeyDown","key","defaultPrevented","Portal","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"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"}

package/lib/notice/notice.d.ts

@@ -5,6 +5,6 @@ declare type NoticeProps = {
     children: React.ReactNode;
     tone: AlertTone;
 };
-declare function Notice({ id, children, tone }: NoticeProps): JSX.Element;
+declare function Notice({ id, children, tone }: NoticeProps): React.JSX.Element;
 export { Notice };
 export type { NoticeProps };

package/lib/password-field/password-field.d.ts

@@ -1,14 +1,9 @@
 import * as React from 'react';
 import { TextFieldProps } from '../text-field';
 import type { BaseFieldVariantProps } from '../base-field';
-/**
- * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.
- * Once we upgrade Reactist to the newest React types, we should be able to remove these.
- */
-declare type DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture';
-declare type PasswordFieldProps = Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot' | DeprecatedProps> & BaseFieldVariantProps & {
+interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>, BaseFieldVariantProps {
     togglePasswordLabel?: string;
-};
-declare const PasswordField: React.ForwardRefExoticComponent<Pick<PasswordFieldProps, "id" | "hidden" | "aria-describedby" | "children" | "variant" | "label" | "secondaryLabel" | "auxiliaryLabel" | "message" | "tone" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "togglePasswordLabel"> & React.RefAttributes<HTMLInputElement>>;
+}
+declare const PasswordField: React.ForwardRefExoticComponent<Omit<PasswordFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { PasswordField };
 export type { PasswordFieldProps };

package/lib/password-field/password-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../button/button.js"),o=require("../icons/password-visible-icon.js"),s=require("../icons/password-hidden-icon.js"),i=require("../text-field/text-field.js");const a=["togglePasswordLabel"];exports.PasswordField=r.forwardRef((function(l,n){let{togglePasswordLabel:d="Toggle password visibility"}=l,c=e.objectWithoutProperties(l,a);const[u,b]=r.useState(!1),p=u?o.PasswordVisibleIcon:s.PasswordHiddenIcon;return r.createElement(i.TextField,e.objectSpread2(e.objectSpread2({},c),{},{ref:n,type:u?"text":"password",endSlot:r.createElement(t.Button,{variant:"quaternary",icon:r.createElement(p,{"aria-hidden":!0}),"aria-label":d,onClick:()=>b(e=>!e)})}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../button/button.js"),o=require("../icons/password-visible-icon.js"),s=require("../icons/password-hidden-icon.js"),i=require("../text-field/text-field.js");const a=["togglePasswordLabel"];exports.PasswordField=r.forwardRef((function(l,n){let{togglePasswordLabel:d="Toggle password visibility"}=l,c=e.objectWithoutProperties(l,a);const[u,b]=r.useState(!1),p=u?o.PasswordVisibleIcon:s.PasswordHiddenIcon;return r.createElement(i.TextField,e.objectSpread2(e.objectSpread2({},c),{},{ref:n,type:u?"text":"password",endSlot:r.createElement(t.IconButton,{variant:"quaternary",icon:r.createElement(p,{"aria-hidden":!0}),"aria-label":d,onClick:()=>b(e=>!e)})}))}));
 //# sourceMappingURL=password-field.js.map

package/lib/password-field/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { Button } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot' | DeprecatedProps> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <Button\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","Button","variant","icon","onClick","v"],"mappings":"8WAqBsBA,cAAuD,WAEzEC,OADAC,oBAAEA,EAAsB,gCAAiCC,iCAGzD,MAAOC,EAAmBC,GAAsBL,YAAe,GACzDM,EAAOF,EAAoBG,sBAAsBC,qBACvD,OACIR,gBAACS,+CACON,OACJF,IAAKA,EAELS,KAAMN,EAAoB,OAAS,WACnCO,QACIX,gBAACY,UACGC,QAAQ,aACRC,KAAMd,gBAACM,mCACKJ,EACZa,QAAS,IAAMV,EAAoBW,IAAOA"}
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\n        BaseFieldVariantProps {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <IconButton\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","onClick","v"],"mappings":"8WAgBsBA,cAAuD,WAEzEC,OADAC,oBAAEA,EAAsB,gCAAiCC,iCAGzD,MAAOC,EAAmBC,GAAsBL,YAAe,GACzDM,EAAOF,EAAoBG,sBAAsBC,qBACvD,OACIR,gBAACS,+CACON,OACJF,IAAKA,EAELS,KAAMN,EAAoB,OAAS,WACnCO,QACIX,gBAACY,cACGC,QAAQ,aACRC,KAAMd,gBAACM,mCACKJ,EACZa,QAAS,IAAMV,EAAoBW,IAAOA"}

package/lib/prose/prose.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-declare type ProseProps = {
+import type { ObfuscatedClassName } from '../utils/common-types';
+interface ProseProps extends ObfuscatedClassName {
     /**
      * The prose content.
      *
@@ -34,14 +35,10 @@ declare type ProseProps = {
      * This does not apply a dark theme on the text. That's still the consumer apps’ responsibility.
      */
     darkModeTypography: boolean;
-    /**
-     * An escape hatch in case you need to provide custom styles.
-     */
-    exceptionallySetClassName?: string;
-};
+}
 /**
  * Used to style HTML you don’t control, like HTML content generated from Markdown.
  */
-declare function Prose({ darkModeTypography, exceptionallySetClassName, ...props }: ProseProps): JSX.Element;
+declare function Prose({ darkModeTypography, exceptionallySetClassName, ...props }: ProseProps): React.JSX.Element;
 export { Prose };
 export type { ProseProps };

package/lib/prose/prose.js.map

@@ -1 +1 @@
-{"version":3,"file":"prose.js","sources":["../../src/prose/prose.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport styles from './prose.module.css'\n\ntype ProseProps = {\n    /**\n     * The prose content.\n     *\n     * This must consist of React nodes and elements. It is the consumer’s responsibility to\n     * generate this from other sources, such as converting raw markdown content to React elements,\n     * etc.\n     *\n     * Alternatively, you can use `<Prose dangerouslySetInnerHTML={{ __html: htmlString }}` />`\n     * instead.\n     */\n    children?: React.ReactNode\n\n    /**\n     * Sets the prose content to be raw HTML stored in a string value.\n     *\n     * Warning: be advised that setting HTML content in this way is risky, because you can\n     * inadvertently be vulnerable to a cross-site scripting (XSS) attack. Make sure you only use\n     * this option with HTML content that has been sanitized (especially if it comes from user\n     * provided content) or content that you fully control how it's generated, that cannot possibly\n     * have any XSS content in it.\n     *\n     * @see https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml\n     */\n    dangerouslySetInnerHTML?: { __html: string } | undefined\n\n    /**\n     * Whether to customize the typography styles for dark mode.\n     *\n     * Applies finessed optimizations since our eyes perceive space differently when looking at dark\n     * text on a light background and light text on a dark background.\n     *\n     * This does not apply a dark theme on the text. That's still the consumer apps’ responsibility.\n     */\n    darkModeTypography: boolean\n\n    /**\n     * An escape hatch in case you need to provide custom styles.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Used to style HTML you don’t control, like HTML content generated from Markdown.\n */\nfunction Prose({ darkModeTypography, exceptionallySetClassName, ...props }: ProseProps) {\n    return (\n        <Box\n            {...props}\n            className={[\n                styles.prose,\n                darkModeTypography ? styles.darkModeTypography : null,\n                exceptionallySetClassName,\n            ]}\n        />\n    )\n}\n\nexport { Prose }\nexport type { ProseProps }\n"],"names":["darkModeTypography","exceptionallySetClassName","props","React","Box","className","styles","prose"],"mappings":"wRAiDA,gBAAeA,mBAAEA,EAAFC,0BAAsBA,KAA8BC,iCAC/D,OACIC,gBAACC,yCACOF,OACJG,UAAW,CACPC,UAAOC,MACPP,EAAqBM,UAAON,mBAAqB,KACjDC"}
+{"version":3,"file":"prose.js","sources":["../../src/prose/prose.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport styles from './prose.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ninterface ProseProps extends ObfuscatedClassName {\n    /**\n     * The prose content.\n     *\n     * This must consist of React nodes and elements. It is the consumer’s responsibility to\n     * generate this from other sources, such as converting raw markdown content to React elements,\n     * etc.\n     *\n     * Alternatively, you can use `<Prose dangerouslySetInnerHTML={{ __html: htmlString }}` />`\n     * instead.\n     */\n    children?: React.ReactNode\n\n    /**\n     * Sets the prose content to be raw HTML stored in a string value.\n     *\n     * Warning: be advised that setting HTML content in this way is risky, because you can\n     * inadvertently be vulnerable to a cross-site scripting (XSS) attack. Make sure you only use\n     * this option with HTML content that has been sanitized (especially if it comes from user\n     * provided content) or content that you fully control how it's generated, that cannot possibly\n     * have any XSS content in it.\n     *\n     * @see https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml\n     */\n    dangerouslySetInnerHTML?: { __html: string } | undefined\n\n    /**\n     * Whether to customize the typography styles for dark mode.\n     *\n     * Applies finessed optimizations since our eyes perceive space differently when looking at dark\n     * text on a light background and light text on a dark background.\n     *\n     * This does not apply a dark theme on the text. That's still the consumer apps’ responsibility.\n     */\n    darkModeTypography: boolean\n}\n\n/**\n * Used to style HTML you don’t control, like HTML content generated from Markdown.\n */\nfunction Prose({ darkModeTypography, exceptionallySetClassName, ...props }: ProseProps) {\n    return (\n        <Box\n            {...props}\n            className={[\n                styles.prose,\n                darkModeTypography ? styles.darkModeTypography : null,\n                exceptionallySetClassName,\n            ]}\n        />\n    )\n}\n\nexport { Prose }\nexport type { ProseProps }\n"],"names":["darkModeTypography","exceptionallySetClassName","props","React","Box","className","styles","prose"],"mappings":"wRA6CA,gBAAeA,mBAAEA,EAAFC,0BAAsBA,KAA8BC,iCAC/D,OACIC,gBAACC,yCACOF,OACJG,UAAW,CACPC,UAAOC,MACPP,EAAqBM,UAAON,mBAAqB,KACjDC"}

package/lib/select-field/select-field.d.ts

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
-/**
- * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.
- * Once we upgrade Reactist to the newest React types, we should be able to remove these.
- */
-declare type DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture';
-declare type SelectFieldProps = Omit<FieldComponentProps<HTMLSelectElement>, DeprecatedProps> & BaseFieldVariantProps;
-declare const SelectField: React.ForwardRefExoticComponent<Pick<SelectFieldProps, "id" | "hidden" | "aria-describedby" | "children" | "variant" | "label" | "secondaryLabel" | "auxiliaryLabel" | "message" | "tone" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLSelectElement>>;
+interface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {
+}
+declare const SelectField: React.ForwardRefExoticComponent<Omit<SelectFieldProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export { SelectField };
 export type { SelectFieldProps };

package/lib/select-field/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype SelectFieldProps = Omit<FieldComponentProps<HTMLSelectElement>, DeprecatedProps> &\n    BaseFieldVariantProps\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered"],"mappings":"4YAiEA,SAASA,EAAcC,GACnB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCAxDDH,cAAsD,WAgBtEM,OAfAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,KACjBpB,iCAIP,OACIC,gBAACoB,aACGb,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBE,GACErB,gBAACsB,qBACe,iBACZC,UAAW,CACPC,UAAOC,cACE,UAATX,EAAmBU,UAAOE,MAAQ,KACtB,aAAZnB,EAAyBiB,UAAOG,SAAW,OAG/C3B,4EAAYD,GAAWsB,OAAYf,IAAKA,IACnCU,GAELhB,gBAACF"}
+{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered"],"mappings":"4YA0DA,SAASA,EAAcC,GACnB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCAxDDH,cAAsD,WAgBtEM,OAfAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,KACjBpB,iCAIP,OACIC,gBAACoB,aACGb,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBE,GACErB,gBAACsB,qBACe,iBACZC,UAAW,CACPC,UAAOC,cACE,UAATX,EAAmBU,UAAOE,MAAQ,KACtB,aAAZnB,EAAyBiB,UAAOG,SAAW,OAG/C3B,4EAAYD,GAAWsB,OAAYf,IAAKA,IACnCU,GAELhB,gBAACF"}

package/lib/spinner/spinner.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
 declare function Spinner({ size }: {
     size?: number;
-}): JSX.Element;
+}): React.JSX.Element;
 export { Spinner };