@pega/cosmos-react-core 2.0.0-dev.2.1 → 2.0.0-dev.20.0

package/lib/components/Modal/Modal.js

@@ -1,103 +1,26 @@
-import React, { forwardRef, useContext, useEffect, useRef } from 'react';
-import styled, { css } from 'styled-components';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useRef } from 'react';
+import Progress from '../Progress';
+import { getFocusables } from '../../utils';
 import Backdrop from '../Backdrop';
 import Flex from '../Flex';
-import Button, { StyledButton } from '../Button';
-import { useConsolidatedRef, useI18n, useOuterEvent, useUID } from '../../hooks';
-import { defaultThemeProp } from '../../theme';
-import Icon, { StyledIcon } from '../Icon';
+import Button from '../Button';
+import { useAfterInitialEffect, useConsolidatedRef, useI18n, useOuterEvent, useUID } from '../../hooks';
+import Icon, { registerIcon } from '../Icon';
+import * as timesIcon from '../Icon/icons/times.icon';
+import * as minusIcon from '../Icon/icons/minus.icon';
+import * as scaleUpIcon from '../Icon/icons/scale-up.icon';
+import * as scaleDownIcon from '../Icon/icons/scale-down.icon';
 import Text from '../Text';
-import { getFocusables } from '../../utils';
-import { ModalContext } from './Contexts';
+import { Count } from '../Badges';
+import { ModalManagerContext } from './Contexts';
 import MinimizedModal from './MinimizedModal';
-const StyledModal = styled.div(({ theme: { base }, alert, center, stretch }) => {
-    return css `
-      ${!alert && stretch
-        ? css `
-            width: calc(100% - 1rem);
-            height: calc(100% - 1rem);
-
-            @media screen and (min-width: ${base.breakpoints.sm}) {
-              width: calc(100% - 2rem);
-              height: calc(100% - 2rem);
-            }
-
-            @media screen and (min-width: ${base.breakpoints.md}) {
-              width: calc(100% - 4rem);
-              height: calc(100% - 4rem);
-            }
-          `
-        : css `
-            min-width: min(calc(100% - 1rem), ${alert ? 60 : 80}ch);
-            max-width: min(calc(100% - 1rem), ${alert ? 60 : 80}ch);
-            max-height: calc(100% - 1rem);
-            ${!center &&
-            css `
-              margin-block-start: 0.5rem;
-            `}
-
-            @media screen and (min-width: ${base.breakpoints.sm}) {
-              min-width: min(calc(100% - 2rem), ${alert ? 60 : 80}ch);
-              max-width: min(calc(100% - 2rem), ${alert ? 60 : 80}ch);
-              max-height: calc(100% - 2rem);
-              ${!center &&
-            css `
-                margin-block-start: 1rem;
-              `}
-            }
-
-            @media screen and (min-width: ${base.breakpoints.md}) {
-              min-width: min(calc(100% - 4rem), ${alert ? 60 : 80}ch);
-              max-width: min(calc(100% - 4rem), ${alert ? 60 : 80}ch);
-              max-height: calc(100% - 4rem);
-              ${!center &&
-            css `
-                margin-block-start: 2rem;
-              `}
-            }
-          `}
-      background-color: ${base.palette['primary-background']};
-      box-shadow: ${base.shadow.high};
-      border-radius: calc(0.5 * ${base['border-radius']});
-    `;
-});
-StyledModal.defaultProps = defaultThemeProp;
-export const StyledModalHeader = styled.header(({ theme: { base }, hasAction }) => {
-    const padAdjust = hasAction ? 0.75 : 0;
-    return css `
-      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})
-        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});
-      h2 > ${StyledIcon} {
-        margin-inline-end: ${base.spacing};
-      }
-
-      ${StyledButton} {
-        color: ${base.palette['foreground-color']};
-      }
-    `;
-});
-StyledModalHeader.defaultProps = defaultThemeProp;
-export const StyledModalContent = styled.div(({ theme: { base } }) => {
-    return css `
-    position: relative;
-    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});
-    overflow-y: auto;
-
-    &:last-child {
-      padding-bottom: calc(3 * ${base.spacing});
-    }
-  `;
-});
-StyledModalContent.defaultProps = defaultThemeProp;
-export const StyledModalActions = styled.footer(({ theme: { base } }) => {
-    return css `
-    padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});
-  `;
-});
-StyledModalActions.defaultProps = defaultThemeProp;
+import { StyledModal, StyledModalHeader, StyledModalContent, StyledModalActions, StyledModalChildrenWrap } from './Modal.styles';
+registerIcon(timesIcon, minusIcon, scaleUpIcon, scaleDownIcon);
 const Modal = forwardRef((props, refArg) => {
-    const { as, heading, children, actions, stretch = false, center = false, defaultFocus, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, onRequestDismiss, onRequestMinimize, onRequestActivate, ...restProps } = props;
-    const { alert, dismissible, minimizable, state, dismiss, minimize, unmount, top } = useContext(ModalContext);
+    const { as, progress = false, heading, count, children, actions, stretch = false, center = false, defaultFocus, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, onRequestDismiss, onRequestMinimize, onRequestMaximize, onRequestDock, onRequestActivate, ...restProps } = props;
+    const { ModalContext } = useContext(ModalManagerContext);
+    const { alert, dismissible, minimizable, maximizable, dockable, state, dismiss, minimize, maximize, dock, unmount, top } = useContext(ModalContext);
     const modalRef = useConsolidatedRef(refArg);
     const modalContentRef = useRef(null);
     const backdropRef = useRef(null);
@@ -105,26 +28,26 @@ const Modal = forwardRef((props, refArg) => {
     const id = useUID();
     const t = useI18n();
     const tryDismiss = () => {
-        if ((onRequestDismiss === null || onRequestDismiss === void 0 ? void 0 : onRequestDismiss()) !== false) {
+        if (onRequestDismiss?.() !== false) {
             dismiss();
         }
     };
     const setFocus = () => {
-        var _a;
         const focusables = getFocusables(modalRef);
-        if (defaultFocus === null || defaultFocus === void 0 ? void 0 : defaultFocus.current) {
+        if (defaultFocus?.current) {
             defaultFocus.current.focus();
         }
         else {
-            const focusable = (_a = focusables.find(el => {
-                var _a;
-                return (_a = modalContentRef.current) === null || _a === void 0 ? void 0 : _a.contains(el);
-            })) !== null && _a !== void 0 ? _a : focusables[0];
-            focusable === null || focusable === void 0 ? void 0 : focusable.focus();
+            const focusable = focusables.find(el => {
+                return modalContentRef.current?.contains(el);
+            }) ??
+                closeButtonRef.current ??
+                focusables[0];
+            focusable?.focus();
         }
     };
     const onKeyDown = (e) => {
-        if (dismissible && state === 'open' && e.key === 'Escape' && top) {
+        if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {
             tryDismiss();
             return;
         }
@@ -136,18 +59,17 @@ const Modal = forwardRef((props, refArg) => {
             const lastFocusable = focusables[focusables.length - 1];
             if (document.activeElement === modalRef.current ||
                 (document.activeElement === firstFocusable && e.shiftKey)) {
-                lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.focus();
+                lastFocusable?.focus();
                 e.preventDefault();
             }
             else if (document.activeElement === lastFocusable && !e.shiftKey) {
-                firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+                firstFocusable?.focus();
                 e.preventDefault();
             }
         }
     };
-    useOuterEvent('click', [modalRef], e => {
-        var _a;
-        if (state === 'minimized')
+    useOuterEvent('mousedown', [modalRef], e => {
+        if (['minimized', 'docked', 'closed'].includes(state))
             return;
         if (dismissible) {
             if (e.target === backdropRef.current) {
@@ -155,7 +77,7 @@ const Modal = forwardRef((props, refArg) => {
             }
         }
         else {
-            (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            modalRef.current?.focus();
         }
     });
     useEffect(() => {
@@ -167,29 +89,46 @@ const Modal = forwardRef((props, refArg) => {
     useEffect(() => {
         if (state === 'minimized')
             return;
-        if (state === 'open')
+        if (state === 'open' || state === 'maximized' || state === 'docked')
             setFocus();
     }, [state]);
-    return state === 'minimized' ? (React.createElement(MinimizedModal, { ...props, ...restProps })) : (React.createElement(Backdrop, { ref: backdropRef, container: {
-            alignItems: center || stretch ? 'center' : 'start'
-        }, open: state === 'open', onBeforeTransitionIn: onBeforeOpen, onAfterTransitionIn: onAfterOpen, onBeforeTransitionOut: onBeforeClose, onAfterTransitionOut: () => {
+    // Set a ref based on the initial progress state to be used later to check for setting focus.
+    const focusOnProgressChange = useRef(!!progress);
+    useAfterInitialEffect(() => {
+        // If the progress prop changed and we have already set focus we are done.
+        if (!progress && focusOnProgressChange.current) {
+            setFocus();
+            focusOnProgressChange.current = false;
+        }
+    }, [progress]);
+    const maximized = stretch || state === 'maximized';
+    const modal = (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: maximized, center: center, "aria-labelledby": `${id}-heading`, "aria-modal": state === 'docked' ? 'false' : 'true', state: state, "aria-live": 'polite', "aria-busy": progress ? 'true' : 'false', children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 1 }, item: { shrink: 0 }, as: StyledModalHeader, hasAction: minimizable || dismissible, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: Text, variant: 'h2', id: `${id}-heading`, children: [_jsx("span", { children: heading }, void 0), typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }, void 0), _jsxs(Flex, { container: true, children: [maximizable && !alert && state !== 'maximized' && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_maximize'), onClick: () => {
+                                    if (onRequestMaximize?.() !== false) {
+                                        maximize();
+                                    }
+                                }, children: _jsx(Icon, { name: 'scale-up' }, void 0) }, void 0)), dockable && !alert && state !== 'docked' && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_dock'), onClick: () => {
+                                    if (onRequestDock?.() !== false) {
+                                        dock();
+                                    }
+                                }, children: _jsx(Icon, { name: 'scale-down' }, void 0) }, void 0)), minimizable && !alert && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_minimize'), onClick: () => {
+                                    if (onRequestMinimize?.() !== false) {
+                                        minimize();
+                                    }
+                                }, children: _jsx(Icon, { name: 'minus' }, void 0) }, void 0)), dismissible && !alert && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_close'), onClick: () => {
+                                    tryDismiss();
+                                    if (dockable) {
+                                        onBeforeClose?.();
+                                        unmount();
+                                        onAfterClose?.();
+                                    }
+                                }, ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0))] }, void 0)] }, void 0), _jsxs(Flex, { item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef, children: [children && _jsx(StyledModalChildrenWrap, { children: children }, void 0), _jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'object' ? progress.message : t('loading') }, void 0)] }, void 0), actions && (_jsx(Flex, { container: { justify: 'between' }, item: { shrink: 0 }, as: StyledModalActions, children: actions }, void 0))] }, void 0));
+    const renderModal = state === 'docked' ? (modal) : (_jsx(Backdrop, { ref: backdropRef, container: {
+            alignItems: center || maximized ? 'center' : 'start'
+        }, transitionSpeed: 'slow', open: state === 'open' || state === 'maximized', onBeforeTransitionIn: onBeforeOpen, onAfterTransitionIn: onAfterOpen, onBeforeTransitionOut: onBeforeClose, onAfterTransitionOut: () => {
             unmount();
-            onAfterClose === null || onAfterClose === void 0 ? void 0 : onAfterClose();
-        } },
-        React.createElement(Flex, { ...restProps, container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: stretch, center: center, "aria-labelledby": `${id}-heading`, "aria-modal": true },
-            React.createElement(Flex, { container: { justify: 'between', alignItems: 'center' }, item: { shrink: 0 }, as: StyledModalHeader, hasAction: minimizable || dismissible },
-                React.createElement(Flex, { as: Text, container: { alignItems: 'center' }, variant: 'h2', id: `${id}-heading` }, heading),
-                React.createElement("div", null,
-                    minimizable && !alert && (React.createElement(Button, { icon: true, variant: 'simple', "aria-label": t('modal_minimize'), onClick: () => {
-                            if ((onRequestMinimize === null || onRequestMinimize === void 0 ? void 0 : onRequestMinimize()) !== false) {
-                                minimize();
-                            }
-                        } },
-                        React.createElement(Icon, { name: 'minus' }))),
-                    dismissible && !alert && (React.createElement(Button, { icon: true, variant: 'simple', "aria-label": t('modal_close'), onClick: tryDismiss, ref: closeButtonRef },
-                        React.createElement(Icon, { name: 'times' }))))),
-            React.createElement(Flex, { item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef }, children),
-            actions && (React.createElement(Flex, { container: { justify: 'between' }, item: { shrink: 0 }, as: StyledModalActions }, actions)))));
+            onAfterClose?.();
+        }, children: modal }, void 0));
+    return state === 'minimized' ? _jsx(MinimizedModal, { ...props, ...restProps }, void 0) : renderModal;
 });
 export default Modal;
 //# sourceMappingURL=Modal.js.map

package/lib/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useContext,\n  useEffect,\n  MouseEvent,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button, { StyledButton } from '../Button';\nimport { ForwardProps, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport Text from '../Text';\nimport { getFocusables } from '../../utils';\n\nimport { ModalContext } from './Contexts';\nimport { ModalContextValue, ModalProps } from './Modal.types';\nimport MinimizedModal from './MinimizedModal';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center'>;\n\nconst StyledModal = styled.div<ModalPropsWithDefaults & Pick<ModalContextValue, 'alert'>>(\n  ({ theme: { base }, alert, center, stretch }) => {\n    return css`\n      ${!alert && stretch\n        ? css`\n            width: calc(100% - 1rem);\n            height: calc(100% - 1rem);\n\n            @media screen and (min-width: ${base.breakpoints.sm}) {\n              width: calc(100% - 2rem);\n              height: calc(100% - 2rem);\n            }\n\n            @media screen and (min-width: ${base.breakpoints.md}) {\n              width: calc(100% - 4rem);\n              height: calc(100% - 4rem);\n            }\n          `\n        : css`\n            min-width: min(calc(100% - 1rem), ${alert ? 60 : 80}ch);\n            max-width: min(calc(100% - 1rem), ${alert ? 60 : 80}ch);\n            max-height: calc(100% - 1rem);\n            ${!center &&\n            css`\n              margin-block-start: 0.5rem;\n            `}\n\n            @media screen and (min-width: ${base.breakpoints.sm}) {\n              min-width: min(calc(100% - 2rem), ${alert ? 60 : 80}ch);\n              max-width: min(calc(100% - 2rem), ${alert ? 60 : 80}ch);\n              max-height: calc(100% - 2rem);\n              ${!center &&\n              css`\n                margin-block-start: 1rem;\n              `}\n            }\n\n            @media screen and (min-width: ${base.breakpoints.md}) {\n              min-width: min(calc(100% - 4rem), ${alert ? 60 : 80}ch);\n              max-width: min(calc(100% - 4rem), ${alert ? 60 : 80}ch);\n              max-height: calc(100% - 4rem);\n              ${!center &&\n              css`\n                margin-block-start: 2rem;\n              `}\n            }\n          `}\n      background-color: ${base.palette['primary-background']};\n      box-shadow: ${base.shadow.high};\n      border-radius: calc(0.5 * ${base['border-radius']});\n    `;\n  }\n);\n\nStyledModal.defaultProps = defaultThemeProp;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n  ({ theme: { base }, hasAction }) => {\n    const padAdjust = hasAction ? 0.75 : 0;\n\n    return css`\n      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n      h2 > ${StyledIcon} {\n        margin-inline-end: ${base.spacing};\n      }\n\n      ${StyledButton} {\n        color: ${base.palette['foreground-color']};\n      }\n    `;\n  }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n    overflow-y: auto;\n\n    &:last-child {\n      padding-bottom: calc(3 * ${base.spacing});\n    }\n  `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModalActions = styled.footer(({ theme: { base } }) => {\n  return css`\n    padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n  `;\n});\n\nStyledModalActions.defaultProps = defaultThemeProp;\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ModalProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      as,\n      heading,\n      children,\n      actions,\n      stretch = false,\n      center = false,\n      defaultFocus,\n      onBeforeOpen,\n      onAfterOpen,\n      onBeforeClose,\n      onAfterClose,\n      onRequestDismiss,\n      onRequestMinimize,\n      onRequestActivate,\n      ...restProps\n    } = props;\n\n    const { alert, dismissible, minimizable, state, dismiss, minimize, unmount, top } =\n      useContext(ModalContext);\n\n    const modalRef = useConsolidatedRef(refArg);\n    const modalContentRef = useRef<HTMLDivElement>(null);\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const id = useUID();\n    const t = useI18n();\n\n    const tryDismiss = () => {\n      if (onRequestDismiss?.() !== false) {\n        dismiss();\n      }\n    };\n\n    const setFocus = () => {\n      const focusables = getFocusables(modalRef);\n\n      if (defaultFocus?.current) {\n        defaultFocus.current.focus();\n      } else {\n        const focusable =\n          focusables.find(el => {\n            return modalContentRef.current?.contains(el);\n          }) ?? focusables[0];\n\n        focusable?.focus();\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (dismissible && state === 'open' && e.key === 'Escape' && top) {\n        tryDismiss();\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        const focusables = getFocusables(modalRef);\n        if (!focusables || focusables.length < 2) return;\n        const firstFocusable = focusables[0];\n        const lastFocusable = focusables[focusables.length - 1];\n\n        if (\n          document.activeElement === modalRef.current ||\n          (document.activeElement === firstFocusable && e.shiftKey)\n        ) {\n          lastFocusable?.focus();\n          e.preventDefault();\n        } else if (document.activeElement === lastFocusable && !e.shiftKey) {\n          firstFocusable?.focus();\n          e.preventDefault();\n        }\n      }\n    };\n\n    useOuterEvent('click', [modalRef], e => {\n      if (state === 'minimized') return;\n\n      if (dismissible) {\n        if (e.target === backdropRef.current) {\n          tryDismiss();\n        }\n      } else {\n        modalRef.current?.focus();\n      }\n    });\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeyDown);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n      };\n    }, [onKeyDown]);\n\n    useEffect(() => {\n      if (state === 'minimized') return;\n      if (state === 'open') setFocus();\n    }, [state]);\n\n    return state === 'minimized' ? (\n      <MinimizedModal {...props} {...restProps} />\n    ) : (\n      <Backdrop\n        ref={backdropRef}\n        container={{\n          alignItems: center || stretch ? 'center' : 'start'\n        }}\n        open={state === 'open'}\n        onBeforeTransitionIn={onBeforeOpen}\n        onAfterTransitionIn={onAfterOpen}\n        onBeforeTransitionOut={onBeforeClose}\n        onAfterTransitionOut={() => {\n          unmount();\n          onAfterClose?.();\n        }}\n      >\n        <Flex\n          {...restProps}\n          container={{ direction: 'column' }}\n          ref={modalRef}\n          as={StyledModal}\n          forwardedAs={as}\n          onClick={(e: MouseEvent) => e.stopPropagation()}\n          alert={alert}\n          role={alert ? 'alertdialog' : 'dialog'}\n          stretch={stretch}\n          center={center}\n          aria-labelledby={`${id}-heading`}\n          aria-modal\n        >\n          <Flex\n            container={{ justify: 'between', alignItems: 'center' }}\n            item={{ shrink: 0 }}\n            as={StyledModalHeader}\n            hasAction={minimizable || dismissible}\n          >\n            <Flex as={Text} container={{ alignItems: 'center' }} variant='h2' id={`${id}-heading`}>\n              {heading}\n            </Flex>\n\n            <div>\n              {minimizable && !alert && (\n                <Button\n                  icon\n                  variant='simple'\n                  aria-label={t('modal_minimize')}\n                  onClick={() => {\n                    if (onRequestMinimize?.() !== false) {\n                      minimize();\n                    }\n                  }}\n                >\n                  <Icon name='minus' />\n                </Button>\n              )}\n              {dismissible && !alert && (\n                <Button\n                  icon\n                  variant='simple'\n                  aria-label={t('modal_close')}\n                  onClick={tryDismiss}\n                  ref={closeButtonRef}\n                >\n                  <Icon name='times' />\n                </Button>\n              )}\n            </div>\n          </Flex>\n\n          <Flex item={{ grow: 1 }} as={StyledModalContent} ref={modalContentRef}>\n            {children}\n          </Flex>\n\n          {actions && (\n            <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n              {actions}\n            </Flex>\n          )}\n        </Flex>\n      </Backdrop>\n    );\n  }\n);\n\nexport default Modal;\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useContext,\n  useEffect,\n  MouseEvent,\n  useRef\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as scaleUpIcon from '../Icon/icons/scale-up.icon';\nimport * as scaleDownIcon from '../Icon/icons/scale-down.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport { ModalManagerContext } from './Contexts';\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n  StyledModal,\n  StyledModalHeader,\n  StyledModalContent,\n  StyledModalActions,\n  StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, scaleUpIcon, scaleDownIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<ModalProps>, refArg: Ref<HTMLElement>) => {\n    const {\n      as,\n      progress = false,\n      heading,\n      count,\n      children,\n      actions,\n      stretch = false,\n      center = false,\n      defaultFocus,\n      onBeforeOpen,\n      onAfterOpen,\n      onBeforeClose,\n      onAfterClose,\n      onRequestDismiss,\n      onRequestMinimize,\n      onRequestMaximize,\n      onRequestDock,\n      onRequestActivate,\n      ...restProps\n    } = props;\n\n    const { ModalContext } = useContext(ModalManagerContext);\n    const {\n      alert,\n      dismissible,\n      minimizable,\n      maximizable,\n      dockable,\n      state,\n      dismiss,\n      minimize,\n      maximize,\n      dock,\n      unmount,\n      top\n    } = useContext(ModalContext);\n\n    const modalRef = useConsolidatedRef(refArg);\n    const modalContentRef = useRef<HTMLDivElement>(null);\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const id = useUID();\n    const t = useI18n();\n\n    const tryDismiss = () => {\n      if (onRequestDismiss?.() !== false) {\n        dismiss();\n      }\n    };\n\n    const setFocus = () => {\n      const focusables = getFocusables(modalRef);\n\n      if (defaultFocus?.current) {\n        defaultFocus.current.focus();\n      } else {\n        const focusable =\n          focusables.find(el => {\n            return modalContentRef.current?.contains(el);\n          }) ??\n          closeButtonRef.current ??\n          focusables[0];\n\n        focusable?.focus();\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {\n        tryDismiss();\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        const focusables = getFocusables(modalRef);\n        if (!focusables || focusables.length < 2) return;\n        const firstFocusable = focusables[0];\n        const lastFocusable = focusables[focusables.length - 1];\n\n        if (\n          document.activeElement === modalRef.current ||\n          (document.activeElement === firstFocusable && e.shiftKey)\n        ) {\n          lastFocusable?.focus();\n          e.preventDefault();\n        } else if (document.activeElement === lastFocusable && !e.shiftKey) {\n          firstFocusable?.focus();\n          e.preventDefault();\n        }\n      }\n    };\n\n    useOuterEvent('mousedown', [modalRef], e => {\n      if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n      if (dismissible) {\n        if (e.target === backdropRef.current) {\n          tryDismiss();\n        }\n      } else {\n        modalRef.current?.focus();\n      }\n    });\n\n    useEffect(() => {\n      document.addEventListener('keydown', onKeyDown);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown);\n      };\n    }, [onKeyDown]);\n\n    useEffect(() => {\n      if (state === 'minimized') return;\n      if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n    }, [state]);\n\n    // Set a ref based on the initial progress state to be used later to check for setting focus.\n    const focusOnProgressChange = useRef(!!progress);\n    useAfterInitialEffect(() => {\n      // If the progress prop changed and we have already set focus we are done.\n      if (!progress && focusOnProgressChange.current) {\n        setFocus();\n        focusOnProgressChange.current = false;\n      }\n    }, [progress]);\n\n    const maximized = stretch || state === 'maximized';\n\n    const modal = (\n      <Flex\n        {...restProps}\n        container={{ direction: 'column' }}\n        ref={modalRef}\n        as={StyledModal}\n        forwardedAs={as}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        alert={alert}\n        role={alert ? 'alertdialog' : 'dialog'}\n        stretch={maximized}\n        center={center}\n        aria-labelledby={`${id}-heading`}\n        aria-modal={state === 'docked' ? 'false' : 'true'}\n        state={state}\n        // FOR PR REVIEW: This may be too much, this may be fine...\n        aria-live='polite'\n        aria-busy={progress ? 'true' : 'false'}\n      >\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n          item={{ shrink: 0 }}\n          as={StyledModalHeader}\n          hasAction={minimizable || dismissible}\n        >\n          <Flex\n            container={{ alignItems: 'center', gap: 1 }}\n            as={Text}\n            variant='h2'\n            id={`${id}-heading`}\n          >\n            <span>{heading}</span>\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n\n          <Flex container>\n            {maximizable && !alert && state !== 'maximized' && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_maximize')}\n                onClick={() => {\n                  if (onRequestMaximize?.() !== false) {\n                    maximize();\n                  }\n                }}\n              >\n                <Icon name='scale-up' />\n              </Button>\n            )}\n            {dockable && !alert && state !== 'docked' && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_dock')}\n                onClick={() => {\n                  if (onRequestDock?.() !== false) {\n                    dock();\n                  }\n                }}\n              >\n                <Icon name='scale-down' />\n              </Button>\n            )}\n            {minimizable && !alert && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_minimize')}\n                onClick={() => {\n                  if (onRequestMinimize?.() !== false) {\n                    minimize();\n                  }\n                }}\n              >\n                <Icon name='minus' />\n              </Button>\n            )}\n            {dismissible && !alert && (\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('modal_close')}\n                onClick={() => {\n                  tryDismiss();\n                  if (dockable) {\n                    onBeforeClose?.();\n                    unmount();\n                    onAfterClose?.();\n                  }\n                }}\n                ref={closeButtonRef}\n              >\n                <Icon name='times' />\n              </Button>\n            )}\n          </Flex>\n        </Flex>\n\n        <Flex item={{ grow: 1 }} as={StyledModalContent} ref={modalContentRef}>\n          {children && <StyledModalChildrenWrap>{children}</StyledModalChildrenWrap>}\n\n          <Progress\n            visible={!!progress}\n            placement='local'\n            message={typeof progress === 'object' ? progress.message : t('loading')}\n          />\n        </Flex>\n\n        {actions && (\n          <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n            {actions}\n          </Flex>\n        )}\n      </Flex>\n    );\n\n    const renderModal =\n      state === 'docked' ? (\n        modal\n      ) : (\n        <Backdrop\n          ref={backdropRef}\n          container={{\n            alignItems: center || maximized ? 'center' : 'start'\n          }}\n          transitionSpeed='slow'\n          open={state === 'open' || state === 'maximized'}\n          onBeforeTransitionIn={onBeforeOpen}\n          onAfterTransitionIn={onAfterOpen}\n          onBeforeTransitionOut={onBeforeClose}\n          onAfterTransitionOut={() => {\n            unmount();\n            onAfterClose?.();\n          }}\n        >\n          {modal}\n        </Backdrop>\n      );\n\n    return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n  }\n);\n\nexport default Modal;\n"]}

package/lib/components/Modal/Modal.styles.d.ts

@@ -0,0 +1,9 @@
+import { ModalContextValue, ModalProps } from './Modal.types';
+export declare const StyledModalChildrenWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledModalHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
+    hasAction?: boolean | undefined;
+}, never>;
+export declare const StyledModalContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledModalActions: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("../Card").CardProps> & import("../../types").OmitStrict<ModalProps, "stretch" | "center" | "autoWidth"> & Required<Pick<ModalProps, "stretch" | "center" | "autoWidth">> & Pick<ModalContextValue, "alert" | "state">, never>;
+//# sourceMappingURL=Modal.styles.d.ts.map

package/lib/components/Modal/Modal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI9D,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;SAyB7B,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAU7B,CAAC;AAIH,eAAO,MAAM,kBAAkB,4GAI7B,CAAC;AAIH,eAAO,MAAM,WAAW,gVAuFtB,CAAC"}

package/lib/components/Modal/Modal.styles.js

@@ -0,0 +1,135 @@
+import styled, { css } from 'styled-components';
+import { StyledButton } from '../Button';
+import { defaultThemeProp } from '../../theme';
+import { StyledIcon } from '../Icon';
+import { StyledCard } from '../Card';
+export const StyledModalChildrenWrap = styled.div ``;
+export const StyledModalHeader = styled.header(({ theme: { base }, hasAction }) => {
+    const padAdjust = hasAction ? 0.75 : 0;
+    return css `
+      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})
+        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});
+      h2 > ${StyledIcon} {
+        margin-inline-end: ${base.spacing};
+      }
+
+      > h2 {
+        overflow-x: hidden;
+        > :first-child {
+          overflow-x: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      ${StyledButton} {
+        color: ${base.palette['foreground-color']};
+      }
+    `;
+});
+StyledModalHeader.defaultProps = defaultThemeProp;
+export const StyledModalContent = styled.div(({ theme: { base } }) => {
+    return css `
+    position: relative;
+    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});
+    overflow-y: auto;
+
+    &:last-child {
+      padding-bottom: calc(3 * ${base.spacing});
+    }
+  `;
+});
+StyledModalContent.defaultProps = defaultThemeProp;
+export const StyledModalActions = styled.footer(({ theme: { base } }) => {
+    return css `
+    padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});
+  `;
+});
+StyledModalActions.defaultProps = defaultThemeProp;
+export const StyledModal = styled(StyledCard)(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {
+    let defaultMinWidth = '80ch';
+    let defaultMaxWidth = '80ch';
+    if (alert) {
+        defaultMinWidth = '60ch';
+        defaultMaxWidth = '60ch';
+    }
+    else if (autoWidth) {
+        defaultMinWidth = '30ch';
+        defaultMaxWidth = '100%';
+    }
+    return css `
+    position: relative;
+
+    ${!alert && stretch
+        ? css `
+          width: calc(100% - 1rem);
+          height: calc(100% - 1rem);
+
+          @media screen and (min-width: ${base.breakpoints.sm}) {
+            width: calc(100% - 2rem);
+            height: calc(100% - 2rem);
+          }
+
+          @media screen and (min-width: ${base.breakpoints.md}) {
+            width: calc(100% - 4rem);
+            height: calc(100% - 4rem);
+          }
+        `
+        : css `
+          min-width: min(calc(100% - 1rem), ${defaultMinWidth});
+          max-width: min(calc(100% - 1rem), ${defaultMaxWidth});
+          max-height: calc(100% - 1rem);
+          ${!center &&
+            css `
+            margin-block-start: 0.5rem;
+          `}
+
+          @media screen and (min-width: ${base.breakpoints.sm}) {
+            min-width: min(calc(100% - 2rem), ${defaultMinWidth});
+            max-width: min(calc(100% - 2rem), ${defaultMaxWidth});
+            max-height: calc(100% - 2rem);
+            ${!center &&
+            css `
+              margin-block-start: 1rem;
+            `}
+          }
+
+          @media screen and (min-width: ${base.breakpoints.md}) {
+            min-width: min(calc(100% - 4rem), ${defaultMinWidth});
+            max-width: min(calc(100% - 4rem), ${defaultMaxWidth});
+            max-height: calc(100% - 4rem);
+            ${!center &&
+            css `
+              margin-block-start: 2rem;
+            `}
+          }
+        `}
+    box-shadow: ${base.shadow.high};
+
+    ${state === 'docked' &&
+        css `
+      /*
+       * This seems like the most optimal of the suboptimal solutions.
+       * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
+       */
+      &&& {
+        /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    `}
+
+    &[aria-busy='true'] {
+      ${StyledModalContent} {
+        min-height: 8rem;
+        overflow: hidden;
+      }
+
+      ${StyledModalChildrenWrap} {
+        visibility: hidden;
+      }
+    }
+  `;
+});
+StyledModal.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Modal.styles.js.map

package/lib/components/Modal/Modal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledButton } from '../Button';\nimport { PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledIcon } from '../Icon';\nimport { StyledCard } from '../Card';\n\nimport { ModalContextValue, ModalProps } from './Modal.types';\n\ntype ModalPropsWithDefaults = PropsWithDefaults<ModalProps, 'stretch' | 'center' | 'autoWidth'>;\n\nexport const StyledModalChildrenWrap = styled.div``;\n\nexport const StyledModalHeader = styled.header<{ hasAction?: boolean }>(\n  ({ theme: { base }, hasAction }) => {\n    const padAdjust = hasAction ? 0.75 : 0;\n\n    return css`\n      padding: calc(${3 - padAdjust} * ${base.spacing}) calc(${3 - padAdjust} * ${base.spacing})\n        calc(${2.5 - padAdjust} * ${base.spacing}) calc(3 * ${base.spacing});\n      h2 > ${StyledIcon} {\n        margin-inline-end: ${base.spacing};\n      }\n\n      > h2 {\n        overflow-x: hidden;\n        > :first-child {\n          overflow-x: hidden;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n      }\n\n      ${StyledButton} {\n        color: ${base.palette['foreground-color']};\n      }\n    `;\n  }\n);\n\nStyledModalHeader.defaultProps = defaultThemeProp;\n\nexport const StyledModalContent = styled.div(({ theme: { base } }) => {\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${base.spacing}) calc(3 * ${base.spacing});\n    overflow-y: auto;\n\n    &:last-child {\n      padding-bottom: calc(3 * ${base.spacing});\n    }\n  `;\n});\n\nStyledModalContent.defaultProps = defaultThemeProp;\n\nexport const StyledModalActions = styled.footer(({ theme: { base } }) => {\n  return css`\n    padding: calc(2.5 * ${base.spacing}) calc(3 * ${base.spacing}) calc(3 * ${base.spacing});\n  `;\n});\n\nStyledModalActions.defaultProps = defaultThemeProp;\n\nexport const StyledModal = styled(StyledCard)<\n  ModalPropsWithDefaults & Pick<ModalContextValue, 'alert' | 'state'>\n>(({ theme: { base }, alert, autoWidth, center, stretch, state }) => {\n  let defaultMinWidth = '80ch';\n  let defaultMaxWidth = '80ch';\n\n  if (alert) {\n    defaultMinWidth = '60ch';\n    defaultMaxWidth = '60ch';\n  } else if (autoWidth) {\n    defaultMinWidth = '30ch';\n    defaultMaxWidth = '100%';\n  }\n\n  return css`\n    position: relative;\n\n    ${!alert && stretch\n      ? css`\n          width: calc(100% - 1rem);\n          height: calc(100% - 1rem);\n\n          @media screen and (min-width: ${base.breakpoints.sm}) {\n            width: calc(100% - 2rem);\n            height: calc(100% - 2rem);\n          }\n\n          @media screen and (min-width: ${base.breakpoints.md}) {\n            width: calc(100% - 4rem);\n            height: calc(100% - 4rem);\n          }\n        `\n      : css`\n          min-width: min(calc(100% - 1rem), ${defaultMinWidth});\n          max-width: min(calc(100% - 1rem), ${defaultMaxWidth});\n          max-height: calc(100% - 1rem);\n          ${!center &&\n          css`\n            margin-block-start: 0.5rem;\n          `}\n\n          @media screen and (min-width: ${base.breakpoints.sm}) {\n            min-width: min(calc(100% - 2rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 2rem), ${defaultMaxWidth});\n            max-height: calc(100% - 2rem);\n            ${!center &&\n            css`\n              margin-block-start: 1rem;\n            `}\n          }\n\n          @media screen and (min-width: ${base.breakpoints.md}) {\n            min-width: min(calc(100% - 4rem), ${defaultMinWidth});\n            max-width: min(calc(100% - 4rem), ${defaultMaxWidth});\n            max-height: calc(100% - 4rem);\n            ${!center &&\n            css`\n              margin-block-start: 2rem;\n            `}\n          }\n        `}\n    box-shadow: ${base.shadow.high};\n\n    ${state === 'docked' &&\n    css`\n      /*\n       * This seems like the most optimal of the suboptimal solutions.\n       * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n       */\n      &&& {\n        /* Using non logical properties due to Safari 14.x support and since the inline bottom values are the same. */\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    `}\n\n    &[aria-busy='true'] {\n      ${StyledModalContent} {\n        min-height: 8rem;\n        overflow: hidden;\n      }\n\n      ${StyledModalChildrenWrap} {\n        visibility: hidden;\n      }\n    }\n  `;\n});\n\nStyledModal.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Modal/Modal.types.d.ts

@@ -1,8 +1,11 @@
-import { ComponentType, ReactNode, RefObject } from 'react';
-import { BaseProps, AsProp } from '../../types';
+import type { ComponentType, ReactNode, RefObject, Context } from 'react';
+import type { ProgressProps } from '@pega/cosmos-react-core';
+import type { BaseProps, AsProp, DeferInfer } from '../../types';
 export interface ModalManagerProps {
     /** Content that will be provided modal manager context. */
     children: ReactNode;
+    /** Context to read previous values from. */
+    context?: Context<ModalManagerContextValue>;
 }
 export interface ModalOptions {
     /**
@@ -22,6 +25,16 @@ export interface ModalOptions {
      * @default false
      */
     minimizable?: boolean;
+    /**
+     * Toggle maximize button in header thereby helping in rendering maximizable/non-maximizable Modals.
+     * Not valid for Modals of type alert.
+     * @default false
+     */
+    maximizable?: boolean;
+    /** Positions the modal in the right corner without backdrop
+     * @default false
+     */
+    dockable?: boolean;
     /**
      * If true, the Modal will initially render in a minimized state.
      * @default false
@@ -40,6 +53,14 @@ export interface ModalOptions {
      * Life cycle function that will be run when the modal is minimized.
      */
     onMinimize?: (id: string) => void;
+    /**
+     * Life cycle function that will be run when the modal is maximized.
+     */
+    onMaximize?: (id: string) => void;
+    /**
+     * Life cycle function that will be run when the modal is maximized.
+     */
+    onDock?: (id: string) => void;
     /**
      * Life cycle function that will be run when the modal is activated (un minimized).
      */
@@ -50,10 +71,19 @@ export interface ModalOptions {
     onDismiss?: (id: string) => void;
 }
 export interface ModalProps extends BaseProps, AsProp {
+    /**
+     * Place a modal into a loading state by way of a bool or an object which allows for a custom message and determinate progress.
+     */
+    progress?: boolean | Pick<ProgressProps, 'message' | 'minValue' | 'maxValue' | 'value'>;
     /**
      * Heading for the Modal.
      */
     heading: ReactNode;
+    /**
+     * Count for list data presented in the Modal.
+     */
+    count?: number;
+    /**
     /**
      * Content for the Modal.
      */
@@ -72,6 +102,11 @@ export interface ModalProps extends BaseProps, AsProp {
      * @default false
      */
     center?: boolean;
+    /**
+     * Automatically compute the width of the Modal based on the content.
+     * @default false
+     */
+    autoWidth?: boolean;
     /**
      * Takes a React Ref of the element to be focused initially on mounting Modal.
      */
@@ -102,13 +137,23 @@ export interface ModalProps extends BaseProps, AsProp {
      * If the boolean is false, the modal will not be minimized.
      */
     onRequestMinimize?: () => boolean | void;
+    /**
+     * Accepts a callback function that returns a boolean before maximizing a modal.
+     * If the boolean is false, the modal will not be maximized.
+     */
+    onRequestMaximize?: () => boolean | void;
+    /**
+     * Accepts a callback function that returns a boolean before docking a modal.
+     * If the boolean is false, the modal will not be dockable.
+     */
+    onRequestDock?: () => boolean | void;
     /**
      * Accepts a callback function that returns a boolean before activating a modal.
      * If the boolean is false, the modal will not be activated.
      */
     onRequestActivate?: () => boolean | void;
 }
-export declare type ModalState = 'open' | 'closed' | 'minimized';
+export declare type ModalState = 'open' | 'closed' | 'minimized' | 'maximized' | 'docked';
 export interface ModalMethods<P extends object = object> {
     /**
      * Closes the referenced Modal when called.
@@ -117,11 +162,19 @@ export interface ModalMethods<P extends object = object> {
     /**
      * Updates the referenced Modal with a set of props.
      */
-    update: (props: P) => void;
+    update: (props: Partial<P>) => void;
     /**
      * Minimizes the referenced Modal.
      */
     minimize: () => void;
+    /**
+     * Maximizes the referenced Modal.
+     */
+    maximize: () => void;
+    /**
+     * docks the referenced Modal.
+     */
+    dock: () => void;
     /**
      * Will reopen the referenced Modal if minimized, and minimize any open Modals that are minimizable.
      */
@@ -131,11 +184,14 @@ export interface ModalMethods<P extends object = object> {
      */
     unmount: () => void;
 }
+export declare const initializedKey: unique symbol;
 export interface ModalManagerContextValue {
     /**
      * The function that will create the Modal. This function accepts the component to render a Modal, props for that component, and options for that Modal.
      */
-    create: <P extends object>(component: ComponentType<P>, props?: P, options?: ModalOptions) => ModalMethods<P>;
+    create: <P extends object>(component: ComponentType<P>, props?: DeferInfer<P>, options?: ModalOptions) => ModalMethods<P>;
+    ModalContext: Context<ModalContextValue>;
+    [initializedKey]: boolean;
 }
 export interface ModalContextValue extends ModalMethods, ModalOptions {
     state: ModalState;