@elliemae/ds-modal 1.57.1-rc.0 → 2.0.0-alpha.11

package/cjs/DSModal.js

@@ -2,194 +2,180 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
+require('react');
 var PropTypes = require('prop-types');
 var constants = require('./constants.js');
-var v1_DSModal = require('./DSModal-3126a986.js');
-var v2_DSModal = require('./v2/DSModal.js');
-var v2_components_ModalContent = require('./v2/components/ModalContent.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/defineProperty');
-require('react-modal');
-require('@elliemae/ds-classnames');
-require('@elliemae/ds-icon');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-button');
-require('./v1/ModalFeedBack/ModalFeedBack.js');
-require('react-desc');
-require('./v2/components/SelectionHeader.js');
-require('@elliemae/ds-form');
-require('./v2/blocks.js');
-require('./v2/components/Title.js');
-require('./v2/components/DecisionHeader.js');
-require('./v2/components/FormHeader.js');
-require('./v2/components/FeedbackIcon.js');
-require('./v2/components/Footer.js');
-require('./v2/helpers.js');
+var DSModal$2 = require('./v1/DSModal.js');
+var DSModal$1 = require('./v2/DSModal.js');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+var jsxRuntime = require('react/jsx-runtime');
+var ModalContent = require('./v2/components/ModalContent.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["version"];
+const _excluded = ["version"];
 
-var DSModal = function DSModal(_ref) {
-  var _ref$version = _ref.version,
-      version = _ref$version === void 0 ? 1 : _ref$version,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+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; }
 
-  if (version === 2) return /*#__PURE__*/React__default['default'].createElement(v2_DSModal['default'], rest);
-  return /*#__PURE__*/React__default['default'].createElement(v1_DSModal.DSModal, rest);
-};
+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__default["default"](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 = _ref => {
+  let {
+    version = 1
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-DSModal.propTypes = {
-  version: PropTypes__default['default'].oneOf([1, 2])
+  if (version === 2) return /*#__PURE__*/jsxRuntime.jsx(DSModal$1["default"], _objectSpread({}, rest));
+  return /*#__PURE__*/jsxRuntime.jsx(DSModal$2, _objectSpread({}, rest));
 };
-v1_DSModal.DSModal.propTypes = {
-  version: PropTypes__default['default'].oneOf([1, 2]),
-  className: PropTypes__default['default'].string,
+
+DSModal$2.propTypes = {
+  version: PropTypes__default["default"].oneOf([1, 2]),
+  className: PropTypes__default["default"].string,
 
   /**
    * Add an additional css class to the footer
    */
-  additionalFooterCssClass: PropTypes__default['default'].string,
+  additionalFooterCssClass: PropTypes__default["default"].string,
 
   /**
    * Set style for the modal
    */
-  style: PropTypes__default['default'].objectOf(PropTypes__default['default'].string),
+  style: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
 
   /**
    * Select size for the close icon
    */
-  iconCloseSize: PropTypes__default['default'].oneOf(v1_DSModal.iconSizes),
+  iconCloseSize: PropTypes__default["default"].oneOf(propTypes.iconSizes),
 
   /**
    * ['default', 'alert', 'confirm', 'notification', 'warning', 'error', 'success', 'help', 'info']
    */
-  modalType: PropTypes__default['default'].oneOf(constants.modalTypes),
+  modalType: PropTypes__default["default"].oneOf(constants.modalTypes),
 
   /**
    * Show the header or not
    */
-  showHeader: PropTypes__default['default'].bool,
+  showHeader: PropTypes__default["default"].bool,
 
   /**
    * Show the footer or not
    */
-  showFooter: PropTypes__default['default'].bool,
+  showFooter: PropTypes__default["default"].bool,
 
   /**
    * Main content of the modal
    */
-  children: PropTypes__default['default'].element.isRequired,
+  children: PropTypes__default["default"].element.isRequired,
 
   /**
    * Content is centered or not
    */
-  centered: PropTypes__default['default'].bool,
+  centered: PropTypes__default["default"].bool,
 
   /**
    * Text to be added in the confirm button
    */
-  confirmLabel: PropTypes__default['default'].string,
+  confirmLabel: PropTypes__default["default"].string,
 
   /**
    * Text to be added in the modal title
    */
-  modalTitle: PropTypes__default['default'].string,
+  modalTitle: PropTypes__default["default"].string,
 
   /**
    * Text to be added in the modal title
    */
-  size: PropTypes__default['default'].oneOf(v1_DSModal.sizes),
+  size: PropTypes__default["default"].oneOf(propTypes.sizes),
 
   /**
    * Modal is open or not
    */
-  isOpen: PropTypes__default['default'].bool,
+  isOpen: PropTypes__default["default"].bool,
 
   /**
    * Allows a function to be triggered once the modal is closed
    */
-  onClose: PropTypes__default['default'].func,
+  onClose: PropTypes__default["default"].func,
 
   /**
    * Allows a function to be triggered once the modal is opened
    */
-  onAfterOpen: PropTypes__default['default'].func,
+  onAfterOpen: PropTypes__default["default"].func,
 
   /**
    * Allows a function to be triggered once the modal open is confirmed
    */
-  onConfirm: PropTypes__default['default'].func,
+  onConfirm: PropTypes__default["default"].func,
 
   /**
    * Allows a function to be triggered once the modal open is rejected
    */
-  onReject: PropTypes__default['default'].func,
+  onReject: PropTypes__default["default"].func,
 
   /**
    * Text to be added in the reject button
    */
-  rejectLabel: PropTypes__default['default'].string,
+  rejectLabel: PropTypes__default["default"].string,
 
   /**
    * If modal should close on overlay click
    */
-  shouldCloseOnOverlayClick: PropTypes__default['default'].bool,
+  shouldCloseOnOverlayClick: PropTypes__default["default"].bool,
 
   /**
    * Modal has error or not
    */
-  hasError: PropTypes__default['default'].bool,
+  hasError: PropTypes__default["default"].bool,
 
   /**
    * Modal has warning or not
    */
-  hasWarning: PropTypes__default['default'].bool,
+  hasWarning: PropTypes__default["default"].bool,
 
   /**
    * Modal has success or not
    */
-  hasSuccess: PropTypes__default['default'].bool,
+  hasSuccess: PropTypes__default["default"].bool,
 
   /**
    * Modal has info or not
    */
-  hasInfo: PropTypes__default['default'].bool,
+  hasInfo: PropTypes__default["default"].bool,
 
   /**
    * Modal has help or not
    */
-  hasHelp: PropTypes__default['default'].bool,
-  actionsRef: PropTypes__default['default'].func,
-  appElement: PropTypes__default['default'].string,
+  hasHelp: PropTypes__default["default"].bool,
+  actionsRef: PropTypes__default["default"].func,
+  appElement: PropTypes__default["default"].string,
 
   /**
    * Customized props for the confirm button
    */
-  overridePropsConfirmButton: PropTypes__default['default'].objectOf(PropTypes__default['default'].shape({})),
+  overridePropsConfirmButton: PropTypes__default["default"].objectOf(PropTypes__default["default"].shape({})),
 
   /**
    * Customized props for the reject button
    */
-  overridePropsRejectButton: PropTypes__default['default'].objectOf(PropTypes__default['default'].string),
+  overridePropsRejectButton: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
 
   /**
    * Show confirm button
    */
-  showConfirmButton: PropTypes__default['default'].bool,
+  showConfirmButton: PropTypes__default["default"].bool,
 
   /**
    * Show confirm button
    */
-  customCloseComponent: PropTypes__default['default'].element
+  customCloseComponent: PropTypes__default["default"].element
 };
 
-exports.DSModalContent = v2_components_ModalContent.DSModalContent;
-exports['default'] = DSModal;
-//# sourceMappingURL=DSModal.js.map
+exports.DSModalContent = ModalContent.DSModalContent;
+exports["default"] = DSModal;

package/cjs/constants.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var MODAL_TYPE = {
+const MODAL_TYPE = {
   DEFAULT: 'default',
   ALERT: 'alert',
   CONFIRM: 'confirm',
@@ -13,14 +13,14 @@ var MODAL_TYPE = {
   HELP: 'help',
   INFO: 'info'
 };
-var modalTypes = [MODAL_TYPE.DEFAULT, MODAL_TYPE.ALERT, MODAL_TYPE.CONFIRM, MODAL_TYPE.NOTIFICATION, MODAL_TYPE.WARNING, MODAL_TYPE.ERROR, MODAL_TYPE.SUCCESS, MODAL_TYPE.HELP, MODAL_TYPE.INFO];
-var MODAL_TYPE_V2 = {
+const modalTypes = [MODAL_TYPE.DEFAULT, MODAL_TYPE.ALERT, MODAL_TYPE.CONFIRM, MODAL_TYPE.NOTIFICATION, MODAL_TYPE.WARNING, MODAL_TYPE.ERROR, MODAL_TYPE.SUCCESS, MODAL_TYPE.HELP, MODAL_TYPE.INFO];
+const MODAL_TYPE_V2 = {
   INFORMATION: 'information',
   DECISION: 'decision',
   SELECTION: 'selection',
   FORM: 'form'
 };
-var MODAL_SUB_TYPE_V2 = {
+const MODAL_SUB_TYPE_V2 = {
   SUCCESS: 'success',
   WARNING: 'warning',
   ERROR: 'error',
@@ -30,6 +30,5 @@ var MODAL_SUB_TYPE_V2 = {
 exports.MODAL_SUB_TYPE_V2 = MODAL_SUB_TYPE_V2;
 exports.MODAL_TYPE = MODAL_TYPE;
 exports.MODAL_TYPE_V2 = MODAL_TYPE_V2;
-exports['default'] = MODAL_TYPE;
+exports["default"] = MODAL_TYPE;
 exports.modalTypes = modalTypes;
-//# sourceMappingURL=constants.js.map

package/cjs/index.js

@@ -2,40 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DSModal = require('./DSModal.js');
+var DSModal$1 = require('./DSModal.js');
 var constants = require('./constants.js');
-var v2_DSModal = require('./v2/DSModal.js');
-var v2_components_ModalContent = require('./v2/components/ModalContent.js');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('react');
-require('prop-types');
-require('./DSModal-3126a986.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/defineProperty');
-require('react-modal');
-require('@elliemae/ds-classnames');
-require('@elliemae/ds-icon');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-button');
-require('./v1/ModalFeedBack/ModalFeedBack.js');
-require('react-desc');
-require('./v2/components/SelectionHeader.js');
-require('@elliemae/ds-form');
-require('./v2/blocks.js');
-require('./v2/components/Title.js');
-require('./v2/components/DecisionHeader.js');
-require('./v2/components/FormHeader.js');
-require('./v2/components/FeedbackIcon.js');
-require('./v2/components/Footer.js');
-require('./v2/helpers.js');
+var DSModal = require('./v2/DSModal.js');
+var ModalContent = require('./v2/components/ModalContent.js');
 
 
 
-exports.default = DSModal['default'];
+exports["default"] = DSModal$1["default"];
 exports.MODAL_SUB_TYPE_V2 = constants.MODAL_SUB_TYPE_V2;
 exports.MODAL_TYPE = constants.MODAL_TYPE;
 exports.MODAL_TYPE_V2 = constants.MODAL_TYPE_V2;
 exports.modalTypes = constants.modalTypes;
-exports.DSModalWithSchema = v2_DSModal.DSModalWithSchema;
-exports.DSModalContent = v2_components_ModalContent.DSModalContent;
-//# sourceMappingURL=index.js.map
+exports.DSModalWithSchema = DSModal.DSModalWithSchema;
+exports.DSModalContent = ModalContent.DSModalContent;

package/cjs/v1/DSModal.js

@@ -1,19 +1,143 @@
 'use strict';
 
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
-require('prop-types');
-require('react-modal');
-require('@elliemae/ds-classnames');
-require('@elliemae/ds-icon');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-button');
-require('../constants.js');
-require('./ModalFeedBack/ModalFeedBack.js');
-var v1_DSModal = require('../DSModal-3126a986.js');
+var ReactModal = require('react-modal');
+var dsClassnames = require('@elliemae/ds-classnames');
+var CloseIcon = require('@elliemae/ds-icons/Close');
+var Icon = require('@elliemae/ds-basic/Icon');
+var DSButton = require('@elliemae/ds-basic/Button');
+var constants = require('../constants.js');
+var ModalFeedBack = require('./ModalFeedBack/ModalFeedBack.js');
+var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
+var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-module.exports = v1_DSModal.DSModal;
-//# sourceMappingURL=DSModal.js.map
+var _CloseIcon;
+
+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__default["default"](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 = '',
+  dataTestId = 'ds-modal',
+  additionalFooterCssClass = '',
+  style = {},
+  iconCloseSize = Icon.DSIconSizes.S,
+  modalType = constants.MODAL_TYPE.DEFAULT,
+  showHeader = true,
+  showFooter = true,
+  children,
+  centered = true,
+  confirmLabel = 'Accept',
+  modalTitle = '',
+  size = 'medium',
+  isOpen = false,
+  onClose = () => null,
+  onAfterOpen = () => null,
+  onConfirm = () => null,
+  onReject = () => null,
+  rejectLabel = 'Cancel',
+  shouldCloseOnOverlayClick = false,
+  hasError = false,
+  hasWarning = false,
+  hasSuccess = false,
+  hasInfo = false,
+  hasHelp = false,
+  actionsRef = () => null,
+  appElement = '#root',
+  overridePropsConfirmButton = {},
+  overridePropsRejectButton = {},
+  zIndex = 10
+}) => {
+  // http://reactcommunity.org/react-modal/accessibility/ https://github.com/reactjs/react-modal#examples
+  typeof document !== 'undefined' && document && ReactModal__default["default"].setAppElement && ReactModal__default["default"].setAppElement(appElement); // eslint-disable-line
+
+  const {
+    cssClassName,
+    classNameElement,
+    classNameBlock,
+    classNameModifier,
+    classNameBlockModifier
+  } = dsClassnames.convertPropToCssClassName('modal', className, {
+    hasError,
+    hasWarning,
+    hasSuccess,
+    modalType,
+    size
+  });
+  const {
+    WARNING,
+    ERROR,
+    SUCCESS,
+    HELP,
+    INFO
+  } = constants.MODAL_TYPE;
+  const isAFeedbackType = [WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1;
+  const showFeedBack = isAFeedbackType || hasError || hasWarning || hasSuccess || hasInfo || hasHelp;
+  return /*#__PURE__*/_jsx__default["default"](ReactModal__default["default"], {
+    testId: dataTestId,
+    className: cssClassName,
+    contentLabel: modalTitle,
+    isOpen: isOpen,
+    onAfterOpen: onAfterOpen,
+    onRequestClose: onClose,
+    overlayClassName: "".concat(classNameBlock('overlay'), " ").concat(classNameModifier(centered && 'center')),
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
+    style: {
+      content: _objectSpread({}, style),
+      overlay: {
+        zIndex
+      }
+    }
+  }, void 0, /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: [showHeader && /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameBlock('modal-header')
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameElement('title', 'modal-header')
+    }, void 0, modalTitle), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameElement('icon', 'modal-header')
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "link",
+      icon: _CloseIcon || (_CloseIcon = /*#__PURE__*/_jsx__default["default"](CloseIcon__default["default"], {})),
+      onClick: onClose,
+      size: iconCloseSize
+    }))), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameElement('body')
+    }, void 0, showFeedBack && /*#__PURE__*/_jsx__default["default"](ModalFeedBack, {
+      hasError: hasError,
+      hasHelp: hasHelp,
+      hasInfo: hasInfo,
+      hasSuccess: hasSuccess,
+      hasWarning: hasWarning,
+      modalType: modalType
+    }), children), showFooter && !isAFeedbackType && /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "".concat(classNameBlock('modal-footer'), " ").concat(additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, 'modal-footer') : '')
+    }, void 0, /*#__PURE__*/jsxRuntime.jsxs("div", {
+      ref: actionsRef,
+      className: classNameBlock('modal-footer-actions'),
+      children: [modalType === constants.MODAL_TYPE.CONFIRM && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+        buttonType: "secondary",
+        className: "".concat(classNameElement('button-action'), " ").concat(classNameModifier('reject', 'button-action'), " "),
+        labelText: rejectLabel,
+        onClick: onReject
+      }, overridePropsRejectButton)), /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+        buttonType: "primary",
+        className: "".concat(classNameElement('button-action'), " ").concat(classNameModifier('confirm', 'button-action'), " "),
+        labelText: confirmLabel,
+        onClick: onConfirm
+      }, overridePropsConfirmButton))]
+    }))]
+  })));
+};
+
+module.exports = DSModal;

package/cjs/v1/DSModalType.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var modalTypes = [MODAL_TYPE.DEFAULT, MODAL_TYPE.ALERT, MODAL_TYPE.CONFIRM, MODAL_TYPE.NOTIFICATION, MODAL_TYPE.WARNING, MODAL_TYPE.ERROR, MODAL_TYPE.SUCCESS, MODAL_TYPE.HELP, MODAL_TYPE.INFO];
+const modalTypes = [MODAL_TYPE.DEFAULT, MODAL_TYPE.ALERT, MODAL_TYPE.CONFIRM, MODAL_TYPE.NOTIFICATION, MODAL_TYPE.WARNING, MODAL_TYPE.ERROR, MODAL_TYPE.SUCCESS, MODAL_TYPE.HELP, MODAL_TYPE.INFO];
 
 exports.modalTypes = modalTypes;
-//# sourceMappingURL=DSModalType.js.map