@doist/reactist 28.7.2 → 28.7.4

package/lib/modal/modal.d.ts

@@ -1,185 +1,185 @@
-import * as React from 'react';
-import { DialogOptions, PortalOptions } from '@ariakit/react';
-import { IconButtonProps } from '../button';
-import type { ObfuscatedClassName } from '../utils/common-types';
-import type { DividerProps } from '../divider';
-type ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full';
-type ModalHeightMode = 'expand' | 'fitContent';
-type DivProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className' | 'children' | `aria-label` | `aria-labelledby`>;
-export interface ModalProps extends DivProps, ObfuscatedClassName {
-    /**
-     * 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;
-    /**
-     * The weight to apply to all dividers rendered inside the modal.
-     */
-    dividers?: DividerProps['weight'];
-    /**
-     * Whether to set or not the focus initially to the first focusable element inside the modal.
-     */
-    autoFocus?: boolean;
-    /**
-     * Controls if the modal is dismissed when pressing "Escape".
-     */
-    hideOnEscape?: DialogOptions['hideOnEscape'];
-    /**
-     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.
-     */
-    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside'];
-    /**
-     * An escape hatch in case you need to provide a custom class name to the overlay element.
-     */
-    exceptionallySetOverlayClassName?: 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;
-    /**
-     * An HTML element or a memoized callback function that returns an HTML element to be used as
-     * the portal element. By default, the portal element will be a `div` element appended to the
-     * `document.body`.
-     *
-     * @default HTMLDivElement
-     *
-     * @example
-     * const [portal, setPortal] = useState(null);
-     * <Portal portalElement={portal} />;
-     * <div ref={setPortal} />;
-     *
-     * @example
-     * const getPortalElement = useCallback(() => {
-     *   const div = document.createElement("div");
-     *   const portalRoot = document.getElementById("portal-root");
-     *   portalRoot.appendChild(div);
-     *   return div;
-     * }, []);
-     * <Portal portalElement={getPortalElement} />;
-     */
-    portalElement?: PortalOptions['portalElement'];
-}
-/**
- * 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 ModalHeader
- * @see ModalFooter
- * @see ModalBody
- */
-export declare function Modal({ isOpen, onDismiss, height, dividers, width, exceptionallySetClassName, exceptionallySetOverlayClassName, autoFocus, hideOnEscape, hideOnInteractOutside, children, portalElement, onKeyDown, className, ...props }: ModalProps): React.JSX.Element | null;
-export interface ModalCloseButtonProps extends Omit<IconButtonProps, 'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'> {
-    /**
-     * 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 ModalHeader
- */
-export declare function ModalCloseButton(props: ModalCloseButtonProps): React.JSX.Element;
-export interface ModalHeaderProps extends DivProps, ObfuscatedClassName {
-    /**
-     * 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 ModalCloseButton
-     */
-    button?: React.ReactNode | boolean;
-    /**
-     * Whether to render a divider line below the header.
-     * @default false
-     */
-    withDivider?: boolean;
-}
-/**
- * Renders a standard modal header area with an optional close button.
- *
- * @see Modal
- * @see ModalFooter
- * @see ModalBody
- */
-export declare function ModalHeader({ children, button, withDivider, exceptionallySetClassName, ...props }: ModalHeaderProps): React.JSX.Element;
-export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
-    /**
-     * The content of the modal body.
-     */
-    children: React.ReactNode;
-}
-/**
- * Renders the body of a modal.
- *
- * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
- * things, that the content 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 Modal
- * @see ModalHeader
- * @see ModalFooter
- */
-export declare const ModalBody: React.ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ModalFooterProps extends DivProps, ObfuscatedClassName {
-    /**
-     * The contant of the modal footer.
-     */
-    children: React.ReactNode;
-    /**
-     * Whether to render a divider line below the footer.
-     * @default false
-     */
-    withDivider?: boolean;
-}
-/**
- * Renders a standard modal footer area.
- *
- * @see Modal
- * @see ModalHeader
- * @see ModalBody
- */
-export declare function ModalFooter({ exceptionallySetClassName, withDivider, ...props }: ModalFooterProps): React.JSX.Element;
-export type ModalActionsProps = ModalFooterProps;
-/**
- * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
- * @see ModalFooter
- */
-export declare function ModalActions({ children, ...props }: ModalActionsProps): React.JSX.Element;
-export {};
+import * as React from 'react';
+import { DialogOptions, PortalOptions } from '@ariakit/react';
+import { IconButtonProps } from '../button';
+import type { ObfuscatedClassName } from '../utils/common-types';
+import type { DividerProps } from '../divider';
+type ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full';
+type ModalHeightMode = 'expand' | 'fitContent';
+type DivProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className' | 'children' | `aria-label` | `aria-labelledby`>;
+export interface ModalProps extends DivProps, ObfuscatedClassName {
+    /**
+     * 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;
+    /**
+     * The weight to apply to all dividers rendered inside the modal.
+     */
+    dividers?: DividerProps['weight'];
+    /**
+     * Whether to set or not the focus initially to the first focusable element inside the modal.
+     */
+    autoFocus?: boolean;
+    /**
+     * Controls if the modal is dismissed when pressing "Escape".
+     */
+    hideOnEscape?: DialogOptions['hideOnEscape'];
+    /**
+     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.
+     */
+    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside'];
+    /**
+     * An escape hatch in case you need to provide a custom class name to the overlay element.
+     */
+    exceptionallySetOverlayClassName?: 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;
+    /**
+     * An HTML element or a memoized callback function that returns an HTML element to be used as
+     * the portal element. By default, the portal element will be a `div` element appended to the
+     * `document.body`.
+     *
+     * @default HTMLDivElement
+     *
+     * @example
+     * const [portal, setPortal] = useState(null);
+     * <Portal portalElement={portal} />;
+     * <div ref={setPortal} />;
+     *
+     * @example
+     * const getPortalElement = useCallback(() => {
+     *   const div = document.createElement("div");
+     *   const portalRoot = document.getElementById("portal-root");
+     *   portalRoot.appendChild(div);
+     *   return div;
+     * }, []);
+     * <Portal portalElement={getPortalElement} />;
+     */
+    portalElement?: PortalOptions['portalElement'];
+}
+/**
+ * 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 ModalHeader
+ * @see ModalFooter
+ * @see ModalBody
+ */
+export declare function Modal({ isOpen, onDismiss, height, dividers, width, exceptionallySetClassName, exceptionallySetOverlayClassName, autoFocus, hideOnEscape, hideOnInteractOutside, children, portalElement, onKeyDown, className, ...props }: ModalProps): React.JSX.Element | null;
+export interface ModalCloseButtonProps extends Omit<IconButtonProps, 'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'> {
+    /**
+     * 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 ModalHeader
+ */
+export declare function ModalCloseButton(props: ModalCloseButtonProps): React.JSX.Element;
+export interface ModalHeaderProps extends DivProps, ObfuscatedClassName {
+    /**
+     * 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 ModalCloseButton
+     */
+    button?: React.ReactNode | boolean;
+    /**
+     * Whether to render a divider line below the header.
+     * @default false
+     */
+    withDivider?: boolean;
+}
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see Modal
+ * @see ModalFooter
+ * @see ModalBody
+ */
+export declare function ModalHeader({ children, button, withDivider, exceptionallySetClassName, ...props }: ModalHeaderProps): React.JSX.Element;
+export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
+    /**
+     * The content of the modal body.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Renders the body of a modal.
+ *
+ * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
+ * things, that the content 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 Modal
+ * @see ModalHeader
+ * @see ModalFooter
+ */
+export declare const ModalBody: React.ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ModalFooterProps extends DivProps, ObfuscatedClassName {
+    /**
+     * The contant of the modal footer.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to render a divider line below the footer.
+     * @default false
+     */
+    withDivider?: boolean;
+}
+/**
+ * Renders a standard modal footer area.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalBody
+ */
+export declare function ModalFooter({ exceptionallySetClassName, withDivider, ...props }: ModalFooterProps): React.JSX.Element;
+export type ModalActionsProps = ModalFooterProps;
+/**
+ * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
+ * @see ModalFooter
+ */
+export declare function ModalActions({ children, ...props }: ModalActionsProps): React.JSX.Element;
+export {};

package/lib/modal/modal.js

@@ -1,2 +1,210 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),n=require("classnames"),a=require("react-focus-lock"),r=require("aria-hidden"),o=require("@ariakit/react"),l=require("../icons/close-icon.js"),i=require("../columns/columns.js"),s=require("../inline/inline.js"),c=require("../divider/divider.js"),u=require("../box/box.js"),d=require("../button/button.js"),m=require("./modal.module.css.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,t}var h=f(t),x=p(n),b=p(a);const g=["isOpen","onDismiss","height","dividers","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className"],v=["children","button","withDivider","exceptionallySetClassName"],E=["exceptionallySetClassName","children"],y=["exceptionallySetClassName","withDivider"],C=["children"],j=h.createContext({onDismiss:void 0,height:"fitContent",dividers:void 0});function S(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function w(t){const{onDismiss:n}=h.useContext(j),[a,r]=h.useState(!1),[o,i]=h.useState(!1);return h.useEffect((function(){o?r(!0):i(!0)}),[o]),h.createElement(d.IconButton,e.objectSpread2(e.objectSpread2({},t),{},{variant:"quaternary",onClick:n,icon:h.createElement(l.CloseIcon,null),tabIndex:a?0:-1}))}const O=t.forwardRef((function(t,n){let{exceptionallySetClassName:a,children:r}=t,o=e.objectWithoutProperties(t,E);const{height:l}=h.useContext(j);return h.createElement(u.Box,e.objectSpread2(e.objectSpread2({},o),{},{ref:n,className:a,flexGrow:"expand"===l?1:0,height:"expand"===l?"full":void 0,overflow:"auto"}),h.createElement(u.Box,{padding:"large",paddingBottom:"xxlarge"},r))}));function D(t){let{exceptionallySetClassName:n,withDivider:a=!1}=t,r=e.objectWithoutProperties(t,y);const{dividers:o}=h.useContext(j);return h.createElement(h.Fragment,null,a?h.createElement(c.Divider,{weight:o}):null,h.createElement(u.Box,e.objectSpread2(e.objectSpread2({as:"footer"},r),{},{className:n,padding:"large"})))}exports.Modal=function(t){let{isOpen:n,onDismiss:a,height:l="fitContent",dividers:i,width:s="medium",exceptionallySetClassName:c,exceptionallySetOverlayClassName:d,autoFocus:p=!0,hideOnEscape:f=!0,hideOnInteractOutside:v=!0,children:E,portalElement:y,onKeyDown:C}=t,w=e.objectWithoutProperties(t,g);const O=h.useCallback(e=>{e||null==a||a()},[a]),D=o.useDialogStore({open:n,setOpen:O}),N=h.useMemo(()=>({onDismiss:a,height:l,dividers:i}),[a,l,i]),P=h.useRef(null),q=h.useRef(null),B=h.useRef(null),F=h.useCallback(e=>{var t,n;null!=(t=q.current)&&t.contains(e.target)||null==(n=B.current)||!n.contains(e.target)||(e.stopPropagation(),null==a||a())},[a]);h.useLayoutEffect((function(){if(n&&P.current)return r.hideOthers(P.current)}),[n]);const k=h.useCallback((function(e){f&&null!=a&&"Escape"===e.key&&!e.defaultPrevented&&(e.stopPropagation(),a()),null==C||C(e)}),[a,f,C]);return n?h.createElement(o.Portal,{portalRef:P,portalElement:y},h.createElement(u.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:x.default(m.default.overlay,m.default[l],m.default[s],d),onPointerDown:v?F:void 0,ref:B},h.createElement(b.default,{autoFocus:p,whiteList:S,returnFocus:!0,crossFrame:!1},h.createElement(o.Dialog,e.objectSpread2(e.objectSpread2({},w),{},{ref:q,render:h.createElement(u.Box,{borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===l?"full":void 0,flexGrow:"expand"===l?1:0}),className:x.default(c,m.default.container),store:D,preventBodyScroll:!0,modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1,hideOnEscape:!1,onKeyDown:k}),h.createElement(j.Provider,{value:N},E))))):null},exports.ModalActions=function(t){let{children:n}=t,a=e.objectWithoutProperties(t,C);return h.createElement(D,e.objectSpread2({},a),h.createElement(s.Inline,{align:"right",space:"large"},n))},exports.ModalBody=O,exports.ModalCloseButton=w,exports.ModalFooter=D,exports.ModalHeader=function(t){let{children:n,button:a=!0,withDivider:r=!1,exceptionallySetClassName:o}=t,l=e.objectWithoutProperties(t,v);const{dividers:s}=h.useContext(j);return h.createElement(h.Fragment,null,h.createElement(u.Box,e.objectSpread2(e.objectSpread2({},l),{},{as:"header",paddingLeft:"large",paddingRight:!1===a||null===a?"large":"small",paddingY:"small",className:o}),h.createElement(i.Columns,{space:"large",alignY:"center"},h.createElement(i.Column,{width:"auto"},n),!1===a||null===a?h.createElement("div",{className:m.default.headerContent}):h.createElement(i.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof a?h.createElement(w,{"aria-label":"Close modal",autoFocus:!1}):a))),r?h.createElement(c.Divider,{weight:s}):null)};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames');
+var FocusLock = require('react-focus-lock');
+var ariaHidden = require('aria-hidden');
+var react = require('@ariakit/react');
+var closeIcon = require('../icons/close-icon.js');
+var columns = require('../columns/columns.js');
+var inline = require('../inline/inline.js');
+var divider = require('../divider/divider.js');
+var box = require('../box/box.js');
+var button = require('../button/button.js');
+var modal_module = require('./modal.module.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
+
+var ModalContext = React__namespace.createContext({
+    onDismiss: undefined,
+    height: 'fitContent',
+    dividers: undefined
+});
+function isNotInternalFrame(element) {
+    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
+}
+/**
+ * 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 ModalHeader
+ * @see ModalFooter
+ * @see ModalBody
+ */
+function Modal(_a) {
+    var isOpen = _a.isOpen, onDismiss = _a.onDismiss, _b = _a.height, height = _b === void 0 ? 'fitContent' : _b, dividers = _a.dividers, _c = _a.width, width = _c === void 0 ? 'medium' : _c, exceptionallySetClassName = _a.exceptionallySetClassName, exceptionallySetOverlayClassName = _a.exceptionallySetOverlayClassName, _d = _a.autoFocus, autoFocus = _d === void 0 ? true : _d, _e = _a.hideOnEscape, hideOnEscape = _e === void 0 ? true : _e, _f = _a.hideOnInteractOutside, hideOnInteractOutside = _f === void 0 ? true : _f, children = _a.children, portalElement = _a.portalElement, onKeyDown = _a.onKeyDown; 
+    // @ts-expect-error we want to make sure to not pass it to the Dialog component
+    _a.className; var props = tslib.__rest(_a, ["isOpen", "onDismiss", "height", "dividers", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"]);
+    var setOpen = React__namespace.useCallback(function (visible) {
+        if (!visible) {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        }
+    }, [onDismiss]);
+    var store = react.useDialogStore({ open: isOpen, setOpen: setOpen });
+    var contextValue = React__namespace.useMemo(function () { return ({ onDismiss: onDismiss, height: height, dividers: dividers }); }, [
+        onDismiss,
+        height,
+        dividers,
+    ]);
+    var portalRef = React__namespace.useRef(null);
+    var dialogRef = React__namespace.useRef(null);
+    var backdropRef = React__namespace.useRef(null);
+    var handleBackdropClick = React__namespace.useCallback(function (event) {
+        var _a, _b;
+        if (
+        // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,
+        // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog
+        !((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            (
+            // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM
+            (_b = backdropRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
+            event.stopPropagation();
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        }
+    }, [onDismiss]);
+    React__namespace.useLayoutEffect(function disableAccessibilityTreeOutside() {
+        if (!isOpen || !portalRef.current) {
+            return;
+        }
+        return ariaHidden.hideOthers(portalRef.current);
+    }, [isOpen]);
+    var handleKeyDown = React__namespace.useCallback(function handleKeyDown(event) {
+        if (hideOnEscape &&
+            onDismiss != null &&
+            event.key === 'Escape' &&
+            !event.defaultPrevented) {
+            event.stopPropagation();
+            onDismiss();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }, [onDismiss, hideOnEscape, onKeyDown]);
+    if (!isOpen) {
+        return null;
+    }
+    return (React__namespace.createElement(react.Portal, { portalRef: portalRef, portalElement: portalElement },
+        React__namespace.createElement(box.Box, { "data-testid": "modal-overlay", "data-overlay": true, className: classNames__default["default"](modal_module["default"].overlay, modal_module["default"][height], modal_module["default"][width], exceptionallySetOverlayClassName), 
+            /**
+             * We're using `onPointerDown` instead of `onClick` to prevent the modal from
+             * closing when the click starts inside the modal and ends on the backdrop.
+             */
+            onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined, ref: backdropRef },
+            React__namespace.createElement(FocusLock__default["default"], { autoFocus: autoFocus, whiteList: isNotInternalFrame, returnFocus: true, crossFrame: false },
+                React__namespace.createElement(react.Dialog, tslib.__assign({}, props, { ref: dialogRef, render: React__namespace.createElement(box.Box, { borderRadius: "full", background: "default", display: "flex", flexDirection: "column", overflow: "hidden", height: height === 'expand' ? 'full' : undefined, flexGrow: height === 'expand' ? 1 : 0 }), className: classNames__default["default"](exceptionallySetClassName, modal_module["default"].container), store: store, preventBodyScroll: true, 
+                    // Disable focus lock as we set up our own using ReactFocusLock
+                    modal: false, autoFocus: false, autoFocusOnShow: false, autoFocusOnHide: false, 
+                    // Disable portal and backdrop as we control their markup
+                    portal: false, backdrop: false, hideOnInteractOutside: false, hideOnEscape: false, onKeyDown: handleKeyDown }),
+                    React__namespace.createElement(ModalContext.Provider, { value: contextValue }, children))))));
+}
+/**
+ * The close button rendered by ModalHeader. Provided independently so that consumers can customize
+ * the button's label.
+ *
+ * @see ModalHeader
+ */
+function ModalCloseButton(props) {
+    var onDismiss = React__namespace.useContext(ModalContext).onDismiss;
+    var _a = React__namespace.useState(false), includeInTabOrder = _a[0], setIncludeInTabOrder = _a[1];
+    var _b = React__namespace.useState(false), isMounted = _b[0], setIsMounted = _b[1];
+    React__namespace.useEffect(function skipAutoFocus() {
+        if (isMounted) {
+            setIncludeInTabOrder(true);
+        }
+        else {
+            setIsMounted(true);
+        }
+    }, [isMounted]);
+    return (React__namespace.createElement(button.IconButton, tslib.__assign({}, props, { variant: "quaternary", onClick: onDismiss, icon: React__namespace.createElement(closeIcon.CloseIcon, null), tabIndex: includeInTabOrder ? 0 : -1 })));
+}
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see Modal
+ * @see ModalFooter
+ * @see ModalBody
+ */
+function ModalHeader(_a) {
+    var children = _a.children, _b = _a.button, button = _b === void 0 ? true : _b, _c = _a.withDivider, withDivider = _c === void 0 ? false : _c, exceptionallySetClassName = _a.exceptionallySetClassName, props = tslib.__rest(_a, ["children", "button", "withDivider", "exceptionallySetClassName"]);
+    var dividers = React__namespace.useContext(ModalContext).dividers;
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(box.Box, tslib.__assign({}, props, { as: "header", paddingLeft: "large", paddingRight: button === false || button === null ? 'large' : 'small', paddingY: "small", className: exceptionallySetClassName }),
+            React__namespace.createElement(columns.Columns, { space: "large", alignY: "center" },
+                React__namespace.createElement(columns.Column, { width: "auto" }, children),
+                button === false || button === null ? (React__namespace.createElement("div", { className: modal_module["default"].headerContent })) : (React__namespace.createElement(columns.Column, { width: "content", exceptionallySetClassName: modal_module["default"].buttonContainer, "data-testid": "button-container" }, typeof button === 'boolean' ? (React__namespace.createElement(ModalCloseButton, { "aria-label": "Close modal", autoFocus: false })) : (button))))),
+        withDivider ? React__namespace.createElement(divider.Divider, { weight: dividers }) : null));
+}
+/**
+ * Renders the body of a modal.
+ *
+ * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
+ * things, that the content 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 Modal
+ * @see ModalHeader
+ * @see ModalFooter
+ */
+var ModalBody = React.forwardRef(function ModalBody(_a, ref) {
+    var exceptionallySetClassName = _a.exceptionallySetClassName, children = _a.children, props = tslib.__rest(_a, ["exceptionallySetClassName", "children"]);
+    var height = React__namespace.useContext(ModalContext).height;
+    return (React__namespace.createElement(box.Box, tslib.__assign({}, props, { ref: ref, className: exceptionallySetClassName, flexGrow: height === 'expand' ? 1 : 0, height: height === 'expand' ? 'full' : undefined, overflow: "auto" }),
+        React__namespace.createElement(box.Box, { padding: "large", paddingBottom: "xxlarge" }, children)));
+});
+/**
+ * Renders a standard modal footer area.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalBody
+ */
+function ModalFooter(_a) {
+    var exceptionallySetClassName = _a.exceptionallySetClassName, _b = _a.withDivider, withDivider = _b === void 0 ? false : _b, props = tslib.__rest(_a, ["exceptionallySetClassName", "withDivider"]);
+    var dividers = React__namespace.useContext(ModalContext).dividers;
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        withDivider ? React__namespace.createElement(divider.Divider, { weight: dividers }) : null,
+        React__namespace.createElement(box.Box, tslib.__assign({ as: "footer" }, props, { className: exceptionallySetClassName, padding: "large" }))));
+}
+/**
+ * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
+ * @see ModalFooter
+ */
+function ModalActions(_a) {
+    var children = _a.children, props = tslib.__rest(_a, ["children"]);
+    return (React__namespace.createElement(ModalFooter, tslib.__assign({}, props),
+        React__namespace.createElement(inline.Inline, { align: "right", space: "large" }, children)));
+}
+
+exports.Modal = Modal;
+exports.ModalActions = ModalActions;
+exports.ModalBody = ModalBody;
+exports.ModalCloseButton = ModalCloseButton;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
 //# sourceMappingURL=modal.js.map