@pega/cosmos-react-core 2.0.0-dev.9.1 → 2.0.0-rc.1

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,5 +1,6 @@
-import { ComponentType, ReactNode, RefObject, Context } 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;
@@ -24,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
@@ -42,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).
      */
@@ -52,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.
      */
@@ -74,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.
      */
@@ -104,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.
@@ -119,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.
      */
@@ -138,7 +189,7 @@ 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;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AA8IA,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAC","sourcesContent":["import { ComponentType, ReactNode, RefObject, Context } from 'react';\n\nimport { BaseProps, AsProp } from '../../types';\n\nexport interface ModalManagerProps {\n  /** Content that will be provided modal manager context. */\n  children: ReactNode;\n  /** Context to read previous values from. */\n  context?: Context<ModalManagerContextValue>;\n}\n\nexport interface ModalOptions {\n  /**\n   * If true, the Modal will render as an alert that is not dismissible.\n   * @default false\n   */\n  alert?: boolean;\n  /**\n   * Toggle Esc keypress action or clicking backdrop to dismiss Modal. Also displays dismiss button on Modal header.\n   * Not valid for Modals of type alert.\n   * @default alert ? false : true\n   */\n  dismissible?: boolean;\n  /**\n   * Toggle minimize button in header thereby helping in rendering minimizable/non-minimizable Modals.\n   * Not valid for Modals of type alert.\n   * @default false\n   */\n  minimizable?: boolean;\n  /**\n   * If true, the Modal will initially render in a minimized state.\n   * @default false\n   */\n  defaultMinimized?: boolean;\n  /**\n   * If true, the Modal content will be removed from the DOM when in a minimized state.\n   * @default true\n   */\n  unmountWhenMinimized?: boolean;\n  /**\n   * Used to identify the modal. Will be passed back as an argument in life cycle functions.\n   */\n  id?: string;\n  /**\n   * Life cycle function that will be run when the modal is minimized.\n   */\n  onMinimize?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is activated (un minimized).\n   */\n  onActivate?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is dismissed.\n   */\n  onDismiss?: (id: string) => void;\n}\n\nexport interface ModalProps extends BaseProps, AsProp {\n  /**\n   * Heading for the Modal.\n   */\n  heading: ReactNode;\n  /**\n   * Content for the Modal.\n   */\n  children: ReactNode;\n  /**\n   * Actions for the Modal.\n   */\n  actions?: ReactNode;\n  /**\n   * Render the modal in full width and height.\n   * @default false\n   */\n  stretch?: boolean;\n  /**\n   * Toggle to position the Modal vertically centered or not.\n   * @default false\n   */\n  center?: boolean;\n  /**\n   * Takes a React Ref of the element to be focused initially on mounting Modal.\n   */\n  defaultFocus?: RefObject<HTMLElement>;\n  /**\n   * Accepts a callback function that gets invoked before opening a Modal.\n   */\n  onBeforeOpen?: () => void;\n  /**\n   * Accepts a callback function that gets invoked after opening a Modal.\n   */\n  onAfterOpen?: () => void;\n  /**\n   * Accepts a callback function that gets invoked before closing a Modal.\n   */\n  onBeforeClose?: () => void;\n  /**\n   * Accepts a callback function that gets invoked after closing a Modal.\n   */\n  onAfterClose?: () => void;\n  /**\n   * Accepts a callback function that returns a boolean before dismissing a modal.\n   * If the boolean is false, the modal will not be dismissed.\n   */\n  onRequestDismiss?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before minimizing a modal.\n   * If the boolean is false, the modal will not be minimized.\n   */\n  onRequestMinimize?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before activating a modal.\n   * If the boolean is false, the modal will not be activated.\n   */\n  onRequestActivate?: () => boolean | void;\n}\n\nexport type ModalState = 'open' | 'closed' | 'minimized';\n\nexport interface ModalMethods<P extends object = object> {\n  /**\n   * Closes the referenced Modal when called.\n   */\n  dismiss: () => void;\n  /**\n   * Updates the referenced Modal with a set of props.\n   */\n  update: (props: P) => void;\n  /**\n   * Minimizes the referenced Modal.\n   */\n  minimize: () => void;\n  /**\n   * Will reopen the referenced Modal if minimized, and minimize any open Modals that are minimizable.\n   */\n  activate: () => void;\n  /**\n   * Removes the referenced Modal from the DOM.\n   */\n  unmount: () => void;\n}\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.modal-manager.initialized');\n\nexport interface ModalManagerContextValue {\n  /**\n   * 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.\n   */\n  create: <P extends object>(\n    component: ComponentType<P>,\n    props?: P,\n    options?: ModalOptions\n  ) => ModalMethods<P>;\n  ModalContext: Context<ModalContextValue>;\n  [initializedKey]: boolean;\n}\n\nexport interface ModalContextValue extends ModalMethods, ModalOptions {\n  state: ModalState;\n  top: boolean;\n}\n\nexport interface ModalObject<P extends object = object> {\n  id: string;\n  state: ModalState;\n  methods: ModalMethods<P>;\n  props?: P;\n  Component: ComponentType<P>;\n  options: ModalOptions;\n}\n"]}
+{"version":3,"file":"Modal.types.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAkMA,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAC","sourcesContent":["import type { ComponentType, ReactNode, RefObject, Context } from 'react';\n\nimport type { ProgressProps } from '@pega/cosmos-react-core';\n\nimport type { BaseProps, AsProp, DeferInfer } from '../../types';\n\nexport interface ModalManagerProps {\n  /** Content that will be provided modal manager context. */\n  children: ReactNode;\n  /** Context to read previous values from. */\n  context?: Context<ModalManagerContextValue>;\n}\n\nexport interface ModalOptions {\n  /**\n   * If true, the Modal will render as an alert that is not dismissible.\n   * @default false\n   */\n  alert?: boolean;\n  /**\n   * Toggle Esc keypress action or clicking backdrop to dismiss Modal. Also displays dismiss button on Modal header.\n   * Not valid for Modals of type alert.\n   * @default alert ? false : true\n   */\n  dismissible?: boolean;\n  /**\n   * Toggle minimize button in header thereby helping in rendering minimizable/non-minimizable Modals.\n   * Not valid for Modals of type alert.\n   * @default false\n   */\n  minimizable?: boolean;\n  /**\n   * Toggle maximize button in header thereby helping in rendering maximizable/non-maximizable Modals.\n   * Not valid for Modals of type alert.\n   * @default false\n   */\n  maximizable?: boolean;\n  /** Positions the modal in the right corner without backdrop\n   * @default false\n   */\n  dockable?: boolean;\n  /**\n   * If true, the Modal will initially render in a minimized state.\n   * @default false\n   */\n  defaultMinimized?: boolean;\n  /**\n   * If true, the Modal content will be removed from the DOM when in a minimized state.\n   * @default true\n   */\n  unmountWhenMinimized?: boolean;\n  /**\n   * Used to identify the modal. Will be passed back as an argument in life cycle functions.\n   */\n  id?: string;\n  /**\n   * Life cycle function that will be run when the modal is minimized.\n   */\n  onMinimize?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is maximized.\n   */\n  onMaximize?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is maximized.\n   */\n  onDock?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is activated (un minimized).\n   */\n  onActivate?: (id: string) => void;\n  /**\n   * Life cycle function that will be run when the modal is dismissed.\n   */\n  onDismiss?: (id: string) => void;\n}\n\nexport interface ModalProps extends BaseProps, AsProp {\n  /**\n   * Place a modal into a loading state by way of a bool or an object which allows for a custom message and determinate progress.\n   */\n  progress?: boolean | Pick<ProgressProps, 'message' | 'minValue' | 'maxValue' | 'value'>;\n  /**\n   * Heading for the Modal.\n   */\n  heading: ReactNode;\n  /**\n   * Count for list data presented in the Modal.\n   */\n  count?: number;\n  /**\n  /**\n   * Content for the Modal.\n   */\n  children: ReactNode;\n  /**\n   * Actions for the Modal.\n   */\n  actions?: ReactNode;\n  /**\n   * Render the modal in full width and height.\n   * @default false\n   */\n  stretch?: boolean;\n  /**\n   * Toggle to position the Modal vertically centered or not.\n   * @default false\n   */\n  center?: boolean;\n  /**\n   * Automatically compute the width of the Modal based on the content.\n   * @default false\n   */\n  autoWidth?: boolean;\n  /**\n   * Takes a React Ref of the element to be focused initially on mounting Modal.\n   */\n  defaultFocus?: RefObject<HTMLElement>;\n  /**\n   * Accepts a callback function that gets invoked before opening a Modal.\n   */\n  onBeforeOpen?: () => void;\n  /**\n   * Accepts a callback function that gets invoked after opening a Modal.\n   */\n  onAfterOpen?: () => void;\n  /**\n   * Accepts a callback function that gets invoked before closing a Modal.\n   */\n  onBeforeClose?: () => void;\n  /**\n   * Accepts a callback function that gets invoked after closing a Modal.\n   */\n  onAfterClose?: () => void;\n  /**\n   * Accepts a callback function that returns a boolean before dismissing a modal.\n   * If the boolean is false, the modal will not be dismissed.\n   */\n  onRequestDismiss?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before minimizing a modal.\n   * If the boolean is false, the modal will not be minimized.\n   */\n  onRequestMinimize?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before maximizing a modal.\n   * If the boolean is false, the modal will not be maximized.\n   */\n  onRequestMaximize?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before docking a modal.\n   * If the boolean is false, the modal will not be dockable.\n   */\n  onRequestDock?: () => boolean | void;\n  /**\n   * Accepts a callback function that returns a boolean before activating a modal.\n   * If the boolean is false, the modal will not be activated.\n   */\n  onRequestActivate?: () => boolean | void;\n}\n\nexport type ModalState = 'open' | 'closed' | 'minimized' | 'maximized' | 'docked';\n\nexport interface ModalMethods<P extends object = object> {\n  /**\n   * Closes the referenced Modal when called.\n   */\n  dismiss: () => void;\n  /**\n   * Updates the referenced Modal with a set of props.\n   */\n  update: (props: Partial<P>) => void;\n  /**\n   * Minimizes the referenced Modal.\n   */\n  minimize: () => void;\n  /**\n   * Maximizes the referenced Modal.\n   */\n  maximize: () => void;\n  /**\n   * docks the referenced Modal.\n   */\n  dock: () => void;\n  /**\n   * Will reopen the referenced Modal if minimized, and minimize any open Modals that are minimizable.\n   */\n  activate: () => void;\n  /**\n   * Removes the referenced Modal from the DOM.\n   */\n  unmount: () => void;\n}\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.modal-manager.initialized');\n\nexport interface ModalManagerContextValue {\n  /**\n   * 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.\n   */\n  create: <P extends object>(\n    component: ComponentType<P>,\n    props?: DeferInfer<P>,\n    options?: ModalOptions\n  ) => ModalMethods<P>;\n  ModalContext: Context<ModalContextValue>;\n  [initializedKey]: boolean;\n}\n\nexport interface ModalContextValue extends ModalMethods, ModalOptions {\n  state: ModalState;\n  top: boolean;\n}\n\nexport interface ModalObject<P extends object = object> {\n  id: string;\n  state: ModalState;\n  methods: ModalMethods<P>;\n  props?: P;\n  Component: ComponentType<P>;\n  options: ModalOptions;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAIL,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAqJvB,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAyHtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAIL,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AA0KvB,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAkItD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Modal/ModalManager.js

@@ -1,9 +1,9 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useReducer, useMemo, useEffect, useContext, useRef } from 'react';
+import { useReducer, useMemo, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { createUID, getScrollbarWidth, testElForOverflow } from '../../utils';
-import { useConfiguration } from '../../hooks';
+import { createUID } from '../../utils';
+import { useConfiguration, useScrollToggle } from '../../hooks';
 import DockedModals from './DockedModals';
 import { initializedKey } from './Modal.types';
 import { ModalContext, ModalManagerContext } from './Contexts';
@@ -12,11 +12,12 @@ const reducer = (modals, payload) => {
         case 'create':
             return [
                 ...modals.map(modal => {
-                    if (!payload.modal.options.alert &&
+                    if ((!payload.modal.options.alert &&
                         payload.modal.state === 'open' &&
                         !modal.options.alert &&
                         modal.state === 'open' &&
-                        modal.options.minimizable) {
+                        modal.options.minimizable) ||
+                        payload.modal.options.dockable) {
                         modal.state = 'minimized';
                     }
                     return modal;
@@ -38,9 +39,12 @@ const reducer = (modals, payload) => {
             });
         case 'activate':
             return modals.map(modal => {
-                if (modal.id === payload.modal.id) {
+                if (modal.id === payload.modal.id && !modal.options.dockable) {
                     modal.state = 'open';
                 }
+                else if (modal.id === payload.modal.id && modal.options.dockable) {
+                    modal.state = 'docked';
+                }
                 else if (!modal.options.alert && modal.state === 'open' && modal.options.minimizable) {
                     modal.state = 'minimized';
                 }
@@ -52,67 +56,93 @@ const reducer = (modals, payload) => {
                     modal.id === payload.modal.id && modal.options.minimizable ? 'minimized' : modal.state;
                 return modal;
             });
+        case 'maximize':
+            return modals.map(modal => {
+                modal.state =
+                    modal.id === payload.modal.id && modal.options.maximizable ? 'maximized' : modal.state;
+                return modal;
+            });
+        case 'dock':
+            return modals.map(modal => {
+                modal.state =
+                    modal.id === payload.modal.id && modal.options.dockable ? 'docked' : 'minimized';
+                return modal;
+            });
         default:
             return modals;
     }
 };
-const WrappedModal = ({ Component, id, options: { alert, dismissible, minimizable }, state, methods, props, top }) => (_jsx(ModalContext.Provider, Object.assign({ value: {
+const WrappedModal = ({ Component, id, options: { alert, dismissible, dockable, minimizable, maximizable }, state, methods, props, top }) => (_jsx(ModalContext.Provider, { value: {
         id,
         alert,
         dismissible,
         minimizable,
+        maximizable,
+        dockable,
         state,
         top,
         ...methods
-    } }, { children: _jsx(Component, Object.assign({}, props), void 0) }), void 0));
+    }, children: _jsx(Component, { ...props }, void 0) }, void 0));
 const RenderModals = ({ modals }) => {
     const { open, minimized, alerts } = modals.reduce((obj, modal) => {
         if (modal.options.alert)
             obj.alerts.push(modal);
-        else if (modal.state === 'minimized')
+        else if (modal.state === 'minimized' || modal.state === 'docked') {
             obj.minimized.push(modal);
+        }
         else
             obj.open.push(modal);
         return obj;
     }, { open: [], minimized: [], alerts: [] });
-    return (_jsxs(_Fragment, { children: [open.map((modal, i) => (_createElement(WrappedModal, { ...modal, top: alerts.length === 0 && i === open.length - 1, key: modal.id }))),
-            minimized.length > 0 && (_jsx(DockedModals, { children: minimized.map(modal => (_createElement(WrappedModal, { ...modal, top: false, key: modal.id }))) }, void 0)),
-            alerts.map((modal, i) => (_createElement(WrappedModal, { ...modal, top: i === open.length - 1, key: modal.id })))] }, void 0));
+    return (_jsxs(_Fragment, { children: [open.map((modal, i) => (_createElement(WrappedModal, { ...modal, top: alerts.length === 0 && i === open.length - 1, key: modal.id }))), minimized.length > 0 && (_jsx(DockedModals, { children: minimized.map(modal => (_createElement(WrappedModal, { ...modal, top: false, key: modal.id }))) }, void 0)), alerts.map((modal, i) => (_createElement(WrappedModal, { ...modal, top: i === open.length - 1, key: modal.id })))] }, void 0));
 };
 const ModalManager = ({ children, context = ModalManagerContext }) => {
     const [modals, dispatch] = useReducer(reducer, []);
-    const styleCache = useRef('');
-    const overflowProperty = useRef('');
+    const { disableScroll, enableScroll } = useScrollToggle();
     const providerValue = useMemo(() => ({
         create: (Component, props, options) => {
-            var _a;
-            const id = (options === null || options === void 0 ? void 0 : options.id) || createUID();
+            const id = options?.id || createUID();
             const methods = {
                 dismiss: () => {
-                    var _a;
                     dispatch({ action: 'dismiss', modal: { id } });
-                    (_a = options === null || options === void 0 ? void 0 : options.onDismiss) === null || _a === void 0 ? void 0 : _a.call(options, id);
+                    options?.onDismiss?.(id);
                 },
-                update: (updateProps) => {
+                update: updateProps => {
                     dispatch({
                         action: 'update',
                         modal: { id, props: updateProps }
                     });
                 },
                 minimize: () => {
-                    var _a;
                     dispatch({ action: 'minimize', modal: { id } });
-                    (_a = options === null || options === void 0 ? void 0 : options.onMinimize) === null || _a === void 0 ? void 0 : _a.call(options, id);
+                    options?.onMinimize?.(id);
+                },
+                maximize: () => {
+                    dispatch({ action: 'maximize', modal: { id } });
+                    options?.onMaximize?.(id);
+                },
+                dock: () => {
+                    dispatch({ action: 'dock', modal: { id } });
+                    options?.onDock?.(id);
                 },
                 activate: () => {
-                    var _a;
                     dispatch({ action: 'activate', modal: { id } });
-                    (_a = options === null || options === void 0 ? void 0 : options.onActivate) === null || _a === void 0 ? void 0 : _a.call(options, id);
+                    options?.onActivate?.(id);
                 },
                 unmount: () => {
                     dispatch({ action: 'unmount', modal: { id } });
                 }
             };
+            let defaultState;
+            if (options?.defaultMinimized) {
+                defaultState = 'minimized';
+            }
+            else if (options?.dockable) {
+                defaultState = 'docked';
+            }
+            else {
+                defaultState = 'open';
+            }
             dispatch({
                 action: 'create',
                 modal: {
@@ -120,14 +150,16 @@ const ModalManager = ({ children, context = ModalManagerContext }) => {
                     methods,
                     Component,
                     props,
-                    state: (options === null || options === void 0 ? void 0 : options.defaultMinimized) ? 'minimized' : 'open',
+                    state: defaultState,
                     options: {
                         alert: false,
                         minimizable: false,
+                        maximizable: false,
+                        dockable: false,
                         defaultMinimized: false,
                         unmountWhenMinimized: true,
                         ...options,
-                        dismissible: !!((options === null || options === void 0 ? void 0 : options.alert) ? false : (_a = options === null || options === void 0 ? void 0 : options.dismissible) !== null && _a !== void 0 ? _a : true)
+                        dismissible: !!(options?.alert ? false : options?.dismissible ?? true)
                     }
                 }
             });
@@ -137,53 +169,30 @@ const ModalManager = ({ children, context = ModalManagerContext }) => {
         [initializedKey]: true
     }), []);
     useEffect(() => {
-        if (modals.some(modal => modal.state === 'open')) {
-            if (!overflowProperty.current) {
-                requestAnimationFrame(() => {
-                    overflowProperty.current = 'overflow';
-                    styleCache.current = document.body.style.overflow;
-                    if (document.body.style.overflowX) {
-                        styleCache.current = document.body.style.overflowX;
-                        overflowProperty.current = 'overflowX';
-                    }
-                    else if (document.body.style.overflowY) {
-                        styleCache.current = document.body.style.overflowY;
-                        overflowProperty.current = 'overflowY';
-                    }
-                    if (testElForOverflow(document.body))
-                        document.body.style.paddingInlineEnd = `${getScrollbarWidth()}px`;
-                    document.body.style.overflow = 'hidden';
-                });
-            }
+        if (modals.some(modal => modal.state === 'open' && !modal.options.dockable)) {
+            disableScroll();
         }
-        else if (overflowProperty.current) {
-            requestAnimationFrame(() => {
-                document.body.style.paddingInlineEnd = '';
-                switch (overflowProperty.current) {
-                    case 'overflowX':
-                        document.body.style.overflowX = styleCache.current;
-                        break;
-                    case 'overflowY':
-                        document.body.style.overflowY = styleCache.current;
-                        break;
-                    default:
-                        document.body.style.overflow = styleCache.current;
-                        break;
-                }
-                styleCache.current = '';
-                overflowProperty.current = '';
-            });
+        else {
+            enableScroll();
         }
     }, [modals]);
     const { portalTarget } = useConfiguration();
-    // Don't create additional Modal portals.
     const priorCtx = useContext(context);
+    const priorCtxValue = useMemo(() => context === ModalManagerContext
+        ? priorCtx
+        : {
+            ...priorCtx,
+            create: (Comp, props, opts) => {
+                const WrappedComp = compProps => (_jsx(ModalManager, { context: context, children: _jsx(Comp, { ...compProps }, void 0) }, void 0));
+                return priorCtx.create(WrappedComp, props, opts);
+            }
+        }, [priorCtx, context]);
+    // Don't create additional Modal portals.
     if (priorCtx[initializedKey])
-        return _jsx(ModalManagerContext.Provider, Object.assign({ value: priorCtx }, { children: children }), void 0);
-    return (_jsxs(ModalManagerContext.Provider, Object.assign({ value: providerValue }, { children: [children,
-            modals.length > 0 &&
+        return (_jsx(ModalManagerContext.Provider, { value: priorCtxValue, children: children }, void 0));
+    return (_jsxs(ModalManagerContext.Provider, { value: providerValue, children: [children, modals.length > 0 &&
                 portalTarget &&
-                createPortal(_jsx(RenderModals, { modals: modals }, void 0), portalTarget)] }), void 0));
+                createPortal(_jsx(RenderModals, { modals: modals }, void 0), portalTarget)] }, void 0));
 };
 export default ModalManager;
 //# sourceMappingURL=ModalManager.js.map