@elliemae/ds-modal 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/v1/ModalFeedBack/ModalFeedBack.js

@@ -1,59 +1,76 @@
-import * as React from "react";
-import React2 from "react";
-import { WarningCircle, CheckmarkCircle, HelpCircle, InfoCircle } from "@elliemae/ds-icons";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { MODAL_TYPE } from "../../constants";
-const feedbackIconSize = "xxl";
-const { WARNING, ERROR, SUCCESS, HELP, INFO } = MODAL_TYPE;
-const getModalType = (modalType, { hasError, hasWarning, hasSuccess, hasInfo, hasHelp }) => {
-  if ([WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1)
-    return modalType;
-  if (hasError)
-    return ERROR;
-  if (hasWarning)
-    return WARNING;
-  if (hasSuccess)
-    return SUCCESS;
-  if (hasHelp)
-    return HELP;
-  if (hasInfo)
-    return INFO;
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { InfoCircle, HelpCircle, CheckmarkCircle, WarningCircle } from '@elliemae/ds-icons';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { MODAL_TYPE } from '../../constants.js';
+
+var _WarningCircle, _CheckmarkCircle, _HelpCircle, _InfoCircle, _InfoCircle2;
+const feedbackIconSize = 'xxl';
+const {
+  WARNING,
+  ERROR,
+  SUCCESS,
+  HELP,
+  INFO
+} = MODAL_TYPE;
+
+const getModalType = (modalType, _ref) => {
+  let {
+    hasError,
+    hasWarning,
+    hasSuccess,
+    hasInfo,
+    hasHelp
+  } = _ref;
+  if ([WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1) return modalType;
+  if (hasError) return ERROR;
+  if (hasWarning) return WARNING;
+  if (hasSuccess) return SUCCESS;
+  if (hasHelp) return HELP;
+  if (hasInfo) return INFO;
   return INFO;
 };
-const getIconType = (modalType) => {
+
+const getIconType = modalType => {
   switch (modalType) {
     case WARNING:
     case ERROR:
-      return /* @__PURE__ */ React2.createElement(WarningCircle, {
+      return _WarningCircle || (_WarningCircle = /*#__PURE__*/_jsx(WarningCircle, {
         size: feedbackIconSize
-      });
+      }));
+
     case SUCCESS:
-      return /* @__PURE__ */ React2.createElement(CheckmarkCircle, {
+      return _CheckmarkCircle || (_CheckmarkCircle = /*#__PURE__*/_jsx(CheckmarkCircle, {
         size: feedbackIconSize
-      });
+      }));
+
     case HELP:
-      return /* @__PURE__ */ React2.createElement(HelpCircle, {
+      return _HelpCircle || (_HelpCircle = /*#__PURE__*/_jsx(HelpCircle, {
         size: feedbackIconSize
-      });
+      }));
+
     case INFO:
-      return /* @__PURE__ */ React2.createElement(InfoCircle, {
+      return _InfoCircle || (_InfoCircle = /*#__PURE__*/_jsx(InfoCircle, {
         size: feedbackIconSize
-      });
+      }));
+
     default:
-      return /* @__PURE__ */ React2.createElement(InfoCircle, {
+      return _InfoCircle2 || (_InfoCircle2 = /*#__PURE__*/_jsx(InfoCircle, {
         size: feedbackIconSize
-      });
+      }));
   }
 };
-const ModalFeedBack = ({
-  className = "",
-  modalType = null,
-  hasError = false,
-  hasWarning = false,
-  hasSuccess = false,
-  hasInfo = false,
-  hasHelp = false
-}) => {
+
+const ModalFeedBack = _ref2 => {
+  let {
+    className = '',
+    modalType = null,
+    hasError = false,
+    hasWarning = false,
+    hasSuccess = false,
+    hasInfo = false,
+    hasHelp = false
+  } = _ref2;
   const type = getModalType(modalType, {
     hasError,
     hasWarning,
@@ -61,14 +78,15 @@ const ModalFeedBack = ({
     hasInfo,
     hasHelp
   });
-  const { cssClassName } = convertPropToCssClassName("modal-feedback", className, { modalType: type });
+  const {
+    cssClassName
+  } = convertPropToCssClassName('modal-feedback', className, {
+    modalType: type
+  });
   const feedbackIcon = getIconType(type);
-  return /* @__PURE__ */ React2.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: cssClassName
-  }, feedbackIcon);
-};
-var ModalFeedBack_default = ModalFeedBack;
-export {
-  ModalFeedBack_default as default
+  }, void 0, feedbackIcon);
 };
-//# sourceMappingURL=ModalFeedBack.js.map
+
+export { ModalFeedBack as default };

package/esm/v2/DSModal.js

@@ -1,131 +1,192 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import ReactModal from "react-modal";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { MODAL_TYPE_V2 } from "../constants";
-import { DSModalContent } from "./components/ModalContent";
-const DSModal = ({
-  containerProps = {},
-  className = "",
-  style = {},
-  size = "default",
-  modalType = MODAL_TYPE_V2.INFORMATION,
-  modalSubType = null,
-  modalTitle = "",
-  dataTestId = "ds-modal",
-  centered = false,
-  showRejectButton = false,
-  showClose = true,
-  searchProps = {},
-  actionsRef = () => null,
-  additionalFooterCssClass,
-  overridePropsConfirmButton = {},
-  overridePropsRejectButton = {},
-  children,
-  isOpen = true,
-  onClose = () => null,
-  onAfterOpen = () => null,
-  onConfirm = () => null,
-  onReject = () => null,
-  rejectLabel = "Discard",
-  confirmLabel = "Save",
-  shouldCloseOnOverlayClick = false,
-  appElement = "#root",
-  zIndex = 10,
-  removePadding = false
-}) => {
-  if (typeof document !== "undefined" && true && document && ReactModal.setAppElement) {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import ReactModal from 'react-modal';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { MODAL_TYPE_V2 } from '../constants.js';
+import { DSModalContent } from './components/ModalContent.js';
+export { DSModalContent } from './components/ModalContent.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSModal = _ref => {
+  let {
+    containerProps = {},
+    className = '',
+    style = {},
+    size = 'default',
+    //
+    modalType = MODAL_TYPE_V2.INFORMATION,
+    modalSubType = null,
+    modalTitle = '',
+    dataTestId = 'ds-modal',
+    centered = false,
+    showRejectButton = false,
+    showClose = true,
+    searchProps = {},
+    // override
+    actionsRef = () => null,
+    additionalFooterCssClass,
+    overridePropsConfirmButton = {},
+    overridePropsRejectButton = {},
+    // react modal
+    children,
+    isOpen = true,
+    onClose = () => null,
+    onAfterOpen = () => null,
+    onConfirm = () => null,
+    onReject = () => null,
+    rejectLabel = 'Discard',
+    confirmLabel = 'Save',
+    shouldCloseOnOverlayClick = false,
+    appElement = '#root',
+    zIndex = 10,
+    removePadding = false
+  } = _ref;
+
+  if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && document && ReactModal.setAppElement) {
     ReactModal.setAppElement(appElement);
   }
+
   const {
     cssClassName,
     classNameBlock,
     classNameModifier
-  } = convertPropToCssClassName("modal-v2", className, { size });
-  return /* @__PURE__ */ React2.createElement(ReactModal, {
+  } = convertPropToCssClassName('modal-v2', className, {
+    size
+  });
+  return /*#__PURE__*/_jsx(ReactModal, {
     testId: dataTestId,
-    className: `${cssClassName} ${classNameBlock(`type-${modalType}`)}`,
+    className: "".concat(cssClassName, " ").concat(classNameBlock("type-".concat(modalType))),
     contentLabel: modalTitle,
-    isOpen,
-    onAfterOpen,
+    isOpen: isOpen,
+    onAfterOpen: onAfterOpen,
     onRequestClose: onClose,
-    overlayClassName: `${classNameBlock("overlay")} ${classNameModifier(centered ? "center" : "top")}`,
-    shouldCloseOnOverlayClick,
+    overlayClassName: "".concat(classNameBlock('overlay'), " ").concat(classNameModifier(centered ? 'center' : 'top')),
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
     style: {
-      content: {
-        ...style
-      },
+      content: _objectSpread({}, style),
       overlay: {
+        // 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
         zIndex
       }
     }
-  }, /* @__PURE__ */ React2.createElement(DSModalContent, {
-    actionsRef,
-    additionalFooterCssClass,
-    confirmLabel,
-    containerProps,
-    modalSubType,
-    modalTitle,
-    modalType,
-    onClose,
-    onConfirm,
-    onReject,
-    overridePropsConfirmButton,
-    overridePropsRejectButton,
-    rejectLabel,
-    searchProps,
-    showClose,
-    showRejectButton,
-    removePadding
-  }, children));
+  }, void 0, /*#__PURE__*/_jsx(DSModalContent, {
+    actionsRef: actionsRef,
+    additionalFooterCssClass: additionalFooterCssClass,
+    confirmLabel: confirmLabel,
+    containerProps: containerProps,
+    modalSubType: modalSubType,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onClose: onClose,
+    onConfirm: onConfirm,
+    onReject: onReject,
+    overridePropsConfirmButton: overridePropsConfirmButton,
+    overridePropsRejectButton: overridePropsRejectButton,
+    rejectLabel: rejectLabel,
+    searchProps: searchProps,
+    showClose: showClose,
+    showRejectButton: showRejectButton,
+    removePadding: removePadding
+  }, void 0, children));
 };
+
 const props = {
-  containerProps: PropTypes.object.description("inject props to container wrapper"),
-  className: PropTypes.string.description("css class"),
-  style: PropTypes.object.description("style object for container wrapper"),
-  modalTitle: PropTypes.string.description("modal container title"),
-  centered: PropTypes.bool.description("center container"),
-  showRejectButton: PropTypes.bool.description("show reject button"),
-  showClose: PropTypes.bool.description("show close button"),
-  searchProps: PropTypes.object.description("Props for search component"),
-  additionalFooterCssClass: PropTypes.string.description("css class for footer"),
-  overridePropsConfirmButton: PropTypes.object.description("override props confirm button"),
-  overridePropsRejectButton: PropTypes.object.description("override props reject button"),
-  isOpen: PropTypes.bool.description("controlled isOpen flag"),
-  onClose: PropTypes.func.description("close callback"),
-  onAfterOpen: PropTypes.func.description("after open callback"),
-  onConfirm: PropTypes.func.description("confirm callback"),
-  onReject: PropTypes.func.description("reject callback"),
-  rejectLabel: PropTypes.string.description("reject label"),
-  confirmLabel: PropTypes.string.description("confirm text string"),
-  size: PropTypes.oneOf([
-    "default",
-    "xx-large",
-    "x-large",
-    "large",
-    "medium",
-    "small"
-  ]).description("modal container size"),
-  modalSubType: PropTypes.any.description("modal sub type"),
-  modalType: PropTypes.any.description("modal type"),
-  actionsRef: PropTypes.any.description("ref for modal footer actions"),
-  children: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.arrayOf([PropTypes.element])
-  ]).description("modal container children"),
-  shouldCloseOnOverlayClick: PropTypes.bool.description("close on click outside container"),
-  appElement: PropTypes.string.description("App element ID to inject the modal"),
-  zIndex: PropTypes.number.description("zindex for modal container"),
-  removePadding: PropTypes.bool.description("remove modal builtin padding")
+  /** inject props to container wrapper */
+  containerProps: PropTypes.object.description('inject props to container wrapper'),
+
+  /** css class */
+  className: PropTypes.string.description('css class'),
+
+  /** style object for container wrapper */
+  style: PropTypes.object.description('style object for container wrapper'),
+
+  /** modal container title */
+  modalTitle: PropTypes.string.description('modal container title'),
+
+  /** center container */
+  centered: PropTypes.bool.description('center container'),
+
+  /** show reject button */
+  showRejectButton: PropTypes.bool.description('show reject button'),
+
+  /** show close button */
+  showClose: PropTypes.bool.description('show close button'),
+
+  /*
+    Props for search component
+  */
+  searchProps: PropTypes.object.description('Props for search component'),
+
+  /** css class for footer */
+  additionalFooterCssClass: PropTypes.string.description('css class for footer'),
+
+  /**  override props confirm button */
+  overridePropsConfirmButton: PropTypes.object.description('override props confirm button'),
+
+  /** override props reject button */
+  overridePropsRejectButton: PropTypes.object.description('override props reject button'),
+
+  /** controlled isOpen flag */
+  isOpen: PropTypes.bool.description('controlled isOpen flag'),
+
+  /** close callback */
+  onClose: PropTypes.func.description('close callback'),
+
+  /** after open callback */
+  onAfterOpen: PropTypes.func.description('after open callback'),
+
+  /** confirm callback */
+  onConfirm: PropTypes.func.description('confirm callback'),
+
+  /** reject callback */
+  onReject: PropTypes.func.description('reject callback'),
+
+  /** reject label */
+  rejectLabel: PropTypes.string.description('reject label'),
+
+  /** confirm text string */
+  confirmLabel: PropTypes.string.description('confirm text string'),
+
+  /** modal container size */
+  size: PropTypes.oneOf(['default', 'xx-large', 'x-large', 'large', 'medium', 'small']).description('modal container size'),
+
+  /** modal sub type */
+  modalSubType: PropTypes.any.description('modal sub type'),
+
+  /** modal type */
+  modalType: PropTypes.any.description('modal type'),
+
+  /** ref for modal footer actions */
+  actionsRef: PropTypes.any.description('ref for modal footer actions'),
+
+  /** modal container children */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf([PropTypes.element])]).description('modal container children'),
+
+  /** close on click outside container */
+  shouldCloseOnOverlayClick: PropTypes.bool.description('close on click outside container'),
+
+  /*
+    App element ID to inject the modal
+  */
+  appElement: PropTypes.string.description('App element ID to inject the modal'),
+
+  /** zindex for modal container */
+  zIndex: PropTypes.number.description('zindex for modal container'),
+
+  /** remove modal builtin padding */
+  removePadding: PropTypes.bool.description('remove modal builtin padding')
 };
-DSModal.propTypes = props;
 const DSModalWithSchema = describe(DSModal);
 DSModalWithSchema.propTypes = props;
-var DSModal_default = DSModal;
-export {
-  DSModalContent,
-  DSModalWithSchema,
-  DSModal_default as default
-};
-//# sourceMappingURL=DSModal.js.map
+
+export { DSModalWithSchema, DSModal as default };

package/esm/v2/blocks.js

@@ -1,42 +1,77 @@
-import * as React from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-const blockName = "modal-v2";
-const ModalHeader = aggregatedClasses("div")(blockName, "modal-header", ({ type, showClose }) => ({
-  [type]: type,
-  "with-close": showClose
-}));
-const ModalHeaderTopRight = aggregatedClasses("div")(blockName, "modal-header-close", ({ type }) => ({
-  [type]: type
-}));
-const ModalFeedback = aggregatedClasses("div")(blockName, "modal-feedback", ({ type }) => ({
-  [type]: type
-}));
-const ModalTitle = aggregatedClasses("h3")(blockName, "modal-title", ({ type }) => ({
-  [type]: type
-}));
-const ModalContent = aggregatedClasses("div")(blockName, "modal-content", ({ type, removePadding }) => ({
-  [type]: type,
-  "remove-padding": removePadding
-}));
-const ModalWrapper = aggregatedClasses("div")(blockName, "modal-wrapper", ({ type, removePadding }) => ({
-  [type]: type,
-  "remove-padding": removePadding
-}));
-const ModalFooter = aggregatedClasses("div")(blockName, "modal-footer", ({ type, additionalFooterCssClass }) => ({
-  [type]: type,
-  [additionalFooterCssClass]: additionalFooterCssClass
-}));
-const ModalFooterActions = aggregatedClasses("div")(blockName, "modal-footer-actions", ({ type }) => ({
-  [type]: type
-}));
-export {
-  ModalContent,
-  ModalFeedback,
-  ModalFooter,
-  ModalFooterActions,
-  ModalHeader,
-  ModalHeaderTopRight,
-  ModalTitle,
-  ModalWrapper
-};
-//# sourceMappingURL=blocks.js.map
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+
+const blockName = 'modal-v2';
+const ModalHeader = aggregatedClasses('div')(blockName, 'modal-header', _ref => {
+  let {
+    type,
+    showClose
+  } = _ref;
+  return {
+    [type]: type,
+    'with-close': showClose
+  };
+});
+const ModalHeaderTopRight = aggregatedClasses('div')(blockName, 'modal-header-close', _ref2 => {
+  let {
+    type
+  } = _ref2;
+  return {
+    [type]: type
+  };
+});
+const ModalFeedback = aggregatedClasses('div')(blockName, 'modal-feedback', _ref3 => {
+  let {
+    type
+  } = _ref3;
+  return {
+    [type]: type
+  };
+});
+const ModalTitle = aggregatedClasses('h3')(blockName, 'modal-title', _ref4 => {
+  let {
+    type
+  } = _ref4;
+  return {
+    [type]: type
+  };
+});
+const ModalContent = aggregatedClasses('div')(blockName, 'modal-content', _ref5 => {
+  let {
+    type,
+    removePadding
+  } = _ref5;
+  return {
+    [type]: type,
+    'remove-padding': removePadding
+  };
+});
+const ModalWrapper = aggregatedClasses('div')(blockName, 'modal-wrapper', _ref6 => {
+  let {
+    type,
+    removePadding
+  } = _ref6;
+  return {
+    [type]: type,
+    'remove-padding': removePadding
+  };
+});
+const ModalFooter = aggregatedClasses('div')(blockName, 'modal-footer', _ref7 => {
+  let {
+    type,
+    additionalFooterCssClass
+  } = _ref7;
+  return {
+    [type]: type,
+    [additionalFooterCssClass]: additionalFooterCssClass
+  };
+});
+const ModalFooterActions = aggregatedClasses('div')(blockName, 'modal-footer-actions', _ref8 => {
+  let {
+    type
+  } = _ref8;
+  return {
+    [type]: type
+  };
+});
+
+export { ModalContent, ModalFeedback, ModalFooter, ModalFooterActions, ModalHeader, ModalHeaderTopRight, ModalTitle, ModalWrapper };

package/esm/v2/components/DecisionHeader.js

@@ -1,19 +1,28 @@
-import * as React from "react";
-import React2 from "react";
-import { Close } from "@elliemae/ds-icons";
-import DSButton from "@elliemae/ds-button";
-import { ModalHeader } from "../blocks";
-const DecisionHeader = ({ onClose, showClose }) => /* @__PURE__ */ React2.createElement(ModalHeader, {
-  classProps: { type: "decision", showClose }
-}, showClose && /* @__PURE__ */ React2.createElement(DSButton, {
-  buttonType: "link",
-  containerProps: { "data-testid": "modal-button-close" },
-  icon: /* @__PURE__ */ React2.createElement(Close, null),
-  onClick: onClose
-}));
-var DecisionHeader_default = DecisionHeader;
-export {
-  DecisionHeader,
-  DecisionHeader_default as default
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { Close } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { ModalHeader } from '../blocks.js';
+
+var _Close;
+const DecisionHeader = _ref => {
+  let {
+    onClose,
+    showClose
+  } = _ref;
+  return /*#__PURE__*/_jsx(ModalHeader, {
+    classProps: {
+      type: 'decision',
+      showClose
+    }
+  }, void 0, showClose && /*#__PURE__*/_jsx(DSButton, {
+    buttonType: "link",
+    containerProps: {
+      'data-testid': 'modal-button-close'
+    },
+    icon: _Close || (_Close = /*#__PURE__*/_jsx(Close, {})),
+    onClick: onClose
+  }));
 };
-//# sourceMappingURL=DecisionHeader.js.map
+
+export { DecisionHeader, DecisionHeader as default };