@doist/reactist 15.3.0 → 16.1.0

package/lib/new-components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/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, useDialogState } from 'ariakit/dialog'\nimport { Portal } 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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: 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\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    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const setVisible = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ visible: isOpen, setVisible })\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\n            // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null\n            portalRef={portalRef}\n        >\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(styles.overlay, styles[height], styles[width])}\n                onClick={handleBackdropClick}\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\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","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","setVisible","visible","state","useDialogState","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","Portal","classNames","styles","overlay","ref","FocusLock","whiteList","returnFocus","Dialog","hideOnEscape","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","hideOnInteractOutside","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"81BA6BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAqJnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CA5ThEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,UAMlBA,GAAY,EANMC,SAOlBA,KACGtB,iCAEH,MAAMuB,EAAalC,cACdmC,IACQA,SACDlC,GAAAA,KAGR,CAACA,IAECmC,EAAQC,iBAAe,CAAEF,QAASL,EAAQI,WAAAA,IAE1CI,EAAkCtC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGEoC,EAAYvC,SAAiC,MAC7CwC,EAAYxC,SAAoC,MAChDyC,EAAczC,SAAoC,MAClD0C,EAAsB1C,cACvB2C,qBAIQH,EAAUI,UAAVC,EAAmBC,SAASH,EAAMI,kBAEnCN,EAAYG,WAAZI,EAAqBF,SAASH,EAAMI,UAEpCJ,EAAMM,wBACNhD,GAAAA,MAGR,CAACA,IAcL,OAXAD,mBACI,WACI,GAAK8B,GAAWS,EAAUK,QAI1B,OAAOM,aAAWX,EAAUK,WAEhC,CAACd,IAGAA,EAKD9B,gBAACmD,UAEGZ,UAAWA,GAEXvC,gBAAC0B,qBACe,kCAEZE,UAAWwB,EAAWC,UAAOC,QAASD,UAAOlD,GAASkD,UAAOtB,IAC7Db,QAASwB,EACTa,IAAKd,GAELzC,gBAACwD,GAAUxB,UAAWA,EAAWyB,UAAWrD,EAAoBsD,aAAa,GACzE1D,gBAAC2D,4CACOhD,OACJ4C,IAAKf,EACLb,GAAID,MACJU,MAAOA,EACPwB,gBACAC,qBACAC,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT/D,OAAmB,WAAXA,EAAsB,YAASD,EACvCiE,SAAqB,WAAXhE,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2B8B,UAAOe,WAE9CC,OAAO,EACPrC,WAAW,EACXsC,iBAAiB,EACjBC,iBAAiB,EAEjBC,QAAQ,EACRC,UAAU,EACVC,uBAAuB,IAEvB1E,gBAACD,EAAa4E,UAASC,MAAOtC,GACzBL,OA1Cd,2CAmRcA,SAAEA,KAAatB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAAC6E,UAAOC,MAAM,QAAQC,MAAM,SACvB9C,uCAvESV,0BAAEA,EAAFU,SAA6BA,KAAatB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX4C,SAAqB,WAAXhE,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCgE,SAAS,SAETlE,gBAAC0B,OAAIG,QAAQ,QAAQmD,cAAc,WAC9B/C,0FA/EWA,SACxBA,EADwBgD,OAExBA,GAAS,EAFezD,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACHuD,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACTxD,UAAWL,IAEXvB,gBAACqF,WAAQN,MAAM,QAAQO,OAAO,UAC1BtF,gBAACuF,UAAOxD,MAAM,QAAQE,IACV,IAAXgD,GAA+B,OAAXA,EACjBjF,uBAAK4B,UAAWyB,UAAOmC,gBAEvBxF,gBAACuF,UACGxD,MAAM,UACNR,0BAA2B8B,UAAOoC,8BACtB,oBAEO,kBAAXR,EACJjF,gBAACU,gBAA4B,cAAcsB,WAAW,IAEtDiD,KAMnBzD,EAAcxB,gBAACyB,gBAAa"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/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, useDialogState } from 'ariakit/dialog'\nimport { Portal } 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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: 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\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    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const setVisible = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ visible: isOpen, setVisible })\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\n            // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null\n            portalRef={portalRef}\n        >\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(styles.overlay, styles[height], styles[width])}\n                onClick={handleBackdropClick}\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\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","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","setVisible","visible","state","useDialogState","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","Portal","classNames","styles","overlay","ref","FocusLock","whiteList","returnFocus","Dialog","hideOnEscape","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","hideOnInteractOutside","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"q2BA6BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAqJnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CA5ThEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,UAMlBA,GAAY,EANMC,SAOlBA,KACGtB,iCAEH,MAAMuB,EAAalC,cACdmC,IACQA,SACDlC,GAAAA,KAGR,CAACA,IAECmC,EAAQC,iBAAe,CAAEF,QAASL,EAAQI,WAAAA,IAE1CI,EAAkCtC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGEoC,EAAYvC,SAAiC,MAC7CwC,EAAYxC,SAAoC,MAChDyC,EAAczC,SAAoC,MAClD0C,EAAsB1C,cACvB2C,qBAIQH,EAAUI,UAAVC,EAAmBC,SAASH,EAAMI,kBAEnCN,EAAYG,WAAZI,EAAqBF,SAASH,EAAMI,UAEpCJ,EAAMM,wBACNhD,GAAAA,MAGR,CAACA,IAcL,OAXAD,mBACI,WACI,GAAK8B,GAAWS,EAAUK,QAI1B,OAAOM,aAAWX,EAAUK,WAEhC,CAACd,IAGAA,EAKD9B,gBAACmD,UAEGZ,UAAWA,GAEXvC,gBAAC0B,qBACe,kCAEZE,UAAWwB,EAAWC,UAAOC,QAASD,UAAOlD,GAASkD,UAAOtB,IAC7Db,QAASwB,EACTa,IAAKd,GAELzC,gBAACwD,GAAUxB,UAAWA,EAAWyB,UAAWrD,EAAoBsD,aAAa,GACzE1D,gBAAC2D,4CACOhD,OACJ4C,IAAKf,EACLb,GAAID,MACJU,MAAOA,EACPwB,gBACAC,qBACAC,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT/D,OAAmB,WAAXA,EAAsB,YAASD,EACvCiE,SAAqB,WAAXhE,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2B8B,UAAOe,WAE9CC,OAAO,EACPrC,WAAW,EACXsC,iBAAiB,EACjBC,iBAAiB,EAEjBC,QAAQ,EACRC,UAAU,EACVC,uBAAuB,IAEvB1E,gBAACD,EAAa4E,UAASC,MAAOtC,GACzBL,OA1Cd,2CAmRcA,SAAEA,KAAatB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAAC6E,UAAOC,MAAM,QAAQC,MAAM,SACvB9C,uCAvESV,0BAAEA,EAAFU,SAA6BA,KAAatB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX4C,SAAqB,WAAXhE,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCgE,SAAS,SAETlE,gBAAC0B,OAAIG,QAAQ,QAAQmD,cAAc,WAC9B/C,0FA/EWA,SACxBA,EADwBgD,OAExBA,GAAS,EAFezD,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACHuD,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACTxD,UAAWL,IAEXvB,gBAACqF,WAAQN,MAAM,QAAQO,OAAO,UAC1BtF,gBAACuF,UAAOxD,MAAM,QAAQE,IACV,IAAXgD,GAA+B,OAAXA,EACjBjF,uBAAK4B,UAAWyB,UAAOmC,gBAEvBxF,gBAACuF,UACGxD,MAAM,UACNR,0BAA2B8B,UAAOoC,8BACtB,oBAEO,kBAAXR,EACJjF,gBAACU,gBAA4B,cAAcsB,WAAW,IAEtDiD,KAMnBzD,EAAcxB,gBAACyB,gBAAa"}

package/lib/new-components/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"),a=require("../box/box.js"),t=require("../../components/tooltip/tooltip.js"),i=require("ariakit-utils"),s=require("../common-helpers.js"),l=require("../base-field/base-field.js"),o=require("../icons/password-visible-icon.js"),d=require("../icons/password-hidden-icon.js"),n=require("./password-field.module.css.js"),u=require("../text-field/text-field.module.css.js");const c=["variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","aria-describedby"];exports.PasswordField=r.forwardRef((function(b,p){let{variant:f="default",label:m,secondaryLabel:x,auxiliaryLabel:j,hint:y,message:h,tone:g,maxWidth:q,togglePasswordLabel:w="Toggle password visibility",hidden:v,"aria-describedby":L}=b,P=e.objectWithoutProperties(b,c);const E=s.useId(P.id),W=r.useRef(null),I=i.useForkRef(W,p),[S,_]=r.useState(!1);function k(){var e;_(e=>!e),null==(e=W.current)||e.focus()}return r.createElement(l.BaseField,{variant:f,id:E,label:m,secondaryLabel:x,auxiliaryLabel:j,hint:y,message:h,tone:g,maxWidth:q,hidden:v,"aria-describedby":L},i=>r.createElement(a.Box,{display:"flex",alignItems:"center",className:[n.default.inputWrapper,u.default.inputWrapper,"error"===g?u.default.error:null,"bordered"===f?u.default.bordered:null]},r.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},P),i),{},{ref:I,type:S?"text":"password"})),r.createElement(t.Tooltip,{content:w},r.createElement("button",{type:"button",onClick:k,"aria-label":w,tabIndex:-1},r.createElement(S?o.PasswordVisibleIcon:d.PasswordHiddenIcon,{"aria-hidden":!0})))))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),t=require("../../components/tooltip/tooltip.js"),i=require("../common-helpers.js"),s=require("ariakit-utils"),l=require("../base-field/base-field.js"),o=require("../icons/password-visible-icon.js"),d=require("../icons/password-hidden-icon.js"),n=require("./password-field.module.css.js"),u=require("../text-field/text-field.module.css.js");const c=["variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","aria-describedby"];exports.PasswordField=r.forwardRef((function(b,p){let{variant:f="default",label:m,secondaryLabel:x,auxiliaryLabel:j,hint:y,message:h,tone:g,maxWidth:q,togglePasswordLabel:w="Toggle password visibility",hidden:v,"aria-describedby":L}=b,P=e.objectWithoutProperties(b,c);const E=i.useId(P.id),W=r.useRef(null),I=s.useForkRef(W,p),[S,_]=r.useState(!1);function k(){var e;_(e=>!e),null==(e=W.current)||e.focus()}return r.createElement(l.BaseField,{variant:f,id:E,label:m,secondaryLabel:x,auxiliaryLabel:j,hint:y,message:h,tone:g,maxWidth:q,hidden:v,"aria-describedby":L},i=>r.createElement(a.Box,{display:"flex",alignItems:"center",className:[n.default.inputWrapper,u.default.inputWrapper,"error"===g?u.default.error:null,"bordered"===f?u.default.bordered:null]},r.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},P),i),{},{ref:I,type:S?"text":"password"})),r.createElement(t.Tooltip,{content:w},r.createElement("button",{type:"button",onClick:k,"aria-label":w,tabIndex:-1},r.createElement(S?o.PasswordVisibleIcon:d.PasswordHiddenIcon,{"aria-hidden":!0})))))}));
 //# sourceMappingURL=password-field.js.map

package/lib/new-components/stack/stack.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),s=require("../../utils/polymorphism.js"),i=require("../responsive-props.js"),a=require("../box/box.js"),l=require("../divider/divider.js"),o=(e=require("react-keyed-flatten-children"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("./stack.module.css.js");const c=["as","space","align","dividers","children","exceptionallySetClassName"];exports.Stack=s.polymorphicComponent((function(e,s){let{as:d,space:p,align:u="start",dividers:m="none",children:f,exceptionallySetClassName:j}=e,v=r.objectWithoutProperties(e,c);const x="start"===u?void 0:{width:"full",flexDirection:"column",display:"flex",alignItems:i.mapResponsiveProp(u,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center")};return t.createElement(a.Box,r.objectSpread2(r.objectSpread2(r.objectSpread2({},v),x),{},{as:d,className:[j,i.getClassNames(n.default,"space",p)],ref:s}),"none"!==m?t.Children.map(o(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(l.Divider,{weight:m}),e):e):f)}));
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../../utils/polymorphism.js")),s=require("../responsive-props.js"),a=require("../box/box.js"),l=require("../divider/divider.js"),n=e(require("react-keyed-flatten-children")),o=require("./stack.module.css.js");const c=["as","space","align","dividers","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){let{as:d,space:p,align:u="start",dividers:m="none",children:f,exceptionallySetClassName:j}=e,v=r.objectWithoutProperties(e,c);const x="start"===u?void 0:{width:"full",flexDirection:"column",display:"flex",alignItems:s.mapResponsiveProp(u,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center")};return t.createElement(a.Box,r.objectSpread2(r.objectSpread2(r.objectSpread2({},v),x),{},{as:d,className:[j,s.getClassNames(o.default,"space",p)],ref:i}),"none"!==m?t.Children.map(n(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(l.Divider,{weight:m}),e):e):f)}));
 //# sourceMappingURL=stack.js.map

package/lib/new-components/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\nimport styles from './stack.module.css'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align = 'start',\n        dividers = 'none',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["polymorphicComponent","ref","as","space","align","dividers","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":"ggBAwBcA,wBAAwC,WAUlDC,OATAC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAAQ,QAHZC,SAIIA,EAAW,OAJfC,SAKIA,EALJC,0BAMIA,KACGC,iCAIP,MAAMC,EACQ,UAAVL,OACMM,EACA,CACIC,MAAO,OACPC,cAAe,SACfC,QAAS,OACTC,WAAYC,oBAAkBX,EAAQA,GACxB,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,WAIlF,OACIY,gBAACC,yDACOT,GACAC,OACJP,GAAIA,EACJgB,UAAW,CAACX,EAA2BY,gBAAcC,UAAQ,QAASjB,IACtEF,IAAKA,IAES,SAAbI,EACKW,WAAeK,IAAIC,EAAgBhB,GAAW,CAACiB,EAAOC,IAClDA,EAAQ,EACJR,gCACIA,gBAACS,WAAQC,OAAQrB,IAChBkB,GAGLA,GAGRjB"}
+{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\nimport styles from './stack.module.css'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align = 'start',\n        dividers = 'none',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["polymorphicComponent","ref","as","space","align","dividers","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":"2hBAwBcA,wBAAwC,WAUlDC,OATAC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAAQ,QAHZC,SAIIA,EAAW,OAJfC,SAKIA,EALJC,0BAMIA,KACGC,iCAIP,MAAMC,EACQ,UAAVL,OACMM,EACA,CACIC,MAAO,OACPC,cAAe,SACfC,QAAS,OACTC,WAAYC,oBAAkBX,EAAQA,GACxB,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,WAIlF,OACIY,gBAACC,yDACOT,GACAC,OACJP,GAAIA,EACJgB,UAAW,CAACX,EAA2BY,gBAAcC,UAAQ,QAASjB,IACtEF,IAAKA,IAES,SAAbI,EACKW,WAAeK,IAAIC,EAAgBhB,GAAW,CAACiB,EAAOC,IAClDA,EAAQ,EACJR,gCACIA,gBAACS,WAAQC,OAAQrB,IAChBkB,GAGLA,GAGRjB"}

package/lib/new-components/tabs/tabs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=(e=require("classnames"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("../../utils/polymorphism.js"),l=require("../box/box.js"),s=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:l,children:s,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:l,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),s)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:l,as:s,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===l;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},c),{},{state:x,as:s,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:n,space:i="xsmall"}=e,u=t.objectWithoutProperties(e,d);const p=a.useContext(b);if(!p)return null;const{tabState:f,variant:m}=p;return a.createElement(l.Box,null,a.createElement(o.TabList,t.objectSpread2({state:f,as:l.Box,position:"relative",width:"maxContent"},u),a.createElement(l.Box,{className:r(c.default.track,c.default["track-"+i],c.default["track-"+m])}),a.createElement(s.Inline,{space:i},n)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:l}){const s=o.useTabState({selectedId:t,setSelectedId:l}),c=i.usePrevious(r),{selectedId:u,select:d}=s;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:s,variant:n}}),[n,s]);return a.createElement(b.Provider,{value:p},e)};
+"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"),r=(e(a),e(require("classnames"))),n=require("../../utils/polymorphism.js"),l=require("../box/box.js"),s=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:l,children:s,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:l,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),s)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:l,as:s,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===l;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},c),{},{state:x,as:s,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:n,space:i="xsmall"}=e,u=t.objectWithoutProperties(e,d);const p=a.useContext(b);if(!p)return null;const{tabState:f,variant:m}=p;return a.createElement(l.Box,null,a.createElement(o.TabList,t.objectSpread2({state:f,as:l.Box,position:"relative",width:"maxContent"},u),a.createElement(l.Box,{className:r(c.default.track,c.default["track-"+i],c.default["track-"+m])}),a.createElement(s.Inline,{space:i},n)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:l}){const s=o.useTabState({selectedId:t,setSelectedId:l}),c=i.usePrevious(r),{selectedId:u,select:d}=s;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:s,variant:n}}),[n,s]);return a.createElement(b.Provider,{value:p},e)};
 //# sourceMappingURL=tabs.js.map

package/lib/new-components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/new-components/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 '../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 */\nexport function 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 */\nexport const 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 */\nexport function TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: 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\n                    className={classNames(\n                        styles.track,\n                        styles[`track-${space}`],\n                        styles[`track-${variant}`],\n                    )}\n                />\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 */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    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)\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 */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"2iBAqBMA,EAAcC,gBAA6C,MA6EpDC,EAAMC,wBAAyC,WAExDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MA6FAa,EAAWhB,wBACpB,WAEIC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,qDAgBiBA,SAAEA,IAC3B,MAAMI,EAAkBT,aAAiBD,GAEzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sCA1GtElB,SACpBA,EADoBqB,MAEpBA,EAAQ,YACLlB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OACGd,UAAWC,EACPC,UAAOgB,MACPhB,mBAAgBW,GAChBX,mBAAgBL,MAGxBV,gBAACgC,UAAON,MAAOA,GAAQrB,gDA3IlBA,SACjBA,EADiBkB,WAEjBA,EAFiBU,kBAGjBA,EAHiBvB,QAIjBA,EAAU,UAJOwB,mBAKjBA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/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 '../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 */\nexport function 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 */\nexport const 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 */\nexport function TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: 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\n                    className={classNames(\n                        styles.track,\n                        styles[`track-${space}`],\n                        styles[`track-${variant}`],\n                    )}\n                />\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 */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    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)\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 */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"skBAqBMA,EAAcC,gBAA6C,MA6EpDC,EAAMC,wBAAyC,WAExDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MA6FAa,EAAWhB,wBACpB,WAEIC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,qDAgBiBA,SAAEA,IAC3B,MAAMI,EAAkBT,aAAiBD,GAEzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sCA1GtElB,SACpBA,EADoBqB,MAEpBA,EAAQ,YACLlB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OACGd,UAAWC,EACPC,UAAOgB,MACPhB,mBAAgBW,GAChBX,mBAAgBL,MAGxBV,gBAACgC,UAAON,MAAOA,GAAQrB,gDA3IlBA,SACjBA,EADiBkB,WAEjBA,EAFiBU,kBAGjBA,EAHiBvB,QAIjBA,EAAU,UAJOwB,mBAKjBA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}

package/lib/new-components/test-helpers.d.ts

@@ -7,4 +7,5 @@ declare type PropsWithSpace = {
 };
 declare function runSpaceTests<Props extends PropsWithSpace>(Component: React.ComponentType<Props>): void;
 declare function flushPromises(): Promise<void>;
-export { runSpaceTests, flushPromises };
+declare function TestIcon(): JSX.Element;
+export { runSpaceTests, flushPromises, TestIcon };

package/lib/new-components/toast/index.d.ts

@@ -0,0 +1,4 @@
+export { StaticToast } from './static-toast';
+export { Toast, ToastsProvider, useToasts } from './use-toasts';
+export type { StaticToastProps } from './static-toast';
+export type { ToastProps, ToastsProviderProps } from './use-toasts';

package/lib/new-components/toast/static-toast.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+declare type ToastActionObject = {
+    label: string;
+    onClick: () => void;
+};
+declare type StaticToastProps = {
+    /**
+     * The message shown in the toast.
+     */
+    message: NonNullable<React.ReactNode>;
+    /**
+     * An optional extra description that complements the main message shown in the toast.
+     */
+    description?: React.ReactNode;
+    /**
+     * An icon to be shown in front of the message.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button
+     * does not appear.
+     */
+    onDismiss?: () => void;
+    /**
+     * The label for the button that dismisses the toast.
+     */
+    dismissLabel?: string;
+    /**
+     * What to render in the action slot. Usually a button or link.
+     *
+     * You can also pass an object that containst the action label, and a function that performs the
+     * action. This is used by the toast component to render a button for you.
+     *
+     * In general, you should prefer the action object most of the time. But it is possible to pass
+     * a React element instead, if you need more control over what to render. For instance, you may
+     * want to render a link instead of a button.
+     *
+     * Keep in mind, though, that the default button rendered uses `variant="tertiary"` and
+     * `size="small"`. In most cases you should stick to the variants `tertiary` or `primary`, which
+     * are the ones that look better in the toast's dark background. And in all cases you should use
+     * size `small`.
+     */
+    action?: React.ReactElement | ToastActionObject;
+};
+/**
+ * A toast that shows a message, and an optional action associated with it.
+ *
+ * This component is generally not meant to be used directly. Most of the time you'll want to use
+ * toasts generated via `useToasts` instead. However, this component is available in case you need
+ * to take control of rendering a toast under different circumstances than that of notification-like
+ * floating toasts.
+ *
+ * This component makes no assumptions outwardly about how it is positioned on the screen. That is,
+ * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only
+ * provides the toast look and feel, but you are responsible for positioning it as you want.
+ *
+ * @see useToasts
+ */
+declare const StaticToast: React.ForwardRefExoticComponent<StaticToastProps & React.RefAttributes<HTMLDivElement>>;
+export { StaticToast };
+export type { StaticToastProps };

package/lib/new-components/toast/static-toast.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("../box/box.js"),a=require("../stack/stack.js"),r=require("../button/button.js"),i=require("../icons/close-icon.js"),o=require("../text/text.js"),s=require("./toast.module.css.js");const c=["message","description","icon","action","onDismiss","dismissLabel"];function u({children:e}){return l.createElement(n.Box,{display:"flex",alignItems:"center",justifyContent:"center",marginX:"-xsmall",marginY:"-medium",className:s.default.slot},e)}exports.StaticToast=l.forwardRef((function(e,m){let{message:d,description:f,icon:b,action:p,onDismiss:x,dismissLabel:j="Close"}=e,E=t.objectWithoutProperties(e,c);return l.createElement(n.Box,t.objectSpread2({ref:m,role:"alert","aria-live":"polite",borderRadius:"full",width:"fitContent",background:"toast",display:"flex",padding:"large",alignItems:"center",className:s.default.toastContainer},E),b?l.createElement(u,null,b):null,l.createElement(n.Box,{flexGrow:1,maxWidth:"small"},f?l.createElement(a.Stack,{space:"small"},l.createElement(o.Text,{weight:"bold"},d," "),l.createElement(o.Text,null,f)):l.createElement(o.Text,null,d)),p?l.createElement(u,null,function(e){return null!=e&&"object"==typeof e&&"label"in e&&"onClick"in e&&"string"==typeof e.label&&"function"==typeof e.onClick}(p)?l.createElement(r.Button,{variant:"tertiary",size:"small",onClick:p.onClick},p.label):p):null,x?l.createElement(u,null,l.createElement(r.Button,{variant:"quaternary",size:"small",onClick:x,"aria-label":j,icon:l.createElement(i.CloseIcon,null)})):null)}));
+//# sourceMappingURL=static-toast.js.map

package/lib/new-components/toast/static-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-toast.js","sources":["../../../src/new-components/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n    label: string\n    onClick: () => void\n}\n\ntype StaticToastProps = {\n    /**\n     * The message shown in the toast.\n     */\n    message: NonNullable<React.ReactNode>\n\n    /**\n     * An optional extra description that complements the main message shown in the toast.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An icon to be shown in front of the message.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n     * does not appear.\n     */\n    onDismiss?: () => void\n\n    /**\n     * The label for the button that dismisses the toast.\n     */\n    dismissLabel?: string\n\n    /**\n     * What to render in the action slot. Usually a button or link.\n     *\n     * You can also pass an object that containst the action label, and a function that performs the\n     * action. This is used by the toast component to render a button for you.\n     *\n     * In general, you should prefer the action object most of the time. But it is possible to pass\n     * a React element instead, if you need more control over what to render. For instance, you may\n     * want to render a link instead of a button.\n     *\n     * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n     * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n     * are the ones that look better in the toast's dark background. And in all cases you should use\n     * size `small`.\n     */\n    action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n    { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n    ref,\n) {\n    return (\n        <Box\n            ref={ref}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            width=\"fitContent\"\n            background=\"toast\"\n            display=\"flex\"\n            padding=\"large\"\n            alignItems=\"center\"\n            className={styles.toastContainer}\n            {...props}\n        >\n            {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n            <Box flexGrow={1} maxWidth=\"small\">\n                {description ? (\n                    <Stack space=\"small\">\n                        <Text weight=\"bold\">{message} </Text>\n                        <Text>{description}</Text>\n                    </Stack>\n                ) : (\n                    <Text>{message}</Text>\n                )}\n            </Box>\n\n            {action ? (\n                <ToastContentSlot>\n                    {isActionObject(action) ? (\n                        <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n                            {action.label}\n                        </Button>\n                    ) : (\n                        action\n                    )}\n                </ToastContentSlot>\n            ) : null}\n\n            {onDismiss ? (\n                <ToastContentSlot>\n                    <Button\n                        variant=\"quaternary\"\n                        size=\"small\"\n                        onClick={onDismiss}\n                        aria-label={dismissLabel}\n                        icon={<CloseIcon />}\n                    />\n                </ToastContentSlot>\n            ) : null}\n        </Box>\n    )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n    return (\n        action != null &&\n        typeof action === 'object' &&\n        'label' in action &&\n        'onClick' in action &&\n        typeof action.label === 'string' &&\n        typeof action.onClick === 'function'\n    )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n    return (\n        <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            marginX=\"-xsmall\"\n            marginY=\"-medium\"\n            className={styles.slot}\n        >\n            {children}\n        </Box>\n    )\n}\n\nexport { StaticToast }\nexport type { StaticToastProps }\n"],"names":["ToastContentSlot","children","React","Box","display","alignItems","justifyContent","marginX","marginY","className","styles","slot","forwardRef","ref","message","description","icon","action","onDismiss","dismissLabel","props","role","borderRadius","width","background","padding","toastContainer","flexGrow","maxWidth","Stack","space","Text","weight","label","onClick","isActionObject","Button","variant","size","CloseIcon"],"mappings":"qdA+IA,SAASA,GAAiBC,SAAEA,IACxB,OACIC,gBAACC,OACGC,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,QAAQ,UACRC,QAAQ,UACRC,UAAWC,UAAOC,MAEjBV,uBA/EOC,EAAMU,YAA6C,WAEnEC,OADAC,QAAEA,EAAFC,YAAWA,EAAXC,KAAwBA,EAAxBC,OAA8BA,EAA9BC,UAAsCA,EAAtCC,aAAiDA,EAAe,WAAYC,iCAG5E,OACIlB,gBAACC,uBACGU,IAAKA,EACLQ,KAAK,oBACK,SACVC,aAAa,OACbC,MAAM,aACNC,WAAW,QACXpB,QAAQ,OACRqB,QAAQ,QACRpB,WAAW,SACXI,UAAWC,UAAOgB,gBACdN,GAEHJ,EAAOd,gBAACF,OAAkBgB,GAA2B,KAEtDd,gBAACC,OAAIwB,SAAU,EAAGC,SAAS,SACtBb,EACGb,gBAAC2B,SAAMC,MAAM,SACT5B,gBAAC6B,QAAKC,OAAO,QAAQlB,OACrBZ,gBAAC6B,YAAMhB,IAGXb,gBAAC6B,YAAMjB,IAIdG,EACGf,gBAACF,OA0BjB,SAAwBiB,GACpB,OACc,MAAVA,GACkB,iBAAXA,GACP,UAAWA,GACX,YAAaA,GACW,iBAAjBA,EAAOgB,OACY,mBAAnBhB,EAAOiB,QAhCDC,CAAelB,GACZf,gBAACkC,UAAOC,QAAQ,WAAWC,KAAK,QAAQJ,QAASjB,EAAOiB,SACnDjB,EAAOgB,OAGZhB,GAGR,KAEHC,EACGhB,gBAACF,OACGE,gBAACkC,UACGC,QAAQ,aACRC,KAAK,QACLJ,QAAShB,eACGC,EACZH,KAAMd,gBAACqC,qBAGf"}

package/lib/new-components/toast/toast-animation.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts
+ *
+ * MIT License
+ *
+ * Copyright (c) 2018 SEEK
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+declare const ANIMATION_TIMEOUT = 400;
+declare type ToastsAnimationToolkit = {
+    /**
+     * Used for gathering all the active stacked toast elements. Should be used by passing
+     * `ref={mappedRef(toastId)}` to the stacked toasts.
+     */
+    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void;
+    /**
+     * The stacked toasts view should use this callback when it needs to remove a toast, instead of
+     * removing it right away. The actual removal from the state (and consequently, from the DOM)
+     * should happen in the `onAnimationDone` instead.
+     */
+    animateRemove: (toastId: string, onAnimationDone: () => void) => void;
+};
+/**
+ * Provides the functionality of animating the stacked toasts when they appear and before they
+ * disappear.
+ *
+ * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from
+ * toast IDs to their top position. Then, on every single re-render, it compares the new DOM
+ * situation with the previously stored one in these mappings. With this information, it applies
+ * animations that smoothly transitions between both states.
+ */
+declare function useToastsAnimation(): ToastsAnimationToolkit;
+export { ANIMATION_TIMEOUT, useToastsAnimation };

package/lib/new-components/toast/toast-animation.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t({element:e,transforms:t,transition:r,done:n}){const o=setTimeout(()=>{null==n||n()},400);t.forEach(({property:t,from:r=""})=>{e.style.setProperty(t,r)}),e.style.setProperty("transition",""),e.addEventListener("transitionend",(function t(r){r.target===e&&(e.style.setProperty("transition",""),null==n||n(),e.removeEventListener("transitionend",t),clearTimeout(o))})),window.requestAnimationFrame(()=>{window.requestAnimationFrame(()=>{e.style.setProperty("transition",r),t.forEach(({property:t,to:r=""})=>{e.style.setProperty(t,r)})})})}exports.ANIMATION_TIMEOUT=400,exports.useToastsAnimation=function(){const r=e.useMemo(()=>new Map,[]),n=e.useMemo(()=>new Map,[]);e.useLayoutEffect(()=>{const e=[];Array.from(r.entries()).forEach(([t,o])=>{if(!o)return void r.delete(t);const s=n.get(t),{top:a,height:i}=o.getBoundingClientRect();"number"==typeof s&&s!==a?e.push({element:o,transition:"transform 0.3s ease, opacity 0.3s ease",transforms:[{property:"transform",from:"translateY("+(s-a)+"px)"}]}):"number"!=typeof s&&e.push({element:o,transition:"transform 0.3s ease, opacity 0.3s ease",transforms:[{property:"transform",from:"translateY("+i+"px)"},{property:"opacity",from:"0"}]}),n.set(t,o.getBoundingClientRect().top)}),e.forEach(({element:e,transforms:r,transition:n})=>{t({element:e,transforms:r,transition:n})})});const o=e.useCallback((function(e,n){const o=r.get(e);o&&t({element:o,transforms:[{property:"opacity",to:"0"}],transition:"opacity 0.2s ease",done:n})}),[r]);return{mappedRef:e.useCallback(e=>t=>{r.set(e,t)},[r]),animateRemove:o}};
+//# sourceMappingURL=toast-animation.js.map

package/lib/new-components/toast/toast-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-animation.js","sources":["../../../src/new-components/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","addEventListener","transitionEndHandler","event","target","removeEventListener","clearTimeout","window","requestAnimationFrame","to","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"2FA8CA,SAASA,GAAQC,QACbA,EADaC,WAEbA,EAFaC,WAGbA,EAHaC,KAIbA,IAOA,MAAMC,EAAkBC,WAAW,WAC/BF,GAAAA,KA9BkB,KAiCtBF,EAAWK,QAAQ,EAAGC,SAAAA,EAAUC,KAAAA,EAAO,OACnCR,EAAQS,MAAMC,YAAYH,EAAUC,KAExCR,EAAQS,MAAMC,YAAY,aAAc,IAYxCV,EAAQW,iBAAiB,iBAVzB,SAASC,EAAqBC,GACtBA,EAAMC,SAAWd,IAGrBA,EAAQS,MAAMC,YAAY,aAAc,UACxCP,GAAAA,IACAH,EAAQe,oBAAoB,gBAAiBH,GAC7CI,aAAaZ,OAMjBa,OAAOC,sBAAsB,KACzBD,OAAOC,sBAAsB,KACzBlB,EAAQS,MAAMC,YAAY,aAAcR,GACxCD,EAAWK,QAAQ,EAAGC,SAAAA,EAAUY,GAAAA,EAAK,OACjCnB,EAAQS,MAAMC,YAAYH,EAAUY,mCAvD1B,+BAqF1B,WACI,MAAMC,EAAOC,UAAQ,IAAM,IAAIC,IAAmC,IAC5DC,EAAYF,UAAQ,IAAM,IAAIC,IAAuB,IAE3DE,kBAAgB,KACZ,MAAMC,EAID,GAELC,MAAMlB,KAAKY,EAAKO,WAAWrB,QAAQ,EAAEsB,EAAI5B,MACrC,IAAKA,EAED,YADAoB,EAAKS,OAAOD,GAIhB,MAAME,EAAUP,EAAUQ,IAAIH,IACxBI,IAAEA,EAAFC,OAAOA,GAAWjC,EAAQkC,wBAET,iBAAZJ,GAAwBA,IAAYE,EAE3CP,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WA5GQ,yCA6GRD,WAAY,CAAC,CAAEM,SAAU,YAAaC,oBAAoBsB,EAAUE,aAE9C,iBAAZF,GAEdL,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WAnHQ,yCAoHRD,WAAY,CACR,CAAEM,SAAU,YAAaC,mBAAoByB,SAC7C,CAAE1B,SAAU,UAAWC,KAAM,QAKzCe,EAAUa,IAAIR,EAAI5B,EAAQkC,wBAAwBF,OAGtDP,EAAWnB,QAAQ,EAAGN,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,MACvCH,EAAQ,CAAEC,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,QAIvC,MAAMmC,EAAgBC,eAClB,SAAuBV,EAAYW,GAC/B,MAAMvC,EAAUoB,EAAKW,IAAIH,GACrB5B,GAEAD,EAAQ,CACJC,QAAAA,EACAC,WAAY,CAAC,CAAEM,SAAU,UAAWY,GAAI,MACxCjB,WA1II,oBA2IJC,KAAMoC,MAIlB,CAACnB,IAUL,MAAO,CAAEoB,UAPSF,cACbV,GAAgBa,IACbrB,EAAKgB,IAAIR,EAAIa,IAEjB,CAACrB,IAGeiB,cAAAA"}

package/lib/new-components/toast/toast.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={stackedToastsView:"_8e9f0a55",toastContainer:"_121b9429",slot:"_6a2a04c5"};
+//# sourceMappingURL=toast.module.css.js.map

package/lib/new-components/toast/toast.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/new-components/toast/toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/toast/use-toasts.d.ts

@@ -0,0 +1,128 @@
+import React from 'react';
+import { StaticToastProps } from './static-toast';
+import type { Space } from '../common-types';
+/**
+ * The props needed to fire up a new notification toast.
+ */
+declare type ToastProps = StaticToastProps & {
+    /**
+     * The number of seconds the toast is expected to be shown before it is dismissed automatically,
+     * or false to disable auto-dismiss.
+     *
+     * It defaults to whatever is the autoDismissDelay set in the ToastsProvider.
+     */
+    autoDismissDelay?: number | false;
+    /**
+     * The label for the button that dismisses the toast.
+     *
+     * It defaults to the value set in the ToastsProvider, but individual toasts can have a
+     * different value if needed.
+     */
+    dismissLabel?: string;
+    /**
+     * Whether to show the dismiss button or not.
+     *
+     * Use this value with care. If combined with disabling `autoDismissDelay`, it may leave you
+     * with toasts that the user won't be able to dismiss at will. It then is your responsibility to
+     * dismiss the toast by calling the function returned by `showToast`.
+     */
+    showDismissButton?: boolean;
+};
+declare type ShowToastAction = (props: ToastProps) => () => void;
+/**
+ * The props needed by the ToastsProvider component.
+ *
+ * @see ToastsProvider
+ */
+declare type ToastsProviderProps = {
+    /**
+     * The default label to apply to toast dismiss buttons.
+     *
+     * This is useful in environments that need locatization, so you do not need to pass the same
+     * translated label every time you trigger a toast.
+     *
+     * However, you can still apply a different label to a specific toast, by passing a different
+     * value when calling showToast.
+     *
+     * @default 'Close'
+     */
+    defaultDismissLabel?: string;
+    /**
+     * The default number of seconds after which the toast will be dismissed automatically.
+     *
+     * You can pass a different value to a specific toast when calling `showToast`. You can even
+     * pass `false` if you want a certain toast to never be dismissed automatically.
+     *
+     * @default 10 (seconds)
+     */
+    defaultAutoDismissDelay?: number;
+    /**
+     * The padding used to separate the toasts from the viewport borders.
+     *
+     * @default 'large'
+     */
+    padding?: Space;
+    /**
+     * The app wrapped by the provider.
+     */
+    children: NonNullable<React.ReactNode>;
+};
+/**
+ * Provides the state management and rendering of the toasts currently active.
+ *
+ * You need to render this near the top of your app components tree, in order to `useToasts`.
+ *
+ * @see useToasts
+ */
+declare function ToastsProvider({ children, padding, defaultAutoDismissDelay, defaultDismissLabel, }: ToastsProviderProps): JSX.Element;
+/**
+ * Provides a function `showToast` that shows a new toast every time you call it.
+ *
+ * ```jsx
+ * const showToast = useToasts()
+ *
+ * <button onClick={() => showToast({ message: 'Hello' })}>
+ *   Say hello
+ * </button>
+ * ```
+ *
+ * All toasts fired via this function are rendered in a global fixed location, and stacked one on
+ * top of the other.
+ *
+ * When called, `showToast` returns a function that dismisses the toast when called.
+ *
+ * @see ToastsProvider
+ */
+declare function useToasts(): ShowToastAction;
+/**
+ * Adds a toast to be rendered, stacked alongside any other currently active toasts.
+ *
+ * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.
+ * This component is provided for convenience to render toasts in the markup, but it has some
+ * peculiarities, which are discussed below.
+ *
+ * Internally, this calls `showToast`. It is provided for two reasons:
+ *
+ * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that
+ *    toasts rendered in this way will be removed from view when the context where it is rendered
+ *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either
+ *    by the user or after a delay. They'll still be animated on their way out, though.
+ * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and
+ *    `autoDismissDelay={false}` it provides a way to show "permanent" toasts that only go away when
+ *    the component ceases to be rendered).
+ *
+ * This is useful for cases when the consumer wants to control when a toast is visible, and to keep
+ * it visible based on an app-specific condition.
+ *
+ * Something important to note about this component is that it triggers the toast based on the props
+ * passed when first rendered, and it does not update the toast if these props change on subsequent
+ * renders. In this sense, this is an imperative component, more than a descriptive one. This is
+ * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a
+ * toast imperatively, and you loose control over it. It remains rendered according to the props you
+ * first passed.
+ *
+ * @see useToasts
+ */
+declare function Toast(props: ToastProps): null;
+export { Toast, ToastsProvider, useToasts };
+export type { ToastProps, ToastsProviderProps };

package/lib/new-components/toast/use-toasts.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),s=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../box/box.js"),a=require("../stack/stack.js"),r=require("./toast.module.css.js"),n=require("./static-toast.js"),i=require("ariakit/portal"),u=require("../common-helpers.js"),l=require("./toast-animation.js");const c=["toastId"],d=s.forwardRef((function({message:e,description:t,icon:o,action:a,autoDismissDelay:r,dismissLabel:i,showDismissButton:u=!0,toastId:l,onDismiss:c,onRemoveToast:d},m){const[f,p]=s.useState(Boolean(r)),b=s.useRef(),j=s.useCallback((function(){p(!0)}),[]),v=s.useCallback((function(){p(!1),clearTimeout(b.current),b.current=void 0}),[]);return s.useEffect((function(){if(f&&r)return b.current=window.setTimeout(()=>{d(l),null==c||c()},1e3*r),v}),[r,c,d,l,v,f]),s.createElement(n.StaticToast,{ref:m,message:e,description:t,icon:o,action:a,onDismiss:u?()=>{null==c||c(),d(l)}:void 0,dismissLabel:i,onMouseEnter:v,onMouseLeave:j})})),m=s.createContext(()=>()=>{});function f(){return s.useContext(m)}exports.Toast=function(e){const t=f(),o=s.useRef(e);return s.useEffect(()=>t(o.current),[t]),null},exports.ToastsProvider=function({children:e,padding:n="large",defaultAutoDismissDelay:f=10,defaultDismissLabel:p="Close"}){const[b,j]=s.useState([]),{mappedRef:v,animateRemove:x}=l.useToastsAnimation(),k=s.useCallback((function(e){x(e,()=>{j(t=>{const s=t.findIndex(t=>t.toastId===e);if(s<0)return t;const o=[...t];return o.splice(s,1),o})})}),[x]),D=s.useCallback((function(e){const s=u.generateElementId("toast"),o=t.objectSpread2(t.objectSpread2({autoDismissDelay:f,dismissLabel:p},e),{},{toastId:s});return j(e=>[...e,o]),()=>k(s)}),[f,p,k]);return s.createElement(m.Provider,{value:D},e,s.createElement(i.Portal,null,0===b.length?null:s.createElement(o.Box,{className:r.default.stackedToastsView,position:"fixed",width:"full",paddingX:n,paddingBottom:n},s.createElement(a.Stack,{space:"medium"},b.map(e=>{let{toastId:o}=e,a=t.objectWithoutProperties(e,c);return s.createElement(d,t.objectSpread2({key:o,ref:v(o),toastId:o,onRemoveToast:k},a))})))))},exports.useToasts=f;
+//# sourceMappingURL=use-toasts.js.map

package/lib/new-components/toast/use-toasts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toasts.js","sources":["../../../src/new-components/toast/use-toasts.tsx"],"sourcesContent":["import React from 'react'\nimport { Portal } from 'ariakit/portal'\n\nimport { generateElementId } from '../common-helpers'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { StaticToast, StaticToastProps } from './static-toast'\n\nimport styles from './toast.module.css'\n\nimport type { Space } from '../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    React.useEffect(\n        function setupAutoDismiss() {\n            if (!timeoutRunning || !autoDismissDelay) return\n            timeoutRef.current = window.setTimeout(() => {\n                onRemoveToast(toastId)\n                onDismiss?.()\n            }, autoDismissDelay * 1000)\n            return stopTimeout\n        },\n        [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning],\n    )\n\n    return (\n        <StaticToast\n            ref={ref}\n            message={message}\n            description={description}\n            icon={icon}\n            action={action}\n            onDismiss={\n                showDismissButton\n                    ? () => {\n                          onDismiss?.()\n                          onRemoveToast(toastId)\n                      }\n                    : undefined\n            }\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/**\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}: 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}\n                        position=\"fixed\"\n                        width=\"full\"\n                        paddingX={padding}\n                        paddingBottom={padding}\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","useEffect","window","setTimeout","StaticToast","onMouseEnter","onMouseLeave","ToastsContext","createContext","useToasts","useContext","props","showToast","propsRef","children","padding","defaultAutoDismissDelay","defaultDismissLabel","toasts","setToasts","mappedRef","animateRemove","useToastsAnimation","removeToast","list","index","findIndex","n","copy","splice","generateElementId","newToast","Provider","value","Portal","length","Box","className","styles","stackedToastsView","position","width","paddingX","paddingBottom","Stack","space","map","_ref","key"],"mappings":"ybAsDMA,EAAgBC,EAAMC,YAA+C,UACvEC,QACIA,EADJC,YAEIA,EAFJC,KAGIA,EAHJC,OAIIA,EAJJC,iBAKIA,EALJC,aAMIA,EANJC,kBAOIA,GAAoB,EAPxBC,QAQIA,EARJC,UASIA,EATJC,cAUIA,GAEJC,GAEA,MAAOC,EAAgBC,GAAqBd,EAAMe,SAASC,QAAQV,IAC7DW,EAAajB,EAAMkB,SAEnBC,EAAenB,EAAMoB,aAAY,WACnCN,GAAkB,KACnB,IAEGO,EAAcrB,EAAMoB,aAAY,WAClCN,GAAkB,GAClBQ,aAAaL,EAAWM,SACxBN,EAAWM,aAAUC,IACtB,IAcH,OAZAxB,EAAMyB,WACF,WACI,GAAKZ,GAAmBP,EAKxB,OAJAW,EAAWM,QAAUG,OAAOC,WAAW,KACnChB,EAAcF,SACdC,GAAAA,KACkB,IAAnBJ,GACIe,IAEX,CAACf,EAAkBI,EAAWC,EAAeF,EAASY,EAAaR,IAInEb,gBAAC4B,eACGhB,IAAKA,EACLV,QAASA,EACTC,YAAaA,EACbC,KAAMA,EACNC,OAAQA,EACRK,UACIF,EACM,WACIE,GAAAA,IACAC,EAAcF,SAElBe,EAEVjB,aAAcA,EAEdsB,aAAcR,EACdS,aAAcX,OAapBY,EAAgB/B,EAAMgC,cAA+B,IAAM,QA0IjE,SAASC,IACL,OAAOjC,EAAMkC,WAAWH,iBAgC5B,SAAeI,GACX,MAAMC,EAAYH,IACZI,EAAWrC,EAAMkB,OAAmBiB,GAK1C,OAJAnC,EAAMyB,UAAU,IACSW,EAAUC,EAASd,SAEzC,CAACa,IACG,6BA/HX,UAAwBE,SACpBA,EADoBC,QAEpBA,EAAU,QAFUC,wBAGpBA,EAA0B,uBAC1BC,EAAsB,UAEtB,MAAOC,EAAQC,GAAa3C,EAAMe,SAAqB,KACjD6B,UAAEA,EAAFC,cAAaA,GAAkBC,uBAE/BC,EAAc/C,EAAMoB,aACtB,SAAuBX,GACnBoC,EAAcpC,EAAS,KACnBkC,EAAWK,IACP,MAAMC,EAAQD,EAAKE,UAAWC,GAAMA,EAAE1C,UAAYA,GAClD,GAAIwC,EAAQ,EAAG,OAAOD,EACtB,MAAMI,EAAO,IAAIJ,GAEjB,OADAI,EAAKC,OAAOJ,EAAO,GACZG,QAInB,CAACP,IAGCT,EAAYpC,EAAMoB,aACpB,SAAmBe,GACf,MAAM1B,EAAU6C,oBAAkB,SAC5BC,mCACFjD,iBAAkBkC,EAClBjC,aAAckC,GACXN,OACH1B,QAAAA,IAGJ,OADAkC,EAAWK,GAAS,IAAIA,EAAMO,IACvB,IAAMR,EAAYtC,KAE7B,CAAC+B,EAAyBC,EAAqBM,IAGnD,OACI/C,gBAAC+B,EAAcyB,UAASC,MAAOrB,GAC1BE,EACDtC,gBAAC0D,cACsB,IAAlBhB,EAAOiB,OAAe,KACnB3D,gBAAC4D,OACGC,UAAWC,UAAOC,kBAClBC,SAAS,QACTC,MAAM,OACNC,SAAU3B,EACV4B,cAAe5B,GAEfvC,gBAACoE,SAAMC,MAAM,UACR3B,EAAO4B,IAAIC,IAAA,IAAC9D,QAAEA,KAAY0B,iCAAf,OACRnC,gBAACD,mBACGyE,IAAK/D,EACLG,IAAKgC,EAAUnC,GACfA,QAASA,EACTE,cAAeoC,GACXZ"}

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
-    "version": "15.3.0",
+    "version": "16.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",
@@ -21,8 +21,8 @@
         "styles"
     ],
     "engines": {
-        "node": "^16.0.0",
-        "npm": "^8.3.0"
+        "node": "^16.0.0 || ^18.0.0",
+        "npm": "^8.3.0 || ^9.0.0"
     },
     "scripts": {
         "postinstall": "patch-package",