@doist/reactist 14.1.1 → 15.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: string\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {label ? <Text>{label}</Text> : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"kZAmCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,SAASA,EAATC,cAAmBA,EAAnBC,eAAkCA,EAAlCC,SAAkDA,KAAaC,iCAIlC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfT,GAAUK,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBb,YAAe,IAC5Cc,EAAcC,GAAcf,6BAAeO,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAcjB,SAA+B,MAC7CkB,EAAcC,aAAWF,EAAahB,GAU5C,OATAD,aACI,WACQiB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDJ,gBAACqB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCZ,2DACQO,OACJN,IAAKiB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB7B,gBAACkC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EAAQF,gBAACmC,YAAMjC,GAAgB"}
+{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {label ? <Text>{label}</Text> : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"kZAmCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,SAASA,EAATC,cAAmBA,EAAnBC,eAAkCA,EAAlCC,SAAkDA,KAAaC,iCAIlC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfT,GAAUK,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBb,YAAe,IAC5Cc,EAAcC,GAAcf,6BAAeO,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAcjB,SAA+B,MAC7CkB,EAAcC,aAAWF,EAAahB,GAU5C,OATAD,aACI,WACQiB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDJ,gBAACqB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCZ,2DACQO,OACJN,IAAKiB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB7B,gBAACkC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EAAQF,gBAACmC,YAAMjC,GAAgB"}

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

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

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

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

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

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { ButtonProps } from '../button';
+declare type ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full';
+declare type ModalHeightMode = 'expand' | 'fitContent';
+declare type DivProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className' | 'children' | `aria-label` | `aria-labelledby`>;
+export declare type DeprecatedModalProps = DivProps & {
+    /**
+     * The content of the modal.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the modal is open and visible or not.
+     */
+    isOpen: boolean;
+    /**
+     * Called when the user triggers closing the modal.
+     */
+    onDismiss?(): void;
+    /**
+     * A descriptive setting for how wide the modal should aim to be, depending on how much space
+     * it has on screen.
+     * @default 'medium'
+     */
+    width?: ModalWidth;
+    /**
+     * A descriptive setting for how tall the modal should aim to be.
+     *
+     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small
+     *   padding above and below.
+     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.
+     *
+     * In either case, if content does not fit, the content of the main body is set to scroll
+     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the
+     * viewport boundaries.
+     *
+     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of
+     * the inner layout to ensure scroll, or whatever other strategy you may want.
+     */
+    height?: ModalHeightMode;
+    /**
+     * Whether to set or not the focus initially to the first focusable element inside the modal.
+     */
+    autoFocus?: boolean;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+    /** Defines a string value that labels the current modal for assistive technologies. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */
+    'aria-labelledby'?: string;
+};
+/**
+ * Renders a modal that sits on top of the rest of the content in the entire page.
+ *
+ * Follows the WAI-ARIA Dialog (Modal) Pattern.
+ *
+ * @see DeprecatedModalHeader
+ * @see DeprecatedModalFooter
+ * @see DeprecatedModalBody
+ * @deprecated
+ */
+export declare function DeprecatedModal({ isOpen, onDismiss, height, width, exceptionallySetClassName, autoFocus, children, ...props }: DeprecatedModalProps): JSX.Element;
+export declare type DeprecatedModalCloseButtonProps = Omit<ButtonProps, 'type' | 'children' | 'variant' | 'icon' | 'startIcon' | 'endIcon' | 'disabled' | 'loading' | 'tabIndex' | 'width' | 'align'> & {
+    /**
+     * The descriptive label of the button.
+     */
+    'aria-label': string;
+};
+/**
+ * The close button rendered by ModalHeader. Provided independently so that consumers can customize
+ * the button's label.
+ *
+ * @see DeprecatedModalHeader
+ */
+export declare function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps): JSX.Element;
+export declare type DeprecatedModalHeaderProps = DivProps & {
+    /**
+     * The content of the header.
+     */
+    children: React.ReactNode;
+    /**
+     * Allows to provide a custom button element, or to omit the close button if set to false.
+     * @see DeprecatedModalCloseButton
+     */
+    button?: React.ReactNode | boolean;
+    /**
+     * Whether to render a divider line below the header.
+     * @default false
+     */
+    withDivider?: boolean;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+};
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see DeprecatedModal
+ * @see DeprecatedModalFooter
+ * @see DeprecatedModalBody
+ */
+export declare function DeprecatedModalHeader({ children, button, withDivider, exceptionallySetClassName, ...props }: DeprecatedModalHeaderProps): JSX.Element;
+export declare type DeprecatedModalBodyProps = DivProps & {
+    /**
+     * The content of the modal body.
+     */
+    children: React.ReactNode;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+};
+/**
+ * Renders the body of a modal.
+ *
+ * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
+ * things, that the contet of the modal body expands or contracts depending on the modal height
+ * setting or the size of the content. The body content also automatically scrolls when it's too
+ * large to fit the available space.
+ *
+ * @see DeprecatedModal
+ * @see DeprecatedModalHeader
+ * @see DeprecatedModalFooter
+ */
+export declare function DeprecatedModalBody({ exceptionallySetClassName, children, ...props }: DeprecatedModalBodyProps): JSX.Element;
+export declare type DeprecatedModalFooterProps = DivProps & {
+    /**
+     * The contant of the modal footer.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to render a divider line below the footer.
+     * @default false
+     */
+    withDivider?: boolean;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+};
+/**
+ * Renders a standard modal footer area.
+ *
+ * @see DeprecatedModal
+ * @see DeprecatedModalHeader
+ * @see DeprecatedModalBody
+ */
+export declare function DeprecatedModalFooter({ exceptionallySetClassName, withDivider, ...props }: DeprecatedModalFooterProps): JSX.Element;
+export declare type DeprecatedModalActionsProps = DeprecatedModalFooterProps;
+/**
+ * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
+ * @see DeprecatedModalFooter
+ */
+export declare function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps): JSX.Element;
+export {};

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

@@ -0,0 +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"),o=(e(a),e(require("classnames"))),l=require("../box/box.js"),r=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),c=require("../icons/close-icon.js"),u=e(require("react-focus-lock")),d=require("@reach/dialog"),m=require("./modal.module.css.js");const p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],x=["exceptionallySetClassName","withDivider"],g=["children"],b=a.createContext({onDismiss:void 0,height:"fitContent"});function j(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:o}=a.useContext(b),[l,r]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?r(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:o,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function v(e){let{exceptionallySetClassName:o,withDivider:r=!1}=e,i=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,r?a.createElement(n.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:o,padding:"large"})))}exports.DeprecatedModal=function(e){let{isOpen:r,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:c,autoFocus:h=!0,children:f}=e,x=t.objectWithoutProperties(e,p);const g=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]);return a.createElement(d.DialogOverlay,{isOpen:r,onDismiss:n,dangerouslyBypassFocusLock:!0,className:o(m.default.overlay,m.default[i],m.default[s]),"data-testid":"modal-overlay"},a.createElement(u,{autoFocus:h,whiteList:j,returnFocus:!0},a.createElement(d.DialogContent,t.objectSpread2(t.objectSpread2({},x),{},{as:l.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,m.default.container]}),a.createElement(b.Provider,{value:g},f))))},exports.DeprecatedModalActions=function(e){let{children:o}=e,l=t.objectWithoutProperties(e,g);return a.createElement(v,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},o))},exports.DeprecatedModalBody=function(e){let{exceptionallySetClassName:o,children:r}=e,n=t.objectWithoutProperties(e,f);const{height:i}=a.useContext(b);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:o,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},r))},exports.DeprecatedModalCloseButton=C,exports.DeprecatedModalFooter=v,exports.DeprecatedModalHeader=function(e){let{children:o,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,h);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(r.Columns,{space:"large",alignY:"center"},a.createElement(r.Column,{width:"auto"},o),!1===i||null===i?a.createElement("div",{className:m.default.headerContent}):a.createElement(r.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/deprecated-modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type DeprecatedModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n * @deprecated\n */\nexport function DeprecatedModal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: DeprecatedModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type DeprecatedModalCloseButtonProps = 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 DeprecatedModalHeader\n */\nexport function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps) {\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 DeprecatedModalHeaderProps = 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 DeprecatedModalCloseButton\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 DeprecatedModal\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: DeprecatedModalHeaderProps) {\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                                <DeprecatedModalCloseButton\n                                    aria-label=\"Close modal\"\n                                    autoFocus={false}\n                                />\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 DeprecatedModalBodyProps = 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 DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalBody({\n    exceptionallySetClassName,\n    children,\n    ...props\n}: DeprecatedModalBodyProps) {\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 DeprecatedModalFooterProps = 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 DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: DeprecatedModalFooterProps) {\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 DeprecatedModalActionsProps = DeprecatedModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps) {\n    return (\n        <DeprecatedModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </DeprecatedModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","DeprecatedModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","DeprecatedModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"+yBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAsFnDC,EAA2BC,GACvC,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cA4J/BU,SAAsBC,0BAClCA,EADkCC,YAElCA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,oDAnQtDC,OAC5BA,EAD4B7B,UAE5BA,EAF4BE,OAG5BA,EAAS,aAHmB4B,MAI5BA,EAAQ,SAJoBR,0BAK5BA,EAL4BS,UAM5BA,GAAY,EANgBC,SAO5BA,KACGtB,iCAEH,MAAMuB,EAAkClC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGJ,OACIH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,mDACOhC,OACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,sDA8O1BA,SAAEA,KAAatB,iCAClD,OACIX,gBAACsB,qBAA0BX,GACvBX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,iDA3EmBV,0BAChCA,EADgCU,SAEhCA,KACGtB,iCAEH,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,wHAtFqBA,SAClCA,EADkCwB,OAElCA,GAAS,EAFyBjC,YAGlCA,GAAc,EAHoBD,0BAIlCA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH+B,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EACjBzD,uBAAK4B,UAAWU,UAAO0B,gBAEvBhE,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO2B,8BACtB,oBAEO,kBAAXR,EACJzD,gBAACU,gBACc,cACXsB,WAAW,IAGfyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}

package/lib/new-components/deprecated-modal/modal.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"reach-portal":"_37bef8d8",fadein:"_77f9687f",fitContent:"bcc4e0a5",container:"d4832c2d",full:"b0c3b021",large:"_573d6aa5",medium:"_8550d996",small:"_43bb18f5",xlarge:"_57b4159d",overlay:"cb63f300",expand:"e741893e",buttonContainer:"bb1ce281",headerContent:"c5ef989c"};
+//# sourceMappingURL=modal.module.css.js.map

package/lib/new-components/deprecated-modal/modal.module.css.js.map

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

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

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

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

@@ -17,8 +17,9 @@ declare function ScrollableContent({ label, count }: {
 declare function ModalOptionsForm({ title }: {
     title?: React.ReactNode;
 }): JSX.Element;
-declare function ModalButton({ variant, size, children, }: {
+declare function ModalButton({ variant, size, children, action, }: {
     variant: 'primary' | 'secondary';
+    action: 'open' | 'close';
     size?: 'small';
     children: NonNullable<React.ReactNode>;
 }): JSX.Element;

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

@@ -59,7 +59,7 @@ export declare type ModalProps = DivProps & {
  * @see ModalFooter
  * @see ModalBody
  */
-export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, autoFocus, children, ...props }: ModalProps): JSX.Element;
+export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, autoFocus, 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"),o=(e(a),e(require("classnames"))),l=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),c=require("../icons/close-icon.js"),u=require("@reach/dialog"),d=e(require("react-focus-lock")),m=require("./modal.module.css.js");const p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],x=["exceptionallySetClassName","withDivider"],g=["children"],b=a.createContext({onDismiss:void 0,height:"fitContent"});function j(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:o}=a.useContext(b),[l,n]=a.useState(!1),[r,i]=a.useState(!1);return a.useEffect((function(){r?n(!0):i(!0)}),[r]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:o,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function v(e){let{exceptionallySetClassName:o,withDivider:n=!1}=e,i=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,n?a.createElement(r.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:o,padding:"large"})))}exports.Modal=function(e){let{isOpen:n,onDismiss:r,height:i="fitContent",width:s="medium",exceptionallySetClassName:c,autoFocus:h=!0,children:f}=e,x=t.objectWithoutProperties(e,p);const g=a.useMemo(()=>({onDismiss:r,height:i}),[r,i]);return a.createElement(u.DialogOverlay,{isOpen:n,onDismiss:r,dangerouslyBypassFocusLock:!0,className:o(m.default.overlay,m.default[i],m.default[s]),"data-testid":"modal-overlay"},a.createElement(d,{autoFocus:h,whiteList:j,returnFocus:!0},a.createElement(u.DialogContent,t.objectSpread2(t.objectSpread2({},x),{},{as:l.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,m.default.container]}),a.createElement(b.Provider,{value:g},f))))},exports.ModalActions=function(e){let{children:o}=e,l=t.objectWithoutProperties(e,g);return a.createElement(v,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},o))},exports.ModalBody=function(e){let{exceptionallySetClassName:o,children:n}=e,r=t.objectWithoutProperties(e,f);const{height:i}=a.useContext(b);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},r),{},{className:o,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},n))},exports.ModalCloseButton=C,exports.ModalFooter=v,exports.ModalHeader=function(e){let{children:o,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,h);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(n.Columns,{space:"large",alignY:"center"},a.createElement(n.Column,{width:"auto"},o),!1===i||null===i?a.createElement("div",{className:m.default.headerContent}):a.createElement(n.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(r.Divider,null):null)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),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=e(require("react-focus-lock")),d=require("aria-hidden"),m=require("ariakit/dialog"),p=require("ariakit/portal"),f=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],x=["children","button","withDivider","exceptionallySetClassName"],b=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],C=["children"],j=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function E(e){const{onDismiss:l}=a.useContext(j),[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 S(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,autoFocus:x=!0,children:b}=e,g=t.objectWithoutProperties(e,h);const C=a.useCallback(e=>{e||null==n||n()},[n]),E=m.useDialogState({visible:o,setVisible:C}),S=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]),y=a.useRef(null),w=a.useRef(null),N=a.useRef(null),q=a.useCallback(e=>{var t,a;null!=(t=w.current)&&t.contains(e.target)||null==(a=N.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);return a.useLayoutEffect((function(){if(o&&y.current)return d.hideOthers(y.current)}),[o]),o?a.createElement(p.Portal,{portalRef:y},a.createElement(r.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:l(f.default.overlay,f.default[i],f.default[s]),onClick:q,ref:N},a.createElement(c,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(m.Dialog,t.objectSpread2(t.objectSpread2({},g),{},{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(j.Provider,{value:S},b))))):null},exports.ModalActions=function(e){let{children:l}=e,r=t.objectWithoutProperties(e,C);return a.createElement(S,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(j);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=E,exports.ModalFooter=S,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(E,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.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 { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"+yBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAqFnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CA5PhEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,UAMlBA,GAAY,EANMC,SAOlBA,KACGtB,iCAEH,MAAMuB,EAAkClC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGJ,OACIH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,mDACOhC,OACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,4CAuOpCA,SAAEA,KAAatB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,uCAvESV,0BAAEA,EAAFU,SAA6BA,KAAatB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,0FA/EWA,SACxBA,EADwBwB,OAExBA,GAAS,EAFejC,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH+B,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EACjBzD,uBAAK4B,UAAWU,UAAO0B,gBAEvBhE,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO2B,8BACtB,oBAEO,kBAAXR,EACJzD,gBAACU,gBAA4B,cAAcsB,WAAW,IAEtDyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, useDialogState } from 'ariakit/dialog'\nimport { Portal } from 'ariakit/portal'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const setVisible = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ visible: isOpen, setVisible })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal\n            // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null\n            portalRef={portalRef}\n        >\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(styles.overlay, styles[height], styles[width])}\n                onClick={handleBackdropClick}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        state={state}\n                        hideOnEscape\n                        preventBodyScroll\n                        borderRadius=\"full\"\n                        background=\"default\"\n                        display=\"flex\"\n                        flexDirection=\"column\"\n                        overflow=\"hidden\"\n                        height={height === 'expand' ? 'full' : undefined}\n                        flexGrow={height === 'expand' ? 1 : 0}\n                        className={[exceptionallySetClassName, styles.container]}\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","setVisible","visible","state","useDialogState","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","Portal","classNames","styles","overlay","ref","FocusLock","whiteList","returnFocus","Dialog","hideOnEscape","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","hideOnInteractOutside","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"q2BA6BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAqJnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CA5ThEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,UAMlBA,GAAY,EANMC,SAOlBA,KACGtB,iCAEH,MAAMuB,EAAalC,cACdmC,IACQA,SACDlC,GAAAA,KAGR,CAACA,IAECmC,EAAQC,iBAAe,CAAEF,QAASL,EAAQI,WAAAA,IAE1CI,EAAkCtC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGEoC,EAAYvC,SAAiC,MAC7CwC,EAAYxC,SAAoC,MAChDyC,EAAczC,SAAoC,MAClD0C,EAAsB1C,cACvB2C,qBAIQH,EAAUI,UAAVC,EAAmBC,SAASH,EAAMI,kBAEnCN,EAAYG,WAAZI,EAAqBF,SAASH,EAAMI,UAEpCJ,EAAMM,wBACNhD,GAAAA,MAGR,CAACA,IAcL,OAXAD,mBACI,WACI,GAAK8B,GAAWS,EAAUK,QAI1B,OAAOM,aAAWX,EAAUK,WAEhC,CAACd,IAGAA,EAKD9B,gBAACmD,UAEGZ,UAAWA,GAEXvC,gBAAC0B,qBACe,kCAEZE,UAAWwB,EAAWC,UAAOC,QAASD,UAAOlD,GAASkD,UAAOtB,IAC7Db,QAASwB,EACTa,IAAKd,GAELzC,gBAACwD,GAAUxB,UAAWA,EAAWyB,UAAWrD,EAAoBsD,aAAa,GACzE1D,gBAAC2D,4CACOhD,OACJ4C,IAAKf,EACLb,GAAID,MACJU,MAAOA,EACPwB,gBACAC,qBACAC,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT/D,OAAmB,WAAXA,EAAsB,YAASD,EACvCiE,SAAqB,WAAXhE,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2B8B,UAAOe,WAE9CC,OAAO,EACPrC,WAAW,EACXsC,iBAAiB,EACjBC,iBAAiB,EAEjBC,QAAQ,EACRC,UAAU,EACVC,uBAAuB,IAEvB1E,gBAACD,EAAa4E,UAASC,MAAOtC,GACzBL,OA1Cd,2CAmRcA,SAAEA,KAAatB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAAC6E,UAAOC,MAAM,QAAQC,MAAM,SACvB9C,uCAvESV,0BAAEA,EAAFU,SAA6BA,KAAatB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX4C,SAAqB,WAAXhE,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCgE,SAAS,SAETlE,gBAAC0B,OAAIG,QAAQ,QAAQmD,cAAc,WAC9B/C,0FA/EWA,SACxBA,EADwBgD,OAExBA,GAAS,EAFezD,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACHuD,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACTxD,UAAWL,IAEXvB,gBAACqF,WAAQN,MAAM,QAAQO,OAAO,UAC1BtF,gBAACuF,UAAOxD,MAAM,QAAQE,IACV,IAAXgD,GAA+B,OAAXA,EACjBjF,uBAAK4B,UAAWyB,UAAOmC,gBAEvBxF,gBAACuF,UACGxD,MAAM,UACNR,0BAA2B8B,UAAOoC,8BACtB,oBAEO,kBAAXR,EACJjF,gBAACU,gBAA4B,cAAcsB,WAAW,IAEtDiD,KAMnBzD,EAAcxB,gBAACyB,gBAAa"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"reach-portal":"_37bef8d8",fadein:"_77f9687f",fitContent:"bcc4e0a5",container:"d4832c2d",full:"b0c3b021",large:"_573d6aa5",medium:"_8550d996",small:"_43bb18f5",xlarge:"_57b4159d",overlay:"cb63f300",expand:"e741893e",buttonContainer:"bb1ce281",headerContent:"c5ef989c"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={overlay:"_868392ae",fadein:"_63d7ee15",fitContent:"b8548bf2",container:"_31956461",full:"_1007df83",large:"_10c275aa",medium:"_0ac526b4",small:"_30f38fdb",xlarge:"_54868e8b",expand:"c0bc68bc",buttonContainer:"_6527332a",headerContent:"_4750dc1b"};
 //# sourceMappingURL=modal.module.css.js.map

package/lib/new-components/text-area/text-area.d.ts

@@ -3,6 +3,6 @@ import { BaseFieldVariantProps, FieldComponentProps } from '../base-field';
 declare type TextAreaProps = FieldComponentProps<HTMLTextAreaElement> & BaseFieldVariantProps & {
     rows?: number;
 };
-declare function TextArea({ variant, id, label, secondaryLabel, auxiliaryLabel, hint, message, tone, maxWidth, ...props }: TextAreaProps): JSX.Element;
+declare function TextArea({ variant, id, label, secondaryLabel, auxiliaryLabel, hint, message, tone, maxWidth, hidden, 'aria-describedby': ariaDescribedBy, ...props }: TextAreaProps): JSX.Element;
 export { TextArea };
 export type { TextAreaProps };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),l=require("./text-area.module.css.js");const i=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth"];exports.TextArea=function(s){let{variant:d="default",id:o,label:n,secondaryLabel:u,auxiliaryLabel:b,hint:c,message:x,tone:m,maxWidth:f}=s,p=e.objectWithoutProperties(s,i);return a.createElement(t.BaseField,{variant:d,id:o,label:n,secondaryLabel:u,auxiliaryLabel:b,hint:c,message:x,tone:m,className:[l.default.container,"error"===m?l.default.error:null,"bordered"===d?l.default.bordered:null],maxWidth:f},t=>a.createElement(r.Box,{width:"full",display:"flex"},a.createElement("textarea",e.objectSpread2(e.objectSpread2({},p),t))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),i=require("./text-area.module.css.js");const l=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby"];exports.TextArea=function(d){let{variant:s="default",id:n,label:o,secondaryLabel:b,auxiliaryLabel:u,hint:c,message:x,tone:h,maxWidth:m,hidden:y,"aria-describedby":f}=d,p=e.objectWithoutProperties(d,l);return a.createElement(t.BaseField,{variant:s,id:n,label:o,secondaryLabel:b,auxiliaryLabel:u,hint:c,message:x,tone:h,hidden:y,"aria-describedby":f,className:[i.default.textAreaContainer,"error"===h?i.default.error:null,"bordered"===s?i.default.bordered:null],maxWidth:m},t=>a.createElement(r.Box,{width:"full",display:"flex"},a.createElement("textarea",e.objectSpread2(e.objectSpread2({},p),t))))};
 //# sourceMappingURL=text-area.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\n        rows?: number\n    }\n\nfunction TextArea({\n    variant = 'default',\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            className={[\n                styles.container,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\" display=\"flex\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","props","React","BaseField","className","styles","container","error","bordered","extraProps","Box","width","display"],"mappings":"sXAUA,gBAAkBA,QACdA,EAAU,UADIC,GAEdA,EAFcC,MAGdA,EAHcC,eAIdA,EAJcC,eAKdA,EALcC,KAMdA,EANcC,QAOdA,EAPcC,KAQdA,EARcC,SASdA,KACGC,iCAEH,OACIC,gBAACC,aACGX,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNK,UAAW,CACPC,UAAOC,UACE,UAATP,EAAmBM,UAAOE,MAAQ,KACtB,aAAZf,EAAyBa,UAAOG,SAAW,MAE/CR,SAAUA,GAERS,GACEP,gBAACQ,OAAIC,MAAM,OAAOC,QAAQ,QACtBV,8DAAcD,GAAWQ"}
+{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\n        rows?: number\n    }\n\nfunction TextArea({\n    variant = 'default',\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone,\n    maxWidth,\n    hidden,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\" display=\"flex\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","ariaDescribedBy","props","React","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display"],"mappings":"kZAUA,gBAAkBA,QACdA,EAAU,UADIC,GAEdA,EAFcC,MAGdA,EAHcC,eAIdA,EAJcC,eAKdA,EALcC,KAMdA,EANcC,QAOdA,EAPcC,KAQdA,EARcC,SASdA,EATcC,OAUdA,EACAC,mBAAoBC,KACjBC,iCAEH,OACIC,gBAACC,aACGd,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,OAAQA,qBACUE,EAClBI,UAAW,CACPC,UAAOC,kBACE,UAATV,EAAmBS,UAAOE,MAAQ,KACtB,aAAZlB,EAAyBgB,UAAOG,SAAW,MAE/CX,SAAUA,GAERY,GACEP,gBAACQ,OAAIC,MAAM,OAAOC,QAAQ,QACtBV,8DAAcD,GAAWQ"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"d6ec37c5",bordered:"a60d6043",error:"bef49c61"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"_61447829",bordered:"_76f4ad88",error:"_4df3452b"};
 //# sourceMappingURL=text-area.module.css.js.map

package/lib/new-components/text-area/text-area.test.d.ts

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

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": "14.1.1",
+    "version": "15.2.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",
@@ -129,11 +129,12 @@
     },
     "dependencies": {
         "@reach/dialog": "^0.16.0",
+        "aria-hidden": "^1.2.1",
         "ariakit": "2.0.0-next.27",
         "ariakit-utils": "0.17.0-next.18",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",
-        "react-focus-lock": "^2.5.2",
+        "react-focus-lock": "^2.9.1",
         "react-keyed-flatten-children": "^1.3.0",
         "react-markdown": "^5.0.3"
     },

package/styles/menu.css

@@ -1 +1 @@
-.reactist_menulist[role=menu],.reactist_menulist[role=menubar]{display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:.81rem;padding:4px 0;min-width:180px;border:1px solid #dcdcdc;border-radius:3px;margin:-4px}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menu] [role=menuitem],.reactist_menulist[role=menubar] .reactist_menugroup__label,.reactist_menulist[role=menubar] [role=menuitem]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-align:left;display:flex;align-items:center;padding:5px 10px;color:inherit;border:none;background-color:transparent}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menubar] .reactist_menugroup__label{color:grey;font-size:.75rem}.reactist_menulist[role=menu] .reactist_submenu_button,.reactist_menulist[role=menubar] .reactist_submenu_button{padding-right:16px}.reactist_menulist[role=menu] .reactist_submenu_button:after,.reactist_menulist[role=menubar] .reactist_submenu_button:after{content:"";position:absolute;border-color:transparent grey;border-style:solid;border-width:4px 0 4px 6px;display:block;width:0;right:6px}.reactist_menulist[role=menu] [role=menuitem],.reactist_menulist[role=menubar] [role=menuitem]{width:100%;box-sizing:border-box}.reactist_menulist[role=menu] [role=menuitem]:focus,.reactist_menulist[role=menu] [role=menuitem]:hover,.reactist_menulist[role=menu] [role=menuitem][aria-expanded=true],.reactist_menulist[role=menubar] [role=menuitem]:focus,.reactist_menulist[role=menubar] [role=menuitem]:hover,.reactist_menulist[role=menubar] [role=menuitem][aria-expanded=true]{color:#202020;background-color:#ececec}.reactist_menulist[role=menu] [role=menuitem]:disabled,.reactist_menulist[role=menu] [role=menuitem][aria-disabled=true],.reactist_menulist[role=menubar] [role=menuitem]:disabled,.reactist_menulist[role=menubar] [role=menuitem][aria-disabled=true]{color:grey;pointer-events:none}.reactist_menulist[role=menu] a[role=menuitem],.reactist_menulist[role=menubar] a[role=menuitem]{cursor:default;text-decoration:none}.reactist_menulist[role=menu] a[role=menuitem]:hover,.reactist_menulist[role=menubar] a[role=menuitem]:hover{text-decoration:none}.reactist_menulist[role=menu] [role=menu],.reactist_menulist[role=menu] [role=menubar],.reactist_menulist[role=menubar] [role=menu],.reactist_menulist[role=menubar] [role=menubar]{margin-top:-5px}.reactist_menulist[role=menu] hr,.reactist_menulist[role=menubar] hr{border:none;height:1px;background-color:#dcdcdc;margin:4px 0}
+.reactist_menulist[role=menu],.reactist_menulist[role=menubar]{min-height:44px;max-height:var(--popover-available-height);overflow:auto;display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:.81rem;padding:4px 0;min-width:180px;border:1px solid #dcdcdc;border-radius:3px;margin:-4px;z-index:var(--reactist-stacking-order-menu,1)}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menu] [role=menuitem],.reactist_menulist[role=menubar] .reactist_menugroup__label,.reactist_menulist[role=menubar] [role=menuitem]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-align:left;display:flex;align-items:center;padding:5px 10px;color:inherit;border:none;background-color:transparent}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menubar] .reactist_menugroup__label{color:grey;font-size:.75rem}.reactist_menulist[role=menu] .reactist_submenu_button,.reactist_menulist[role=menubar] .reactist_submenu_button{padding-right:16px}.reactist_menulist[role=menu] .reactist_submenu_button:after,.reactist_menulist[role=menubar] .reactist_submenu_button:after{content:"";position:absolute;border-color:transparent grey;border-style:solid;border-width:4px 0 4px 6px;display:block;width:0;right:6px}.reactist_menulist[role=menu] [role=menuitem],.reactist_menulist[role=menubar] [role=menuitem]{width:100%;box-sizing:border-box}.reactist_menulist[role=menu] [role=menuitem]:focus,.reactist_menulist[role=menu] [role=menuitem]:hover,.reactist_menulist[role=menu] [role=menuitem][aria-expanded=true],.reactist_menulist[role=menubar] [role=menuitem]:focus,.reactist_menulist[role=menubar] [role=menuitem]:hover,.reactist_menulist[role=menubar] [role=menuitem][aria-expanded=true]{color:#202020;background-color:#ececec}.reactist_menulist[role=menu] [role=menuitem]:disabled,.reactist_menulist[role=menu] [role=menuitem][aria-disabled=true],.reactist_menulist[role=menubar] [role=menuitem]:disabled,.reactist_menulist[role=menubar] [role=menuitem][aria-disabled=true]{color:grey;pointer-events:none}.reactist_menulist[role=menu] a[role=menuitem],.reactist_menulist[role=menubar] a[role=menuitem]{cursor:default;text-decoration:none}.reactist_menulist[role=menu] a[role=menuitem]:hover,.reactist_menulist[role=menubar] a[role=menuitem]:hover{text-decoration:none}.reactist_menulist[role=menu] [role=menu],.reactist_menulist[role=menu] [role=menubar],.reactist_menulist[role=menubar] [role=menu],.reactist_menulist[role=menubar] [role=menubar]{margin-top:-5px}.reactist_menulist[role=menu] hr,.reactist_menulist[role=menubar] hr{border:none;height:1px;background-color:#dcdcdc;margin:4px 0}