@elliemae/ds-modal 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/constants.js

@@ -1,44 +1,26 @@
-import * as React from "react";
 const MODAL_TYPE = {
-  DEFAULT: "default",
-  ALERT: "alert",
-  CONFIRM: "confirm",
-  NOTIFICATION: "notification",
-  WARNING: "warning",
-  ERROR: "error",
-  SUCCESS: "success",
-  HELP: "help",
-  INFO: "info"
+  DEFAULT: 'default',
+  ALERT: 'alert',
+  CONFIRM: 'confirm',
+  NOTIFICATION: 'notification',
+  WARNING: 'warning',
+  ERROR: 'error',
+  SUCCESS: 'success',
+  HELP: 'help',
+  INFO: '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
-];
+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"
+  INFORMATION: 'information',
+  DECISION: 'decision',
+  SELECTION: 'selection',
+  FORM: 'form'
 };
 const MODAL_SUB_TYPE_V2 = {
-  SUCCESS: "success",
-  WARNING: "warning",
-  ERROR: "error",
-  INFORMATION: "information"
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error',
+  INFORMATION: 'information'
 };
-var constants_default = MODAL_TYPE;
-export {
-  MODAL_SUB_TYPE_V2,
-  MODAL_TYPE,
-  MODAL_TYPE_V2,
-  constants_default as default,
-  modalTypes
-};
-//# sourceMappingURL=constants.js.map
+
+export { MODAL_SUB_TYPE_V2, MODAL_TYPE, MODAL_TYPE_V2, MODAL_TYPE as default, modalTypes };

package/esm/index.js

@@ -1,10 +1,4 @@
-import * as React from "react";
-export * from "./DSModal";
-export * from "./constants";
-import { DSModalWithSchema } from "./v2/DSModal";
-import { default as default2 } from "./DSModal";
-export {
-  DSModalWithSchema,
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { default } from './DSModal.js';
+export { MODAL_SUB_TYPE_V2, MODAL_TYPE, MODAL_TYPE_V2, modalTypes } from './constants.js';
+export { DSModalWithSchema } from './v2/DSModal.js';
+export { DSModalContent } from './v2/components/ModalContent.js';

package/esm/v1/DSModal.js

@@ -1,148 +1,139 @@
-import * as React from "react";
-import React2 from "react";
-import PropTypes from "prop-types";
-import ReactModal from "react-modal";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { DSIconSizes } from "@elliemae/ds-icon";
-import { Close } from "@elliemae/ds-icons";
-import DSButton from "@elliemae/ds-button";
-import MODAL_TYPE, { modalTypes } from "../constants";
-import ModalFeedBack from "./ModalFeedBack/ModalFeedBack";
-import { sizes, iconSizes } from "@elliemae/ds-shared/prop-types";
-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
-}) => {
-  typeof document !== "undefined" && document && ReactModal.setAppElement && ReactModal.setAppElement(appElement);
-  const { cssClassName, classNameElement, classNameBlock, classNameModifier, classNameBlockModifier } = convertPropToCssClassName("modal", className, {
+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 ReactModal from 'react-modal';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSIconSizes } from '@elliemae/ds-icon';
+import { Close } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { MODAL_TYPE } from '../constants.js';
+import ModalFeedBack from './ModalFeedBack/ModalFeedBack.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _Close;
+
+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 = '',
+    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
+  } = _ref;
+  // 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 {
+    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__ */ React2.createElement(ReactModal, {
+  return /*#__PURE__*/_jsx(ReactModal, {
     testId: dataTestId,
     className: cssClassName,
     contentLabel: modalTitle,
-    isOpen,
-    onAfterOpen,
+    isOpen: isOpen,
+    onAfterOpen: onAfterOpen,
     onRequestClose: onClose,
-    overlayClassName: `${classNameBlock("overlay")} ${classNameModifier(centered && "center")}`,
-    shouldCloseOnOverlayClick,
+    overlayClassName: "".concat(classNameBlock('overlay'), " ").concat(classNameModifier(centered && 'center')),
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
     style: {
-      content: {
-        ...style
-      },
+      content: _objectSpread({}, style),
       overlay: {
         zIndex
       }
     }
-  }, /* @__PURE__ */ React2.createElement("div", {
-    ...containerProps
-  }, showHeader && /* @__PURE__ */ React2.createElement("div", {
-    className: classNameBlock("modal-header")
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: classNameElement("title", "modal-header")
-  }, modalTitle), /* @__PURE__ */ React2.createElement("div", {
-    className: classNameElement("icon", "modal-header")
-  }, /* @__PURE__ */ React2.createElement(DSButton, {
-    buttonType: "link",
-    icon: /* @__PURE__ */ React2.createElement(Close, null),
-    onClick: onClose,
-    size: iconCloseSize
-  }))), /* @__PURE__ */ React2.createElement("div", {
-    className: classNameElement("body")
-  }, showFeedBack && /* @__PURE__ */ React2.createElement(ModalFeedBack, {
-    hasError,
-    hasHelp,
-    hasInfo,
-    hasSuccess,
-    hasWarning,
-    modalType
-  }), children), showFooter && !isAFeedbackType && /* @__PURE__ */ React2.createElement("div", {
-    className: `${classNameBlock("modal-footer")} ${additionalFooterCssClass ? classNameBlockModifier(additionalFooterCssClass, "modal-footer") : ""}`
-  }, /* @__PURE__ */ React2.createElement("div", {
-    ref: actionsRef,
-    className: classNameBlock("modal-footer-actions")
-  }, modalType === MODAL_TYPE.CONFIRM && /* @__PURE__ */ React2.createElement(DSButton, {
-    buttonType: "secondary",
-    className: `${classNameElement("button-action")} ${classNameModifier("reject", "button-action")} `,
-    labelText: rejectLabel,
-    onClick: onReject,
-    ...overridePropsRejectButton
-  }), /* @__PURE__ */ React2.createElement(DSButton, {
-    buttonType: "primary",
-    className: `${classNameElement("button-action")} ${classNameModifier("confirm", "button-action")} `,
-    labelText: confirmLabel,
-    onClick: onConfirm,
-    ...overridePropsConfirmButton
-  })))));
-};
-DSModal.propTypes = {
-  className: PropTypes.string,
-  additionalFooterCssClass: PropTypes.string,
-  style: PropTypes.shape({}),
-  iconCloseSize: PropTypes.oneOf(iconSizes),
-  modalType: PropTypes.oneOf(modalTypes),
-  showHeader: PropTypes.bool,
-  showFooter: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired,
-  centered: PropTypes.bool,
-  confirmLabel: PropTypes.string,
-  modalTitle: PropTypes.string,
-  size: PropTypes.oneOf(sizes),
-  isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
-  onAfterOpen: PropTypes.func,
-  onConfirm: PropTypes.func,
-  onReject: PropTypes.func,
-  rejectLabel: PropTypes.string,
-  shouldCloseOnOverlayClick: PropTypes.bool,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
-  hasSuccess: PropTypes.bool,
-  hasInfo: PropTypes.bool,
-  hasHelp: PropTypes.bool,
-  actionsRef: PropTypes.func,
-  appElement: PropTypes.string,
-  overridePropsConfirmButton: PropTypes.shape({}),
-  overridePropsRejectButton: PropTypes.shape({})
-};
-var DSModal_default = DSModal;
-export {
-  DSModal_default as default
+  }, 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: _Close || (_Close = /*#__PURE__*/_jsx(Close, {})),
+      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))]
+    }))]
+  })));
 };
-//# sourceMappingURL=DSModal.js.map
+
+export { DSModal as default };

package/esm/v1/DSModalType.js

@@ -1,16 +1,3 @@
-import * as React from "react";
-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
+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 };

package/esm/v1/DSModalWrapper.js

@@ -1,82 +1,143 @@
-import * as React from "react";
-import { Component, createElement } from "react";
-import { MODAL_TYPE } from "../constants";
-var DSModalWrapper_default = (WrappedComponent) => {
+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 '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); 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; }
+var DSModalWrapper = (WrappedComponent => {
   class DSModalWrapper extends Component {
     constructor() {
       super(...arguments);
       this.state = {
         childready: false,
-        additionalFooterCssClass: "loading",
+        additionalFooterCssClass: 'loading',
         container: null,
         actions: null,
-        height: "100%"
+        height: '100%'
       };
-      this.onHeaderHeight = (e) => {
+
+      this.onHeaderHeight = e => {
         this.heightHeaderFlag = true;
         this.heightHeader = e.height || 0;
       };
-      this.onFooterHeight = (e) => {
+
+      this.onFooterHeight = e => {
         this.heightFooterFlag = true;
         this.heightFooter = e.height || 0;
       };
-      this.onResize = ({ bounds }) => {
+
+      this.onResize = _ref => {
+        let {
+          bounds
+        } = _ref;
+
         if (this.heightFooterFlag && this.heightHeaderFlag) {
           return this.setState({
             height: bounds.height - this.heightFooter - this.heightHeader
           });
         }
-        return setTimeout(this.onResize({ bounds }), 0);
+
+        return setTimeout(this.onResize({
+          bounds
+        }), 0);
       };
-      this.handleContainer = (node) => {
-        if (node)
-          this.setState({ container: node });
+
+      this.handleContainer = node => {
+        if (node) this.setState({
+          container: node
+        });
         this.handleResize();
       };
-      this.handleActions = (node) => {
-        if (node)
-          this.setState({ actions: node });
+
+      this.handleActions = node => {
+        if (node) this.setState({
+          actions: node
+        });
         this.handleResize();
       };
     }
+
     componentDidMount() {
-      window.addEventListener("resize", this.handleResize);
+      window.addEventListener('resize', this.handleResize);
     }
+
     componentWillUnmount() {
-      window.removeEventListener("resize", this.handleResize);
+      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 });
-      const { clientWidth: containerWidth } = container;
-      const { clientWidth: actionsWidth } = actions;
+      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: "fluid-actions" });
+        return this.setState({
+          additionalFooterCssClass: 'fluid-actions'
+        });
       }
-      return this.setState({ additionalFooterCssClass: null });
+
+      return this.setState({
+        additionalFooterCssClass: null
+      });
     }
+
     verifyNodes() {
-      const { modalType } = this.props;
+      const {
+        modalType
+      } = this.props;
+
       if (modalType !== MODAL_TYPE.DEFAULT) {
         const nodesInterval = setInterval(() => {
-          const { container, actions } = this.state;
-          if (!container || !actions)
-            return null;
+          // !important it checks when nodes are availables
+          const {
+            container,
+            actions
+          } = this.state;
+          if (!container || !actions) return null;
           clearInterval(nodesInterval);
-          this.setState({ childready: true });
+          this.setState({
+            childready: true
+          });
           return this.handleResize();
         }, 100);
       }
     }
+
     render() {
-      const { props, state } = this;
-      const { additionalFooterCssClass, height } = state;
-      return createElement(WrappedComponent, {
-        ...props,
+      const {
+        props,
+        state
+      } = this;
+      const {
+        additionalFooterCssClass,
+        height
+      } = state;
+      return /*#__PURE__*/createElement(WrappedComponent, _objectSpread(_objectSpread({}, props), {}, {
         height,
         onResize: this.onResize,
         onFooterHeight: this.onFooterHeight,
@@ -85,16 +146,15 @@ var DSModalWrapper_default = (WrappedComponent) => {
         actionsRef: this.handleActions,
         additionalFooterCssClass,
         onAfterOpen: () => {
-          if (props.onAfterOpen)
-            props.onAfterOpen();
+          if (props.onAfterOpen) props.onAfterOpen();
           this.verifyNodes();
         }
-      });
+      }));
     }
+
   }
+
   return DSModalWrapper;
-};
-export {
-  DSModalWrapper_default as default
-};
-//# sourceMappingURL=DSModalWrapper.js.map
+});
+
+export { DSModalWrapper as default };