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

package/esm/v1/DSModal.js

@@ -1,13 +1,133 @@
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
-import 'prop-types';
-import 'react-modal';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-icon';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import '../constants.js';
-import './ModalFeedBack/ModalFeedBack.js';
-export { D as default } from '../DSModal-a8b0fbf0.js';
-//# sourceMappingURL=DSModal.js.map
+import ReactModal from 'react-modal';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import CloseIcon from '@elliemae/ds-icons/Close';
+import { DSIconSizes } from '@elliemae/ds-basic/Icon';
+import DSButton from '@elliemae/ds-basic/Button';
+import { MODAL_TYPE } from '../constants.js';
+import ModalFeedBack from './ModalFeedBack/ModalFeedBack.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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(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 = DSIconSizes.S,
+  modalType = 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.setAppElement && ReactModal.setAppElement(appElement); // eslint-disable-line
+
+  const {
+    cssClassName,
+    classNameElement,
+    classNameBlock,
+    classNameModifier,
+    classNameBlockModifier
+  } = convertPropToCssClassName('modal', className, {
+    hasError,
+    hasWarning,
+    hasSuccess,
+    modalType,
+    size
+  });
+  const {
+    WARNING,
+    ERROR,
+    SUCCESS,
+    HELP,
+    INFO
+  } = MODAL_TYPE;
+  const isAFeedbackType = [WARNING, ERROR, SUCCESS, HELP, INFO].indexOf(modalType) > -1;
+  const showFeedBack = isAFeedbackType || hasError || hasWarning || hasSuccess || hasInfo || hasHelp;
+  return /*#__PURE__*/_jsx(ReactModal, {
+    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__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: [showHeader && /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('modal-header')
+    }, void 0, /*#__PURE__*/_jsx("div", {
+      className: classNameElement('title', 'modal-header')
+    }, void 0, modalTitle), /*#__PURE__*/_jsx("div", {
+      className: classNameElement('icon', 'modal-header')
+    }, void 0, /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "link",
+      icon: _CloseIcon || (_CloseIcon = /*#__PURE__*/_jsx(CloseIcon, {})),
+      onClick: onClose,
+      size: iconCloseSize
+    }))), /*#__PURE__*/_jsx("div", {
+      className: classNameElement('body')
+    }, void 0, showFeedBack && /*#__PURE__*/_jsx(ModalFeedBack, {
+      hasError: hasError,
+      hasHelp: hasHelp,
+      hasInfo: hasInfo,
+      hasSuccess: hasSuccess,
+      hasWarning: hasWarning,
+      modalType: modalType
+    }), children), showFooter && !isAFeedbackType && /*#__PURE__*/_jsx("div", {
+      className: "".concat(classNameBlock('modal-footer'), " ").concat(additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, 'modal-footer') : '')
+    }, void 0, /*#__PURE__*/jsxs("div", {
+      ref: actionsRef,
+      className: classNameBlock('modal-footer-actions'),
+      children: [modalType === MODAL_TYPE.CONFIRM && /*#__PURE__*/jsx(DSButton, _objectSpread({
+        buttonType: "secondary",
+        className: "".concat(classNameElement('button-action'), " ").concat(classNameModifier('reject', 'button-action'), " "),
+        labelText: rejectLabel,
+        onClick: onReject
+      }, overridePropsRejectButton)), /*#__PURE__*/jsx(DSButton, _objectSpread({
+        buttonType: "primary",
+        className: "".concat(classNameElement('button-action'), " ").concat(classNameModifier('confirm', 'button-action'), " "),
+        labelText: confirmLabel,
+        onClick: onConfirm
+      }, overridePropsConfirmButton))]
+    }))]
+  })));
+};
+
+export { DSModal as default };

package/esm/v1/DSModalType.js

@@ -1,4 +1,3 @@
-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];
 
 export { modalTypes };
-//# sourceMappingURL=DSModalType.js.map

package/esm/v1/DSModalWrapper.js

@@ -1,38 +1,17 @@
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { createElement, Component } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { Component, createElement } from 'react';
 import { MODAL_TYPE } from '../constants.js';
 
 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; }
+var DSModalWrapper = (WrappedComponent => {
+  class DSModalWrapper extends Component {
+    constructor(...args) {
+      super(...args);
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var DSModalWrapper = (function (WrappedComponent) {
-  var DSModalWrapper = /*#__PURE__*/function (_Component) {
-    _inherits(DSModalWrapper, _Component);
-
-    var _super = _createSuper(DSModalWrapper);
-
-    function DSModalWrapper() {
-      var _this;
-
-      _classCallCheck(this, DSModalWrapper);
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      _this = _super.call.apply(_super, [this].concat(args));
-
-      _defineProperty(_assertThisInitialized(_this), "state", {
+      _defineProperty(this, "state", {
         childready: false,
         additionalFooterCssClass: 'loading',
         container: null,
@@ -40,145 +19,136 @@ var DSModalWrapper = (function (WrappedComponent) {
         height: '100%'
       });
 
-      _defineProperty(_assertThisInitialized(_this), "onHeaderHeight", function (e) {
-        _this.heightHeaderFlag = true;
-        _this.heightHeader = e.height || 0;
+      _defineProperty(this, "onHeaderHeight", e => {
+        this.heightHeaderFlag = true;
+        this.heightHeader = e.height || 0;
       });
 
-      _defineProperty(_assertThisInitialized(_this), "onFooterHeight", function (e) {
-        _this.heightFooterFlag = true;
-        _this.heightFooter = e.height || 0;
+      _defineProperty(this, "onFooterHeight", e => {
+        this.heightFooterFlag = true;
+        this.heightFooter = e.height || 0;
       });
 
-      _defineProperty(_assertThisInitialized(_this), "onResize", function (_ref) {
-        var bounds = _ref.bounds;
-
-        if (_this.heightFooterFlag && _this.heightHeaderFlag) {
-          return _this.setState({
-            height: bounds.height - _this.heightFooter - _this.heightHeader
+      _defineProperty(this, "onResize", ({
+        bounds
+      }) => {
+        if (this.heightFooterFlag && this.heightHeaderFlag) {
+          return this.setState({
+            height: bounds.height - this.heightFooter - this.heightHeader
           });
         }
 
-        return setTimeout(_this.onResize({
-          bounds: bounds
+        return setTimeout(this.onResize({
+          bounds
         }), 0);
       });
 
-      _defineProperty(_assertThisInitialized(_this), "handleContainer", function (node) {
-        if (node) _this.setState({
+      _defineProperty(this, "handleContainer", node => {
+        if (node) this.setState({
           container: node
         });
-
-        _this.handleResize();
+        this.handleResize();
       });
 
-      _defineProperty(_assertThisInitialized(_this), "handleActions", function (node) {
-        if (node) _this.setState({
+      _defineProperty(this, "handleActions", node => {
+        if (node) this.setState({
           actions: node
         });
-
-        _this.handleResize();
+        this.handleResize();
       });
+    }
 
-      return _this;
+    componentDidMount() {
+      window.addEventListener('resize', this.handleResize);
     }
 
-    _createClass(DSModalWrapper, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        window.addEventListener('resize', this.handleResize);
-      }
-    }, {
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
-      }
-    }, {
-      key: "handleResize",
-      value:
-      /**
-       * Change button width to 100% if the
-       * combined width of the button (or button group) exceed 50% of the container width.
-       */
-      function handleResize() {
-        if (!this.state) return null;
-        var _this$state = this.state,
-            container = _this$state.container,
-            actions = _this$state.actions,
-            childready = _this$state.childready;
-        if (!childready) return null;
-        this.setState({
-          additionalFooterCssClass: null
-        }); // !important reset to default state to recalculate
-
-        var containerWidth = container.clientWidth;
-        var actionsWidth = actions.clientWidth; // Change button width to 100% if the combined width of the button (or button group) exceed 50% of the container width.
-
-        if (containerWidth && actionsWidth && actionsWidth / containerWidth * 100 > 50) {
-          return this.setState({
-            additionalFooterCssClass: 'fluid-actions'
-          });
-        }
+    componentWillUnmount() {
+      window.removeEventListener('resize', this.handleResize);
+    }
 
+    /**
+     * Change button width to 100% if the
+     * combined width of the button (or button group) exceed 50% of the container width.
+     */
+    handleResize() {
+      if (!this.state) return null;
+      const {
+        container,
+        actions,
+        childready
+      } = this.state;
+      if (!childready) return null;
+      this.setState({
+        additionalFooterCssClass: null
+      }); // !important reset to default state to recalculate
+
+      const {
+        clientWidth: containerWidth
+      } = container;
+      const {
+        clientWidth: actionsWidth
+      } = actions; // Change button width to 100% if the combined width of the button (or button group) exceed 50% of the container width.
+
+      if (containerWidth && actionsWidth && actionsWidth / containerWidth * 100 > 50) {
         return this.setState({
-          additionalFooterCssClass: null
+          additionalFooterCssClass: 'fluid-actions'
         });
       }
-    }, {
-      key: "verifyNodes",
-      value: function verifyNodes() {
-        var _this2 = this;
-
-        var modalType = this.props.modalType;
-
-        if (modalType !== MODAL_TYPE.DEFAULT) {
-          var nodesInterval = setInterval(function () {
-            // !important it checks when nodes are availables
-            var _this2$state = _this2.state,
-                container = _this2$state.container,
-                actions = _this2$state.actions;
-            if (!container || !actions) return null;
-            clearInterval(nodesInterval);
-
-            _this2.setState({
-              childready: true
-            });
-
-            return _this2.handleResize();
-          }, 100);
-        }
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this3 = this;
-
-        var props = this.props,
-            state = this.state;
-        var additionalFooterCssClass = state.additionalFooterCssClass,
-            height = state.height;
-        return /*#__PURE__*/createElement(WrappedComponent, _objectSpread(_objectSpread({}, props), {}, {
-          height: height,
-          onResize: this.onResize,
-          onFooterHeight: this.onFooterHeight,
-          onHeaderHeight: this.onHeaderHeight,
-          containerRef: this.handleContainer,
-          actionsRef: this.handleActions,
-          additionalFooterCssClass: additionalFooterCssClass,
-          onAfterOpen: function onAfterOpen() {
-            if (props.onAfterOpen) props.onAfterOpen();
-
-            _this3.verifyNodes();
-          }
-        }));
+
+      return this.setState({
+        additionalFooterCssClass: null
+      });
+    }
+
+    verifyNodes() {
+      const {
+        modalType
+      } = this.props;
+
+      if (modalType !== MODAL_TYPE.DEFAULT) {
+        const nodesInterval = setInterval(() => {
+          // !important it checks when nodes are availables
+          const {
+            container,
+            actions
+          } = this.state;
+          if (!container || !actions) return null;
+          clearInterval(nodesInterval);
+          this.setState({
+            childready: true
+          });
+          return this.handleResize();
+        }, 100);
       }
-    }]);
+    }
+
+    render() {
+      const {
+        props,
+        state
+      } = this;
+      const {
+        additionalFooterCssClass,
+        height
+      } = state;
+      return /*#__PURE__*/createElement(WrappedComponent, _objectSpread(_objectSpread({}, props), {}, {
+        height,
+        onResize: this.onResize,
+        onFooterHeight: this.onFooterHeight,
+        onHeaderHeight: this.onHeaderHeight,
+        containerRef: this.handleContainer,
+        actionsRef: this.handleActions,
+        additionalFooterCssClass,
+        onAfterOpen: () => {
+          if (props.onAfterOpen) props.onAfterOpen();
+          this.verifyNodes();
+        }
+      }));
+    }
 
-    return DSModalWrapper;
-  }(Component);
+  }
 
   return DSModalWrapper;
 });
 
 export { DSModalWrapper as default };
-//# sourceMappingURL=DSModalWrapper.js.map

package/esm/v1/ModalFeedBack/ModalFeedBack.js

@@ -1,21 +1,29 @@
-import React from 'react';
-import { InfoCircle, HelpCircle, CheckmarkCircle, WarningCircle } from '@elliemae/ds-icons';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import WarningCircle from '@elliemae/ds-icons/WarningCircle';
+import CheckmarkCircle from '@elliemae/ds-icons/CheckmarkCircle';
+import HelpCircle from '@elliemae/ds-icons/HelpCircle';
+import InfoCircle from '@elliemae/ds-icons/InfoCircle';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
 import { MODAL_TYPE } from '../../constants.js';
 
-var feedbackIconSize = 'xxl';
-var WARNING = MODAL_TYPE.WARNING,
-    ERROR = MODAL_TYPE.ERROR,
-    SUCCESS = MODAL_TYPE.SUCCESS,
-    HELP = MODAL_TYPE.HELP,
-    INFO = MODAL_TYPE.INFO;
+var _WarningCircle, _CheckmarkCircle, _HelpCircle, _InfoCircle, _InfoCircle2;
+const feedbackIconSize = 'xxl';
+const {
+  WARNING,
+  ERROR,
+  SUCCESS,
+  HELP,
+  INFO
+} = MODAL_TYPE;
 
-var getModalType = function getModalType(modalType, _ref) {
-  var hasError = _ref.hasError,
-      hasWarning = _ref.hasWarning,
-      hasSuccess = _ref.hasSuccess,
-      hasInfo = _ref.hasInfo,
-      hasHelp = _ref.hasHelp;
+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;
@@ -25,69 +33,61 @@ var getModalType = function getModalType(modalType, _ref) {
   return INFO;
 };
 
-var getIconType = function getIconType(modalType) {
+const getIconType = modalType => {
   switch (modalType) {
     case WARNING:
     case ERROR:
-      return /*#__PURE__*/React.createElement(WarningCircle, {
+      return _WarningCircle || (_WarningCircle = /*#__PURE__*/_jsx(WarningCircle, {
         size: feedbackIconSize
-      });
+      }));
 
     case SUCCESS:
-      return /*#__PURE__*/React.createElement(CheckmarkCircle, {
+      return _CheckmarkCircle || (_CheckmarkCircle = /*#__PURE__*/_jsx(CheckmarkCircle, {
         size: feedbackIconSize
-      });
+      }));
 
     case HELP:
-      return /*#__PURE__*/React.createElement(HelpCircle, {
+      return _HelpCircle || (_HelpCircle = /*#__PURE__*/_jsx(HelpCircle, {
         size: feedbackIconSize
-      });
+      }));
 
     case INFO:
-      return /*#__PURE__*/React.createElement(InfoCircle, {
+      return _InfoCircle || (_InfoCircle = /*#__PURE__*/_jsx(InfoCircle, {
         size: feedbackIconSize
-      });
+      }));
 
     default:
-      return /*#__PURE__*/React.createElement(InfoCircle, {
+      return _InfoCircle2 || (_InfoCircle2 = /*#__PURE__*/_jsx(InfoCircle, {
         size: feedbackIconSize
-      });
+      }));
   }
 };
 
-var ModalFeedBack = function ModalFeedBack(_ref2) {
-  var _ref2$className = _ref2.className,
-      className = _ref2$className === void 0 ? '' : _ref2$className,
-      _ref2$modalType = _ref2.modalType,
-      modalType = _ref2$modalType === void 0 ? null : _ref2$modalType,
-      _ref2$hasError = _ref2.hasError,
-      hasError = _ref2$hasError === void 0 ? false : _ref2$hasError,
-      _ref2$hasWarning = _ref2.hasWarning,
-      hasWarning = _ref2$hasWarning === void 0 ? false : _ref2$hasWarning,
-      _ref2$hasSuccess = _ref2.hasSuccess,
-      hasSuccess = _ref2$hasSuccess === void 0 ? false : _ref2$hasSuccess,
-      _ref2$hasInfo = _ref2.hasInfo,
-      hasInfo = _ref2$hasInfo === void 0 ? false : _ref2$hasInfo,
-      _ref2$hasHelp = _ref2.hasHelp,
-      hasHelp = _ref2$hasHelp === void 0 ? false : _ref2$hasHelp;
-  var type = getModalType(modalType, {
-    hasError: hasError,
-    hasWarning: hasWarning,
-    hasSuccess: hasSuccess,
-    hasInfo: hasInfo,
-    hasHelp: hasHelp
+const ModalFeedBack = ({
+  className = '',
+  modalType = null,
+  hasError = false,
+  hasWarning = false,
+  hasSuccess = false,
+  hasInfo = false,
+  hasHelp = false
+}) => {
+  const type = getModalType(modalType, {
+    hasError,
+    hasWarning,
+    hasSuccess,
+    hasInfo,
+    hasHelp
   });
-
-  var _convertPropToCssClas = convertPropToCssClassName('modal-feedback', className, {
+  const {
+    cssClassName
+  } = convertPropToCssClassName('modal-feedback', className, {
     modalType: type
-  }),
-      cssClassName = _convertPropToCssClas.cssClassName;
-
-  var feedbackIcon = getIconType(type);
-  return /*#__PURE__*/React.createElement("div", {
+  });
+  const feedbackIcon = getIconType(type);
+  return /*#__PURE__*/_jsx("div", {
     className: cssClassName
-  }, feedbackIcon);
+  }, void 0, feedbackIcon);
 };
 
 export { ModalFeedBack as default };
-//# sourceMappingURL=ModalFeedBack.js.map