@doist/reactist 17.3.0 → 17.5.0

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

@@ -13,7 +13,7 @@ import { hideOthers } from 'aria-hidden';
 import { useDialogState, Dialog } from 'ariakit/dialog';
 import styles from './modal.module.css.js';
 
-const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "children"],
+const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children"],
       _excluded2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -46,6 +46,8 @@ function Modal(_ref) {
     exceptionallySetClassName,
     exceptionallySetOverlayClassName,
     autoFocus = true,
+    hideOnEscape = true,
+    hideOnInteractOutside = true,
     children
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -97,7 +99,7 @@ function Modal(_ref) {
     "data-testid": "modal-overlay",
     "data-overlay": true,
     className: classNames(styles.overlay, styles[height], styles[width], exceptionallySetOverlayClassName),
-    onClick: handleBackdropClick,
+    onClick: hideOnInteractOutside ? handleBackdropClick : undefined,
     ref: backdropRef
   }, /*#__PURE__*/createElement(FocusLock, {
     autoFocus: autoFocus,
@@ -107,7 +109,7 @@ function Modal(_ref) {
     ref: dialogRef,
     as: Box,
     state: state,
-    hideOnEscape: true,
+    hideOnEscape: hideOnEscape,
     preventBodyScroll: true,
     borderRadius: "full",
     background: "default",

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 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     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    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(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\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","exceptionallySetOverlayClassName","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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"}
+{"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, DialogOptions, 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     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    ...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(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                onClick={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        state={state}\n                        hideOnEscape={hideOnEscape}\n                        preventBodyScroll\n                        borderRadius=\"full\"\n                        background=\"default\"\n                        display=\"flex\"\n                        flexDirection=\"column\"\n                        overflow=\"hidden\"\n                        height={height === 'expand' ? 'full' : undefined}\n                        flexGrow={height === 'expand' ? 1 : 0}\n                        className={[exceptionallySetClassName, styles.container]}\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","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","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","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/select-field/select-field.js

@@ -4,9 +4,10 @@ import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';
 import styles from './select-field.module.css.js';
 
-const _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
@@ -22,6 +23,7 @@ const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
@@ -33,7 +35,8 @@ const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/createElement(Box, {
-    className: [styles.selectWrapper, tone === 'error' ? styles.error : null]
+    "data-testid": "select-wrapper",
+    className: [styles.selectWrapper, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null]
   }, /*#__PURE__*/createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     ref: ref
   }), children), /*#__PURE__*/createElement(SelectChevron, {

package/es/new-components/select-field/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement>\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={[styles.selectWrapper, tone === 'error' ? styles.error : null]}>\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","selectWrapper","error","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;MAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAetEE,GAfsE;MACtE;IACIC,EADJ;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,OANJ;IAOIC,IAPJ;IAQIC,QARJ;IASIC,QATJ;IAUIC,MAVJ;IAWI,oBAAoBC;;MACjBC;;EAIP,oBACIb,aAAA,CAACc,SAAD;IACIZ,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GAVtB,EAYMG,UAAD,iBACGf,aAAA,CAACgB,GAAD;IAAKC,SAAS,EAAE,CAACC,MAAM,CAACC,aAAR,EAAuBX,IAAI,KAAK,OAAT,GAAmBU,MAAM,CAACE,KAA1B,GAAkC,IAAzD;GAAhB,eACIpB,aAAA,SAAA,mDAAYa,KAAZ,GAAuBE,UAAvB;IAAmCd,GAAG,EAAEA;MACnCS,QADL,CADJ,eAIIV,aAAA,CAACqB,aAAD;;GAAA,CAJJ,CAbR,CADJ;AAuBH,CAxCmB;;AA0CpB,SAASA,aAAT,CAAuBR,KAAvB;EACI,oBACIb,aAAA,MAAA;IAAKsB,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCZ,KAA/E,gBACIb,aAAA,OAAA;IACI0B,CAAC,EAAC;IACFF,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}
+{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement> & BaseFieldVariantProps\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectField","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;MAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAgBtEE,GAhBsE;MACtE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,oBAAoBC;;MACjBC;;EAIP,oBACId,aAAA,CAACe,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;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GAXtB,EAaMG,UAAD,iBACGhB,aAAA,CAACiB,GAAD;mBACgB;IACZC,SAAS,EAAE,CACPC,MAAM,CAACC,aADA,EAEPX,IAAI,KAAK,OAAT,GAAmBU,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPnB,OAAO,KAAK,UAAZ,GAAyBiB,MAAM,CAACG,QAAhC,GAA2C,IAHpC;GAFf,eAQItB,aAAA,SAAA,mDAAYc,KAAZ,GAAuBE,UAAvB;IAAmCf,GAAG,EAAEA;MACnCU,QADL,CARJ,eAWIX,aAAA,CAACuB,aAAD;;GAAA,CAXJ,CAdR,CADJ;AA+BH,CAjDmB;;AAmDpB,SAASA,aAAT,CAAuBT,KAAvB;EACI,oBACId,aAAA,MAAA;IAAKwB,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCb,KAA/E,gBACId,aAAA,OAAA;IACI4B,CAAC,EAAC;IACFF,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_1fa9b208 = {"selectWrapper":"_07e75293","error":"f147bcea"};
+var modules_1fa9b208 = {"selectWrapper":"a804edbf","bordered":"_50a3655f","error":"a6d38abf"};
 
 export default modules_1fa9b208;
 //# sourceMappingURL=select-field.module.css.js.map

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

@@ -4,6 +4,7 @@ import type { ModalProps, ModalHeaderProps, ModalFooterProps } from './modal';
 declare function Link({ children, ...props }: JSX.IntrinsicElements['a']): JSX.Element;
 declare type ModalStoryState = Pick<ModalProps, 'width' | 'height'> & {
     button: 'true' | 'false' | 'custom';
+    hideOn: 'escapeAndOverlay' | 'escape' | 'overlay';
     withScrollableContent: boolean;
 };
 declare function ModalStoryStateProvider({ initialState, children, }: {

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { DialogOptions } from 'ariakit/dialog';
 import { ButtonProps } from '../button';
 declare type ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full';
 declare type ModalHeightMode = 'expand' | 'fitContent';
@@ -41,6 +42,14 @@ export declare type ModalProps = DivProps & {
      * Whether to set or not the focus initially to the first focusable element inside the modal.
      */
     autoFocus?: boolean;
+    /**
+     * Controls if the modal is dismissed when pressing "Escape".
+     */
+    hideOnEscape?: DialogOptions['hideOnEscape'];
+    /**
+     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.
+     */
+    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside'];
     /**
      * An escape hatch in case you need to provide a custom class name to the container element.
      */
@@ -63,7 +72,7 @@ export declare type ModalProps = DivProps & {
  * @see ModalFooter
  * @see ModalBody
  */
-export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, exceptionallySetOverlayClassName, autoFocus, children, ...props }: ModalProps): JSX.Element | null;
+export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, exceptionallySetOverlayClassName, autoFocus, hideOnEscape, hideOnInteractOutside, children, ...props }: ModalProps): JSX.Element | null;
 export declare type ModalCloseButtonProps = Omit<ButtonProps, 'type' | 'children' | 'variant' | 'icon' | 'startIcon' | 'endIcon' | 'disabled' | 'loading' | 'tabIndex' | 'width' | 'align'> & {
     /**
      * The descriptive label of the button.

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),l=require("../base-field/base-field.js"),t=require("./select-field.module.css.js");const i=["id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby"];function d(a){return r.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),r.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=r.forwardRef((function(s,n){let{id:c,label:o,secondaryLabel:b,auxiliaryLabel:u,hint:h,message:m,tone:p,maxWidth:f,children:x,hidden:j,"aria-describedby":y}=s,g=e.objectWithoutProperties(s,i);return r.createElement(l.BaseField,{id:c,label:o,secondaryLabel:b,auxiliaryLabel:u,hint:h,message:m,tone:p,maxWidth:f,hidden:j,"aria-describedby":y},l=>r.createElement(a.Box,{className:[t.default.selectWrapper,"error"===p?t.default.error:null]},r.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},g),l),{},{ref:n}),x),r.createElement(d,{"aria-hidden":!0})))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),t=require("../base-field/base-field.js"),l=require("./select-field.module.css.js");const i=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby"];function d(a){return r.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),r.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=r.forwardRef((function(n,s){let{variant:o="default",id:c,label:b,secondaryLabel:u,auxiliaryLabel:h,hint:p,message:f,tone:m,maxWidth:x,children:j,hidden:y,"aria-describedby":g}=n,v=e.objectWithoutProperties(n,i);return r.createElement(t.BaseField,{variant:o,id:c,label:b,secondaryLabel:u,auxiliaryLabel:h,hint:p,message:f,tone:m,maxWidth:x,hidden:y,"aria-describedby":g},t=>r.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===m?l.default.error:null,"bordered"===o?l.default.bordered:null]},r.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},v),t),{},{ref:s}),j),r.createElement(d,{"aria-hidden":!0})))}));
 //# sourceMappingURL=select-field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement>\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={[styles.selectWrapper, tone === 'error' ? styles.error : null]}>\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper","error"],"mappings":"qYAiDA,SAASA,EAAcC,GACnB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCA/CDH,cAAsD,WAetEM,OAdAC,GACIA,EADJC,MAEIA,EAFJC,eAGIA,EAHJC,eAIIA,EAJJC,KAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,KACjBnB,iCAIP,OACIC,gBAACmB,aACGZ,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBE,GACEpB,gBAACqB,OAAIC,UAAW,CAACC,UAAOC,cAAwB,UAATX,EAAmBU,UAAOE,MAAQ,OACrEzB,4EAAYD,GAAWqB,OAAYd,IAAKA,IACnCS,GAELf,gBAACF"}
+{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement> & BaseFieldVariantProps\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered"],"mappings":"+YA0DA,SAASA,EAAcC,GACnB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCAxDDH,cAAsD,WAgBtEM,OAfAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,KACjBpB,iCAIP,OACIC,gBAACoB,aACGb,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBE,GACErB,gBAACsB,qBACe,iBACZC,UAAW,CACPC,UAAOC,cACE,UAATX,EAAmBU,UAAOE,MAAQ,KACtB,aAAZnB,EAAyBiB,UAAOG,SAAW,OAG/C3B,4EAAYD,GAAWsB,OAAYf,IAAKA,IACnCU,GAELhB,gBAACF"}

package/lib/new-components/select-field/select-field.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={selectWrapper:"_07e75293",error:"f147bcea"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={selectWrapper:"a804edbf",bordered:"_50a3655f",error:"a6d38abf"};
 //# sourceMappingURL=select-field.module.css.js.map

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
-    "version": "17.3.0",
+    "version": "17.5.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

package/styles/reactist.css

@@ -20,7 +20,7 @@
 ._84dfdb83{position:relative}._84dfdb83,._84dfdb83 *{cursor:pointer;font-family:var(--reactist-font-family)}._84dfdb83._131a2ca4,._84dfdb83._131a2ca4 *{cursor:not-allowed}._84dfdb83._131a2ca4{opacity:.5}._84dfdb83 svg{color:var(--reactist-content-secondary);border-radius:5px;min-width:24px}._84dfdb83._95b1556d svg{color:var(--reactist-switch-checked)}._84dfdb83 input[type=checkbox]{display:block;height:16px;left:0;margin:4px;opacity:0;position:absolute;top:0;width:16px}._84dfdb83._49de7ebd svg{border:2px solid var(--reactist-actionable-primary-idle-fill)}._6b4b1851{margin-left:12px}._9047f3bd{margin-left:6px}
 ._2e189908{font-family:var(--reactist-font-family)}._2e189908 ._83051e0a,._2e189908 label{padding-bottom:var(--reactist-spacing-small)}._2e189908.fd20ef50{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-divider-secondary);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}._2e189908.fd20ef50 label{flex-grow:1;cursor:text}._2e189908.fd20ef50 label span{cursor:default}._2e189908.fd20ef50:focus-within{border-color:var(--reactist-divider-primary)!important}._2e189908.fd20ef50.d1a17d92{border-color:var(--reactist-alert-tone-critical-border)!important}._2e189908.fd20ef50 ._75e0afa0{font-weight:500}._2e189908.fd20ef50 ._83051e0a{font-size:var(--reactist-font-size-caption)}._2e189908:not(.fd20ef50) ._75e0afa0{font-weight:var(--reactist-font-weight-strong)}._2e189908:not(.fd20ef50) ._83051e0a{font-size:var(--reactist-font-size-body)}.d04a867d{color:var(--reactist-content-secondary)}._83051e0a{text-align:right}._77b2107e{vertical-align:bottom}
 ._66b448b3 input{padding-right:0;box-shadow:none!important;border:none}._66b448b3 button{outline:none;line-height:0;margin:0 3px;padding:0;border:none;border-radius:3px;background:none;color:var(--reactist-content-secondary);cursor:pointer}._66b448b3 button:focus,._66b448b3 button:hover{color:var(--reactist-content-primary);background-color:var(--reactist-bg-selected)}
-._07e75293{width:100%;position:relative}._07e75293 svg{position:absolute;right:10px;top:8px;bottom:8px;color:var(--reactist-content-secondary)}._07e75293 select{position:relative;z-index:1;--tmp-desired-height:32px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);padding:var(--tmp-vertical-padding) 10px;padding-right:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;color:var(--reactist-content-primary);background:none;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}._07e75293.f147bcea select{border-color:var(--reactist-alert-tone-critical-border)!important}._07e75293 option{background-color:var(--reactist-bg-aside)}._07e75293 select:focus{border-color:var(--reactist-divider-primary)}
+.a804edbf{width:100%;position:relative}.a804edbf._50a3655f select{padding:0;height:24px;border-color:transparent;outline:none}.a804edbf svg{position:absolute;right:10px;top:8px;bottom:8px;color:var(--reactist-content-secondary)}.a804edbf select{position:relative;z-index:1;--tmp-desired-height:32px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);padding:var(--tmp-vertical-padding) 10px;padding-right:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;color:var(--reactist-content-primary);background:none;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}.a804edbf:not(._50a3655f).a6d38abf select{border-color:var(--reactist-alert-tone-critical-border)!important}.a804edbf:not(._50a3655f) option{background-color:var(--reactist-bg-aside)}.a804edbf:not(._50a3655f) select:focus{border-color:var(--reactist-divider-primary)}
 .ec63c3f1,.ec63c3f1 *{font-family:var(--reactist-font-family);cursor:pointer}.ec63c3f1._7de9c06d,.ec63c3f1._7de9c06d *{cursor:not-allowed}.ec63c3f1._7de9c06d.a37981fc ._2a17ac45,.ec63c3f1._7de9c06d ._68cc9707{opacity:.5}._2a17ac45{--tmp-switch-width:32px;--tmp-switch-height:18px;--tmp-inner-padding:3px;--tmp-handle-size:calc(var(--tmp-switch-height) - 2*var(--tmp-inner-padding));--tmp-slide-length:calc(var(--tmp-switch-width) - var(--tmp-handle-size) - var(--tmp-inner-padding));min-height:auto;border-radius:calc(var(--tmp-switch-height)/2);background-color:var(--reactist-framework-fill-summit);cursor:pointer;position:relative}._2a17ac45,._2a17ac45>div,._2a17ac45 input[type=checkbox]{width:var(--tmp-switch-width);height:var(--tmp-switch-height)}._91409c7f{position:absolute;display:block;padding:0;top:var(--tmp-inner-padding);left:var(--tmp-inner-padding);width:var(--tmp-handle-size);height:var(--tmp-handle-size);border-radius:50%;background:var(--reactist-bg-default);transition:left .28s cubic-bezier(.4,0,.2,1)}.a37981fc ._2a17ac45{background-color:var(--reactist-switch-checked)}.a37981fc ._2a17ac45 ._91409c7f{left:var(--tmp-slide-length)}.ec63c3f1.a6490371 ._2a17ac45:after{border-radius:calc(var(--tmp-switch-height) + 4px);border:2px solid var(--reactist-actionable-primary-idle-fill);bottom:-4px;content:"";left:-4px;position:absolute;right:-4px;top:-4px}
 ._61447829 textarea{outline:none;border:none;padding:0;box-sizing:border-box;font-family:var(--reactist-font-family);width:100%;resize:vertical}._61447829:not(._76f4ad88) textarea{border-radius:var(--reactist-border-radius-small);padding:var(--reactist-spacing-small)}._61447829._76f4ad88{border-radius:var(--reactist-border-radius-large)}._61447829._76f4ad88,._61447829:not(._76f4ad88) textarea{border:1px solid var(--reactist-divider-secondary)}._61447829._76f4ad88:focus-within,._61447829:not(._76f4ad88) textarea:focus{border-color:var(--reactist-divider-primary)}._61447829._76f4ad88._4df3452b,._61447829._4df3452b:not(._76f4ad88) textarea{border-color:var(--reactist-alert-tone-critical-border)!important}
 ._9d172ece:not(.c59d0239){border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);overflow:clip}._9d172ece.c59d0239 input{padding:0;height:24px}._9d172ece:not(.c59d0239):focus-within{border-color:var(--reactist-divider-primary)}._9d172ece:not(.c59d0239)._7e63ee20{border-color:var(--reactist-alert-tone-critical-border)!important}._9d172ece input{color:var(--reactist-content-primary);flex:1;outline:none;box-sizing:border-box;width:100%;background:transparent;border:none;--tmp-desired-height:30px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}._9d172ece:not(.c59d0239) input{padding:var(--tmp-vertical-padding) 10px}

package/styles/select-field.css

@@ -7,4 +7,4 @@
 .c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
 .c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
 ._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
-._07e75293{width:100%;position:relative}._07e75293 svg{position:absolute;right:10px;top:8px;bottom:8px;color:var(--reactist-content-secondary)}._07e75293 select{position:relative;z-index:1;--tmp-desired-height:32px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);padding:var(--tmp-vertical-padding) 10px;padding-right:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;color:var(--reactist-content-primary);background:none;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}._07e75293.f147bcea select{border-color:var(--reactist-alert-tone-critical-border)!important}._07e75293 option{background-color:var(--reactist-bg-aside)}._07e75293 select:focus{border-color:var(--reactist-divider-primary)}
+.a804edbf{width:100%;position:relative}.a804edbf._50a3655f select{padding:0;height:24px;border-color:transparent;outline:none}.a804edbf svg{position:absolute;right:10px;top:8px;bottom:8px;color:var(--reactist-content-secondary)}.a804edbf select{position:relative;z-index:1;--tmp-desired-height:32px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);padding:var(--tmp-vertical-padding) 10px;padding-right:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;color:var(--reactist-content-primary);background:none;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}.a804edbf:not(._50a3655f).a6d38abf select{border-color:var(--reactist-alert-tone-critical-border)!important}.a804edbf:not(._50a3655f) option{background-color:var(--reactist-bg-aside)}.a804edbf:not(._50a3655f) select:focus{border-color:var(--reactist-divider-primary)}

package/styles/select-field.module.css.css

@@ -1 +1 @@
-._07e75293{width:100%;position:relative}._07e75293 svg{position:absolute;right:10px;top:8px;bottom:8px;color:var(--reactist-content-secondary)}._07e75293 select{position:relative;z-index:1;--tmp-desired-height:32px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);padding:var(--tmp-vertical-padding) 10px;padding-right:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;color:var(--reactist-content-primary);background:none;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}._07e75293.f147bcea select{border-color:var(--reactist-alert-tone-critical-border)!important}._07e75293 option{background-color:var(--reactist-bg-aside)}._07e75293 select:focus{border-color:var(--reactist-divider-primary)}
+.a804edbf{width:100%;position:relative}.a804edbf._50a3655f select{padding:0;height:24px;border-color:transparent;outline:none}.a804edbf svg{position:absolute;right:10px;top:8px;bottom:8px;color:var(--reactist-content-secondary)}.a804edbf select{position:relative;z-index:1;--tmp-desired-height:32px;--tmp-line-height-increase:4px;--tmp-vertical-padding:calc((var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase))/2);padding:var(--tmp-vertical-padding) 10px;padding-right:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;color:var(--reactist-content-primary);background:none;border-radius:var(--reactist-border-radius-small);border:1px solid var(--reactist-divider-secondary);font-size:var(--reactist-font-size-body);line-height:calc(var(--reactist-font-size-body) + 4px);margin:0}.a804edbf:not(._50a3655f).a6d38abf select{border-color:var(--reactist-alert-tone-critical-border)!important}.a804edbf:not(._50a3655f) option{background-color:var(--reactist-bg-aside)}.a804edbf:not(._50a3655f) select:focus{border-color:var(--reactist-divider-primary)}