@elliemae/ds-modal 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/v2/DSModal.js

@@ -1,3 +1,8 @@
+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';
@@ -12,39 +17,41 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-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 = {},
-  // 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
-}) => {
+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);
   }
@@ -58,12 +65,12 @@ const DSModal = ({
   });
   return /*#__PURE__*/_jsx(ReactModal, {
     testId: dataTestId,
-    className: `${cssClassName} ${classNameBlock(`type-${modalType}`)}`,
+    className: "".concat(cssClassName, " ").concat(classNameBlock("type-".concat(modalType))),
     contentLabel: modalTitle,
     isOpen: isOpen,
     onAfterOpen: onAfterOpen,
     onRequestClose: onClose,
-    overlayClassName: `${classNameBlock('overlay')} ${classNameModifier(centered ? 'center' : 'top')}`,
+    overlayClassName: "".concat(classNameBlock('overlay'), " ").concat(classNameModifier(centered ? 'center' : 'top')),
     shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
     style: {
       content: _objectSpread({}, style),

package/esm/v2/blocks.js

@@ -1,53 +1,77 @@
 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
-}));
+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,25 +1,28 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import CloseIcon from '@elliemae/ds-icons/Close';
-import DSButton from '@elliemae/ds-basic/Button';
+import { Close } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 import { ModalHeader } from '../blocks.js';
 
-var _CloseIcon;
-const DecisionHeader = ({
-  onClose,
-  showClose
-}) => /*#__PURE__*/_jsx(ModalHeader, {
-  classProps: {
-    type: 'decision',
+var _Close;
+const DecisionHeader = _ref => {
+  let {
+    onClose,
     showClose
-  }
-}, void 0, showClose && /*#__PURE__*/_jsx(DSButton, {
-  buttonType: "link",
-  containerProps: {
-    'data-testid': 'modal-button-close'
-  },
-  icon: _CloseIcon || (_CloseIcon = /*#__PURE__*/_jsx(CloseIcon, {})),
-  onClick: onClose
-}));
+  } = _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
+  }));
+};
 
 export { DecisionHeader, DecisionHeader as default };

package/esm/v2/components/FeedbackIcon.js

@@ -1,10 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import ErrorHexegon from '@elliemae/ds-icons/ErrorHexegon';
-import WarningTriangle from '@elliemae/ds-icons/WarningTriangle';
-import CheckmarkCircle from '@elliemae/ds-icons/CheckmarkCircle';
-import HelpCircle from '@elliemae/ds-icons/HelpCircle';
-import InfoCircle from '@elliemae/ds-icons/InfoCircle';
+import { HelpCircle, InfoCircle, CheckmarkCircle, ErrorHexegon, WarningTriangle } from '@elliemae/ds-icons';
 import { MODAL_SUB_TYPE_V2 } from '../../constants.js';
 import { ModalFeedback } from '../blocks.js';
 
@@ -45,12 +41,15 @@ const getIconType = subtype => {
   }
 };
 
-const FeedbackIcon = ({
-  modalSubType
-}) => /*#__PURE__*/_jsx(ModalFeedback, {
-  classProps: {
-    type: modalSubType
-  }
-}, void 0, getIconType(modalSubType));
+const FeedbackIcon = _ref => {
+  let {
+    modalSubType
+  } = _ref;
+  return /*#__PURE__*/_jsx(ModalFeedback, {
+    classProps: {
+      type: modalSubType
+    }
+  }, void 0, getIconType(modalSubType));
+};
 
 export { FeedbackIcon, FeedbackIcon as default };

package/esm/v2/components/Footer.js

@@ -1,47 +1,55 @@
+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 DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { ModalFooter, ModalFooterActions } from '../blocks.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const Footer = ({
-  additionalFooterCssClass,
-  actionsRef,
-  rejectLabel,
-  onReject,
-  overridePropsRejectButton,
-  confirmLabel,
-  onConfirm,
-  overridePropsConfirmButton,
-  showRejectButton
-}) => /*#__PURE__*/_jsx(ModalFooter, {
-  classProps: {
-    additionalFooterCssClass
-  },
-  "data-testid": "modal-footer-wrapper"
-}, void 0, /*#__PURE__*/jsxs(ModalFooterActions, {
-  ref: actionsRef,
-  children: [showRejectButton === true && /*#__PURE__*/jsx(DSButton, _objectSpread({
-    buttonType: "secondary",
-    className: "action-reject",
-    containerProps: {
-      'data-testid': 'modal-footer-reject-btn'
+const Footer = _ref => {
+  let {
+    additionalFooterCssClass,
+    actionsRef,
+    rejectLabel,
+    onReject,
+    overridePropsRejectButton,
+    confirmLabel,
+    onConfirm,
+    overridePropsConfirmButton,
+    showRejectButton
+  } = _ref;
+  return /*#__PURE__*/_jsx(ModalFooter, {
+    classProps: {
+      additionalFooterCssClass
     },
-    labelText: rejectLabel,
-    onClick: onReject
-  }, overridePropsRejectButton)), /*#__PURE__*/jsx(DSButton, _objectSpread({
-    buttonType: "primary",
-    className: "action-confirm",
-    containerProps: {
-      'data-testid': 'modal-footer-confirm-btn'
-    },
-    labelText: confirmLabel,
-    onClick: onConfirm
-  }, overridePropsConfirmButton))]
-}));
+    "data-testid": "modal-footer-wrapper"
+  }, void 0, /*#__PURE__*/jsxs(ModalFooterActions, {
+    ref: actionsRef,
+    children: [showRejectButton === true && /*#__PURE__*/jsx(DSButton, _objectSpread({
+      buttonType: "secondary",
+      className: "action-reject",
+      containerProps: {
+        'data-testid': 'modal-footer-reject-btn'
+      },
+      labelText: rejectLabel,
+      onClick: onReject
+    }, overridePropsRejectButton)), /*#__PURE__*/jsx(DSButton, _objectSpread({
+      buttonType: "primary",
+      className: "action-confirm",
+      containerProps: {
+        'data-testid': 'modal-footer-confirm-btn'
+      },
+      labelText: confirmLabel,
+      onClick: onConfirm
+    }, overridePropsConfirmButton))]
+  }));
+};
 
 export { Footer, Footer as default };

package/esm/v2/components/FormHeader.js

@@ -1,34 +1,37 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import CloseIcon from '@elliemae/ds-icons/Close';
-import DSButton from '@elliemae/ds-basic/Button';
+import { Close } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 import { ModalHeader, ModalHeaderTopRight } from '../blocks.js';
 import { Title } from './Title.js';
 
-var _CloseIcon;
-const FormHeader = ({
-  showClose,
-  modalTitle,
-  modalType,
-  onClose
-}) => /*#__PURE__*/_jsx(ModalHeader, {
-  classProps: {
-    type: 'selection'
-  }
-}, void 0, /*#__PURE__*/_jsx(Title, {
-  modalTitle: modalTitle,
-  modalType: modalType
-}), /*#__PURE__*/_jsx(ModalHeaderTopRight, {
-  classProps: {
-    type: 'form'
-  }
-}, void 0, showClose && /*#__PURE__*/_jsx(DSButton, {
-  buttonType: "link",
-  containerProps: {
-    'data-testid': 'modal-close-btn'
-  },
-  icon: _CloseIcon || (_CloseIcon = /*#__PURE__*/_jsx(CloseIcon, {})),
-  onClick: onClose
-})));
+var _Close;
+const FormHeader = _ref => {
+  let {
+    showClose,
+    modalTitle,
+    modalType,
+    onClose
+  } = _ref;
+  return /*#__PURE__*/_jsx(ModalHeader, {
+    classProps: {
+      type: 'selection'
+    }
+  }, void 0, /*#__PURE__*/_jsx(Title, {
+    modalTitle: modalTitle,
+    modalType: modalType
+  }), /*#__PURE__*/_jsx(ModalHeaderTopRight, {
+    classProps: {
+      type: 'form'
+    }
+  }, void 0, showClose && /*#__PURE__*/_jsx(DSButton, {
+    buttonType: "link",
+    containerProps: {
+      'data-testid': 'modal-close-btn'
+    },
+    icon: _Close || (_Close = /*#__PURE__*/_jsx(Close, {})),
+    onClick: onClose
+  })));
+};
 
 export { FormHeader, FormHeader as default };

package/esm/v2/components/ModalContent.js

@@ -1,3 +1,8 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
@@ -15,81 +20,84 @@ import { jsxs } from 'react/jsx-runtime';
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const DSModalContent = ({
-  containerProps = {},
-  //
-  modalType = MODAL_TYPE_V2.INFORMATION,
-  modalSubType = null,
-  modalTitle = '',
-  showRejectButton = false,
-  showClose = true,
-  searchProps = {},
-  // override
-  actionsRef = () => null,
-  additionalFooterCssClass,
-  overridePropsConfirmButton = {},
-  overridePropsRejectButton = {},
-  // react modal
-  children,
-  onClose = () => null,
-  onConfirm = () => null,
-  onReject = () => null,
-  rejectLabel = 'Discard',
-  confirmLabel = 'Save',
-  removePadding = false
-}) => /*#__PURE__*/jsxs(ModalWrapper, _objectSpread(_objectSpread({}, containerProps), {}, {
-  children: [showForm({
-    modalType,
-    modalSubType
-  }) && /*#__PURE__*/_jsx(FormHeader, {
-    modalTitle: modalTitle,
-    modalType: modalType,
-    onClose: onClose,
-    showClose: showClose
-  }), showSelection({
-    modalType,
-    modalSubType
-  }) && /*#__PURE__*/_jsx(SelectionHeader, {
-    modalTitle: modalTitle,
-    modalType: modalType,
-    searchProps: searchProps,
-    showClose: showClose
-  }), showDecision({
-    modalType,
-    modalSubType
-  }) && /*#__PURE__*/_jsx(DecisionHeader, {
-    onClose: onClose,
-    showClose: showClose
-  }), showFeedBack({
-    modalType,
-    modalSubType
-  }) && /*#__PURE__*/_jsx(FeedbackIcon, {
-    modalSubType: modalSubType
-  }), showDecision({
-    modalType,
-    modalSubType
-  }) && /*#__PURE__*/_jsx(Title, {
-    modalTitle: modalTitle,
-    modalType: modalType
-  }), /*#__PURE__*/_jsx(ModalContent, {
-    classProps: {
-      type: modalType,
-      removePadding
-    }
-  }, void 0, children), showFooter({
-    modalType,
-    modalSubType
-  }) && /*#__PURE__*/_jsx(Footer, {
-    actionsRef: actionsRef,
-    additionalFooterCssClass: additionalFooterCssClass,
-    confirmLabel: confirmLabel,
-    onConfirm: onConfirm,
-    onReject: onReject,
-    overridePropsConfirmButton: overridePropsConfirmButton,
-    overridePropsRejectButton: overridePropsRejectButton,
-    rejectLabel: rejectLabel,
-    showRejectButton: showRejectButton
-  })]
-}));
+const DSModalContent = _ref => {
+  let {
+    containerProps = {},
+    //
+    modalType = MODAL_TYPE_V2.INFORMATION,
+    modalSubType = null,
+    modalTitle = '',
+    showRejectButton = false,
+    showClose = true,
+    searchProps = {},
+    // override
+    actionsRef = () => null,
+    additionalFooterCssClass,
+    overridePropsConfirmButton = {},
+    overridePropsRejectButton = {},
+    // react modal
+    children,
+    onClose = () => null,
+    onConfirm = () => null,
+    onReject = () => null,
+    rejectLabel = 'Discard',
+    confirmLabel = 'Save',
+    removePadding = false
+  } = _ref;
+  return /*#__PURE__*/jsxs(ModalWrapper, _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: [showForm({
+      modalType,
+      modalSubType
+    }) && /*#__PURE__*/_jsx(FormHeader, {
+      modalTitle: modalTitle,
+      modalType: modalType,
+      onClose: onClose,
+      showClose: showClose
+    }), showSelection({
+      modalType,
+      modalSubType
+    }) && /*#__PURE__*/_jsx(SelectionHeader, {
+      modalTitle: modalTitle,
+      modalType: modalType,
+      searchProps: searchProps,
+      showClose: showClose
+    }), showDecision({
+      modalType,
+      modalSubType
+    }) && /*#__PURE__*/_jsx(DecisionHeader, {
+      onClose: onClose,
+      showClose: showClose
+    }), showFeedBack({
+      modalType,
+      modalSubType
+    }) && /*#__PURE__*/_jsx(FeedbackIcon, {
+      modalSubType: modalSubType
+    }), showDecision({
+      modalType,
+      modalSubType
+    }) && /*#__PURE__*/_jsx(Title, {
+      modalTitle: modalTitle,
+      modalType: modalType
+    }), /*#__PURE__*/_jsx(ModalContent, {
+      classProps: {
+        type: modalType,
+        removePadding
+      }
+    }, void 0, children), showFooter({
+      modalType,
+      modalSubType
+    }) && /*#__PURE__*/_jsx(Footer, {
+      actionsRef: actionsRef,
+      additionalFooterCssClass: additionalFooterCssClass,
+      confirmLabel: confirmLabel,
+      onConfirm: onConfirm,
+      onReject: onReject,
+      overridePropsConfirmButton: overridePropsConfirmButton,
+      overridePropsRejectButton: overridePropsRejectButton,
+      rejectLabel: rejectLabel,
+      showRejectButton: showRejectButton
+    })]
+  }));
+};
 
 export { DSModalContent };