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

package/cjs/components/blocks.js

@@ -1,65 +1,54 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsClassnames = require('@elliemae/ds-classnames');
+
+const blockName = 'modal-slide';
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper', _ref => {
+  let {
+    show,
+    centered
+  } = _ref;
+  return {
+    showing: show,
+    disappearing: !show,
+    centered
   };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var blocks_exports = {};
-__export(blocks_exports, {
-  ActualContent: () => ActualContent,
-  BreadcrumTitle: () => BreadcrumTitle,
-  Content: () => Content,
-  Footer: () => Footer,
-  FooterWrapper: () => FooterWrapper,
-  Header: () => Header,
-  HeaderLeftSide: () => HeaderLeftSide,
-  Overlay: () => Overlay,
-  Title: () => Title,
-  Wrapper: () => Wrapper
 });
-var React = __toESM(require("react"));
-var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
-const blockName = "modal-slide";
-const Wrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "wrapper", ({ show, centered }) => ({
-  showing: show,
-  disappearing: !show,
-  centered
-}));
-const Overlay = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "overlay", ({ show }) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Content = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "content", ({ show }) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Title = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "title", () => ({}));
-const BreadcrumTitle = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "breadcrum-title", () => ({}));
-const HeaderLeftSide = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "header-left-side", () => ({}));
-const ActualContent = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "actual-content", () => ({}));
-const Header = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "header", () => ({}));
-const Footer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "footer", () => ({}));
-const FooterWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "footer-wrapper", () => ({}));
-module.exports = __toCommonJS(blocks_exports);
-//# sourceMappingURL=blocks.js.map
+const Overlay = dsClassnames.aggregatedClasses('div')(blockName, 'overlay', _ref2 => {
+  let {
+    show
+  } = _ref2;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
+const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content', _ref3 => {
+  let {
+    show
+  } = _ref3;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
+const Title = dsClassnames.aggregatedClasses('div')(blockName, 'title', () => ({}));
+const BreadcrumTitle = dsClassnames.aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));
+const HeaderLeftSide = dsClassnames.aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));
+const ActualContent = dsClassnames.aggregatedClasses('div')(blockName, 'actual-content', () => ({}));
+const Header = dsClassnames.aggregatedClasses('div')(blockName, 'header', () => ({}));
+const Footer = dsClassnames.aggregatedClasses('div')(blockName, 'footer', () => ({}));
+const FooterWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'footer-wrapper', () => ({}));
+
+exports.ActualContent = ActualContent;
+exports.BreadcrumTitle = BreadcrumTitle;
+exports.Content = Content;
+exports.Footer = Footer;
+exports.FooterWrapper = FooterWrapper;
+exports.Header = Header;
+exports.HeaderLeftSide = HeaderLeftSide;
+exports.Overlay = Overlay;
+exports.Title = Title;
+exports.Wrapper = Wrapper;

package/cjs/index.js

@@ -1,40 +1,17 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var src_exports = {};
-__export(src_exports, {
-  DSModalSlideFooterWithSchema: () => import_Footer.DSModalSlideFooterWithSchema,
-  DSModalSlideHeaderWithSchema: () => import_Header.DSModalSlideHeaderWithSchema,
-  default: () => import_DSModalSlide.default
-});
-var React = __toESM(require("react"));
-__reExport(src_exports, __toESM(require("./DSModalSlide")));
-var import_DSModalSlide = __toESM(require("./DSModalSlide"));
-var import_Header = __toESM(require("./components/Header"));
-var import_Footer = __toESM(require("./components/Footer"));
-module.exports = __toCommonJS(src_exports);
-//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSModalSlide = require('./DSModalSlide.js');
+var Header = require('./components/Header.js');
+var Footer = require('./components/Footer.js');
+
+
+
+exports.DSModalSlide = DSModalSlide.DSModalSlide;
+exports.DSModalSlideWithSchema = DSModalSlide.DSModalSlideWithSchema;
+exports["default"] = DSModalSlide.DSModalSlide;
+exports.DSModalSlideHeaderWithSchema = Header.DSModalSlideHeaderWithSchema;
+exports.ModalHeader = Header["default"];
+exports.DSModalSlideFooterWithSchema = Footer.DSModalSlideFooterWithSchema;
+exports.ModalFooter = Footer["default"];

package/esm/DSModalSlide.js

@@ -1,123 +1,161 @@
-import * as React from "react";
-import React2, { useState, useEffect, useCallback } from "react";
-import { PropTypes, describe } from "react-desc";
-import ReactDOM from "react-dom";
-import { useTheme } from "@elliemae/ds-system";
-import { Grid } from "@elliemae/ds-grid";
-import DSSeparator from "@elliemae/ds-separator";
-import { Wrapper, Overlay, Content, ActualContent } from "./components/blocks";
-import ModalHeader from "./components/Header";
-import ModalFooter from "./components/Footer";
-const DSModalSlide = ({
-  isOpen = false,
-  children,
-  getContainer,
-  centered = false,
-  fullWidth = false,
-  header = null,
-  footer = null,
-  fadeOut = 1500,
-  fadeIn = 1500,
-  overrideHeight = false
-}) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { useState, useCallback, useEffect } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import ReactDOM from 'react-dom';
+import { useTheme } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+import DSSeparator from '@elliemae/ds-separator';
+import { Wrapper, Overlay, Content, ActualContent } from './components/blocks.js';
+export { default as ModalHeader } from './components/Header.js';
+export { default as ModalFooter } from './components/Footer.js';
+
+var _DSSeparator, _DSSeparator2;
+
+const DSModalSlide = _ref => {
+  let {
+    isOpen = false,
+    children,
+    getContainer,
+    centered = false,
+    fullWidth = false,
+    header = null,
+    footer = null,
+    fadeOut = 1500,
+    fadeIn = 1500,
+    overrideHeight = false
+  } = _ref;
   const [isMoving, setMoving] = useState(false);
   const [show, setShow] = useState(isOpen);
   const [width, setWidth] = useState(50);
   const theme = useTheme();
-  const contentRows = [...header ? [theme.space.m] : [], "0px", "auto", "0px", ...footer ? [theme.space.m] : []];
+  const contentRows = [...(header ? [theme.space.m] : []), '0px', 'auto', '0px', ...(footer ? [theme.space.m] : [])];
   const updateShow = useCallback(() => {
-    if (fullWidth)
-      setWidth(100);
-    else
-      setWidth(50);
+    if (fullWidth) setWidth(100);else setWidth(50);
+
     if (isOpen !== show) {
       setMoving(true);
+
       if (isOpen) {
         setShow(isOpen);
       }
     }
   }, [isOpen, fullWidth, isMoving]);
   useEffect(updateShow, [isOpen, fullWidth]);
-  if (!show)
-    return null;
+  if (!show) return null;
   const container = getContainer();
-  if (!container)
-    return null;
+  if (!container) return null;
+
   const handleAnimationEnd = () => {
     setMoving(false);
-    if (!isOpen)
-      setShow(isOpen);
+    if (!isOpen) setShow(isOpen);
   };
-  let { height } = container.getBoundingClientRect();
+
+  let {
+    height
+  } = container.getBoundingClientRect();
+
   if (overrideHeight && container.scrollHeight > height) {
     height = container.scrollHeight;
   }
+
   if (!container.style.position) {
-    container.style.position = "relative";
+    container.style.position = 'relative';
   }
-  return ReactDOM.createPortal(/* @__PURE__ */ React2.createElement(Wrapper, {
+
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(Wrapper, {
     classProps: {
       show: isOpen,
       centered
     },
     style: {
-      "--height": height,
-      "--fade-in": fadeIn,
-      "--fade-out": fadeOut,
-      "--width": width
+      '--height': height,
+      '--fade-in': fadeIn,
+      '--fade-out': fadeOut,
+      '--width': width
     }
-  }, /* @__PURE__ */ React2.createElement(Overlay, {
+  }, void 0, /*#__PURE__*/_jsx(Overlay, {
     classProps: {
       show: isOpen
     }
-  }, /* @__PURE__ */ React2.createElement(Content, {
+  }, void 0, /*#__PURE__*/_jsx(Content, {
     onAnimationEnd: handleAnimationEnd,
     classProps: {
       show: isOpen
     }
-  }, /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
     style: {
-      height: "100%",
-      width: "100%",
-      maxHeight: "100%",
-      overflow: "hidden",
-      "-webkit-backface-visibility": "hidden",
-      "backface-visibility": "hidden",
-      "-webkit-transform-style": "preserve-3d"
+      height: '100%',
+      width: '100%',
+      maxHeight: '100%',
+      overflow: 'hidden',
+      '-webkit-backface-visibility': 'hidden',
+      'backface-visibility': 'hidden',
+      '-webkit-transform-style': 'preserve-3d'
     },
     rows: contentRows,
     "data-testid": "ds-modal-slide"
-  }, header && React2.cloneElement(header, { fullWidth }), header && /* @__PURE__ */ React2.createElement(DSSeparator, {
+  }, void 0, header && /*#__PURE__*/React.cloneElement(header, {
+    fullWidth
+  }), header && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {
     position: "initial",
     type: "non-form"
-  }), /* @__PURE__ */ React2.createElement(Grid, {
-    style: { overflow: "hidden" }
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    style: { overflow: "auto" }
-  }, /* @__PURE__ */ React2.createElement(ActualContent, null, children))), footer && /* @__PURE__ */ React2.createElement(DSSeparator, {
+  }))), /*#__PURE__*/_jsx(Grid, {
+    style: {
+      overflow: 'hidden'
+    }
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    style: {
+      overflow: 'auto'
+    }
+  }, void 0, /*#__PURE__*/_jsx(ActualContent, {}, void 0, children))), footer && (_DSSeparator2 || (_DSSeparator2 = /*#__PURE__*/_jsx(DSSeparator, {
     position: "initial",
     type: "non-form"
-  }), footer)))), container);
+  }))), footer)))), container);
 };
+
 const props = {
-  centered: PropTypes.bool.description("If the modal slide is centered or not"),
-  isOpen: PropTypes.bool.description("If the modal slide is visible or not"),
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description("Main content of the modal"),
-  fullWidth: PropTypes.bool.description("If the modal slide takes the full width or not"),
-  header: PropTypes.element.description("If the modal slide has a header, only available for full width option"),
-  fadeOut: PropTypes.number.description("Ratio of fade out"),
-  fadeIn: PropTypes.number.description("Ratio of fade in"),
-  overrideHeight: PropTypes.bool.description("Override the panel height to scroll height of the container")
+  /**
+   * If the modal slide is centered or not
+   */
+  centered: PropTypes.bool.description('If the modal slide is centered or not'),
+
+  /**
+   * If the modal slide is visible or not
+   */
+  isOpen: PropTypes.bool.description('If the modal slide is visible or not'),
+
+  /**
+   * Main content of the modal
+   */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description('Main content of the modal'),
+
+  /**
+   * If the modal slide takes the full width or not
+   */
+  fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),
+
+  /**
+   * If the modal slide has a header, only available for full width option
+   */
+  header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),
+
+  /**
+   * Ratio of fade out
+   */
+  fadeOut: PropTypes.number.description('Ratio of fade out'),
+
+  /**
+   * Ratio of fade in
+   */
+  fadeIn: PropTypes.number.description('Ratio of fade in'),
+
+  /**
+   * Override the panel height to scroll height of the container
+   */
+  overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container')
 };
-DSModalSlide.propTypes = props;
 const DSModalSlideWithSchema = describe(DSModalSlide);
 DSModalSlideWithSchema.propTypes = props;
-var DSModalSlide_default = DSModalSlide;
-export {
-  DSModalSlide,
-  DSModalSlideWithSchema,
-  ModalFooter,
-  ModalHeader,
-  DSModalSlide_default as default
-};
-//# sourceMappingURL=DSModalSlide.js.map
+
+export { DSModalSlide, DSModalSlideWithSchema, DSModalSlide as default };

package/esm/components/Footer.js

@@ -1,52 +1,90 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import DSButton from "@elliemae/ds-button";
-import { FooterWrapper } from "./blocks";
-const ModalFooter = ({
-  confirmLabel = "Confirm",
-  rejectLabel = "Cancel",
-  onConfirm,
-  onReject,
-  confirmProps = {
-    disabled: false
-  },
-  rejectProps = {
-    disabled: false
-  }
-}) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(FooterWrapper, null, !!onReject && /* @__PURE__ */ React2.createElement(DSButton, {
-  buttonType: "secondary",
-  className: "action-reject",
-  containerProps: { "data-testid": "modal-footer-reject-btn" },
-  labelText: rejectLabel,
-  onClick: onReject,
-  ...rejectProps
-}), !!onConfirm && /* @__PURE__ */ React2.createElement(DSButton, {
-  buttonType: "primary",
-  className: "action-confirm",
-  containerProps: { "data-testid": "modal-footer-confirm-btn" },
-  labelText: confirmLabel,
-  onClick: onConfirm,
-  ...confirmProps
-})));
+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 { PropTypes, describe } from 'react-desc';
+import DSButton from '@elliemae/ds-button';
+import { FooterWrapper } from './blocks.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+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 ModalFooter = _ref => {
+  let {
+    confirmLabel = 'Confirm',
+    rejectLabel = 'Cancel',
+    onConfirm,
+    onReject,
+    confirmProps = {
+      disabled: false
+    },
+    rejectProps = {
+      disabled: false
+    }
+  } = _ref;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsx(DSButton, _objectSpread({
+      buttonType: "secondary",
+      className: "action-reject",
+      containerProps: {
+        'data-testid': 'modal-footer-reject-btn'
+      },
+      labelText: rejectLabel,
+      onClick: onReject
+    }, rejectProps)), !!onConfirm && /*#__PURE__*/jsx(DSButton, _objectSpread({
+      buttonType: "primary",
+      className: "action-confirm",
+      containerProps: {
+        'data-testid': 'modal-footer-confirm-btn'
+      },
+      labelText: confirmLabel,
+      onClick: onConfirm
+    }, confirmProps)))
+  });
+};
+
 const props = {
-  confirmLabel: PropTypes.string.description("Confirm Label"),
-  rejectLabel: PropTypes.string.description("Reject Label"),
-  onConfirm: PropTypes.func.description("Callback"),
-  onReject: PropTypes.func.description("Callback"),
+  /**
+   * Confirm Label
+   */
+  confirmLabel: PropTypes.string.description('Confirm Label'),
+
+  /**
+   * Reject Label
+   */
+  rejectLabel: PropTypes.string.description('Reject Label'),
+
+  /**
+   * Callback
+   */
+  onConfirm: PropTypes.func.description('Callback'),
+
+  /**
+   * Callback
+   */
+  onReject: PropTypes.func.description('Callback'),
+
+  /**
+   * Extra DSButton props for confirm btn.
+   */
   confirmProps: PropTypes.shape({
     disabled: PropTypes.bool
-  }).description("Extra DSButton props for confirm btn."),
+  }).description('Extra DSButton props for confirm btn.'),
+
+  /**
+   * Extra DSButton props for reject btn.
+   */
   rejectProps: PropTypes.shape({
     disabled: PropTypes.bool
-  }).description("Extra DSButton props for reject btn.")
+  }).description('Extra DSButton props for reject btn.')
 };
-ModalFooter.propTypes = props;
 const DSModalSlideFooterWithSchema = describe(ModalFooter);
 DSModalSlideFooterWithSchema.propTypes = props;
-var Footer_default = ModalFooter;
-export {
-  DSModalSlideFooterWithSchema,
-  Footer_default as default
-};
-//# sourceMappingURL=Footer.js.map
+
+export { DSModalSlideFooterWithSchema, ModalFooter as default };