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

package/cjs/PageList/PageList.js

@@ -2,56 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var PropTypes = require('prop-types');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
 var styled = require('styled-components');
-var dsGrid = require('@elliemae/ds-grid');
+var Grid = require('@elliemae/ds-basic/Grid');
 var dsSystem = require('@elliemae/ds-system');
-var FullPageContainer_FullPageContainer = require('../FullPageContainer/FullPageContainer.js');
-var FullPageContainer_FullPageContainerScroll = require('../FullPageContainer/FullPageContainerScroll.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('../FullPageContainer/useMobileHeight.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/defineProperty');
+var FullPageContainer = require('../FullPageContainer/FullPageContainer.js');
+var FullPageContainerScroll = require('../FullPageContainer/FullPageContainerScroll.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var PageTitleWrapper = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const PageTitleWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-e4h57j-0"
 })(["min-height:44px;"]);
-var DSMobilePageList = dsSystem.withTheme(function (_ref) {
-  var _ref$header = _ref.header,
-      header = _ref$header === void 0 ? null : _ref$header,
-      _ref$pageTitle = _ref.pageTitle,
-      pageTitle = _ref$pageTitle === void 0 ? null : _ref$pageTitle,
-      _ref$filterBar = _ref.filterBar,
-      filterBar = _ref$filterBar === void 0 ? null : _ref$filterBar,
-      _ref$body = _ref.body,
-      body = _ref$body === void 0 ? null : _ref$body,
-      _ref$footer = _ref.footer,
-      footer = _ref$footer === void 0 ? null : _ref$footer,
-      theme = _ref.theme;
-  var rows = ['auto', dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];
+const DSMobilePageList = dsSystem.withTheme(({
+  header = null,
+  pageTitle = null,
+  filterBar = null,
+  body = null,
+  footer = null,
+  theme
+}) => {
+  const rows = ['auto', dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 0.83), 1];
   if (header) rows.unshift(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl));
   if (footer) rows.push('56px');
-  return /*#__PURE__*/React__default['default'].createElement(FullPageContainer_FullPageContainer.DSFullPageContainer, {
+  return /*#__PURE__*/_jsx__default["default"](FullPageContainer.DSFullPageContainer, {
     rows: rows
-  }, header && /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, null, header), /*#__PURE__*/React__default['default'].createElement(PageTitleWrapper, null, pageTitle), /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, null, filterBar), /*#__PURE__*/React__default['default'].createElement(FullPageContainer_FullPageContainerScroll.DSFullPageContainerScroll, null, body), footer && /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, null, footer));
+  }, void 0, header && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, header), /*#__PURE__*/_jsx__default["default"](PageTitleWrapper, {}, void 0, pageTitle), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, filterBar), /*#__PURE__*/_jsx__default["default"](FullPageContainerScroll.DSFullPageContainerScroll, {}, void 0, body), footer && /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, footer));
 });
-DSMobilePageList.propTypes = {
-  header: PropTypes__default['default'].element,
-  pageTitle: PropTypes__default['default'].element,
-  filterBar: PropTypes__default['default'].element,
-  body: PropTypes__default['default'].element,
-  footer: PropTypes__default['default'].element
-};
-var DSPageList = DSMobilePageList;
+const DSPageList = DSMobilePageList;
 
 exports.DSMobilePageList = DSMobilePageList;
 exports.DSPageList = DSPageList;
-//# sourceMappingURL=PageList.js.map

package/cjs/PageList/index.js

@@ -2,22 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var PageList_PageList = require('./PageList.js');
-require('react');
-require('prop-types');
-require('styled-components');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-system');
-require('../FullPageContainer/FullPageContainer.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('../FullPageContainer/useMobileHeight.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('../FullPageContainer/FullPageContainerScroll.js');
-require('@babel/runtime/helpers/defineProperty');
+var PageList = require('./PageList.js');
 
 
 
-exports.DSMobilePageList = PageList_PageList.DSMobilePageList;
-exports.DSPageList = PageList_PageList.DSPageList;
-//# sourceMappingURL=index.js.map
+exports.DSMobilePageList = PageList.DSMobilePageList;
+exports.DSPageList = PageList.DSPageList;

package/cjs/PageSearch/PageSearch.js

@@ -2,62 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var PropTypes = require('prop-types');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
 var styled = require('styled-components');
-var dsGrid = require('@elliemae/ds-grid');
+var Grid = require('@elliemae/ds-basic/Grid');
 var dsSystem = require('@elliemae/ds-system');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Header = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const Header = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-a8tzbi-0"
-})(["height:100%;background:", ";padding:", ";"], function (props) {
-  return props.theme.colors.brand['600'];
-}, function (props) {
-  return dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs);
-});
-var DSMobilePageSearch = dsSystem.withTheme(function (_ref) {
-  var _ref$HeaderContainer = _ref.HeaderContainer,
-      HeaderContainer = _ref$HeaderContainer === void 0 ? Header : _ref$HeaderContainer,
-      _ref$SearchContainer = _ref.SearchContainer,
-      SearchContainer = _ref$SearchContainer === void 0 ? Header : _ref$SearchContainer,
-      _ref$searchHeader = _ref.searchHeader,
-      searchHeader = _ref$searchHeader === void 0 ? null : _ref$searchHeader,
-      _ref$pageTitle = _ref.pageTitle,
-      pageTitle = _ref$pageTitle === void 0 ? 'Search' : _ref$pageTitle,
-      _ref$body = _ref.body,
-      body = _ref$body === void 0 ? null : _ref$body,
-      theme = _ref.theme;
-  var rows = [dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 0.81), dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 1.62), 1];
-  return /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
+})(["height:100%;background:", ";padding:", ";"], props => props.theme.colors.brand['600'], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+const DSMobilePageSearch = dsSystem.withTheme(({
+  HeaderContainer = Header,
+  SearchContainer = Header,
+  searchHeader = null,
+  pageTitle = 'Search',
+  body = null,
+  theme
+}) => {
+  const rows = [dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 0.81), dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.l), 1.62), 1];
+  return /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
     rows: rows,
     height: "100%"
-  }, /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, null, /*#__PURE__*/React__default['default'].createElement(HeaderContainer, null, pageTitle)), /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, null, /*#__PURE__*/React__default['default'].createElement(SearchContainer, null, searchHeader)), /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](HeaderContainer, {}, void 0, pageTitle)), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](SearchContainer, {}, void 0, searchHeader)), /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
     height: "100%",
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
     height: "100%",
     style: {
       overflow: 'auto'
     }
-  }, body)));
+  }, void 0, body)));
 });
-DSMobilePageSearch.propTypes = {
-  header: PropTypes__default['default'].element,
-  pageTitle: PropTypes__default['default'].element,
-  filterBar: PropTypes__default['default'].element,
-  body: PropTypes__default['default'].element,
-  footer: PropTypes__default['default'].element
-};
-var DSPageSearch = DSMobilePageSearch;
+const DSPageSearch = DSMobilePageSearch;
 
 exports.DSMobilePageSearch = DSMobilePageSearch;
 exports.DSPageSearch = DSPageSearch;
-//# sourceMappingURL=PageSearch.js.map

package/cjs/PageSummary/PageSummary.js

@@ -2,65 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var dsGrid = require('@elliemae/ds-grid');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var Grid = require('@elliemae/ds-basic/Grid');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
-var FullPageContainer_FullPageContainer = require('../FullPageContainer/FullPageContainer.js');
-require('../FullPageContainer/FullPageContainerScroll.js');
-var PageSummary_Tags = require('./Tags.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('../FullPageContainer/useMobileHeight.js');
-require('@babel/runtime/helpers/slicedToArray');
+var FullPageContainer = require('../FullPageContainer/FullPageContainer.js');
 require('@babel/runtime/helpers/defineProperty');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('@elliemae/ds-basic');
+require('react/jsx-runtime');
+var Tags = require('./Tags.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Body = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const Body = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
   componentId: "sc-1jlvilw-0"
-})(["margin:0 auto;width:100%;@media (min-width:", "){", "}"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.breakpoints.small;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return "width: ".concat(dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25), ";");
-});
-
-var PageSummary = function PageSummary(_ref3) {
-  var _ref3$header = _ref3.header,
-      header = _ref3$header === void 0 ? null : _ref3$header,
-      _ref3$headerZIndex = _ref3.headerZIndex,
-      headerZIndex = _ref3$headerZIndex === void 0 ? 1 : _ref3$headerZIndex,
-      _ref3$bodyPrimary = _ref3.bodyPrimary,
-      bodyPrimary = _ref3$bodyPrimary === void 0 ? null : _ref3$bodyPrimary,
-      _ref3$actions = _ref3.actions,
-      actions = _ref3$actions === void 0 ? null : _ref3$actions,
-      _ref3$actionsZIndex = _ref3.actionsZIndex,
-      actionsZIndex = _ref3$actionsZIndex === void 0 ? 1 : _ref3$actionsZIndex,
-      _ref3$bodySecondary = _ref3.bodySecondary,
-      bodySecondary = _ref3$bodySecondary === void 0 ? null : _ref3$bodySecondary;
-  return /*#__PURE__*/React__default['default'].createElement(FullPageContainer_FullPageContainer.DSFullPageContainer, null, header && /*#__PURE__*/React__default['default'].createElement(PageSummary_Tags.Header, {
-    zIndex: headerZIndex
-  }, header), /*#__PURE__*/React__default['default'].createElement(PageSummary_Tags.Section, null, /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, null, /*#__PURE__*/React__default['default'].createElement(Body, null, bodyPrimary)), /*#__PURE__*/React__default['default'].createElement(PageSummary_Tags.Toolbar, {
-    zIndex: actionsZIndex
-  }, actions), /*#__PURE__*/React__default['default'].createElement(PageSummary_Tags.BodyWrapper, null, /*#__PURE__*/React__default['default'].createElement(Body, null, bodySecondary))));
-};
-
-PageSummary.propTypes = {
-  header: PropTypes__default['default'].element,
-  bodyPrimary: PropTypes__default['default'].element,
-  actions: PropTypes__default['default'].element,
-  bodySecondary: PropTypes__default['default'].element,
-  headerZIndex: PropTypes__default['default'].number,
-  actionsZIndex: PropTypes__default['default'].number
-};
-var DSPageSummary = PageSummary;
+})(["margin:0 auto;width:100%;@media (min-width:", "){", "}"], ({
+  theme
+}) => theme.breakpoints.small, ({
+  theme
+}) => "width: ".concat(dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl), 6.25), ";"));
+
+const PageSummary = ({
+  header = null,
+  headerZIndex = 1,
+  bodyPrimary = null,
+  actions = null,
+  actionsZIndex = 1,
+  bodySecondary = null
+}) => /*#__PURE__*/_jsx__default["default"](FullPageContainer.DSFullPageContainer, {}, void 0, header && /*#__PURE__*/_jsx__default["default"](Tags.Header, {
+  zIndex: headerZIndex
+}, void 0, header), /*#__PURE__*/_jsx__default["default"](Tags.Section, {}, void 0, /*#__PURE__*/_jsx__default["default"](Grid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](Body, {}, void 0, bodyPrimary)), /*#__PURE__*/_jsx__default["default"](Tags.Toolbar, {
+  zIndex: actionsZIndex
+}, void 0, actions), /*#__PURE__*/_jsx__default["default"](Tags.BodyWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](Body, {}, void 0, bodySecondary))));
+
+const DSPageSummary = PageSummary;
 
 exports.DSPageSummary = DSPageSummary;
-//# sourceMappingURL=PageSummary.js.map

package/cjs/PageSummary/Tags.js

@@ -8,24 +8,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Header = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Header = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1bwtial-0"
-})(["position:fixed;display:grid;top:0;left:0;width:100%;height:64px;z-index:", ";"], function (_ref) {
-  var zIndex = _ref.zIndex;
-  return zIndex;
-});
-var Toolbar = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["position:fixed;display:grid;top:0;left:0;width:100%;height:64px;z-index:", ";"], ({
+  zIndex
+}) => zIndex);
+const Toolbar = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1bwtial-1"
-})(["position:sticky;left:0;top:64px;background:", ";z-index:", ";"], function (props) {
-  return props.theme.colors.neutral['000'];
-}, function (_ref2) {
-  var zIndex = _ref2.zIndex;
-  return zIndex;
-});
-var BodyWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["position:sticky;left:0;top:64px;background:", ";z-index:", ";"], props => props.theme.colors.neutral['000'], ({
+  zIndex
+}) => zIndex);
+const BodyWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1bwtial-2"
 })(["position:relative;display:grid;top:0;left:0;height:100%;"]);
-var Section = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Section = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1bwtial-3"
 })(["position:relative;top:64px;height:100%;"]);
 
@@ -33,4 +29,3 @@ exports.BodyWrapper = BodyWrapper;
 exports.Header = Header;
 exports.Section = Section;
 exports.Toolbar = Toolbar;
-//# sourceMappingURL=Tags.js.map

package/cjs/SideNav/SideNav.js

@@ -2,39 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var Backdrop = require('@elliemae/ds-backdrop');
-var dsIcons = require('@elliemae/ds-icons');
-var dsIcon = require('@elliemae/ds-icon');
+var dsBasic = require('@elliemae/ds-basic');
+var Close = require('@elliemae/ds-icons/Close');
+var Icon = require('@elliemae/ds-basic/Icon');
 var reactDesc = require('react-desc');
 var lodash = require('lodash');
-var Icons_EM_logo = require('../Icons/EM_logo.js');
-var SideNav_styles = require('./styles.js');
-require('styled-components');
+var EM_logo = require('../Icons/EM_logo.js');
+var styles = require('./styles.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var DSSideNav = function DSSideNav(_ref) {
-  var _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      title = _ref.title,
-      _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? lodash.noop : _ref$onClose,
-      _ref$menuItems = _ref.menuItems,
-      menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
-      _ref$bottomMenuItems = _ref.bottomMenuItems,
-      bottomMenuItems = _ref$bottomMenuItems === void 0 ? [] : _ref$bottomMenuItems;
-
-  var _useState = React.useState(-1),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      selectedMenuItemIdx = _useState2[0],
-      setSelectedMenuItem = _useState2[1];
-
-  var menuItemClick = function menuItemClick(idx, text, cb) {
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
+
+var _span, _Hr, _hr;
+
+const DSSideNav = ({
+  containerProps = {},
+  title,
+  onClose = lodash.noop,
+  menuItems = [],
+  bottomMenuItems = []
+}) => {
+  const [selectedMenuItemIdx, setSelectedMenuItem] = React.useState(-1);
+
+  const menuItemClick = (idx, text, cb) => {
     if (cb) {
       cb(idx, text);
     }
@@ -42,65 +38,57 @@ var DSSideNav = function DSSideNav(_ref) {
     setSelectedMenuItem(idx);
   };
 
-  var renderMenuList = function renderMenuList() {
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, menuItems.length > 0 ? /*#__PURE__*/React__default['default'].createElement(SideNav_styles.MenuList, null, menuItems.map(function (_ref2, idx) {
-      var icon = _ref2.icon,
-          text = _ref2.text,
-          onClick = _ref2.onClick;
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        key: idx,
-        className: "menuitem",
-        onClick: menuItemClick.bind(null, idx, text, onClick)
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "icon"
-      }, icon), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "text ".concat(idx === selectedMenuItemIdx ? 'active' : '')
-      }, text));
-    })) : null);
-  };
-
-  var renderBottomMenu = function renderBottomMenu() {
-    return /*#__PURE__*/React__default['default'].createElement(SideNav_styles.MenuList, null, bottomMenuItems.map(function (_ref3, idx) {
-      var icon = _ref3.icon,
-          text = _ref3.text,
-          _onClick = _ref3.onClick;
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        key: idx,
-        className: "menuitem",
-        onClick: function onClick() {
-          return _onClick(idx, text);
-        }
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "icon"
-      }, icon), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "text"
-      }, text));
-    }));
-  };
+  const renderMenuList = () => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: menuItems.length > 0 ? /*#__PURE__*/_jsx__default["default"](styles.MenuList, {}, void 0, menuItems.map(({
+      icon,
+      text,
+      onClick
+    }, idx) => /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "menuitem",
+      onClick: menuItemClick.bind(null, idx, text, onClick)
+    }, idx, /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "icon"
+    }, void 0, icon), /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "text ".concat(idx === selectedMenuItemIdx ? 'active' : '')
+    }, void 0, text)))) : null
+  });
+
+  const renderBottomMenu = () => /*#__PURE__*/_jsx__default["default"](styles.MenuList, {}, void 0, bottomMenuItems.map(({
+    icon,
+    text,
+    onClick
+  }, idx) => /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "menuitem",
+    onClick: () => onClick(idx, text)
+  }, idx, /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "icon"
+  }, void 0, icon), /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "text"
+  }, void 0, text))));
 
-  return /*#__PURE__*/React__default['default'].createElement(SideNav_styles.Container, {
+  return /*#__PURE__*/_jsx__default["default"](styles.Container, {
     "data-testid": containerProps['data-testid'] || 'global-header-menu'
-  }, /*#__PURE__*/React__default['default'].createElement(Backdrop.DSBackdrop, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsBasic.DSBackdrop, {
     onClick: onClose,
     type: "cover"
-  }), /*#__PURE__*/React__default['default'].createElement(SideNav_styles.Menu, null, /*#__PURE__*/React__default['default'].createElement(SideNav_styles.MenuWrapper, null, /*#__PURE__*/React__default['default'].createElement(SideNav_styles.Heading, null, /*#__PURE__*/React__default['default'].createElement(SideNav_styles.Icon, null, Icons_EM_logo()), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/_jsx__default["default"](styles.Menu, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.MenuWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Heading, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Icon, {}, void 0, EM_logo()), /*#__PURE__*/_jsx__default["default"]("div", {
     className: "content"
-  }, /*#__PURE__*/React__default['default'].createElement("label", null, title), /*#__PURE__*/React__default['default'].createElement("span", null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("label", {}, void 0, title), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {})), /*#__PURE__*/_jsx__default["default"]("div", {
     className: "icon"
-  }, /*#__PURE__*/React__default['default'].createElement(dsIcons.Close, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Close__default["default"], {
     onClick: onClose,
-    size: dsIcon.DSIconSizes.S,
-    color: dsIcon.DSIconColors.WHITE
-  })))), /*#__PURE__*/React__default['default'].createElement(SideNav_styles.Hr, null), renderMenuList(), bottomMenuItems.length > 0 ? /*#__PURE__*/React__default['default'].createElement(SideNav_styles.BottomMenu, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    size: Icon.DSIconSizes.S,
+    color: Icon.DSIconColors.WHITE
+  })))), _Hr || (_Hr = /*#__PURE__*/_jsx__default["default"](styles.Hr, {})), renderMenuList(), bottomMenuItems.length > 0 ? /*#__PURE__*/_jsx__default["default"](styles.BottomMenu, {}, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
     className: "content"
-  }, /*#__PURE__*/React__default['default'].createElement("hr", null), renderBottomMenu())) : null)));
+  }, void 0, _hr || (_hr = /*#__PURE__*/_jsx__default["default"]("hr", {})), renderBottomMenu())) : null)));
 };
 
-var menuProps = reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+const menuProps = reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
   icon: reactDesc.PropTypes.element,
   text: reactDesc.PropTypes.string
 }));
-var navProps = {
+const navProps = {
   /** inject props to wrapper element of side nav */
   containerProps: reactDesc.PropTypes.object.description('inject props to wrapper element of side nav'),
 
@@ -124,10 +112,8 @@ var navProps = {
    */
   bottomMenuItems: menuProps.description('Bottom Menu items array')
 };
-DSSideNav.propTypes = navProps;
-var DSSideNavWithSchema = reactDesc.describe(DSSideNav).description('Side navigation for mobile and tablet');
+const DSSideNavWithSchema = reactDesc.describe(DSSideNav).description('Side navigation for mobile and tablet');
 DSSideNavWithSchema.propTypes = navProps;
 
 exports.DSSideNav = DSSideNav;
 exports.DSSideNavWithSchema = DSSideNavWithSchema;
-//# sourceMappingURL=SideNav.js.map

package/cjs/SideNav/index.js

@@ -2,20 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SideNav_SideNav = require('./SideNav.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('react');
-require('@elliemae/ds-backdrop');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-icon');
-require('react-desc');
-require('lodash');
-require('../Icons/EM_logo.js');
-require('./styles.js');
-require('styled-components');
+var SideNav = require('./SideNav.js');
 
 
 
-exports.DSSideNav = SideNav_SideNav.DSSideNav;
-exports.DSSideNavWithSchema = SideNav_SideNav.DSSideNavWithSchema;
-//# sourceMappingURL=index.js.map
+exports.DSSideNav = SideNav.DSSideNav;
+exports.DSSideNavWithSchema = SideNav.DSSideNavWithSchema;

package/cjs/SideNav/styles.js

@@ -8,56 +8,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Container = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10h55hr-0"
 })(["position:fixed;width:100%;height:100%;"]);
-var MenuWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const MenuWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10h55hr-1"
 })(["position:relative;height:100%;"]);
-var Menu = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Menu = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10h55hr-2"
-})(["position:fixed;width:80%;height:100%;background-color:", ";font-family:", ";box-shadow:5px 0 5px ", ";padding:", ";"], function (props) {
-  return props.theme.colors.brand[700];
-}, function (props) {
-  return props.theme.fonts.default;
-}, function (props) {
-  return props.theme.colors.neutral[600];
-}, function (props) {
-  return props.theme.space.xs;
-});
-var Heading = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["position:fixed;width:80%;height:100%;background-color:", ";font-family:", ";box-shadow:5px 0 5px ", ";padding:", ";"], props => props.theme.colors.brand[700], props => props.theme.fonts.default, props => props.theme.colors.neutral[600], props => props.theme.space.xs);
+const Heading = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10h55hr-3"
-})(["display:flex;flex-direction:row;.content{width:100%;display:flex;flex-direction:row;span{flex-grow:1;}label{padding-top:1px;line-height:30px;font-weight:", ";font-size:22px;color:", ";}.icon{cursor:pointer;padding-top:6px;}}"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.colors.neutral['000'];
-});
-var Icon = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["display:flex;flex-direction:row;.content{width:100%;display:flex;flex-direction:row;span{flex-grow:1;}label{padding-top:1px;line-height:30px;font-weight:", ";font-size:22px;color:", ";}.icon{cursor:pointer;padding-top:6px;}}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['000']);
+const Icon = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10h55hr-4"
-})(["margin-right:", ";"], function (props) {
-  return props.theme.space.xxs2;
-});
-var Hr = /*#__PURE__*/styled__default['default'].hr.withConfig({
+})(["margin-right:", ";"], props => props.theme.space.xxs2);
+const Hr = /*#__PURE__*/styled__default["default"].hr.withConfig({
   componentId: "sc-10h55hr-5"
-})(["margin-left:-", ";margin-right:-", ";"], function (props) {
-  return props.theme.space.xs;
-}, function (props) {
-  return props.theme.space.xs;
-});
-var MenuList = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["margin-left:-", ";margin-right:-", ";"], props => props.theme.space.xs, props => props.theme.space.xs);
+const MenuList = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10h55hr-6"
-})([".menuitem{display:flex;flex-direction:row;cursor:pointer;height:22px;margin-bottom:", ";.icon{padding-left:6px;margin-right:", ";span{height:20px;width:20px;svg{height:20px;width:20px;}}}.text{font-weight:", ";font-size:18px;line-height:22px;color:", ";&.active{font-weight:", ";}}&:last-child{margin-bottom:0;}}"], function (props) {
-  return props.theme.space.xs;
-}, function (props) {
-  return props.theme.space.xs;
-}, function (props) {
-  return props.theme.fontWeights.regular;
-}, function (props) {
-  return props.theme.colors.neutral['000'];
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-});
-var BottomMenu = /*#__PURE__*/styled__default['default'].div.withConfig({
+})([".menuitem{display:flex;flex-direction:row;cursor:pointer;height:22px;margin-bottom:", ";.icon{padding-left:6px;margin-right:", ";span{height:20px;width:20px;svg{height:20px;width:20px;}}}.text{font-weight:", ";font-size:18px;line-height:22px;color:", ";&.active{font-weight:", ";}}&:last-child{margin-bottom:0;}}"], props => props.theme.space.xs, props => props.theme.space.xs, props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['000'], props => props.theme.fontWeights.semibold);
+const BottomMenu = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-10h55hr-7"
 })(["position:absolute;bottom:0;width:100%;"]);
 
@@ -69,4 +41,3 @@ exports.Icon = Icon;
 exports.Menu = Menu;
 exports.MenuList = MenuList;
 exports.MenuWrapper = MenuWrapper;
-//# sourceMappingURL=styles.js.map