@elliemae/ds-modal 3.22.0-next.30 → 3.22.0-next.32

package/dist/cjs/v1/DSModal.js

@@ -70,7 +70,7 @@ const DSModal = ({
   hasInfo = false,
   hasHelp = false,
   actionsRef = () => null,
-  appElement = "#root",
+  appElement = "body",
   overridePropsConfirmButton = {},
   overridePropsRejectButton = {},
   zIndex = 10

package/dist/cjs/v1/DSModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v1/DSModal.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MODAL_TYPE, { modalTypes } from '../constants.js';\nimport ModalFeedBack from './ModalFeedBack/ModalFeedBack.js';\nimport { sizes, iconSizes } from '@elliemae/ds-shared';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  dataTestId = 'ds-modal',\n  additionalFooterCssClass = '',\n  style = {},\n  iconCloseSize = DSIconSizes.S,\n  modalType = MODAL_TYPE.DEFAULT,\n  showHeader = true,\n  showFooter = true,\n  children,\n  centered = true,\n  confirmLabel = 'Accept',\n  modalTitle = '',\n  size = 'medium',\n  isOpen = false,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Cancel',\n  shouldCloseOnOverlayClick = false,\n  hasError = false,\n  hasWarning = false,\n  hasSuccess = false,\n  hasInfo = false,\n  hasHelp = false,\n  actionsRef = () => null,\n  appElement = '#root',\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  zIndex = 10,\n}) => {\n  // http://reactcommunity.org/react-modal/accessibility/ https://github.com/reactjs/react-modal#examples\n  typeof document !== 'undefined' && document && ReactModal.setAppElement && ReactModal.setAppElement(appElement); // eslint-disable-line\n  const { cssClassName, classNameElement, classNameBlock, classNameModifier, classNameBlockModifier } =\n    convertPropToCssClassName('modal', className, {\n      hasError,\n      hasWarning,\n      hasSuccess,\n      modalType,\n      size,\n    });\n\n  const { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;\n\n  const isAFeedbackType = [WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1;\n  const showFeedBack = isAFeedbackType || hasError || hasWarning || hasSuccess || hasInfo || hasHelp;\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={cssClassName}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered && 'center')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          zIndex,\n        },\n      }}\n    >\n      <div {...containerProps}>\n        {showHeader && (\n          <div className={classNameBlock('modal-header')}>\n            <div className={classNameElement('title', 'modal-header')}>{modalTitle}</div>\n            <div className={classNameElement('icon', 'modal-header')}>\n              <DSButton buttonType=\"link\" icon={<Close />} onClick={onClose} size={iconCloseSize} />\n            </div>\n          </div>\n        )}\n        <div className={classNameElement('body')}>\n          {showFeedBack && (\n            <ModalFeedBack\n              hasError={hasError}\n              hasHelp={hasHelp}\n              hasInfo={hasInfo}\n              hasSuccess={hasSuccess}\n              hasWarning={hasWarning}\n              modalType={modalType}\n            />\n          )}\n          {children}\n        </div>\n        {showFooter && !isAFeedbackType && (\n          <div\n            className={`${classNameBlock('modal-footer')} ${\n              additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, 'modal-footer') : ''\n            }`}\n          >\n            <div ref={actionsRef} className={classNameBlock('modal-footer-actions')}>\n              {modalType === MODAL_TYPE.CONFIRM && (\n                <DSButton\n                  buttonType=\"secondary\"\n                  className={`${classNameElement('button-action')} ${classNameModifier('reject', 'button-action')} `}\n                  labelText={rejectLabel}\n                  onClick={onReject}\n                  {...overridePropsRejectButton}\n                />\n              )}\n              <DSButton\n                buttonType=\"primary\"\n                className={`${classNameElement('button-action')} ${classNameModifier('confirm', 'button-action')} `}\n                labelText={confirmLabel}\n                onClick={onConfirm}\n                {...overridePropsConfirmButton}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    </ReactModal>\n  );\n};\n\nDSModal.propTypes = {\n  className: PropTypes.string,\n  /**\n   * Add an additional css class to the footer\n   */\n  additionalFooterCssClass: PropTypes.string,\n  /**\n   * Set style for the modal\n   */\n  style: PropTypes.shape({}),\n  /**\n   * Select size for the close icon\n   */\n  iconCloseSize: PropTypes.oneOf(iconSizes),\n  /**\n   * ['default', 'alert', 'confirm', 'notification', 'warning', 'error', 'success', 'help', 'info']\n   */\n  modalType: PropTypes.oneOf(modalTypes),\n  /**\n   * Show the header or not\n   */\n  showHeader: PropTypes.bool,\n  /**\n   * Show the footer or not\n   */\n  showFooter: PropTypes.bool,\n  /**\n   * Main content of the modal\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired,\n  /**\n   * Content is centered or not\n   */\n  centered: PropTypes.bool,\n  /**\n   * Text to be added in the confirm button\n   */\n  confirmLabel: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  modalTitle: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  size: PropTypes.oneOf(sizes),\n  /**\n   * Modal is open or not\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Allows a function to be triggered once the modal is closed\n   */\n  onClose: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal is opened\n   */\n  onAfterOpen: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is confirmed\n   */\n  onConfirm: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is rejected\n   */\n  onReject: PropTypes.func,\n  /**\n   * Text to be added in the reject button\n   */\n  rejectLabel: PropTypes.string,\n  /**\n   * If modal should close on overlay click\n   */\n  shouldCloseOnOverlayClick: PropTypes.bool,\n  /**\n   * Modal has error or not\n   */\n  hasError: PropTypes.bool,\n  /**\n   * Modal has warning or not\n   */\n  hasWarning: PropTypes.bool,\n  /**\n   * Modal has success or not\n   */\n  hasSuccess: PropTypes.bool,\n  /**\n   * Modal has info or not\n   */\n  hasInfo: PropTypes.bool,\n  /**\n   * Modal has help or not\n   */\n  hasHelp: PropTypes.bool,\n  actionsRef: PropTypes.func,\n  appElement: PropTypes.string,\n  /**\n   * Customized props for the confirm button\n   */\n  overridePropsConfirmButton: PropTypes.shape({}),\n  /**\n   * Customized props for the reject button\n   */\n  overridePropsRejectButton: PropTypes.shape({}),\n};\n\nexport default DSModal;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MODAL_TYPE, { modalTypes } from '../constants.js';\nimport ModalFeedBack from './ModalFeedBack/ModalFeedBack.js';\nimport { sizes, iconSizes } from '@elliemae/ds-shared';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  dataTestId = 'ds-modal',\n  additionalFooterCssClass = '',\n  style = {},\n  iconCloseSize = DSIconSizes.S,\n  modalType = MODAL_TYPE.DEFAULT,\n  showHeader = true,\n  showFooter = true,\n  children,\n  centered = true,\n  confirmLabel = 'Accept',\n  modalTitle = '',\n  size = 'medium',\n  isOpen = false,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Cancel',\n  shouldCloseOnOverlayClick = false,\n  hasError = false,\n  hasWarning = false,\n  hasSuccess = false,\n  hasInfo = false,\n  hasHelp = false,\n  actionsRef = () => null,\n  appElement = 'body',\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  zIndex = 10,\n}) => {\n  // http://reactcommunity.org/react-modal/accessibility/ https://github.com/reactjs/react-modal#examples\n  typeof document !== 'undefined' && document && ReactModal.setAppElement && ReactModal.setAppElement(appElement); // eslint-disable-line\n  const { cssClassName, classNameElement, classNameBlock, classNameModifier, classNameBlockModifier } =\n    convertPropToCssClassName('modal', className, {\n      hasError,\n      hasWarning,\n      hasSuccess,\n      modalType,\n      size,\n    });\n\n  const { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;\n\n  const isAFeedbackType = [WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1;\n  const showFeedBack = isAFeedbackType || hasError || hasWarning || hasSuccess || hasInfo || hasHelp;\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={cssClassName}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered && 'center')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          zIndex,\n        },\n      }}\n    >\n      <div {...containerProps}>\n        {showHeader && (\n          <div className={classNameBlock('modal-header')}>\n            <div className={classNameElement('title', 'modal-header')}>{modalTitle}</div>\n            <div className={classNameElement('icon', 'modal-header')}>\n              <DSButton buttonType=\"link\" icon={<Close />} onClick={onClose} size={iconCloseSize} />\n            </div>\n          </div>\n        )}\n        <div className={classNameElement('body')}>\n          {showFeedBack && (\n            <ModalFeedBack\n              hasError={hasError}\n              hasHelp={hasHelp}\n              hasInfo={hasInfo}\n              hasSuccess={hasSuccess}\n              hasWarning={hasWarning}\n              modalType={modalType}\n            />\n          )}\n          {children}\n        </div>\n        {showFooter && !isAFeedbackType && (\n          <div\n            className={`${classNameBlock('modal-footer')} ${\n              additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, 'modal-footer') : ''\n            }`}\n          >\n            <div ref={actionsRef} className={classNameBlock('modal-footer-actions')}>\n              {modalType === MODAL_TYPE.CONFIRM && (\n                <DSButton\n                  buttonType=\"secondary\"\n                  className={`${classNameElement('button-action')} ${classNameModifier('reject', 'button-action')} `}\n                  labelText={rejectLabel}\n                  onClick={onReject}\n                  {...overridePropsRejectButton}\n                />\n              )}\n              <DSButton\n                buttonType=\"primary\"\n                className={`${classNameElement('button-action')} ${classNameModifier('confirm', 'button-action')} `}\n                labelText={confirmLabel}\n                onClick={onConfirm}\n                {...overridePropsConfirmButton}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    </ReactModal>\n  );\n};\n\nDSModal.propTypes = {\n  className: PropTypes.string,\n  /**\n   * Add an additional css class to the footer\n   */\n  additionalFooterCssClass: PropTypes.string,\n  /**\n   * Set style for the modal\n   */\n  style: PropTypes.shape({}),\n  /**\n   * Select size for the close icon\n   */\n  iconCloseSize: PropTypes.oneOf(iconSizes),\n  /**\n   * ['default', 'alert', 'confirm', 'notification', 'warning', 'error', 'success', 'help', 'info']\n   */\n  modalType: PropTypes.oneOf(modalTypes),\n  /**\n   * Show the header or not\n   */\n  showHeader: PropTypes.bool,\n  /**\n   * Show the footer or not\n   */\n  showFooter: PropTypes.bool,\n  /**\n   * Main content of the modal\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired,\n  /**\n   * Content is centered or not\n   */\n  centered: PropTypes.bool,\n  /**\n   * Text to be added in the confirm button\n   */\n  confirmLabel: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  modalTitle: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  size: PropTypes.oneOf(sizes),\n  /**\n   * Modal is open or not\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Allows a function to be triggered once the modal is closed\n   */\n  onClose: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal is opened\n   */\n  onAfterOpen: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is confirmed\n   */\n  onConfirm: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is rejected\n   */\n  onReject: PropTypes.func,\n  /**\n   * Text to be added in the reject button\n   */\n  rejectLabel: PropTypes.string,\n  /**\n   * If modal should close on overlay click\n   */\n  shouldCloseOnOverlayClick: PropTypes.bool,\n  /**\n   * Modal has error or not\n   */\n  hasError: PropTypes.bool,\n  /**\n   * Modal has warning or not\n   */\n  hasWarning: PropTypes.bool,\n  /**\n   * Modal has success or not\n   */\n  hasSuccess: PropTypes.bool,\n  /**\n   * Modal has info or not\n   */\n  hasInfo: PropTypes.bool,\n  /**\n   * Modal has help or not\n   */\n  hasHelp: PropTypes.bool,\n  actionsRef: PropTypes.func,\n  appElement: PropTypes.string,\n  /**\n   * Customized props for the confirm button\n   */\n  overridePropsConfirmButton: PropTypes.shape({}),\n  /**\n   * Customized props for the reject button\n   */\n  overridePropsRejectButton: PropTypes.shape({}),\n};\n\nexport default DSModal;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": ["MODAL_TYPE", "ReactModal", "DSButton", "ModalFeedBack", "PropTypes"]
 }

package/dist/cjs/v2/DSModal.js

@@ -71,7 +71,7 @@ const DSModal = ({
   rejectLabel = "Discard",
   confirmLabel = "Save",
   shouldCloseOnOverlayClick = false,
-  appElement = "#root",
+  appElement = "body",
   zIndex,
   removePadding = false
 }) => {

package/dist/cjs/v2/DSModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/v2/DSModal.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { MODAL_TYPE_V2 } from '../constants.js';\nimport { DSModalContent } from './components/ModalContent.js';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  style = {},\n  size = 'default',\n  //\n  modalType = MODAL_TYPE_V2.INFORMATION,\n  modalSubType = null,\n  modalTitle = '',\n  dataTestId = 'ds-modal',\n  centered = false,\n  showRejectButton = false,\n  showClose = true,\n  searchProps = {},\n  // override\n  actionsRef = () => null,\n  additionalFooterCssClass,\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  // react modal\n  children,\n  isOpen = true,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Discard',\n  confirmLabel = 'Save',\n  shouldCloseOnOverlayClick = false,\n  appElement = '#root',\n  zIndex,\n  removePadding = false,\n}) => {\n  if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && document && ReactModal.setAppElement) {\n    ReactModal.setAppElement(appElement);\n  }\n\n  const { cssClassName, classNameBlock, classNameModifier } = convertPropToCssClassName('modal-v2', className, {\n    size,\n  });\n\n  const theme = useContext(ThemeContext);\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={`${cssClassName} ${classNameBlock(`type-${modalType}`)}`}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered ? 'center' : 'top')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          // position: 'absolute', https://jira.elliemae.io/browse/PUI-1471, the overlay should be positioned based on the browser window rather positioned absolute to its parent\n          zIndex: zIndex ?? theme.zIndex.dialog,\n        },\n      }}\n    >\n      <DSModalContent\n        actionsRef={actionsRef}\n        additionalFooterCssClass={additionalFooterCssClass}\n        confirmLabel={confirmLabel}\n        containerProps={containerProps}\n        modalSubType={modalSubType}\n        modalTitle={modalTitle}\n        modalType={modalType}\n        onClose={onClose}\n        onConfirm={onConfirm}\n        onReject={onReject}\n        overridePropsConfirmButton={overridePropsConfirmButton}\n        overridePropsRejectButton={overridePropsRejectButton}\n        rejectLabel={rejectLabel}\n        searchProps={searchProps}\n        showClose={showClose}\n        showRejectButton={showRejectButton}\n        removePadding={removePadding}\n      >\n        {children}\n      </DSModalContent>\n    </ReactModal>\n  );\n};\n\nconst props = {\n  /** inject props to container wrapper */\n  containerProps: PropTypes.object.description('inject props to container wrapper'),\n  /** css class */\n  className: PropTypes.string.description('css class'),\n  /** style object for container wrapper */\n  style: PropTypes.object.description('style object for container wrapper'),\n  /** modal container title */\n  modalTitle: PropTypes.string.description('modal container title'),\n  /** center container */\n  centered: PropTypes.bool.description('center container'),\n  /** show reject button */\n  showRejectButton: PropTypes.bool.description('show reject button'),\n  /** show close button */\n  showClose: PropTypes.bool.description('show close button'),\n  /*\n    Props for search component\n  */\n  searchProps: PropTypes.object.description('Props for search component'),\n  /** css class for footer */\n  additionalFooterCssClass: PropTypes.string.description('css class for footer'),\n  /**  override props confirm button */\n  overridePropsConfirmButton: PropTypes.object.description('override props confirm button'),\n  /** override props reject button */\n  overridePropsRejectButton: PropTypes.object.description('override props reject button'),\n  /** controlled isOpen flag */\n  isOpen: PropTypes.bool.description('controlled isOpen flag'),\n  /** close callback */\n  onClose: PropTypes.func.description('close callback'),\n  /** after open callback */\n  onAfterOpen: PropTypes.func.description('after open callback'),\n  /** confirm callback */\n  onConfirm: PropTypes.func.description('confirm callback'),\n  /** reject callback */\n  onReject: PropTypes.func.description('reject callback'),\n  /** reject label */\n  rejectLabel: PropTypes.string.description('reject label'),\n  /** confirm text string */\n  confirmLabel: PropTypes.string.description('confirm text string'),\n  /** modal container size */\n  size: PropTypes.oneOf(['default', 'xx-large', 'x-large', 'large', 'medium', 'small']).description(\n    'modal container size',\n  ),\n  /** modal sub type */\n  modalSubType: PropTypes.any.description('modal sub type'),\n  /** modal type */\n  modalType: PropTypes.any.description('modal type'),\n  /** ref for modal footer actions */\n  actionsRef: PropTypes.any.description('ref for modal footer actions'),\n  /** modal container children */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).description(\n    'modal container children',\n  ),\n  /** close on click outside container */\n  shouldCloseOnOverlayClick: PropTypes.bool.description('close on click outside container'),\n  /*\n    App element ID to inject the modal\n  */\n  appElement: PropTypes.string.description('App element ID to inject the modal'),\n  /** zindex for modal container */\n  zIndex: PropTypes.number.description('zindex for modal container'),\n  /** remove modal builtin padding */\n  removePadding: PropTypes.bool.description('remove modal builtin padding'),\n};\n\nDSModal.propTypes = props;\nDSModal.displayName = 'DSModal';\nconst DSModalWithSchema = describe(DSModal);\nDSModalWithSchema.propTypes = props;\n\nexport { DSModalContent, DSModalWithSchema };\nexport default DSModal;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { MODAL_TYPE_V2 } from '../constants.js';\nimport { DSModalContent } from './components/ModalContent.js';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  style = {},\n  size = 'default',\n  //\n  modalType = MODAL_TYPE_V2.INFORMATION,\n  modalSubType = null,\n  modalTitle = '',\n  dataTestId = 'ds-modal',\n  centered = false,\n  showRejectButton = false,\n  showClose = true,\n  searchProps = {},\n  // override\n  actionsRef = () => null,\n  additionalFooterCssClass,\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  // react modal\n  children,\n  isOpen = true,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Discard',\n  confirmLabel = 'Save',\n  shouldCloseOnOverlayClick = false,\n  appElement = 'body',\n  zIndex,\n  removePadding = false,\n}) => {\n  if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && document && ReactModal.setAppElement) {\n    ReactModal.setAppElement(appElement);\n  }\n\n  const { cssClassName, classNameBlock, classNameModifier } = convertPropToCssClassName('modal-v2', className, {\n    size,\n  });\n\n  const theme = useContext(ThemeContext);\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={`${cssClassName} ${classNameBlock(`type-${modalType}`)}`}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered ? 'center' : 'top')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          // position: 'absolute', https://jira.elliemae.io/browse/PUI-1471, the overlay should be positioned based on the browser window rather positioned absolute to its parent\n          zIndex: zIndex ?? theme.zIndex.dialog,\n        },\n      }}\n    >\n      <DSModalContent\n        actionsRef={actionsRef}\n        additionalFooterCssClass={additionalFooterCssClass}\n        confirmLabel={confirmLabel}\n        containerProps={containerProps}\n        modalSubType={modalSubType}\n        modalTitle={modalTitle}\n        modalType={modalType}\n        onClose={onClose}\n        onConfirm={onConfirm}\n        onReject={onReject}\n        overridePropsConfirmButton={overridePropsConfirmButton}\n        overridePropsRejectButton={overridePropsRejectButton}\n        rejectLabel={rejectLabel}\n        searchProps={searchProps}\n        showClose={showClose}\n        showRejectButton={showRejectButton}\n        removePadding={removePadding}\n      >\n        {children}\n      </DSModalContent>\n    </ReactModal>\n  );\n};\n\nconst props = {\n  /** inject props to container wrapper */\n  containerProps: PropTypes.object.description('inject props to container wrapper'),\n  /** css class */\n  className: PropTypes.string.description('css class'),\n  /** style object for container wrapper */\n  style: PropTypes.object.description('style object for container wrapper'),\n  /** modal container title */\n  modalTitle: PropTypes.string.description('modal container title'),\n  /** center container */\n  centered: PropTypes.bool.description('center container'),\n  /** show reject button */\n  showRejectButton: PropTypes.bool.description('show reject button'),\n  /** show close button */\n  showClose: PropTypes.bool.description('show close button'),\n  /*\n    Props for search component\n  */\n  searchProps: PropTypes.object.description('Props for search component'),\n  /** css class for footer */\n  additionalFooterCssClass: PropTypes.string.description('css class for footer'),\n  /**  override props confirm button */\n  overridePropsConfirmButton: PropTypes.object.description('override props confirm button'),\n  /** override props reject button */\n  overridePropsRejectButton: PropTypes.object.description('override props reject button'),\n  /** controlled isOpen flag */\n  isOpen: PropTypes.bool.description('controlled isOpen flag'),\n  /** close callback */\n  onClose: PropTypes.func.description('close callback'),\n  /** after open callback */\n  onAfterOpen: PropTypes.func.description('after open callback'),\n  /** confirm callback */\n  onConfirm: PropTypes.func.description('confirm callback'),\n  /** reject callback */\n  onReject: PropTypes.func.description('reject callback'),\n  /** reject label */\n  rejectLabel: PropTypes.string.description('reject label'),\n  /** confirm text string */\n  confirmLabel: PropTypes.string.description('confirm text string'),\n  /** modal container size */\n  size: PropTypes.oneOf(['default', 'xx-large', 'x-large', 'large', 'medium', 'small']).description(\n    'modal container size',\n  ),\n  /** modal sub type */\n  modalSubType: PropTypes.any.description('modal sub type'),\n  /** modal type */\n  modalType: PropTypes.any.description('modal type'),\n  /** ref for modal footer actions */\n  actionsRef: PropTypes.any.description('ref for modal footer actions'),\n  /** modal container children */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).description(\n    'modal container children',\n  ),\n  /** close on click outside container */\n  shouldCloseOnOverlayClick: PropTypes.bool.description('close on click outside container'),\n  /*\n    App element ID to inject the modal\n  */\n  appElement: PropTypes.string.description('App element ID to inject the modal'),\n  /** zindex for modal container */\n  zIndex: PropTypes.number.description('zindex for modal container'),\n  /** remove modal builtin padding */\n  removePadding: PropTypes.bool.description('remove modal builtin padding'),\n};\n\nDSModal.propTypes = props;\nDSModal.displayName = 'DSModal';\nconst DSModalWithSchema = describe(DSModal);\nDSModalWithSchema.propTypes = props;\n\nexport { DSModalContent, DSModalWithSchema };\nexport default DSModal;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": ["ReactModal"]
 }

package/dist/esm/v1/DSModal.js

@@ -37,7 +37,7 @@ const DSModal = ({
   hasInfo = false,
   hasHelp = false,
   actionsRef = () => null,
-  appElement = "#root",
+  appElement = "body",
   overridePropsConfirmButton = {},
   overridePropsRejectButton = {},
   zIndex = 10

package/dist/esm/v1/DSModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DSModal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MODAL_TYPE, { modalTypes } from '../constants.js';\nimport ModalFeedBack from './ModalFeedBack/ModalFeedBack.js';\nimport { sizes, iconSizes } from '@elliemae/ds-shared';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  dataTestId = 'ds-modal',\n  additionalFooterCssClass = '',\n  style = {},\n  iconCloseSize = DSIconSizes.S,\n  modalType = MODAL_TYPE.DEFAULT,\n  showHeader = true,\n  showFooter = true,\n  children,\n  centered = true,\n  confirmLabel = 'Accept',\n  modalTitle = '',\n  size = 'medium',\n  isOpen = false,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Cancel',\n  shouldCloseOnOverlayClick = false,\n  hasError = false,\n  hasWarning = false,\n  hasSuccess = false,\n  hasInfo = false,\n  hasHelp = false,\n  actionsRef = () => null,\n  appElement = '#root',\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  zIndex = 10,\n}) => {\n  // http://reactcommunity.org/react-modal/accessibility/ https://github.com/reactjs/react-modal#examples\n  typeof document !== 'undefined' && document && ReactModal.setAppElement && ReactModal.setAppElement(appElement); // eslint-disable-line\n  const { cssClassName, classNameElement, classNameBlock, classNameModifier, classNameBlockModifier } =\n    convertPropToCssClassName('modal', className, {\n      hasError,\n      hasWarning,\n      hasSuccess,\n      modalType,\n      size,\n    });\n\n  const { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;\n\n  const isAFeedbackType = [WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1;\n  const showFeedBack = isAFeedbackType || hasError || hasWarning || hasSuccess || hasInfo || hasHelp;\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={cssClassName}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered && 'center')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          zIndex,\n        },\n      }}\n    >\n      <div {...containerProps}>\n        {showHeader && (\n          <div className={classNameBlock('modal-header')}>\n            <div className={classNameElement('title', 'modal-header')}>{modalTitle}</div>\n            <div className={classNameElement('icon', 'modal-header')}>\n              <DSButton buttonType=\"link\" icon={<Close />} onClick={onClose} size={iconCloseSize} />\n            </div>\n          </div>\n        )}\n        <div className={classNameElement('body')}>\n          {showFeedBack && (\n            <ModalFeedBack\n              hasError={hasError}\n              hasHelp={hasHelp}\n              hasInfo={hasInfo}\n              hasSuccess={hasSuccess}\n              hasWarning={hasWarning}\n              modalType={modalType}\n            />\n          )}\n          {children}\n        </div>\n        {showFooter && !isAFeedbackType && (\n          <div\n            className={`${classNameBlock('modal-footer')} ${\n              additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, 'modal-footer') : ''\n            }`}\n          >\n            <div ref={actionsRef} className={classNameBlock('modal-footer-actions')}>\n              {modalType === MODAL_TYPE.CONFIRM && (\n                <DSButton\n                  buttonType=\"secondary\"\n                  className={`${classNameElement('button-action')} ${classNameModifier('reject', 'button-action')} `}\n                  labelText={rejectLabel}\n                  onClick={onReject}\n                  {...overridePropsRejectButton}\n                />\n              )}\n              <DSButton\n                buttonType=\"primary\"\n                className={`${classNameElement('button-action')} ${classNameModifier('confirm', 'button-action')} `}\n                labelText={confirmLabel}\n                onClick={onConfirm}\n                {...overridePropsConfirmButton}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    </ReactModal>\n  );\n};\n\nDSModal.propTypes = {\n  className: PropTypes.string,\n  /**\n   * Add an additional css class to the footer\n   */\n  additionalFooterCssClass: PropTypes.string,\n  /**\n   * Set style for the modal\n   */\n  style: PropTypes.shape({}),\n  /**\n   * Select size for the close icon\n   */\n  iconCloseSize: PropTypes.oneOf(iconSizes),\n  /**\n   * ['default', 'alert', 'confirm', 'notification', 'warning', 'error', 'success', 'help', 'info']\n   */\n  modalType: PropTypes.oneOf(modalTypes),\n  /**\n   * Show the header or not\n   */\n  showHeader: PropTypes.bool,\n  /**\n   * Show the footer or not\n   */\n  showFooter: PropTypes.bool,\n  /**\n   * Main content of the modal\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired,\n  /**\n   * Content is centered or not\n   */\n  centered: PropTypes.bool,\n  /**\n   * Text to be added in the confirm button\n   */\n  confirmLabel: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  modalTitle: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  size: PropTypes.oneOf(sizes),\n  /**\n   * Modal is open or not\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Allows a function to be triggered once the modal is closed\n   */\n  onClose: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal is opened\n   */\n  onAfterOpen: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is confirmed\n   */\n  onConfirm: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is rejected\n   */\n  onReject: PropTypes.func,\n  /**\n   * Text to be added in the reject button\n   */\n  rejectLabel: PropTypes.string,\n  /**\n   * If modal should close on overlay click\n   */\n  shouldCloseOnOverlayClick: PropTypes.bool,\n  /**\n   * Modal has error or not\n   */\n  hasError: PropTypes.bool,\n  /**\n   * Modal has warning or not\n   */\n  hasWarning: PropTypes.bool,\n  /**\n   * Modal has success or not\n   */\n  hasSuccess: PropTypes.bool,\n  /**\n   * Modal has info or not\n   */\n  hasInfo: PropTypes.bool,\n  /**\n   * Modal has help or not\n   */\n  hasHelp: PropTypes.bool,\n  actionsRef: PropTypes.func,\n  appElement: PropTypes.string,\n  /**\n   * Customized props for the confirm button\n   */\n  overridePropsConfirmButton: PropTypes.shape({}),\n  /**\n   * Customized props for the reject button\n   */\n  overridePropsRejectButton: PropTypes.shape({}),\n};\n\nexport default DSModal;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { Close } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport MODAL_TYPE, { modalTypes } from '../constants.js';\nimport ModalFeedBack from './ModalFeedBack/ModalFeedBack.js';\nimport { sizes, iconSizes } from '@elliemae/ds-shared';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  dataTestId = 'ds-modal',\n  additionalFooterCssClass = '',\n  style = {},\n  iconCloseSize = DSIconSizes.S,\n  modalType = MODAL_TYPE.DEFAULT,\n  showHeader = true,\n  showFooter = true,\n  children,\n  centered = true,\n  confirmLabel = 'Accept',\n  modalTitle = '',\n  size = 'medium',\n  isOpen = false,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Cancel',\n  shouldCloseOnOverlayClick = false,\n  hasError = false,\n  hasWarning = false,\n  hasSuccess = false,\n  hasInfo = false,\n  hasHelp = false,\n  actionsRef = () => null,\n  appElement = 'body',\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  zIndex = 10,\n}) => {\n  // http://reactcommunity.org/react-modal/accessibility/ https://github.com/reactjs/react-modal#examples\n  typeof document !== 'undefined' && document && ReactModal.setAppElement && ReactModal.setAppElement(appElement); // eslint-disable-line\n  const { cssClassName, classNameElement, classNameBlock, classNameModifier, classNameBlockModifier } =\n    convertPropToCssClassName('modal', className, {\n      hasError,\n      hasWarning,\n      hasSuccess,\n      modalType,\n      size,\n    });\n\n  const { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;\n\n  const isAFeedbackType = [WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1;\n  const showFeedBack = isAFeedbackType || hasError || hasWarning || hasSuccess || hasInfo || hasHelp;\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={cssClassName}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered && 'center')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          zIndex,\n        },\n      }}\n    >\n      <div {...containerProps}>\n        {showHeader && (\n          <div className={classNameBlock('modal-header')}>\n            <div className={classNameElement('title', 'modal-header')}>{modalTitle}</div>\n            <div className={classNameElement('icon', 'modal-header')}>\n              <DSButton buttonType=\"link\" icon={<Close />} onClick={onClose} size={iconCloseSize} />\n            </div>\n          </div>\n        )}\n        <div className={classNameElement('body')}>\n          {showFeedBack && (\n            <ModalFeedBack\n              hasError={hasError}\n              hasHelp={hasHelp}\n              hasInfo={hasInfo}\n              hasSuccess={hasSuccess}\n              hasWarning={hasWarning}\n              modalType={modalType}\n            />\n          )}\n          {children}\n        </div>\n        {showFooter && !isAFeedbackType && (\n          <div\n            className={`${classNameBlock('modal-footer')} ${\n              additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, 'modal-footer') : ''\n            }`}\n          >\n            <div ref={actionsRef} className={classNameBlock('modal-footer-actions')}>\n              {modalType === MODAL_TYPE.CONFIRM && (\n                <DSButton\n                  buttonType=\"secondary\"\n                  className={`${classNameElement('button-action')} ${classNameModifier('reject', 'button-action')} `}\n                  labelText={rejectLabel}\n                  onClick={onReject}\n                  {...overridePropsRejectButton}\n                />\n              )}\n              <DSButton\n                buttonType=\"primary\"\n                className={`${classNameElement('button-action')} ${classNameModifier('confirm', 'button-action')} `}\n                labelText={confirmLabel}\n                onClick={onConfirm}\n                {...overridePropsConfirmButton}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    </ReactModal>\n  );\n};\n\nDSModal.propTypes = {\n  className: PropTypes.string,\n  /**\n   * Add an additional css class to the footer\n   */\n  additionalFooterCssClass: PropTypes.string,\n  /**\n   * Set style for the modal\n   */\n  style: PropTypes.shape({}),\n  /**\n   * Select size for the close icon\n   */\n  iconCloseSize: PropTypes.oneOf(iconSizes),\n  /**\n   * ['default', 'alert', 'confirm', 'notification', 'warning', 'error', 'success', 'help', 'info']\n   */\n  modalType: PropTypes.oneOf(modalTypes),\n  /**\n   * Show the header or not\n   */\n  showHeader: PropTypes.bool,\n  /**\n   * Show the footer or not\n   */\n  showFooter: PropTypes.bool,\n  /**\n   * Main content of the modal\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired,\n  /**\n   * Content is centered or not\n   */\n  centered: PropTypes.bool,\n  /**\n   * Text to be added in the confirm button\n   */\n  confirmLabel: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  modalTitle: PropTypes.string,\n  /**\n   * Text to be added in the modal title\n   */\n  size: PropTypes.oneOf(sizes),\n  /**\n   * Modal is open or not\n   */\n  isOpen: PropTypes.bool,\n  /**\n   * Allows a function to be triggered once the modal is closed\n   */\n  onClose: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal is opened\n   */\n  onAfterOpen: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is confirmed\n   */\n  onConfirm: PropTypes.func,\n  /**\n   * Allows a function to be triggered once the modal open is rejected\n   */\n  onReject: PropTypes.func,\n  /**\n   * Text to be added in the reject button\n   */\n  rejectLabel: PropTypes.string,\n  /**\n   * If modal should close on overlay click\n   */\n  shouldCloseOnOverlayClick: PropTypes.bool,\n  /**\n   * Modal has error or not\n   */\n  hasError: PropTypes.bool,\n  /**\n   * Modal has warning or not\n   */\n  hasWarning: PropTypes.bool,\n  /**\n   * Modal has success or not\n   */\n  hasSuccess: PropTypes.bool,\n  /**\n   * Modal has info or not\n   */\n  hasInfo: PropTypes.bool,\n  /**\n   * Modal has help or not\n   */\n  hasHelp: PropTypes.bool,\n  actionsRef: PropTypes.func,\n  appElement: PropTypes.string,\n  /**\n   * Customized props for the confirm button\n   */\n  overridePropsConfirmButton: PropTypes.shape({}),\n  /**\n   * Customized props for the reject button\n   */\n  overridePropsRejectButton: PropTypes.shape({}),\n};\n\nexport default DSModal;\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/v2/DSModal.js

@@ -36,7 +36,7 @@ const DSModal = ({
   rejectLabel = "Discard",
   confirmLabel = "Save",
   shouldCloseOnOverlayClick = false,
-  appElement = "#root",
+  appElement = "body",
   zIndex,
   removePadding = false
 }) => {

package/dist/esm/v2/DSModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSModal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { MODAL_TYPE_V2 } from '../constants.js';\nimport { DSModalContent } from './components/ModalContent.js';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  style = {},\n  size = 'default',\n  //\n  modalType = MODAL_TYPE_V2.INFORMATION,\n  modalSubType = null,\n  modalTitle = '',\n  dataTestId = 'ds-modal',\n  centered = false,\n  showRejectButton = false,\n  showClose = true,\n  searchProps = {},\n  // override\n  actionsRef = () => null,\n  additionalFooterCssClass,\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  // react modal\n  children,\n  isOpen = true,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Discard',\n  confirmLabel = 'Save',\n  shouldCloseOnOverlayClick = false,\n  appElement = '#root',\n  zIndex,\n  removePadding = false,\n}) => {\n  if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && document && ReactModal.setAppElement) {\n    ReactModal.setAppElement(appElement);\n  }\n\n  const { cssClassName, classNameBlock, classNameModifier } = convertPropToCssClassName('modal-v2', className, {\n    size,\n  });\n\n  const theme = useContext(ThemeContext);\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={`${cssClassName} ${classNameBlock(`type-${modalType}`)}`}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered ? 'center' : 'top')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          // position: 'absolute', https://jira.elliemae.io/browse/PUI-1471, the overlay should be positioned based on the browser window rather positioned absolute to its parent\n          zIndex: zIndex ?? theme.zIndex.dialog,\n        },\n      }}\n    >\n      <DSModalContent\n        actionsRef={actionsRef}\n        additionalFooterCssClass={additionalFooterCssClass}\n        confirmLabel={confirmLabel}\n        containerProps={containerProps}\n        modalSubType={modalSubType}\n        modalTitle={modalTitle}\n        modalType={modalType}\n        onClose={onClose}\n        onConfirm={onConfirm}\n        onReject={onReject}\n        overridePropsConfirmButton={overridePropsConfirmButton}\n        overridePropsRejectButton={overridePropsRejectButton}\n        rejectLabel={rejectLabel}\n        searchProps={searchProps}\n        showClose={showClose}\n        showRejectButton={showRejectButton}\n        removePadding={removePadding}\n      >\n        {children}\n      </DSModalContent>\n    </ReactModal>\n  );\n};\n\nconst props = {\n  /** inject props to container wrapper */\n  containerProps: PropTypes.object.description('inject props to container wrapper'),\n  /** css class */\n  className: PropTypes.string.description('css class'),\n  /** style object for container wrapper */\n  style: PropTypes.object.description('style object for container wrapper'),\n  /** modal container title */\n  modalTitle: PropTypes.string.description('modal container title'),\n  /** center container */\n  centered: PropTypes.bool.description('center container'),\n  /** show reject button */\n  showRejectButton: PropTypes.bool.description('show reject button'),\n  /** show close button */\n  showClose: PropTypes.bool.description('show close button'),\n  /*\n    Props for search component\n  */\n  searchProps: PropTypes.object.description('Props for search component'),\n  /** css class for footer */\n  additionalFooterCssClass: PropTypes.string.description('css class for footer'),\n  /**  override props confirm button */\n  overridePropsConfirmButton: PropTypes.object.description('override props confirm button'),\n  /** override props reject button */\n  overridePropsRejectButton: PropTypes.object.description('override props reject button'),\n  /** controlled isOpen flag */\n  isOpen: PropTypes.bool.description('controlled isOpen flag'),\n  /** close callback */\n  onClose: PropTypes.func.description('close callback'),\n  /** after open callback */\n  onAfterOpen: PropTypes.func.description('after open callback'),\n  /** confirm callback */\n  onConfirm: PropTypes.func.description('confirm callback'),\n  /** reject callback */\n  onReject: PropTypes.func.description('reject callback'),\n  /** reject label */\n  rejectLabel: PropTypes.string.description('reject label'),\n  /** confirm text string */\n  confirmLabel: PropTypes.string.description('confirm text string'),\n  /** modal container size */\n  size: PropTypes.oneOf(['default', 'xx-large', 'x-large', 'large', 'medium', 'small']).description(\n    'modal container size',\n  ),\n  /** modal sub type */\n  modalSubType: PropTypes.any.description('modal sub type'),\n  /** modal type */\n  modalType: PropTypes.any.description('modal type'),\n  /** ref for modal footer actions */\n  actionsRef: PropTypes.any.description('ref for modal footer actions'),\n  /** modal container children */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).description(\n    'modal container children',\n  ),\n  /** close on click outside container */\n  shouldCloseOnOverlayClick: PropTypes.bool.description('close on click outside container'),\n  /*\n    App element ID to inject the modal\n  */\n  appElement: PropTypes.string.description('App element ID to inject the modal'),\n  /** zindex for modal container */\n  zIndex: PropTypes.number.description('zindex for modal container'),\n  /** remove modal builtin padding */\n  removePadding: PropTypes.bool.description('remove modal builtin padding'),\n};\n\nDSModal.propTypes = props;\nDSModal.displayName = 'DSModal';\nconst DSModalWithSchema = describe(DSModal);\nDSModalWithSchema.propTypes = props;\n\nexport { DSModalContent, DSModalWithSchema };\nexport default DSModal;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext } from 'react';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport ReactModal from 'react-modal';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { MODAL_TYPE_V2 } from '../constants.js';\nimport { DSModalContent } from './components/ModalContent.js';\n\nconst DSModal = ({\n  containerProps = {},\n  className = '',\n  style = {},\n  size = 'default',\n  //\n  modalType = MODAL_TYPE_V2.INFORMATION,\n  modalSubType = null,\n  modalTitle = '',\n  dataTestId = 'ds-modal',\n  centered = false,\n  showRejectButton = false,\n  showClose = true,\n  searchProps = {},\n  // override\n  actionsRef = () => null,\n  additionalFooterCssClass,\n  overridePropsConfirmButton = {},\n  overridePropsRejectButton = {},\n  // react modal\n  children,\n  isOpen = true,\n  onClose = () => null,\n  onAfterOpen = () => null,\n  onConfirm = () => null,\n  onReject = () => null,\n  rejectLabel = 'Discard',\n  confirmLabel = 'Save',\n  shouldCloseOnOverlayClick = false,\n  appElement = 'body',\n  zIndex,\n  removePadding = false,\n}) => {\n  if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && document && ReactModal.setAppElement) {\n    ReactModal.setAppElement(appElement);\n  }\n\n  const { cssClassName, classNameBlock, classNameModifier } = convertPropToCssClassName('modal-v2', className, {\n    size,\n  });\n\n  const theme = useContext(ThemeContext);\n\n  return (\n    <ReactModal\n      testId={dataTestId}\n      className={`${cssClassName} ${classNameBlock(`type-${modalType}`)}`}\n      contentLabel={modalTitle}\n      isOpen={isOpen}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onClose}\n      overlayClassName={`${classNameBlock('overlay')} ${classNameModifier(centered ? 'center' : 'top')}`}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n      style={{\n        content: {\n          ...style,\n        },\n        overlay: {\n          // position: 'absolute', https://jira.elliemae.io/browse/PUI-1471, the overlay should be positioned based on the browser window rather positioned absolute to its parent\n          zIndex: zIndex ?? theme.zIndex.dialog,\n        },\n      }}\n    >\n      <DSModalContent\n        actionsRef={actionsRef}\n        additionalFooterCssClass={additionalFooterCssClass}\n        confirmLabel={confirmLabel}\n        containerProps={containerProps}\n        modalSubType={modalSubType}\n        modalTitle={modalTitle}\n        modalType={modalType}\n        onClose={onClose}\n        onConfirm={onConfirm}\n        onReject={onReject}\n        overridePropsConfirmButton={overridePropsConfirmButton}\n        overridePropsRejectButton={overridePropsRejectButton}\n        rejectLabel={rejectLabel}\n        searchProps={searchProps}\n        showClose={showClose}\n        showRejectButton={showRejectButton}\n        removePadding={removePadding}\n      >\n        {children}\n      </DSModalContent>\n    </ReactModal>\n  );\n};\n\nconst props = {\n  /** inject props to container wrapper */\n  containerProps: PropTypes.object.description('inject props to container wrapper'),\n  /** css class */\n  className: PropTypes.string.description('css class'),\n  /** style object for container wrapper */\n  style: PropTypes.object.description('style object for container wrapper'),\n  /** modal container title */\n  modalTitle: PropTypes.string.description('modal container title'),\n  /** center container */\n  centered: PropTypes.bool.description('center container'),\n  /** show reject button */\n  showRejectButton: PropTypes.bool.description('show reject button'),\n  /** show close button */\n  showClose: PropTypes.bool.description('show close button'),\n  /*\n    Props for search component\n  */\n  searchProps: PropTypes.object.description('Props for search component'),\n  /** css class for footer */\n  additionalFooterCssClass: PropTypes.string.description('css class for footer'),\n  /**  override props confirm button */\n  overridePropsConfirmButton: PropTypes.object.description('override props confirm button'),\n  /** override props reject button */\n  overridePropsRejectButton: PropTypes.object.description('override props reject button'),\n  /** controlled isOpen flag */\n  isOpen: PropTypes.bool.description('controlled isOpen flag'),\n  /** close callback */\n  onClose: PropTypes.func.description('close callback'),\n  /** after open callback */\n  onAfterOpen: PropTypes.func.description('after open callback'),\n  /** confirm callback */\n  onConfirm: PropTypes.func.description('confirm callback'),\n  /** reject callback */\n  onReject: PropTypes.func.description('reject callback'),\n  /** reject label */\n  rejectLabel: PropTypes.string.description('reject label'),\n  /** confirm text string */\n  confirmLabel: PropTypes.string.description('confirm text string'),\n  /** modal container size */\n  size: PropTypes.oneOf(['default', 'xx-large', 'x-large', 'large', 'medium', 'small']).description(\n    'modal container size',\n  ),\n  /** modal sub type */\n  modalSubType: PropTypes.any.description('modal sub type'),\n  /** modal type */\n  modalType: PropTypes.any.description('modal type'),\n  /** ref for modal footer actions */\n  actionsRef: PropTypes.any.description('ref for modal footer actions'),\n  /** modal container children */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).description(\n    'modal container children',\n  ),\n  /** close on click outside container */\n  shouldCloseOnOverlayClick: PropTypes.bool.description('close on click outside container'),\n  /*\n    App element ID to inject the modal\n  */\n  appElement: PropTypes.string.description('App element ID to inject the modal'),\n  /** zindex for modal container */\n  zIndex: PropTypes.number.description('zindex for modal container'),\n  /** remove modal builtin padding */\n  removePadding: PropTypes.bool.description('remove modal builtin padding'),\n};\n\nDSModal.propTypes = props;\nDSModal.displayName = 'DSModal';\nconst DSModalWithSchema = describe(DSModal);\nDSModalWithSchema.propTypes = props;\n\nexport { DSModalContent, DSModalWithSchema };\nexport default DSModal;\n"],
   "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-modal",
-  "version": "3.22.0-next.30",
+  "version": "3.22.0-next.32",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Modal",
   "files": [
@@ -102,21 +102,21 @@
     "prop-types": "~15.8.1",
     "react-modal": "~3.16.1",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-button": "3.22.0-next.30",
-    "@elliemae/ds-classnames": "3.22.0-next.30",
-    "@elliemae/ds-form": "3.22.0-next.30",
-    "@elliemae/ds-icon": "3.22.0-next.30",
-    "@elliemae/ds-icons": "3.22.0-next.30",
-    "@elliemae/ds-system": "3.22.0-next.30",
-    "@elliemae/ds-shared": "3.22.0-next.30",
-    "@elliemae/ds-utilities": "3.22.0-next.30",
-    "@elliemae/ds-props-helpers": "3.22.0-next.30"
+    "@elliemae/ds-icon": "3.22.0-next.32",
+    "@elliemae/ds-props-helpers": "3.22.0-next.32",
+    "@elliemae/ds-shared": "3.22.0-next.32",
+    "@elliemae/ds-system": "3.22.0-next.32",
+    "@elliemae/ds-form": "3.22.0-next.32",
+    "@elliemae/ds-utilities": "3.22.0-next.32",
+    "@elliemae/ds-classnames": "3.22.0-next.32",
+    "@elliemae/ds-icons": "3.22.0-next.32",
+    "@elliemae/ds-button": "3.22.0-next.32"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.22",
     "@testing-library/jest-dom": "~5.16.5",
     "@testing-library/react": "~12.1.3",
-    "@elliemae/ds-monorepo-devops": "3.22.0-next.30"
+    "@elliemae/ds-monorepo-devops": "3.22.0-next.32"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",