@doist/reactist 22.0.2-beta → 22.2.0

package/es/modal/modal.js.map

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

package/es/select-field/select-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_1fa9b208 = {"selectWrapper":"a9cbb3a6","bordered":"f3869290","error":"aefdbdaa"};
+var modules_1fa9b208 = {"selectWrapper":"b930bb07","bordered":"e1f620b6","error":"_7e87474e"};
 
 export default modules_1fa9b208;
 //# sourceMappingURL=select-field.module.css.js.map

package/es/tabs/tabs.js

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

package/es/tabs/tabs.js.map

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

package/es/text-area/text-area.module.css.js

@@ -1,4 +1,4 @@
-var modules_2728c236 = {"textAreaContainer":"_29503131","innerContainer":"_6ea894ce","bordered":"e1e8b6a7","error":"_1b94ff46","autoExpand":"e82223c4"};
+var modules_2728c236 = {"textAreaContainer":"_55ccf266","innerContainer":"_89bb7098","bordered":"_02a47358","error":"_704ff540","autoExpand":"_145ca8f0"};
 
 export default modules_2728c236;
 //# sourceMappingURL=text-area.module.css.js.map

package/es/text-field/text-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_aaf25250 = {"inputWrapper":"_483abe7b","bordered":"fce9399c","error":"_603b8c4b","slot":"_79ca0da5"};
+var modules_aaf25250 = {"inputWrapper":"dea25485","bordered":"_80b6b376","error":"_1a32867a","slot":"dbbd207e"};
 
 export default modules_aaf25250;
 //# sourceMappingURL=text-field.module.css.js.map

package/es/toast/use-toasts.js

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

package/es/toast/use-toasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from '@ariakit/react'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { isActionObject, StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const startTimeout = React.useCallback(function startTimeout() {\n        setTimeoutRunning(true)\n    }, [])\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        setTimeoutRunning(false)\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    const removeToast = React.useCallback(\n        function removeToast() {\n            onRemoveToast(toastId)\n            onDismiss?.()\n        },\n        [onDismiss, onRemoveToast, toastId],\n    )\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, removeToast, stopTimeout, timeoutRunning],\n    )\n\n    /**\n     * If the action is toast action object and not a custom element,\n     * the `onClick` property is wrapped in another handler responsible\n     * for removing the toast when the action is triggered.\n     */\n    const actionWithCustomActionHandler = React.useMemo(() => {\n        if (!isActionObject(action)) {\n            return action\n        }\n\n        return {\n            ...action,\n            onClick: function handleActionClick() {\n                if (!action) {\n                    return\n                }\n\n                action.onClick()\n                removeToast()\n            },\n        }\n    }, [action, removeToast])\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={actionWithCustomActionHandler}\n            onDismiss={showDismissButton ? removeToast : undefined}\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n\n    /**\n     * Custom classname for the toasts container, if you need to fine-tune the position or other styles\n     */\n    containerClassName?: string\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n    containerClassName,\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={[styles.stackedToastsView, containerClassName]}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                        data-testid=\"toasts-container\"\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","removeToast","useEffect","setupAutoDismiss","window","setTimeout","actionWithCustomActionHandler","useMemo","isActionObject","onClick","handleActionClick","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","containerClassName","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}
+{"version":3,"file":"use-toasts.js","sources":["../../src/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../utils/common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { isActionObject, StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../utils/common-types'\nimport { useToastsAnimation } from './toast-animation'\n\n/**\n * The props needed to fire up a new notification toast.\n */\ntype ToastProps = StaticToastProps & {\n    /**\n     * The number of seconds the toast is expected to be shown before it is dismissed automatically,\n     * or false to disable auto-dismiss.\n     *\n     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.\n     */\n    autoDismissDelay?: number | false\n\n    /**\n     * The label for the button that dismisses the toast.\n     *\n     * It defaults to the value set in the ToastsProvider, but individual toasts can have a\n     * different value if needed.\n     */\n    dismissLabel?: string\n\n    /**\n     * Whether to show the dismiss button or not.\n     *\n     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you\n     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to\n     * dismiss the toast by calling the function returned by `showToast`.\n     */\n    showDismissButton?: boolean\n}\n\n//\n// InternalToast component and its props\n//\n\ntype InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'> &\n    Required<Pick<ToastProps, 'autoDismissDelay' | 'dismissLabel'>> & {\n        toastId: string\n        onRemoveToast: (toastId: string) => void\n    }\n\n/** @private */\nconst InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(\n    {\n        message,\n        description,\n        icon,\n        action,\n        autoDismissDelay,\n        dismissLabel,\n        showDismissButton = true,\n        toastId,\n        onDismiss,\n        onRemoveToast,\n    },\n    ref,\n) {\n    const [timeoutRunning, setTimeoutRunning] = React.useState(Boolean(autoDismissDelay))\n    const timeoutRef = React.useRef<number | undefined>()\n\n    const startTimeout = React.useCallback(function startTimeout() {\n        setTimeoutRunning(true)\n    }, [])\n\n    const stopTimeout = React.useCallback(function stopTimeout() {\n        setTimeoutRunning(false)\n        clearTimeout(timeoutRef.current)\n        timeoutRef.current = undefined\n    }, [])\n\n    const removeToast = React.useCallback(\n        function removeToast() {\n            onRemoveToast(toastId)\n            onDismiss?.()\n        },\n        [onDismiss, onRemoveToast, toastId],\n    )\n\n    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, removeToast, stopTimeout, timeoutRunning],\n    )\n\n    /**\n     * If the action is toast action object and not a custom element,\n     * the `onClick` property is wrapped in another handler responsible\n     * for removing the toast when the action is triggered.\n     */\n    const actionWithCustomActionHandler = React.useMemo(() => {\n        if (!isActionObject(action)) {\n            return action\n        }\n\n        return {\n            ...action,\n            onClick: function handleActionClick() {\n                if (!action) {\n                    return\n                }\n\n                action.onClick()\n                removeToast()\n            },\n        }\n    }, [action, removeToast])\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={actionWithCustomActionHandler}\n            onDismiss={showDismissButton ? removeToast : undefined}\n            dismissLabel={dismissLabel}\n            // @ts-expect-error\n            onMouseEnter={stopTimeout}\n            onMouseLeave={startTimeout}\n        />\n    )\n})\n\n//\n// Internal state and context\n//\n\ntype InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>\ntype ToastsList = readonly InternalToastEntry[]\n\ntype ShowToastAction = (props: ToastProps) => () => void\nconst ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)\n\n/**\n * The props needed by the ToastsProvider component.\n *\n * @see ToastsProvider\n */\ntype ToastsProviderProps = {\n    /**\n     * The default label to apply to toast dismiss buttons.\n     *\n     * This is useful in environments that need locatization, so you do not need to pass the same\n     * translated label every time you trigger a toast.\n     *\n     * However, you can still apply a different label to a specific toast, by passing a different\n     * value when calling showToast.\n     *\n     * @default 'Close'\n     */\n    defaultDismissLabel?: string\n\n    /**\n     * The default number of seconds after which the toast will be dismissed automatically.\n     *\n     * You can pass a different value to a specific toast when calling `showToast`. You can even\n     * pass `false` if you want a certain toast to never be dismissed automatically.\n     *\n     * @default 10 (seconds)\n     */\n    defaultAutoDismissDelay?: number\n\n    /**\n     * The padding used to separate the toasts from the viewport borders.\n     *\n     * @default 'large'\n     */\n    padding?: Space\n\n    /**\n     * The app wrapped by the provider.\n     */\n    children: NonNullable<React.ReactNode>\n\n    /**\n     * Custom classname for the toasts container, if you need to fine-tune the position or other styles\n     */\n    containerClassName?: string\n}\n\n/**\n * Provides the state management and rendering of the toasts currently active.\n *\n * You need to render this near the top of your app components tree, in order to `useToasts`.\n *\n * @see useToasts\n */\nfunction ToastsProvider({\n    children,\n    padding = 'large',\n    defaultAutoDismissDelay = 10 /* seconds */,\n    defaultDismissLabel = 'Close',\n    containerClassName,\n}: ToastsProviderProps) {\n    const [toasts, setToasts] = React.useState<ToastsList>([])\n    const { mappedRef, animateRemove } = useToastsAnimation()\n\n    const removeToast = React.useCallback(\n        function onRemoveToast(toastId: string) {\n            animateRemove(toastId, () => {\n                setToasts((list) => {\n                    const index = list.findIndex((n) => n.toastId === toastId)\n                    if (index < 0) return list\n                    const copy = [...list]\n                    copy.splice(index, 1)\n                    return copy\n                })\n            })\n        },\n        [animateRemove],\n    )\n\n    const showToast = React.useCallback(\n        function showToast(props: ToastProps) {\n            const toastId = generateElementId('toast')\n            const newToast: InternalToastEntry = {\n                autoDismissDelay: defaultAutoDismissDelay,\n                dismissLabel: defaultDismissLabel,\n                ...props,\n                toastId,\n            }\n            setToasts((list) => [...list, newToast])\n            return () => removeToast(toastId)\n        },\n        [defaultAutoDismissDelay, defaultDismissLabel, removeToast],\n    )\n\n    return (\n        <ToastsContext.Provider value={showToast}>\n            {children}\n            <Portal>\n                {toasts.length === 0 ? null : (\n                    <Box\n                        className={[styles.stackedToastsView, containerClassName]}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\n                        data-testid=\"toasts-container\"\n                    >\n                        <Stack space=\"medium\">\n                            {toasts.map(({ toastId, ...props }) => (\n                                <InternalToast\n                                    key={toastId}\n                                    ref={mappedRef(toastId)}\n                                    toastId={toastId}\n                                    onRemoveToast={removeToast}\n                                    {...props}\n                                />\n                            ))}\n                        </Stack>\n                    </Box>\n                )}\n            </Portal>\n        </ToastsContext.Provider>\n    )\n}\n\n/**\n * Provides a function `showToast` that shows a new toast every time you call it.\n *\n * ```jsx\n * const showToast = useToasts()\n *\n * <button onClick={() => showToast({ message: 'Hello' })}>\n *   Say hello\n * </button>\n * ```\n *\n * All toasts fired via this function are rendered in a global fixed location, and stacked one on\n * top of the other.\n *\n * When called, `showToast` returns a function that dismisses the toast when called.\n *\n * @see ToastsProvider\n */\nfunction useToasts() {\n    return React.useContext(ToastsContext)\n}\n\n/**\n * Adds a toast to be rendered, stacked alongside any other currently active toasts.\n *\n * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.\n * This component is provided for convenience to render toasts in the markup, but it has some\n * peculiarities, which are discussed below.\n *\n * Internally, this calls `showToast`. It is provided for two reasons:\n *\n * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that\n *    toasts rendered in this way will be removed from view when the context where it is rendered\n *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either\n *    by the user or after a delay. They'll still be animated on their way out, though.\n * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and\n *    `autoDismissDelay={false}` it provides a way to show \"permanent\" toasts that only go away when\n *    the component ceases to be rendered).\n *\n * This is useful for cases when the consumer wants to control when a toast is visible, and to keep\n * it visible based on an app-specific condition.\n *\n * Something important to note about this component is that it triggers the toast based on the props\n * passed when first rendered, and it does not update the toast if these props change on subsequent\n * renders. In this sense, this is an imperative component, more than a descriptive one. This is\n * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a\n * toast imperatively, and you loose control over it. It remains rendered according to the props you\n * first passed.\n *\n * @see useToasts\n */\nfunction Toast(props: ToastProps) {\n    const showToast = useToasts()\n    const propsRef = React.useRef<ToastProps>(props)\n    React.useEffect(() => {\n        const dismissToast = showToast(propsRef.current)\n        return dismissToast\n    }, [showToast])\n    return null\n}\n\nexport { Toast, ToastsProvider, useToasts }\nexport type { ToastProps, ToastsProviderProps }\n"],"names":["InternalToast","React","forwardRef","message","description","icon","action","autoDismissDelay","dismissLabel","showDismissButton","toastId","onDismiss","onRemoveToast","ref","timeoutRunning","setTimeoutRunning","useState","Boolean","timeoutRef","useRef","startTimeout","useCallback","stopTimeout","clearTimeout","current","undefined","removeToast","useEffect","setupAutoDismiss","window","setTimeout","actionWithCustomActionHandler","useMemo","isActionObject","onClick","handleActionClick","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","ToastsProvider","children","padding","defaultAutoDismissDelay","defaultDismissLabel","containerClassName","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","list","index","findIndex","n","copy","splice","showToast","props","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","key","useToasts","useContext","Toast","propsRef","dismissToast"],"mappings":"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"}

package/es/tooltip/tooltip.js

@@ -1,9 +1,21 @@
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { Children, createElement, Fragment, cloneElement } from 'react';
+import { useMemo, Children, createElement, Fragment, cloneElement, useCallback, useRef, useEffect } from 'react';
 import { Box } from '../box/box.js';
-import { useTooltipStore, TooltipAnchor, Tooltip as Tooltip$1, TooltipArrow } from '@ariakit/react';
+import { TooltipAnchor, Tooltip as Tooltip$1, TooltipArrow, useTooltipState } from 'ariakit/tooltip';
 import styles from './tooltip.module.css.js';
 
+const SHOW_DELAY = 500;
+const HIDE_DELAY = 100;
+
+function useDelayedTooltipState(initialState) {
+  const tooltipState = useTooltipState(initialState);
+  const delay = useDelay();
+  return useMemo(() => _objectSpread2(_objectSpread2({}, tooltipState), {}, {
+    show: delay(() => tooltipState.show(), SHOW_DELAY),
+    hide: delay(() => tooltipState.hide(), HIDE_DELAY)
+  }), [delay, tooltipState]);
+}
+
 function Tooltip({
   children,
   content,
@@ -12,12 +24,10 @@ function Tooltip({
   withArrow = false,
   exceptionallySetClassName
 }) {
-  const tooltip = useTooltipStore({
+  const state = useDelayedTooltipState({
     placement: position,
-    showTimeout: 500,
-    hideTimeout: 100
+    gutter: gapSize
   });
-  const isOpen = tooltip.useState('open');
   const child = Children.only(children);
 
   if (!child) {
@@ -46,7 +56,7 @@ function Tooltip({
       const eventKey = event.key;
 
       if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {
-        tooltip.show();
+        state.show();
       }
     }
 
@@ -61,23 +71,25 @@ function Tooltip({
   function handleBlur(event) {
     var _child$props2;
 
-    tooltip.hide();
+    state.hide();
     child == null ? void 0 : (_child$props2 = child.props) == null ? void 0 : _child$props2.onBlur == null ? void 0 : _child$props2.onBlur(event);
   }
 
   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(TooltipAnchor, {
-    render: anchorProps => {
-      return /*#__PURE__*/cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, child.props), anchorProps), {}, {
-        onFocus: handleFocus,
-        onBlur: handleBlur
-      }));
-    },
-    store: tooltip,
-    ref: child.ref
-  }), isOpen && content ? /*#__PURE__*/createElement(Box, {
+    state: state,
+    ref: child.ref,
+    described: true
+  }, anchorProps => {
+    // Let child props override anchor props so user can specify attributes like tabIndex
+    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
+    // by applying the replacement component/element twice
+    return /*#__PURE__*/cloneElement(child, _objectSpread2(_objectSpread2(_objectSpread2({}, anchorProps), child.props), {}, {
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }));
+  }), state.open && content ? /*#__PURE__*/createElement(Box, {
     as: Tooltip$1,
-    gutter: gapSize,
-    store: tooltip,
+    state: state,
     className: [styles.tooltip, exceptionallySetClassName],
     background: "toast",
     borderRadius: "standard",
@@ -89,6 +101,36 @@ function Tooltip({
     textAlign: "center"
   }, withArrow ? /*#__PURE__*/createElement(TooltipArrow, null) : null, typeof content === 'function' ? content() : content) : null);
 }
+// Internal helpers
+//
+
+/**
+ * Returns a function offering the same interface as setTimeout, but cleans up on unmount.
+ *
+ * The timeout state is shared, and only one delayed function can be active at any given time. If
+ * a new delayed function is called while another one was waiting for its time to run, that older
+ * invocation is cleared and it never runs.
+ *
+ * This is suitable for our use case here, but probably not the most intuitive thing in general.
+ * That's why this is not made a shared util or something like it.
+ */
+
+function useDelay() {
+  const timeoutRef = useRef();
+  const clearTimeouts = useCallback(function clearTimeouts() {
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+    }
+  }, []); // Runs clearTimeouts when the component is unmounted
+
+  useEffect(() => clearTimeouts, [clearTimeouts]);
+  return useCallback(function delay(fn, delay) {
+    return () => {
+      clearTimeouts();
+      timeoutRef.current = setTimeout(fn, delay);
+    };
+  }, [clearTimeouts]);
+}
 
-export { Tooltip };
+export { HIDE_DELAY, SHOW_DELAY, Tooltip };
 //# sourceMappingURL=tooltip.js.map