@elliemae/ds-modal-slide 2.0.0-next.6 → 2.0.0-rc.1

package/cjs/DSModalSlide.js

@@ -8,8 +8,8 @@ var React = require('react');
 var reactDesc = require('react-desc');
 var ReactDOM = require('react-dom');
 var dsSystem = require('@elliemae/ds-system');
-var Grid = require('@elliemae/ds-basic/Grid');
-var DSSeparator = require('@elliemae/ds-basic/Separator');
+var dsGrid = require('@elliemae/ds-grid');
+var DSSeparator = require('@elliemae/ds-separator');
 var blocks = require('./components/blocks.js');
 var Header = require('./components/Header.js');
 var Footer = require('./components/Footer.js');
@@ -23,18 +23,19 @@ var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
 
 var _DSSeparator, _DSSeparator2;
 
-const DSModalSlide = ({
-  isOpen = false,
-  children,
-  getContainer,
-  centered = false,
-  fullWidth = false,
-  header = null,
-  footer = null,
-  fadeOut = 1500,
-  fadeIn = 1500,
-  overrideHeight = false
-}) => {
+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] = React.useState(false);
   const [show, setShow] = React.useState(isOpen);
   const [width, setWidth] = React.useState(50);
@@ -93,7 +94,7 @@ const DSModalSlide = ({
     classProps: {
       show: isOpen
     }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
       height: '100%',
       width: '100%',
@@ -110,11 +111,11 @@ const DSModalSlide = ({
   }), header && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
     position: "initial",
     type: "non-form"
-  }))), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
       overflow: 'hidden'
     }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     style: {
       overflow: 'auto'
     }

package/cjs/components/Footer.js

@@ -2,11 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var reactDesc = require('react-desc');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSButton = require('@elliemae/ds-button');
 var blocks = require('./blocks.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -20,36 +25,39 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 ModalFooter = ({
-  confirmLabel = 'Confirm',
-  rejectLabel = 'Cancel',
-  onConfirm,
-  onReject,
-  confirmProps = {
-    disabled: false
-  },
-  rejectProps = {
-    disabled: false
-  }
-}) => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-  children: /*#__PURE__*/_jsx__default["default"](blocks.FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
-    buttonType: "secondary",
-    className: "action-reject",
-    containerProps: {
-      'data-testid': 'modal-footer-reject-btn'
+const ModalFooter = _ref => {
+  let {
+    confirmLabel = 'Confirm',
+    rejectLabel = 'Cancel',
+    onConfirm,
+    onReject,
+    confirmProps = {
+      disabled: false
     },
-    labelText: rejectLabel,
-    onClick: onReject
-  }, rejectProps)), !!onConfirm && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
-    buttonType: "primary",
-    className: "action-confirm",
-    containerProps: {
-      'data-testid': 'modal-footer-confirm-btn'
-    },
-    labelText: confirmLabel,
-    onClick: onConfirm
-  }, confirmProps)))
-});
+    rejectProps = {
+      disabled: false
+    }
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_jsx__default["default"](blocks.FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+      buttonType: "secondary",
+      className: "action-reject",
+      containerProps: {
+        'data-testid': 'modal-footer-reject-btn'
+      },
+      labelText: rejectLabel,
+      onClick: onReject
+    }, rejectProps)), !!onConfirm && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+      buttonType: "primary",
+      className: "action-confirm",
+      containerProps: {
+        'data-testid': 'modal-footer-confirm-btn'
+      },
+      labelText: confirmLabel,
+      onClick: onConfirm
+    }, confirmProps)))
+  });
+};
 
 const props = {
   /**

package/cjs/components/Header.js

@@ -6,9 +6,9 @@ var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
-var DSSeparator = require('@elliemae/ds-basic/Separator');
-var Close = require('@elliemae/ds-icons/Close');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSSeparator = require('@elliemae/ds-separator');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
 var blocks = require('./blocks.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,30 +16,32 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
-var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 var _StyledSeparator, _Close;
 
-const ModalHeader = ({
-  title: headerTitle = '',
-  onClose = () => null,
-  toolbar = null
-}) => /*#__PURE__*/_jsx__default["default"](HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](StyledSeparator, {
-  position: "initial",
-  margin: "none",
-  orientation: "vertical",
-  type: "non-form"
-}))), /*#__PURE__*/_jsx__default["default"](StyledCloseButton, {
-  "data-testid": "modal-slider-header-close",
-  "aria-label": "Close modal slide",
-  buttonType: "text",
-  icon: _Close || (_Close = /*#__PURE__*/_jsx__default["default"](Close__default["default"], {
+const ModalHeader = _ref => {
+  let {
+    title: headerTitle = '',
+    onClose = () => null,
+    toolbar = null
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](StyledSeparator, {
+    position: "initial",
+    margin: "none",
+    orientation: "vertical",
+    type: "non-form"
+  }))), /*#__PURE__*/_jsx__default["default"](StyledCloseButton, {
+    "data-testid": "modal-slider-header-close",
     "aria-label": "Close modal slide",
-    size: "s"
-  })),
-  onClick: onClose
-}));
+    buttonType: "text",
+    icon: _Close || (_Close = /*#__PURE__*/_jsx__default["default"](dsIcons.Close, {
+      "aria-label": "Close modal slide",
+      size: "s"
+    })),
+    onClick: onClose
+  }));
+};
 
 const HeaderWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-oxqqo8-0"

package/cjs/components/blocks.js

@@ -5,26 +5,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dsClassnames = require('@elliemae/ds-classnames');
 
 const blockName = 'modal-slide';
-const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper', ({
-  show,
-  centered
-}) => ({
-  showing: show,
-  disappearing: !show,
-  centered
-}));
-const Overlay = dsClassnames.aggregatedClasses('div')(blockName, 'overlay', ({
-  show
-}) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content', ({
-  show
-}) => ({
-  showing: show,
-  disappearing: !show
-}));
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper', _ref => {
+  let {
+    show,
+    centered
+  } = _ref;
+  return {
+    showing: show,
+    disappearing: !show,
+    centered
+  };
+});
+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', () => ({}));

package/esm/DSModalSlide.js

@@ -4,26 +4,27 @@ 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-basic/Grid';
-import DSSeparator from '@elliemae/ds-basic/Separator';
+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 = ({
-  isOpen = false,
-  children,
-  getContainer,
-  centered = false,
-  fullWidth = false,
-  header = null,
-  footer = null,
-  fadeOut = 1500,
-  fadeIn = 1500,
-  overrideHeight = false
-}) => {
+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);

package/esm/components/Footer.js

@@ -1,8 +1,13 @@
+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-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import { FooterWrapper } from './blocks.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
@@ -10,36 +15,39 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 ModalFooter = ({
-  confirmLabel = 'Confirm',
-  rejectLabel = 'Cancel',
-  onConfirm,
-  onReject,
-  confirmProps = {
-    disabled: false
-  },
-  rejectProps = {
-    disabled: false
-  }
-}) => /*#__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'
+const ModalFooter = _ref => {
+  let {
+    confirmLabel = 'Confirm',
+    rejectLabel = 'Cancel',
+    onConfirm,
+    onReject,
+    confirmProps = {
+      disabled: false
     },
-    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)))
-});
+    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 = {
   /**

package/esm/components/Header.js

@@ -2,32 +2,35 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
-import DSSeparator from '@elliemae/ds-basic/Separator';
-import Close from '@elliemae/ds-icons/Close';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSSeparator from '@elliemae/ds-separator';
+import { Close } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 import { HeaderLeftSide, Header, Title } from './blocks.js';
 
 var _StyledSeparator, _Close;
 
-const ModalHeader = ({
-  title: headerTitle = '',
-  onClose = () => null,
-  toolbar = null
-}) => /*#__PURE__*/_jsx(HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx(HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
-  position: "initial",
-  margin: "none",
-  orientation: "vertical",
-  type: "non-form"
-}))), /*#__PURE__*/_jsx(StyledCloseButton, {
-  "data-testid": "modal-slider-header-close",
-  "aria-label": "Close modal slide",
-  buttonType: "text",
-  icon: _Close || (_Close = /*#__PURE__*/_jsx(Close, {
+const ModalHeader = _ref => {
+  let {
+    title: headerTitle = '',
+    onClose = () => null,
+    toolbar = null
+  } = _ref;
+  return /*#__PURE__*/_jsx(HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx(HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
+    position: "initial",
+    margin: "none",
+    orientation: "vertical",
+    type: "non-form"
+  }))), /*#__PURE__*/_jsx(StyledCloseButton, {
+    "data-testid": "modal-slider-header-close",
     "aria-label": "Close modal slide",
-    size: "s"
-  })),
-  onClick: onClose
-}));
+    buttonType: "text",
+    icon: _Close || (_Close = /*#__PURE__*/_jsx(Close, {
+      "aria-label": "Close modal slide",
+      size: "s"
+    })),
+    onClick: onClose
+  }));
+};
 
 const HeaderWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-oxqqo8-0"

package/esm/components/blocks.js

@@ -1,26 +1,35 @@
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
 const blockName = 'modal-slide';
-const Wrapper = aggregatedClasses('div')(blockName, 'wrapper', ({
-  show,
-  centered
-}) => ({
-  showing: show,
-  disappearing: !show,
-  centered
-}));
-const Overlay = aggregatedClasses('div')(blockName, 'overlay', ({
-  show
-}) => ({
-  showing: show,
-  disappearing: !show
-}));
-const Content = aggregatedClasses('div')(blockName, 'content', ({
-  show
-}) => ({
-  showing: show,
-  disappearing: !show
-}));
+const Wrapper = aggregatedClasses('div')(blockName, 'wrapper', _ref => {
+  let {
+    show,
+    centered
+  } = _ref;
+  return {
+    showing: show,
+    disappearing: !show,
+    centered
+  };
+});
+const Overlay = aggregatedClasses('div')(blockName, 'overlay', _ref2 => {
+  let {
+    show
+  } = _ref2;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
+const Content = aggregatedClasses('div')(blockName, 'content', _ref3 => {
+  let {
+    show
+  } = _ref3;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
 const Title = aggregatedClasses('div')(blockName, 'title', () => ({}));
 const BreadcrumTitle = aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));
 const HeaderLeftSide = aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-modal-slide",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Modal Slide",
   "module": "./esm/index.js",
@@ -48,20 +48,21 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-next.6",
-    "@elliemae/ds-classnames": "2.0.0-next.6",
+    "@elliemae/ds-basic": "2.0.0-rc.1",
+    "@elliemae/ds-classnames": "2.0.0-rc.1",
+    "@elliemae/ds-icons": "2.0.0-rc.1",
+    "@elliemae/ds-system": "2.0.0-rc.1",
     "prop-types": "~15.7.2",
-    "react-measure": "~2.5.2",
-    "react-modal": "~3.12.1"
+    "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "lodash": "~4.17.21",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/components/Header.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const ModalHeader: {
-    ({ title: headerTitle, onClose, toolbar, }: {
+    ({ title: headerTitle, onClose, toolbar }: {
         title?: string | undefined;
         onClose?: (() => null) | undefined;
         toolbar?: null | undefined;