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

package/cjs/v2/components/Title.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var blocks = require('../blocks.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-const Title = _ref => {
-  let {
-    modalTitle,
-    modalType
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](blocks.ModalTitle, {
-    classProps: {
-      type: modalType
-    }
-  }, void 0, modalTitle);
-};
-
-exports.Title = Title;
-exports["default"] = Title;

package/cjs/v2/helpers.js

@@ -1,45 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var constants = require('../constants.js');
-
-function showDecision(_ref) {
-  let {
-    modalType
-  } = _ref;
-  return [constants.MODAL_TYPE_V2.INFORMATION, constants.MODAL_TYPE_V2.DECISION].indexOf(modalType) > -1;
-}
-function showFeedBack(_ref2) {
-  let {
-    modalType,
-    modalSubType
-  } = _ref2;
-  return showDecision({
-    modalType
-  }) && Object.values(constants.MODAL_SUB_TYPE_V2).indexOf(modalSubType) > -1;
-}
-function showFooter(_ref3) {
-  let {
-    modalType
-  } = _ref3;
-  return modalType !== constants.MODAL_TYPE_V2.INFORMATION;
-}
-function showSelection(_ref4) {
-  let {
-    modalType
-  } = _ref4;
-  return modalType === constants.MODAL_TYPE_V2.SELECTION;
-}
-function showForm(_ref5) {
-  let {
-    modalType
-  } = _ref5;
-  return modalType === constants.MODAL_TYPE_V2.FORM;
-}
-
-exports.showDecision = showDecision;
-exports.showFeedBack = showFeedBack;
-exports.showFooter = showFooter;
-exports.showForm = showForm;
-exports.showSelection = showSelection;

package/esm/DSModal.js

@@ -1,175 +0,0 @@
-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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import PropTypes from 'prop-types';
-import { modalTypes } from './constants.js';
-import DSModal$2 from './v1/DSModal.js';
-import DSModal$1 from './v2/DSModal.js';
-import { iconSizes, sizes } from '@elliemae/ds-shared/prop-types';
-import { jsx } from 'react/jsx-runtime';
-export { DSModalContent } from './v2/components/ModalContent.js';
-
-const _excluded = ["version"];
-
-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 {
-    version = 1
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  if (version === 2) return /*#__PURE__*/jsx(DSModal$1, _objectSpread({}, rest));
-  return /*#__PURE__*/jsx(DSModal$2, _objectSpread({}, rest));
-};
-
-DSModal$2.propTypes = {
-  version: PropTypes.oneOf([1, 2]),
-  className: PropTypes.string,
-
-  /**
-   * Add an additional css class to the footer
-   */
-  additionalFooterCssClass: PropTypes.string,
-
-  /**
-   * Set style for the modal
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * Select size for the close icon
-   */
-  iconCloseSize: PropTypes.oneOf(iconSizes),
-
-  /**
-   * ['default', 'alert', 'confirm', 'notification', 'warning', 'error', 'success', 'help', 'info']
-   */
-  modalType: PropTypes.oneOf(modalTypes),
-
-  /**
-   * Show the header or not
-   */
-  showHeader: PropTypes.bool,
-
-  /**
-   * Show the footer or not
-   */
-  showFooter: PropTypes.bool,
-
-  /**
-   * Main content of the modal
-   */
-  children: PropTypes.element.isRequired,
-
-  /**
-   * Content is centered or not
-   */
-  centered: PropTypes.bool,
-
-  /**
-   * Text to be added in the confirm button
-   */
-  confirmLabel: PropTypes.string,
-
-  /**
-   * Text to be added in the modal title
-   */
-  modalTitle: PropTypes.string,
-
-  /**
-   * Text to be added in the modal title
-   */
-  size: PropTypes.oneOf(sizes),
-
-  /**
-   * Modal is open or not
-   */
-  isOpen: PropTypes.bool,
-
-  /**
-   * Allows a function to be triggered once the modal is closed
-   */
-  onClose: PropTypes.func,
-
-  /**
-   * Allows a function to be triggered once the modal is opened
-   */
-  onAfterOpen: PropTypes.func,
-
-  /**
-   * Allows a function to be triggered once the modal open is confirmed
-   */
-  onConfirm: PropTypes.func,
-
-  /**
-   * Allows a function to be triggered once the modal open is rejected
-   */
-  onReject: PropTypes.func,
-
-  /**
-   * Text to be added in the reject button
-   */
-  rejectLabel: PropTypes.string,
-
-  /**
-   * If modal should close on overlay click
-   */
-  shouldCloseOnOverlayClick: PropTypes.bool,
-
-  /**
-   * Modal has error or not
-   */
-  hasError: PropTypes.bool,
-
-  /**
-   * Modal has warning or not
-   */
-  hasWarning: PropTypes.bool,
-
-  /**
-   * Modal has success or not
-   */
-  hasSuccess: PropTypes.bool,
-
-  /**
-   * Modal has info or not
-   */
-  hasInfo: PropTypes.bool,
-
-  /**
-   * Modal has help or not
-   */
-  hasHelp: PropTypes.bool,
-  actionsRef: PropTypes.func,
-  appElement: PropTypes.string,
-
-  /**
-   * Customized props for the confirm button
-   */
-  overridePropsConfirmButton: PropTypes.objectOf(PropTypes.shape({})),
-
-  /**
-   * Customized props for the reject button
-   */
-  overridePropsRejectButton: PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * Show confirm button
-   */
-  showConfirmButton: PropTypes.bool,
-
-  /**
-   * Show confirm button
-   */
-  customCloseComponent: PropTypes.element
-};
-
-export { DSModal as default };

package/esm/constants.js

@@ -1,26 +0,0 @@
-const MODAL_TYPE = {
-  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 MODAL_TYPE_V2 = {
-  INFORMATION: 'information',
-  DECISION: 'decision',
-  SELECTION: 'selection',
-  FORM: 'form'
-};
-const MODAL_SUB_TYPE_V2 = {
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  ERROR: 'error',
-  INFORMATION: 'information'
-};
-
-export { MODAL_SUB_TYPE_V2, MODAL_TYPE, MODAL_TYPE_V2, MODAL_TYPE as default, modalTypes };

package/esm/index.js

@@ -1,4 +0,0 @@
-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,139 +0,0 @@
-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 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: _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))]
-    }))]
-  })));
-};
-
-export { DSModal as default };

package/esm/v1/DSModalType.js

@@ -1,3 +0,0 @@
-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,160 +0,0 @@
-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',
-        container: null,
-        actions: null,
-        height: '100%'
-      };
-
-      this.onHeaderHeight = e => {
-        this.heightHeaderFlag = true;
-        this.heightHeader = e.height || 0;
-      };
-
-      this.onFooterHeight = e => {
-        this.heightFooterFlag = true;
-        this.heightFooter = e.height || 0;
-      };
-
-      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);
-      };
-
-      this.handleContainer = node => {
-        if (node) this.setState({
-          container: node
-        });
-        this.handleResize();
-      };
-
-      this.handleActions = node => {
-        if (node) this.setState({
-          actions: node
-        });
-        this.handleResize();
-      };
-    }
-
-    componentDidMount() {
-      window.addEventListener('resize', this.handleResize);
-    }
-
-    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: 'fluid-actions'
-        });
-      }
-
-      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;
-});
-
-export { DSModalWrapper as default };

package/esm/v1/ModalFeedBack/ModalFeedBack.js

@@ -1,92 +0,0 @@
-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 => {
-  switch (modalType) {
-    case WARNING:
-    case ERROR:
-      return _WarningCircle || (_WarningCircle = /*#__PURE__*/_jsx(WarningCircle, {
-        size: feedbackIconSize
-      }));
-
-    case SUCCESS:
-      return _CheckmarkCircle || (_CheckmarkCircle = /*#__PURE__*/_jsx(CheckmarkCircle, {
-        size: feedbackIconSize
-      }));
-
-    case HELP:
-      return _HelpCircle || (_HelpCircle = /*#__PURE__*/_jsx(HelpCircle, {
-        size: feedbackIconSize
-      }));
-
-    case INFO:
-      return _InfoCircle || (_InfoCircle = /*#__PURE__*/_jsx(InfoCircle, {
-        size: feedbackIconSize
-      }));
-
-    default:
-      return _InfoCircle2 || (_InfoCircle2 = /*#__PURE__*/_jsx(InfoCircle, {
-        size: feedbackIconSize
-      }));
-  }
-};
-
-const ModalFeedBack = _ref2 => {
-  let {
-    className = '',
-    modalType = null,
-    hasError = false,
-    hasWarning = false,
-    hasSuccess = false,
-    hasInfo = false,
-    hasHelp = false
-  } = _ref2;
-  const type = getModalType(modalType, {
-    hasError,
-    hasWarning,
-    hasSuccess,
-    hasInfo,
-    hasHelp
-  });
-  const {
-    cssClassName
-  } = convertPropToCssClassName('modal-feedback', className, {
-    modalType: type
-  });
-  const feedbackIcon = getIconType(type);
-  return /*#__PURE__*/_jsx("div", {
-    className: cssClassName
-  }, void 0, feedbackIcon);
-};
-
-export { ModalFeedBack as default };