@doist/reactist 14.1.0 → 15.1.0

package/es/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 { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\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 contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../src/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","Modal","isOpen","width","exceptionallySetClassName","autoFocus","children","props","setVisible","visible","state","useDialogState","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","Portal","Box","className","classNames","styles","overlay","onClick","ref","FocusLock","whiteList","returnFocus","Dialog","as","hideOnEscape","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","hideOnInteractOutside","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}

package/es/new-components/modal/modal.module.css.js

@@ -1,4 +1,4 @@
-var modules_8f59d13b = {"reach-portal":"_37bef8d8","fadein":"_77f9687f","fitContent":"bcc4e0a5","container":"d4832c2d","full":"b0c3b021","large":"_573d6aa5","medium":"_8550d996","small":"_43bb18f5","xlarge":"_57b4159d","overlay":"cb63f300","expand":"e741893e","buttonContainer":"bb1ce281","headerContent":"c5ef989c"};
+var modules_8f59d13b = {"overlay":"_868392ae","fadein":"_63d7ee15","fitContent":"b8548bf2","container":"_31956461","full":"_1007df83","large":"_10c275aa","medium":"_0ac526b4","small":"_30f38fdb","xlarge":"_54868e8b","expand":"c0bc68bc","buttonContainer":"_6527332a","headerContent":"_4750dc1b"};
 
 export default modules_8f59d13b;
 //# sourceMappingURL=modal.module.css.js.map

package/es/new-components/text-area/text-area.js

@@ -4,7 +4,7 @@ import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';
 import styles from './text-area.module.css.js';
 
-const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth"];
+const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby"];
 
 function TextArea(_ref) {
   let {
@@ -16,7 +16,9 @@ function TextArea(_ref) {
     hint,
     message,
     tone,
-    maxWidth
+    maxWidth,
+    hidden,
+    'aria-describedby': ariaDescribedBy
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -29,7 +31,9 @@ function TextArea(_ref) {
     hint: hint,
     message: message,
     tone: tone,
-    className: [styles.container, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null],
+    hidden: hidden,
+    "aria-describedby": ariaDescribedBy,
+    className: [styles.textAreaContainer, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null],
     maxWidth: maxWidth
   }, extraProps => /*#__PURE__*/createElement(Box, {
     width: "full",

package/es/new-components/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\n        rows?: number\n    }\n\nfunction TextArea({\n    variant = 'default',\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            className={[\n                styles.container,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\" display=\"flex\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","props","React","BaseField","className","styles","container","error","bordered","extraProps","Box","width","display"],"mappings":";;;;;;;;AAUA,SAASA,QAAT;MAAkB;IACdC,OAAO,GAAG,SADI;IAEdC,EAFc;IAGdC,KAHc;IAIdC,cAJc;IAKdC,cALc;IAMdC,IANc;IAOdC,OAPc;IAQdC,IARc;IASdC;;MACGC;;EAEH,oBACIC,aAAA,CAACC,SAAD;IACIX,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNK,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEPP,IAAI,KAAK,OAAT,GAAmBM,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPf,OAAO,KAAK,UAAZ,GAAyBa,MAAM,CAACG,QAAhC,GAA2C,IAHpC;IAKXR,QAAQ,EAAEA;GAdd,EAgBMS,UAAD,iBACGP,aAAA,CAACQ,GAAD;IAAKC,KAAK,EAAC;IAAOC,OAAO,EAAC;GAA1B,eACIV,aAAA,WAAA,oCAAcD,KAAd,GAAyBQ,UAAzB,EADJ,CAjBR,CADJ;AAwBH;;;;"}
+{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\n        rows?: number\n    }\n\nfunction TextArea({\n    variant = 'default',\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone,\n    maxWidth,\n    hidden,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\" display=\"flex\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","ariaDescribedBy","props","React","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display"],"mappings":";;;;;;;;AAUA,SAASA,QAAT;MAAkB;IACdC,OAAO,GAAG,SADI;IAEdC,EAFc;IAGdC,KAHc;IAIdC,cAJc;IAKdC,cALc;IAMdC,IANc;IAOdC,OAPc;IAQdC,IARc;IASdC,QATc;IAUdC,MAVc;IAWd,oBAAoBC;;MACjBC;;EAEH,oBACIC,aAAA,CAACC,SAAD;IACIb,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,MAAM,EAAEA;wBACUC;IAClBI,SAAS,EAAE,CACPC,MAAM,CAACC,iBADA,EAEPT,IAAI,KAAK,OAAT,GAAmBQ,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPjB,OAAO,KAAK,UAAZ,GAAyBe,MAAM,CAACG,QAAhC,GAA2C,IAHpC;IAKXV,QAAQ,EAAEA;GAhBd,EAkBMW,UAAD,iBACGP,aAAA,CAACQ,GAAD;IAAKC,KAAK,EAAC;IAAOC,OAAO,EAAC;GAA1B,eACIV,aAAA,WAAA,oCAAcD,KAAd,GAAyBQ,UAAzB,EADJ,CAnBR,CADJ;AA0BH;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_2728c236 = {"container":"d6ec37c5","bordered":"a60d6043","error":"bef49c61"};
+var modules_2728c236 = {"textAreaContainer":"_61447829","bordered":"_76f4ad88","error":"_4df3452b"};
 
 export default modules_2728c236;
 //# sourceMappingURL=text-area.module.css.js.map

package/lib/components/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),l=require("../../utils/polymorphism.js"),r=require("ariakit/menu"),a=require("ariakit/portal");const c=["children","onItemSelect"],s=["exceptionallySetClassName"],u=["exceptionallySetClassName"],i=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],p=["label","children","exceptionallySetClassName"],m=n.createContext({});function d(e){let{children:o,onItemSelect:l}=e,a=t.objectWithoutProperties(e,c);const s=r.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4},a)),u=n.useCallback((function(e){l&&l(e)}),[l]),i=n.useMemo(()=>({state:s,handleItemSelect:u}),[s,u]);return n.createElement(m.Provider,{value:i},o)}const b=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:a}=e,c=t.objectWithoutProperties(e,s);const{state:u}=n.useContext(m);return n.createElement(r.MenuButton,t.objectSpread2(t.objectSpread2({},c),{},{state:u,ref:l,className:o("reactist_menubutton",a)}))})),S=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,u);const{state:i}=n.useContext(m);return i.visible?n.createElement(a.Portal,{preserveTabOrder:!0},n.createElement(r.Menu,t.objectSpread2(t.objectSpread2({},s),{},{state:i,ref:l,className:o("reactist_menulist",c)}))):null})),h=l.polymorphicComponent((function(e,o){let{value:l,children:a,onSelect:c,hideOnSelect:s=!0,onClick:u,exceptionallySetClassName:p,as:d="button"}=e,b=t.objectWithoutProperties(e,i);const{handleItemSelect:S,state:h}=n.useContext(m),{hide:C}=h,f=n.useCallback((function(e){null==u||u(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&s;S(l),t&&C()}),[c,u,S,s,C,l]);return n.createElement(r.MenuItem,t.objectSpread2(t.objectSpread2({},b),{},{as:d,state:h,ref:o,onClick:f,className:p,hideOnClick:!1}),a)})),C=n.forwardRef((function({children:e,onItemSelect:l},a){const{handleItemSelect:c,state:s}=n.useContext(m),{hide:u}=s,i=n.useCallback((function(e){l&&l(e),c(e),u()}),[u,c,l]),[p,b]=n.Children.toArray(e),S=r.useMenuItem({state:s});return n.createElement(d,{onItemSelect:i},n.cloneElement(p,t.objectSpread2(t.objectSpread2({},S),{},{className:o(S.className,"reactist_submenu_button"),ref:a})),b)})),f=l.polymorphicComponent((function(e,o){let{label:l,children:a,exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,p);const{state:u}=n.useContext(m);return n.createElement(r.MenuGroup,t.objectSpread2(t.objectSpread2({},s),{},{ref:o,state:u,className:c}),l?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},l):null,a)}));exports.Menu=d,exports.MenuButton=b,exports.MenuGroup=f,exports.MenuItem=h,exports.MenuList=S,exports.SubMenu=C;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),r=require("../../utils/polymorphism.js"),l=e(require("react-focus-lock")),a=require("ariakit/portal"),c=require("ariakit/menu");const s=["children","onItemSelect"],u=["exceptionallySetClassName"],i=["exceptionallySetClassName"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],m=["label","children","exceptionallySetClassName"],d=n.createContext({});function b(e){let{children:o,onItemSelect:r}=e,l=t.objectWithoutProperties(e,s);const a=c.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4},l)),u=n.useCallback((function(e){r&&r(e)}),[r]),i=n.useMemo(()=>({state:a,handleItemSelect:u}),[a,u]);return n.createElement(d.Provider,{value:i},o)}const S=r.polymorphicComponent((function(e,r){let{exceptionallySetClassName:l}=e,a=t.objectWithoutProperties(e,u);const{state:s}=n.useContext(d);return n.createElement(c.MenuButton,t.objectSpread2(t.objectSpread2({},a),{},{state:s,ref:r,className:o("reactist_menubutton",l)}))})),h=r.polymorphicComponent((function(e,r){let{exceptionallySetClassName:s}=e,u=t.objectWithoutProperties(e,i);const{state:p}=n.useContext(d);return p.visible?n.createElement(a.Portal,{preserveTabOrder:!0},n.createElement(l,{returnFocus:!0},n.createElement(c.Menu,t.objectSpread2(t.objectSpread2({},u),{},{state:p,ref:r,className:o("reactist_menulist",s)})))):null})),C=r.polymorphicComponent((function(e,o){let{value:r,children:l,onSelect:a,hideOnSelect:s=!0,onClick:u,exceptionallySetClassName:i,as:m="button"}=e,b=t.objectWithoutProperties(e,p);const{handleItemSelect:S,state:h}=n.useContext(d),{hide:C}=h,f=n.useCallback((function(e){null==u||u(e);const t=!1!==(a&&!e.defaultPrevented?a():void 0)&&s;S(r),t&&C()}),[a,u,S,s,C,r]);return n.createElement(c.MenuItem,t.objectSpread2(t.objectSpread2({},b),{},{as:m,state:h,ref:o,onClick:f,className:i,hideOnClick:!1}),l)})),f=n.forwardRef((function({children:e,onItemSelect:r},l){const{handleItemSelect:a,state:s}=n.useContext(d),{hide:u}=s,i=n.useCallback((function(e){r&&r(e),a(e),u()}),[u,a,r]),[p,m]=n.Children.toArray(e),S=c.useMenuItem({state:s});return n.createElement(b,{onItemSelect:i},n.cloneElement(p,t.objectSpread2(t.objectSpread2({},S),{},{className:o(S.className,"reactist_submenu_button"),ref:l})),m)})),x=r.polymorphicComponent((function(e,o){let{label:r,children:l,exceptionallySetClassName:a}=e,s=t.objectWithoutProperties(e,m);const{state:u}=n.useContext(d);return n.createElement(c.MenuGroup,t.objectSpread2(t.objectSpread2({},s),{},{ref:o,state:u,className:a}),r?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},r):null,l)}));exports.Menu=b,exports.MenuButton=S,exports.MenuGroup=x,exports.MenuItem=C,exports.MenuList=h,exports.SubMenu=f;
 //# sourceMappingURL=menu.js.map

package/lib/components/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\nimport { useMenuItem } from 'ariakit/menu'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it. Note that if you are relying on the `[role='menu']`\n * attribute to style the menu list, it is applied a `menubar` role instead in Safari.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Ariakit.useMenuState({ focusLoop: true, gutter: 8, shift: 4, ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n\n    return state.visible ? (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    const menuProps = useMenuItem({ state })\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            {React.cloneElement(button as React.ReactElement, {\n                ...menuProps,\n                className: classNames(menuProps.className, 'reactist_submenu_button'),\n                ref,\n            })}\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","MenuList","visible","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","as","hide","handleClick","event","shouldClose","defaultPrevented","undefined","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","menuProps","useMenuItem","MenuGroup","label","role"],"mappings":"8kBA2BMA,EAAcC,gBAMhB,IA6BJ,SAASC,SAAKC,SAAEA,EAAFC,aAAYA,KAAiBC,iCACvC,MAAMC,EAAQC,gCAAuBC,WAAW,EAAMC,OAAQ,EAAGC,MAAO,GAAML,IAExEM,EAAmBV,eACrB,SAA0BW,GAClBR,GAAcA,EAAaQ,KAEnC,CAACR,IAGCQ,EAA0BX,UAC5B,MACIK,MAAAA,EACAK,iBAAAA,IAEJ,CAACL,EAAOK,IAGZ,OAAOV,gBAACD,EAAYa,UAASD,MAAOA,GAAQT,SAY1CW,EAAaC,wBAAgD,WAE/DC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,gDACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAcnDG,EAAWL,wBAA2C,WAExDC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GAEnC,OAAOM,EAAMe,QACTpB,gBAACqB,UAAOC,qBACJtB,gBAACM,0CACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,OAGnD,QA8DFO,EAAWT,wBAA8C,WAW3DC,OAVAJ,MACIA,EADJT,SAEIA,EAFJsB,SAGIA,EAHJC,aAIIA,GAAe,EAJnBC,QAKIA,EALJV,0BAMIA,EANJW,GAOIA,EAAK,YACFvB,iCAIP,MAAMM,iBAAEA,EAAFL,MAAoBA,GAAUL,aAAiBD,IAC/C6B,KAAEA,GAASvB,EAEXwB,EAAc7B,eAChB,SAAqB8B,SACjBJ,GAAAA,EAAUI,GACV,MAEMC,GAAiC,KADnCP,IAAaM,EAAME,iBAAmBR,SAAaS,IACPR,EAChDf,EAAiBC,GACboB,GAAaH,MAErB,CAACJ,EAAUE,EAAShB,EAAkBe,EAAcG,EAAMjB,IAG9D,OACIX,gBAACM,8CACOF,OACJuB,GAAIA,EACJtB,MAAOA,EACPU,IAAKA,EACLW,QAASG,EACTZ,UAAWD,EACXkB,aAAa,IAEZhC,MAgCPiC,EAAUnC,cAAkD,UAC9DE,SAAEA,EAAFC,aAAYA,GACZY,GAEA,MAAQL,iBAAkB0B,EAApB/B,MAA0CA,GAAUL,aAAiBD,IACnE6B,KAAMS,GAAmBhC,EAE3BiC,EAAsBtC,eACxB,SAA6BW,GACrBR,GAAcA,EAAaQ,GAC/ByB,EAAqBzB,GACrB0B,MAEJ,CAACA,EAAgBD,EAAsBjC,KAGpCoC,EAAQC,GAAQxC,WAAeyC,QAAQvC,GAExCwC,EAAYC,cAAY,CAAEtC,MAAAA,IAEhC,OACIL,gBAACC,GAAKE,aAAcmC,GACftC,eAAmBuC,qCACbG,OACHzB,UAAWC,EAAWwB,EAAUzB,UAAW,2BAC3CF,IAAAA,KAEHyB,MAsBPI,EAAY9B,wBAA4C,WAE1DC,OADA8B,MAAEA,EAAF3C,SAASA,EAATc,0BAAmBA,KAA8BZ,iCAGjD,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,+CAAsBF,OAAOW,IAAKA,EAAKV,MAAOA,EAAOY,UAAWD,IAC5D6B,EACG7C,uBAAK8C,KAAK,eAAe7B,UAAU,6BAC9B4B,GAEL,KACH3C"}
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\n\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\nimport { useMenuItem } from 'ariakit/menu'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it. Note that if you are relying on the `[role='menu']`\n * attribute to style the menu list, it is applied a `menubar` role instead in Safari.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Ariakit.useMenuState({ focusLoop: true, gutter: 8, shift: 4, ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n\n    return state.visible ? (\n        <Portal preserveTabOrder>\n            <FocusLock returnFocus>\n                <Ariakit.Menu\n                    {...props}\n                    state={state}\n                    ref={ref}\n                    className={classNames('reactist_menulist', exceptionallySetClassName)}\n                />\n            </FocusLock>\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    const menuProps = useMenuItem({ state })\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            {React.cloneElement(button as React.ReactElement, {\n                ...menuProps,\n                className: classNames(menuProps.className, 'reactist_submenu_button'),\n                ref,\n            })}\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","MenuList","visible","Portal","preserveTabOrder","FocusLock","returnFocus","MenuItem","onSelect","hideOnSelect","onClick","as","hide","handleClick","event","shouldClose","defaultPrevented","undefined","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","menuProps","useMenuItem","MenuGroup","label","role"],"mappings":"+mBA6BMA,EAAcC,gBAMhB,IA6BJ,SAASC,SAAKC,SAAEA,EAAFC,aAAYA,KAAiBC,iCACvC,MAAMC,EAAQC,gCAAuBC,WAAW,EAAMC,OAAQ,EAAGC,MAAO,GAAML,IAExEM,EAAmBV,eACrB,SAA0BW,GAClBR,GAAcA,EAAaQ,KAEnC,CAACR,IAGCQ,EAA0BX,UAC5B,MACIK,MAAAA,EACAK,iBAAAA,IAEJ,CAACL,EAAOK,IAGZ,OAAOV,gBAACD,EAAYa,UAASD,MAAOA,GAAQT,SAY1CW,EAAaC,wBAAgD,WAE/DC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,gDACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAcnDG,EAAWL,wBAA2C,WAExDC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GAEnC,OAAOM,EAAMe,QACTpB,gBAACqB,UAAOC,qBACJtB,gBAACuB,GAAUC,gBACPxB,gBAACM,0CACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,QAIvD,QA8DFS,EAAWX,wBAA8C,WAW3DC,OAVAJ,MACIA,EADJT,SAEIA,EAFJwB,SAGIA,EAHJC,aAIIA,GAAe,EAJnBC,QAKIA,EALJZ,0BAMIA,EANJa,GAOIA,EAAK,YACFzB,iCAIP,MAAMM,iBAAEA,EAAFL,MAAoBA,GAAUL,aAAiBD,IAC/C+B,KAAEA,GAASzB,EAEX0B,EAAc/B,eAChB,SAAqBgC,SACjBJ,GAAAA,EAAUI,GACV,MAEMC,GAAiC,KADnCP,IAAaM,EAAME,iBAAmBR,SAAaS,IACPR,EAChDjB,EAAiBC,GACbsB,GAAaH,MAErB,CAACJ,EAAUE,EAASlB,EAAkBiB,EAAcG,EAAMnB,IAG9D,OACIX,gBAACM,8CACOF,OACJyB,GAAIA,EACJxB,MAAOA,EACPU,IAAKA,EACLa,QAASG,EACTd,UAAWD,EACXoB,aAAa,IAEZlC,MAgCPmC,EAAUrC,cAAkD,UAC9DE,SAAEA,EAAFC,aAAYA,GACZY,GAEA,MAAQL,iBAAkB4B,EAApBjC,MAA0CA,GAAUL,aAAiBD,IACnE+B,KAAMS,GAAmBlC,EAE3BmC,EAAsBxC,eACxB,SAA6BW,GACrBR,GAAcA,EAAaQ,GAC/B2B,EAAqB3B,GACrB4B,MAEJ,CAACA,EAAgBD,EAAsBnC,KAGpCsC,EAAQC,GAAQ1C,WAAe2C,QAAQzC,GAExC0C,EAAYC,cAAY,CAAExC,MAAAA,IAEhC,OACIL,gBAACC,GAAKE,aAAcqC,GACfxC,eAAmByC,qCACbG,OACH3B,UAAWC,EAAW0B,EAAU3B,UAAW,2BAC3CF,IAAAA,KAEH2B,MAsBPI,EAAYhC,wBAA4C,WAE1DC,OADAgC,MAAEA,EAAF7C,SAASA,EAATc,0BAAmBA,KAA8BZ,iCAGjD,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,+CAAsBF,OAAOW,IAAKA,EAAKV,MAAOA,EAAOY,UAAWD,IAC5D+B,EACG/C,uBAAKgD,KAAK,eAAe/B,UAAU,6BAC9B8B,GAEL,KACH7C"}

package/lib/index.d.ts

@@ -20,9 +20,9 @@ export * from './new-components/select-field';
 export * from './new-components/switch-field';
 export * from './new-components/text-area';
 export * from './new-components/text-field';
-export * from './new-components/tabs';
-export * from './new-components/modal';
 export * from './new-components/avatar';
+export * from './new-components/modal';
+export * from './new-components/tabs';
 export * from './hooks/use-previous';
 export { default as ColorPicker, COLORS } from './components/color-picker';
 export { default as KeyboardShortcut } from './components/keyboard-shortcut';
@@ -37,3 +37,4 @@ export { default as DeprecatedButton } from './components/deprecated-button';
 export { default as DeprecatedDropdown } from './components/deprecated-dropdown';
 export { default as DeprecatedInput } from './components/deprecated-input';
 export { default as DeprecatedSelect } from './components/deprecated-select';
+export * from './new-components/deprecated-modal';

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),n=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./components/tooltip/tooltip.js"),d=require("./new-components/button/button.js"),u=require("./new-components/alert/alert.js"),a=require("./new-components/loading/loading.js"),l=require("./new-components/notice/notice.js"),c=require("./new-components/heading/heading.js"),x=require("./new-components/text/text.js"),m=require("./new-components/button-link/button-link.js"),j=require("./new-components/text-link/text-link.js"),q=require("./new-components/checkbox-field/checkbox-field.js"),w=require("./new-components/password-field/password-field.js"),b=require("./new-components/select-field/select-field.js"),k=require("./new-components/switch-field/switch-field.js"),M=require("./new-components/text-area/text-area.js"),f=require("./new-components/text-field/text-field.js"),T=require("./hooks/use-previous/use-previous.js"),S=require("./new-components/tabs/tabs.js"),h=require("./new-components/modal/modal.js"),v=require("./new-components/avatar/avatar.js"),B=require("./components/deprecated-button/index.js"),y=require("./components/deprecated-dropdown/index.js"),P=require("./components/color-picker/color-picker.js"),C=require("./components/color-picker/index.js"),F=require("./components/keyboard-shortcut/index.js"),L=require("./components/key-capturer/key-capturer.js"),g=require("./components/key-capturer/index.js"),A=require("./components/progress-bar/index.js"),D=require("./components/time/index.js"),H=require("./components/notification/notification.js"),O=require("./components/menu/menu.js"),I=require("./components/deprecated-input/index.js"),E=require("./components/deprecated-select/index.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=n.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Tooltip=p.Tooltip,exports.Button=d.Button,exports.Alert=u.Alert,exports.Loading=a.Loading,exports.Notice=l.Notice,exports.Heading=c.Heading,exports.Text=x.Text,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=b.SelectField,exports.SwitchField=k.SwitchField,exports.TextArea=M.TextArea,exports.TextField=f.TextField,exports.usePrevious=T.usePrevious,exports.Tab=S.Tab,exports.TabAwareSlot=S.TabAwareSlot,exports.TabList=S.TabList,exports.TabPanel=S.TabPanel,exports.Tabs=S.Tabs,exports.Modal=h.Modal,exports.ModalActions=h.ModalActions,exports.ModalBody=h.ModalBody,exports.ModalCloseButton=h.ModalCloseButton,exports.ModalFooter=h.ModalFooter,exports.ModalHeader=h.ModalHeader,exports.Avatar=v.Avatar,exports.DeprecatedButton=B.default,exports.DeprecatedDropdown=y.default,exports.COLORS=P.COLORS,exports.ColorPicker=C.default,exports.KeyboardShortcut=F.default,exports.SUPPORTED_KEYS=L.SUPPORTED_KEYS,exports.KeyCapturer=g.default,exports.ProgressBar=A.default,exports.Time=D.default,exports.Notification=H.Notification,exports.Menu=O.Menu,exports.MenuButton=O.MenuButton,exports.MenuGroup=O.MenuGroup,exports.MenuItem=O.MenuItem,exports.MenuList=O.MenuList,exports.SubMenu=O.SubMenu,exports.DeprecatedInput=I.default,exports.DeprecatedSelect=E.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),n=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./components/tooltip/tooltip.js"),d=require("./new-components/button/button.js"),a=require("./new-components/alert/alert.js"),u=require("./new-components/loading/loading.js"),l=require("./new-components/notice/notice.js"),c=require("./new-components/heading/heading.js"),x=require("./new-components/text/text.js"),m=require("./new-components/button-link/button-link.js"),j=require("./new-components/text-link/text-link.js"),q=require("./new-components/checkbox-field/checkbox-field.js"),w=require("./new-components/password-field/password-field.js"),M=require("./new-components/select-field/select-field.js"),b=require("./new-components/switch-field/switch-field.js"),k=require("./new-components/text-area/text-area.js"),f=require("./new-components/text-field/text-field.js"),T=require("./new-components/avatar/avatar.js"),D=require("./new-components/modal/modal.js"),B=require("./hooks/use-previous/use-previous.js"),S=require("./new-components/tabs/tabs.js"),h=require("./components/deprecated-button/index.js"),v=require("./components/deprecated-dropdown/index.js"),y=require("./components/color-picker/color-picker.js"),C=require("./components/color-picker/index.js"),F=require("./components/keyboard-shortcut/index.js"),P=require("./components/key-capturer/key-capturer.js"),A=require("./components/key-capturer/index.js"),L=require("./components/progress-bar/index.js"),g=require("./components/time/index.js"),H=require("./components/notification/notification.js"),O=require("./components/menu/menu.js"),I=require("./components/deprecated-input/index.js"),E=require("./components/deprecated-select/index.js"),K=require("./new-components/deprecated-modal/modal.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=n.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Tooltip=p.Tooltip,exports.Button=d.Button,exports.Alert=a.Alert,exports.Loading=u.Loading,exports.Notice=l.Notice,exports.Heading=c.Heading,exports.Text=x.Text,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=M.SelectField,exports.SwitchField=b.SwitchField,exports.TextArea=k.TextArea,exports.TextField=f.TextField,exports.Avatar=T.Avatar,exports.Modal=D.Modal,exports.ModalActions=D.ModalActions,exports.ModalBody=D.ModalBody,exports.ModalCloseButton=D.ModalCloseButton,exports.ModalFooter=D.ModalFooter,exports.ModalHeader=D.ModalHeader,exports.usePrevious=B.usePrevious,exports.Tab=S.Tab,exports.TabAwareSlot=S.TabAwareSlot,exports.TabList=S.TabList,exports.TabPanel=S.TabPanel,exports.Tabs=S.Tabs,exports.DeprecatedButton=h.default,exports.DeprecatedDropdown=v.default,exports.COLORS=y.COLORS,exports.ColorPicker=C.default,exports.KeyboardShortcut=F.default,exports.SUPPORTED_KEYS=P.SUPPORTED_KEYS,exports.KeyCapturer=A.default,exports.ProgressBar=L.default,exports.Time=g.default,exports.Notification=H.Notification,exports.Menu=O.Menu,exports.MenuButton=O.MenuButton,exports.MenuGroup=O.MenuGroup,exports.MenuItem=O.MenuItem,exports.MenuList=O.MenuList,exports.SubMenu=O.SubMenu,exports.DeprecatedInput=I.default,exports.DeprecatedSelect=E.default,exports.DeprecatedModal=K.DeprecatedModal,exports.DeprecatedModalActions=K.DeprecatedModalActions,exports.DeprecatedModalBody=K.DeprecatedModalBody,exports.DeprecatedModalCloseButton=K.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=K.DeprecatedModalFooter,exports.DeprecatedModalHeader=K.DeprecatedModalHeader;
 //# sourceMappingURL=index.js.map

package/lib/new-components/base-field/base-field.d.ts

@@ -37,10 +37,15 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
     /**
      * The main label for this field element.
      *
+     * This prop is not optional. Consumers of field components must be explicit about not
+     * wanting a label by passing `label=""` or `label={null}`. In those situations, consumers
+     * should make sure that fields are properly labelled semantically by other means (e.g using
+     * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).
+     *
      * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
      *
-     * @see secondaryLabel
-     * @see auxiliaryLabel
+     * @see BaseFieldProps['secondaryLabel']
+     * @see BaseFieldProps['auxiliaryLabel']
      */
     label: React.ReactNode;
     /**
@@ -50,8 +55,8 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      *
      * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.
      *
-     * @see label
-     * @see auxiliaryLabel
+     * @see BaseFieldProps['label']
+     * @see BaseFieldProps['auxiliaryLabel']
      */
     secondaryLabel?: React.ReactNode;
     /**
@@ -60,8 +65,8 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      * This extra element is not included in the accessible name of the field element. Its only
      * purpose is either visual, or functional (if you include interactive elements in it).
      *
-     * @see label
-     * @see secondaryLabel
+     * @see BaseFieldProps['label']
+     * @see BaseFieldProps['secondaryLabel']
      */
     auxiliaryLabel?: React.ReactNode;
     /**
@@ -76,7 +81,7 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      * In the future, when `aria-errormessage` gets better user agent support, we should use it
      * to associate the filed with a message when tone is `"error"`.
      *
-     * @see tone
+     * @see BaseFieldProps['tone']
      * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage
      * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid
      */
@@ -90,8 +95,8 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      * When the tone is `"loading"`, it is recommended that you also disable the field. However,
      * this is not enforced by the component. It is only a recommendation.
      *
-     * @see message
-     * @see hint
+     * @see BaseFieldProps['message']
+     * @see BaseFieldProps['hint']
      */
     tone?: FieldTone;
     /**

package/lib/new-components/base-field/base-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=require("../box/box.js"),r=require("../stack/stack.js"),t=require("../spinner/spinner.js"),n=require("../text/text.js"),i=require("../common-helpers.js"),s=require("./base-field.module.css.js");function d(l){return a.createElement(n.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},l))}function o(l){return a.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},l),a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function c({id:e,children:r,tone:i}){return a.createElement(n.Text,{as:"p",tone:"error"===i?"danger":"success"===i?"positive":"normal",size:"copy",id:e},a.createElement(l.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:s.default.messageIcon},"loading"===i?a.createElement(t.Spinner,{size:16}):a.createElement(o,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:t,secondaryLabel:o,auxiliaryLabel:u,hint:m,message:p,tone:x="neutral",className:b,children:f,maxWidth:C,hidden:E,"aria-describedby":h,id:y}){const g=i.useId(y),j=i.useId(),v=i.useId(),B={id:g,"aria-describedby":null!=h?h:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===x||void 0};return a.createElement(r.Stack,{space:"small",hidden:E},a.createElement(l.Box,{className:[b,s.default.container,"error"===x?s.default.error:null,"bordered"===e?s.default.bordered:null],maxWidth:C},a.createElement(l.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},a.createElement(n.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:g},t?a.createElement("span",{className:s.default.primaryLabel},t):null,o?a.createElement("span",{className:s.default.secondaryLabel}," (",o,")"):null),u?a.createElement(l.Box,{className:s.default.auxiliaryLabel,paddingLeft:"small"},u):null),f(B)),p?a.createElement(c,{id:v,tone:x},p):null,m?a.createElement(d,{id:j},m):null)},exports.FieldHint=d,exports.FieldMessage=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),r=require("../stack/stack.js"),t=require("../spinner/spinner.js"),n=require("../text/text.js"),i=require("../common-helpers.js"),s=require("./base-field.module.css.js");function d(a){return l.createElement(n.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},a))}function o(a){return l.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function c({id:e,children:r,tone:i}){return l.createElement(n.Text,{as:"p",tone:"error"===i?"danger":"success"===i?"positive":"normal",size:"copy",id:e},l.createElement(a.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:s.default.messageIcon},"loading"===i?l.createElement(t.Spinner,{size:16}):l.createElement(o,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:t,secondaryLabel:o,auxiliaryLabel:u,hint:m,message:p,tone:x="neutral",className:b,children:f,maxWidth:C,hidden:E,"aria-describedby":h,id:y}){const g=i.useId(y),j=i.useId(),v=i.useId(),B={id:g,"aria-describedby":null!=h?h:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===x||void 0};return l.createElement(r.Stack,{space:"small",hidden:E},l.createElement(a.Box,{className:[b,s.default.container,"error"===x?s.default.error:null,"bordered"===e?s.default.bordered:null],maxWidth:C},t||o||u?l.createElement(a.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},l.createElement(n.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:g},t?l.createElement("span",{className:s.default.primaryLabel},t):null,o?l.createElement("span",{className:s.default.secondaryLabel}," (",o,")"):null),u?l.createElement(a.Box,{className:s.default.auxiliaryLabel,paddingLeft:"small"},u):null):null,f(B)),p?l.createElement(c,{id:v,tone:x},p):null,m?l.createElement(d,{id:j},m):null)},exports.FieldHint=d,exports.FieldMessage=c;
 //# sourceMappingURL=base-field.js.map

package/lib/new-components/base-field/base-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../common-types'\nimport { Spinner } from '../spinner'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see secondaryLabel\n         * @see auxiliaryLabel\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see label\n         * @see auxiliaryLabel\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see label\n         * @see secondaryLabel\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see tone\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see message\n         * @see hint\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                <Box as=\"span\" display=\"flex\" justifyContent=\"spaceBetween\" alignItems=\"flexEnd\">\n                    <Text\n                        size={variant === 'bordered' ? 'caption' : 'body'}\n                        as=\"label\"\n                        htmlFor={id}\n                    >\n                        {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                        {secondaryLabel ? (\n                            <span className={styles.secondaryLabel}>&nbsp;({secondaryLabel})</span>\n                        ) : null}\n                    </Text>\n                    {auxiliaryLabel ? (\n                        <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                            {auxiliaryLabel}\n                        </Box>\n                    ) : null}\n                </Box>\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","fillRule","clipRule","d","FieldMessage","id","children","Box","marginRight","display","className","styles","messageIcon","Spinner","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","useId","hintId","messageId","childrenProps","filter","Boolean","join","aria-invalid","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":"wVAeA,SAASA,EAAUC,GACf,OAAOC,gBAACC,wBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,IAGzD,SAASM,EAAYN,GACjB,OACIC,uCACIM,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BACFX,GAEJC,wBACIW,SAAS,UACTC,SAAS,UACTC,EAAE,izBACFJ,KAAK,kBAYrB,SAASK,GAAaC,GAAEA,EAAFC,SAAMA,EAANb,KAAgBA,IAElC,OACIH,gBAACC,QAAKC,GAAG,IAAIC,KAFS,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,SAEhDC,KAAK,OAAOW,GAAIA,GACzCf,gBAACiB,OAAIf,GAAG,OAAOgB,YAAY,SAASC,QAAQ,aAAaC,UAAWC,UAAOC,aAC7D,YAATnB,EAAqBH,gBAACuB,WAAQnB,KAAM,KAASJ,gBAACK,uBAElDW,qBAsIb,UAAmBQ,QACfA,EAAU,UADKC,MAEfA,EAFeC,eAGfA,EAHeC,eAIfA,EAJeC,KAKfA,EALeC,QAMfA,EANe1B,KAOfA,EAAO,UAPQiB,UAQfA,EAReJ,SASfA,EATec,SAUfA,EAVeC,OAWfA,EACAC,mBAAoBC,EACpBlB,GAAImB,IAEJ,MAAMnB,EAAKoB,QAAMD,GACXE,EAASD,UACTE,EAAYF,UAKZG,EAAqC,CACvCvB,GAAAA,EACAiB,yBAJAC,EAAAA,EAA2B,CAACJ,EAAUQ,EAAY,KAAMD,GAAQG,OAAOC,SAASC,KAAK,KAKrFC,eAAyB,UAATvC,QAA0BwC,GAG9C,OACI3C,gBAAC4C,SAAMC,MAAM,QAAQd,OAAQA,GACzB/B,gBAACiB,OACGG,UAAW,CACPA,EACAC,UAAOyB,UACE,UAAT3C,EAAmBkB,UAAO0B,MAAQ,KACtB,aAAZvB,EAAyBH,UAAO2B,SAAW,MAE/ClB,SAAUA,GAEV9B,gBAACiB,OAAIf,GAAG,OAAOiB,QAAQ,OAAO8B,eAAe,eAAeC,WAAW,WACnElD,gBAACC,QACGG,KAAkB,aAAZoB,EAAyB,UAAY,OAC3CtB,GAAG,QACHiD,QAASpC,GAERU,EAAQzB,wBAAMoB,UAAWC,UAAO+B,cAAe3B,GAAgB,KAC/DC,EACG1B,wBAAMoB,UAAWC,UAAOK,qBAAwBA,OAChD,MAEPC,EACG3B,gBAACiB,OAAIG,UAAWC,UAAOM,eAAgB0B,YAAY,SAC9C1B,GAEL,MAEPX,EAASsB,IAEbT,EACG7B,gBAACc,GAAaC,GAAIsB,EAAWlC,KAAMA,GAC9B0B,GAEL,KACHD,EAAO5B,gBAACF,GAAUiB,GAAIqB,GAASR,GAAoB"}
+{"version":3,"file":"base-field.js","sources":["../../../src/new-components/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../common-types'\nimport { Spinner } from '../spinner'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['secondaryLabel']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['secondaryLabel']\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || secondaryLabel || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                            {secondaryLabel ? (\n                                <span className={styles.secondaryLabel}>\n                                    &nbsp;({secondaryLabel})\n                                </span>\n                            ) : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","fillRule","clipRule","d","FieldMessage","id","children","Box","marginRight","display","className","styles","messageIcon","Spinner","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","useId","hintId","messageId","childrenProps","filter","Boolean","join","aria-invalid","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":"wVAeA,SAASA,EAAUC,GACf,OAAOC,gBAACC,wBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,IAGzD,SAASM,EAAYN,GACjB,OACIC,uCACIM,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BACFX,GAEJC,wBACIW,SAAS,UACTC,SAAS,UACTC,EAAE,izBACFJ,KAAK,kBAYrB,SAASK,GAAaC,GAAEA,EAAFC,SAAMA,EAANb,KAAgBA,IAElC,OACIH,gBAACC,QAAKC,GAAG,IAAIC,KAFS,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,SAEhDC,KAAK,OAAOW,GAAIA,GACzCf,gBAACiB,OAAIf,GAAG,OAAOgB,YAAY,SAASC,QAAQ,aAAaC,UAAWC,UAAOC,aAC7D,YAATnB,EAAqBH,gBAACuB,WAAQnB,KAAM,KAASJ,gBAACK,uBAElDW,qBA2Ib,UAAmBQ,QACfA,EAAU,UADKC,MAEfA,EAFeC,eAGfA,EAHeC,eAIfA,EAJeC,KAKfA,EALeC,QAMfA,EANe1B,KAOfA,EAAO,UAPQiB,UAQfA,EAReJ,SASfA,EATec,SAUfA,EAVeC,OAWfA,EACAC,mBAAoBC,EACpBlB,GAAImB,IAEJ,MAAMnB,EAAKoB,QAAMD,GACXE,EAASD,UACTE,EAAYF,UAKZG,EAAqC,CACvCvB,GAAAA,EACAiB,yBAJAC,EAAAA,EAA2B,CAACJ,EAAUQ,EAAY,KAAMD,GAAQG,OAAOC,SAASC,KAAK,KAKrFC,eAAyB,UAATvC,QAA0BwC,GAG9C,OACI3C,gBAAC4C,SAAMC,MAAM,QAAQd,OAAQA,GACzB/B,gBAACiB,OACGG,UAAW,CACPA,EACAC,UAAOyB,UACE,UAAT3C,EAAmBkB,UAAO0B,MAAQ,KACtB,aAAZvB,EAAyBH,UAAO2B,SAAW,MAE/ClB,SAAUA,GAETL,GAASC,GAAkBC,EACxB3B,gBAACiB,OACGf,GAAG,OACHiB,QAAQ,OACR8B,eAAe,eACfC,WAAW,WAEXlD,gBAACC,QACGG,KAAkB,aAAZoB,EAAyB,UAAY,OAC3CtB,GAAG,QACHiD,QAASpC,GAERU,EAAQzB,wBAAMoB,UAAWC,UAAO+B,cAAe3B,GAAgB,KAC/DC,EACG1B,wBAAMoB,UAAWC,UAAOK,qBACZA,OAEZ,MAEPC,EACG3B,gBAACiB,OAAIG,UAAWC,UAAOM,eAAgB0B,YAAY,SAC9C1B,GAEL,MAER,KACHX,EAASsB,IAEbT,EACG7B,gBAACc,GAAaC,GAAIsB,EAAWlC,KAAMA,GAC9B0B,GAEL,KACHD,EAAO5B,gBAACF,GAAUiB,GAAIqB,GAASR,GAAoB"}

package/lib/new-components/deprecated-modal/index.d.ts

@@ -0,0 +1 @@
+export * from './modal';

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as ModalComponents from './modal';
+import type { DeprecatedModalProps, DeprecatedModalHeaderProps, DeprecatedModalFooterProps } from './modal';
+declare function Link({ children, ...props }: JSX.IntrinsicElements['a']): JSX.Element;
+declare type ModalStoryState = Pick<DeprecatedModalProps, 'width' | 'height'> & {
+    button: 'true' | 'false' | 'custom';
+    withScrollableContent: boolean;
+};
+declare function ModalStoryStateProvider({ initialState, children, }: {
+    initialState?: ModalStoryState;
+    children: React.ReactNode;
+}): JSX.Element;
+declare function ScrollableContent({ label, count }: {
+    label?: string;
+    count?: number;
+}): JSX.Element;
+declare function ModalOptionsForm({ title }: {
+    title?: React.ReactNode;
+}): JSX.Element;
+declare function ModalButton({ variant, size, children, }: {
+    variant: 'primary' | 'secondary';
+    size?: 'small';
+    children: NonNullable<React.ReactNode>;
+}): JSX.Element;
+declare namespace ModalButton {
+    var displayName: string;
+}
+declare type WithOptionals<Props, Keys extends keyof Props> = Omit<Props, Keys> & Partial<Pick<Props, Keys>>;
+declare function Modal(props: WithOptionals<DeprecatedModalProps, 'isOpen' | 'onDismiss' | 'width' | 'height'>): JSX.Element;
+declare function ModalHeader(props: WithOptionals<DeprecatedModalHeaderProps, 'withDivider' | 'button'>): JSX.Element;
+declare const ModalBody: typeof ModalComponents.DeprecatedModalBody;
+declare function ModalFooter(props: WithOptionals<DeprecatedModalFooterProps, 'withDivider'>): JSX.Element;
+declare function ModalActions(props: WithOptionals<DeprecatedModalFooterProps, 'withDivider'>): JSX.Element;
+export { Link, ModalStoryStateProvider, ModalOptionsForm, ModalButton as Button, ScrollableContent };
+export { Modal, ModalHeader, ModalBody, ModalFooter, ModalActions };