@elliemae/ds-mobile 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/MobileCard/Card.js

@@ -1,15 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useRef } from 'react';
-import { PropTypes, describe } from 'react-desc';
+import { describe } from 'react-desc';
 import styled from 'styled-components';
 import { padding } from 'styled-system';
 import { truncate, toMobile, color, __UNSAFE_SPACE_TO_DIMSUM, border, withTheme, op } from '@elliemae/ds-system';
 import GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { StyledCard } from './StyledCard.js';
 import { ExpandChevron } from './ExpandChevron.js';
 import { useHeight } from './useHeight.js';
 import { ExpandableRegion } from './ExpandableRegion.js';
+import { cardPropsTypes } from './props.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
@@ -17,7 +20,7 @@ const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
 })(["", ""], truncate());
 const Title = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-1"
-})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], padding, truncate(), props => props.theme.fontWeights.semibold, props => toMobile(props.theme.fontSizes.title[600]), color('neutral', '800'));
+})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], padding, truncate(), props => props.theme.fontWeights.semibold, props => toMobile(props.theme.fontSizes.title[600]), color('neutral', 800));
 const Detail = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-10tpzm8-2"
 })(["", " ", " font-size:", ";font-weight:", ";"], padding, truncate(), props => toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
@@ -26,7 +29,7 @@ const SubText = /*#__PURE__*/styled.span.withConfig({
 })(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), truncate(), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
 const SubTextWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-4"
-})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], truncate(), props => border(props.theme.colors.neutral['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => toMobile(props.theme.fontSizes.subTitle[400]), color('neutral', '500'), props => props.theme.fontWeights.regular);
+})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], truncate(), props => border(props.theme.colors.neutral['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => toMobile(props.theme.fontSizes.subTitle[400]), color('neutral', 500), props => props.theme.fontWeights.regular);
 const LeftIcon = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-10tpzm8-5"
 })(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
@@ -34,28 +37,31 @@ const CenterWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-10tpzm8-6"
 })(["display:flex;align-items:center;", ""], truncate());
 
-const MobileCard = ({
-  children,
-  height = 'm',
-  leftAddOn,
-  leftProp,
-  rightProp,
-  subText,
-  subIcons,
-  details,
-  theme,
-  expandable = false,
-  expandedContent,
-  value
-}) => {
-  var _TitleEllipsis, _SubText;
+const MobileCard = _ref => {
+  var _TitleEllipsis, _SubText, _Grid;
 
+  let {
+    children,
+    height = 'm',
+    leftAddOn,
+    leftProp,
+    rightProp,
+    subText,
+    subIcons,
+    details,
+    theme,
+    expandable = false,
+    expandedContent,
+    value,
+    cardContent
+  } = _ref;
   const subTextRef = useRef(null);
   const subTextHeight = useHeight(subTextRef);
   const isJustChildren = !(subText || subIcons || details);
   const halfM = op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
   return /*#__PURE__*/_jsx(GroupItem, {
-    render: (context = {}) => {
+    render: function () {
+      let context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
         activeValue,
         onChange
@@ -94,7 +100,7 @@ const MobileCard = ({
       }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx(TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx(Grid, {
         "data-testid": "card-details",
         cols: details.map(() => 'min-content'),
-        mb: !(subText || subIcons) && halfM,
+        mb: !(subText || subIcons) && halfM || 0,
         pt: op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
       }, void 0, details.map((d, i) => /*#__PURE__*/_jsx(Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx(Detail, {
         px: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
@@ -113,66 +119,13 @@ const MobileCard = ({
       }), /*#__PURE__*/_jsx(ExpandableRegion, {
         show: selected,
         content: expandedContent
-      })));
+      }), cardContent && (_Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}, void 0, cardContent)))));
     }
   });
 };
 
-const props = {
-  /**
-   * card height
-   */
-  height: PropTypes.oneOf(['s', 'm']).description('card height'),
-
-  /**
-   * Defines mobile card title
-   */
-  children: PropTypes.string.isRequired.description('Defines mobile card title'),
-
-  /**
-   * Wheter if the card is expandable or not
-   */
-  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),
-
-  /**
-   * content to display in expand card section
-   */
-  expandedContent: PropTypes.element.description('content to display in expand card section'),
-
-  /**
-   * Icon to the left of the card. Size is adjusted automatically.
-   */
-  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
-
-  /**
-   * Pass an element to render left. For example a Button with an icon
-   */
-  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
-   */
-  rightProp: PropTypes.arrayOf(PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 strings
-   */
-  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),
-
-  /**
-   * SubIcons component
-   */
-  subIcons: PropTypes.element.description('SubIcons component'),
-
-  /**
-   * Pass an array of 1, 2 or 3 strings
-   */
-  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
-  theme: PropTypes.object.isRequired.description(''),
-  value: PropTypes.number.description('')
-};
 const DSMobileCardWithSchema = describe(MobileCard);
-DSMobileCardWithSchema.propTypes = props;
+DSMobileCardWithSchema.propTypes = cardPropsTypes;
 var MobileCard$1 = withTheme(MobileCard);
 
 export { DSMobileCardWithSchema, MobileCard$1 as default };

package/esm/MobileCard/CardIcons.js

@@ -1,24 +1,29 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'react';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 
 const CardIconsWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1vqygz1-0"
 })(["align-items:center;span,svg{width:12px !important;height:12px !important;}span.icon-color-muted svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-warn svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-error svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-success svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-primary svg,svg:not([fill]){fill:", ";}span.icon-color-primary svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.neutral['600'], props => props.theme.colors.neutral['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.danger['900'], props => props.theme.colors.danger['900'], props => props.theme.colors.success['900'], props => props.theme.colors.success['900'], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]);
-const SubIcons = ({
-  icons = [],
-  colors = []
-}) => /*#__PURE__*/_jsx(CardIconsWrapper, {
-  cols: icons.map(() => '12px'),
-  gutter: "6px",
-  height: "14px",
-  "data-testid": "card-subIcons"
-}, void 0, icons.map((Icon, i) =>
-/*#__PURE__*/
-// eslint-disable-next-line react/no-array-index-key
-_jsx(Icon, {
-  className: `icon-color-${colors[i] || 'muted'}`
-}, i)));
+const SubIcons = _ref => {
+  let {
+    icons = [],
+    colors = []
+  } = _ref;
+  return /*#__PURE__*/_jsx(CardIconsWrapper, {
+    cols: icons.map(() => '12px'),
+    gutter: "6px",
+    height: "14px",
+    "data-testid": "card-subIcons"
+  }, void 0, icons.map((Icon, i) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _jsx(Icon, {
+    className: "icon-color-".concat(colors[i] || 'muted')
+  }, i)));
+};
 
 export { SubIcons };

package/esm/MobileCard/ExpandChevron.js

@@ -1,18 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import styled from 'styled-components';
-import ChevronDownIcon from '@elliemae/ds-icons/ChevronDown';
-import ChevronRight from '@elliemae/ds-icons/ChevronRight';
+import { ChevronDown, ChevronRight } from '@elliemae/ds-icons';
 
 const ChevronWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1l0ask2-0"
 })(["margin-top:", ";align-self:", ";margin-left:", ";"], props => props.align === 'top' ? '18px' : '0', props => props.align === 'top' ? 'flex-start' : 'center', props => props.theme.space.xs);
-const ExpandChevron = ({
-  isExpanded,
-  onClick,
-  align
-}) => {
-  const Chevron = isExpanded ? ChevronDownIcon : ChevronRight;
+const ExpandChevron = _ref => {
+  let {
+    isExpanded,
+    onClick,
+    align
+  } = _ref;
+  const Chevron = isExpanded ? ChevronDown : ChevronRight;
   return /*#__PURE__*/_jsx(ChevronWrap, {
     "data-testid": "ds-card-expand-chevron",
     align: align

package/esm/MobileCard/ExpandableRegion.js

@@ -1,4 +1,5 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { truncate, border } from '@elliemae/ds-system';
@@ -9,15 +10,14 @@ const RegionWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["width:100%;height:100%;"]);
 const Region = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-mduzz9-1"
-})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? `
-      max-height: ${props.refHeight}px;
-    ` : '', truncate(), props => border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
-const ExpandableRegion = ({
-  show,
-  content
-}) => {
+})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '', truncate(), props => border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
+const ExpandableRegion = _ref => {
   var _ref$current;
 
+  let {
+    show,
+    content
+  } = _ref;
   const ref = useRef(null); // triggers transition
 
   const [animate, setAnimate] = useState(show); // needed to properly handle the transition. Hide after transition ends

package/esm/MobileCard/Group.js

@@ -1,34 +1,40 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React from 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
 import Group from '@elliemae/ds-shared/GroupContext/Group';
-import { Grid } from '@elliemae/ds-basic/Grid';
+import { Grid } from '@elliemae/ds-grid';
 import { truncate, __UNSAFE_SPACE_TO_DIMSUM, color, border, withTheme } from '@elliemae/ds-system';
 import { StyledCard } from './StyledCard.js';
 
 const GroupGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-17xukaf-0"
-})(["", "{border-top:none;}", ""], StyledCard, ({
-  theme,
-  withTopBorder
-}) => withTopBorder ? `border-top: ${border(theme.colors.neutral['100'])}` : '');
+})(["", "{border-top:none;}", ""], StyledCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(border(theme.colors.neutral['100'])) : '';
+});
 const GroupTitle = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-17xukaf-1"
 })(["", ""], truncate());
 const GroupTitleGrid = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-17xukaf-2"
-})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)} / 2)`, color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => border(props.theme.colors.brand['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => border(props.theme.colors.neutral['080']));
+})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => "calc(".concat(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => border(props.theme.colors.brand['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => border(props.theme.colors.neutral['080']));
 
-const MobileCardGroup = ({
-  children,
-  theme,
-  title,
-  action,
-  activeValue,
-  allowMultipleOpen = false,
-  onChange = () => null
-}) => {
+const MobileCardGroup = _ref2 => {
+  let {
+    children,
+    theme,
+    title,
+    action,
+    activeValue,
+    allowMultipleOpen = false,
+    onChange = () => null
+  } = _ref2;
   const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
   return /*#__PURE__*/_jsx(Group, {
     activeValue: activeValue,

package/esm/MobileCard/props.js

@@ -0,0 +1,58 @@
+import { PropTypes } from 'react-desc';
+
+const cardPropsTypes = {
+  /**
+   * card height
+   */
+  height: PropTypes.oneOf(['s', 'm']).description('card height'),
+
+  /**
+   * Defines mobile card title
+   */
+  children: PropTypes.string.description('Defines mobile card title').isRequired,
+
+  /**
+   * Wheter if the card is expandable or not
+   */
+  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),
+
+  /**
+   * content to display in expand card section
+   */
+  expandedContent: PropTypes.element.description('content to display in expand card section'),
+
+  /**
+   * Icon to the left of the card. Size is adjusted automatically.
+   */
+  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
+
+  /**
+   * Pass an element to render left. For example a Button with an icon
+   */
+  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
+   */
+  rightProp: PropTypes.arrayOf(PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 strings
+   */
+  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),
+
+  /**
+   * SubIcons component
+   */
+  subIcons: PropTypes.element.description('SubIcons component'),
+
+  /**
+   * Pass an array of 1, 2 or 3 strings
+   */
+  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
+  theme: PropTypes.object.description('').isRequired,
+  value: PropTypes.number.description(''),
+  cardContent: PropTypes.node.description('JSX content for the card')
+};
+
+export { cardPropsTypes };

package/esm/MobileCard/useHeight.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect } from 'react';
 import { rem } from 'polished';
 

package/esm/MobileContextMenu/MobileContextMenu.js

@@ -1,11 +1,19 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useState, useRef, useEffect } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+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 React, { useState, useMemo, useRef } from 'react';
 import { noop } from 'lodash';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic/Grid';
-import { DSBackdrop } from '@elliemae/ds-basic';
+import { Grid } from '@elliemae/ds-grid';
+import { DSBackdrop } from '@elliemae/ds-backdrop';
 import { truncate, withTheme } from '@elliemae/ds-system';
 import Group from '@elliemae/ds-shared/GroupContext/Group';
 import { DSMobileContextMenuGroup } from './MobileContextMenuGroup.js';
@@ -18,7 +26,7 @@ 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 StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-15ys5tq-0"
-})(["background:", ";z-index:", ";width:", ";position:fixed;bottom:0;left:", ";max-height:90vh;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 0px 24px 0 rgba(0,0,0,0.5),0 0px 11px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.zIndex, props => `calc(100% - ${props.theme.space.xs})`, props => props.theme.space.xxs);
+})(["background:", ";z-index:", ";width:", ";position:fixed;bottom:0;left:", ";max-height:90vh;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 0px 24px 0 rgba(0,0,0,0.5),0 0px 11px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.zIndex, props => "calc(100% - ".concat(props.theme.space.xs, ")"), props => props.theme.space.xxs);
 const StyledTitle = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-15ys5tq-1"
 })(["font-size:16px;font-weight:", ";color:", ";", " & > span{height:20px;width:20px;}& > span > svg,svg:not([fill]){height:20px;width:20px;fill:", ";}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['000'], truncate(), props => props.theme.colors.neutral['000']);
@@ -28,33 +36,33 @@ const HeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
 
 const isArr = prop => Array.isArray(prop);
 
-const DSMobileContextMenu = withTheme(({
-  open = false,
-  title = '',
-  multiple = false,
-  singleSelect = false,
-  onChange = noop,
-  onClickOutside = noop,
-  children,
-  theme,
-  backdropZIndex,
-  zIndex = 1,
-  dataTestid = 'mobile-context-menu',
-  buttonFooter = null,
-  onApply = noop,
-  selecteds: initSelecteds
-}) => {
+const DSMobileContextMenu = withTheme(_ref => {
+  let {
+    open = false,
+    title = '',
+    multiple = false,
+    singleSelect = false,
+    onChange = noop,
+    onClickOutside = noop,
+    children,
+    theme,
+    backdropZIndex,
+    zIndex = 1,
+    dataTestid = 'mobile-context-menu',
+    buttonFooter = null,
+    onApply = noop,
+    selecteds: initSelecteds
+  } = _ref;
   const [selectedItems, setSelectedItems] = useState([]);
+  const trueSelected = useMemo(() => initSelecteds !== undefined ? initSelecteds : [...selectedItems], [initSelecteds, selectedItems]);
   const containerRef = useRef(null);
-  useEffect(() => {
-    if (typeof initSelecteds !== 'undefined') {
-      if (multiple) setSelectedItems(prev => [...prev, ...initSelecteds]);else if (singleSelect) setSelectedItems(initSelecteds);
-    }
-  }, [initSelecteds, multiple, singleSelect]);
 
   const handleChange = (value, childProps, event) => {
     onChange(value, childProps, event);
-    if (multiple) setSelectedItems([...value]);else if (singleSelect) setSelectedItems(value);
+
+    if (initSelecteds === undefined) {
+      if (multiple) setSelectedItems([...value]);else if (singleSelect) setSelectedItems(value);
+    }
   };
 
   const handleApply = function (e) {
@@ -97,7 +105,7 @@ const DSMobileContextMenu = withTheme(({
           overflow: 'auto'
         }
       }, void 0, /*#__PURE__*/_jsx(Group, {
-        activeValue: selectedItems,
+        activeValue: trueSelected,
         multiple: multiple,
         onChange: handleChange
       }, void 0, React.Children.map(children, (child, ii) => {
@@ -109,15 +117,15 @@ const DSMobileContextMenu = withTheme(({
         } = child.props;
         const value = ii;
         let isSelected;
-        if (singleSelect) isSelected = selectedItems === value;else if (multiple) isSelected = selectedItems.includes(value);
+        if (singleSelect) isSelected = trueSelected === value;else if (multiple) isSelected = trueSelected.includes(value);
         return /*#__PURE__*/React.cloneElement(child, {
           value,
-          key: `cm.${ii}`,
+          key: "cm.".concat(ii),
           isMulti: multiple,
           singleSelect,
           isSelected,
           onClick: !isGroup ? e => onClick(e, child.props) : null,
-          selectedItems: isGroup ? selectedItems : null
+          selectedItems: isGroup ? trueSelected : null
         });
       })))), buttonFooter && /*#__PURE__*/_jsx(Grid, {
         pl: "xs",
@@ -125,7 +133,7 @@ const DSMobileContextMenu = withTheme(({
         alignItems: "center"
       }, void 0, /*#__PURE__*/React.cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
         containerProps: {
-          'data-testid': `${dataTestid}--btn`
+          'data-testid': "".concat(dataTestid, "--btn")
         },
         buttonType: 'primary',
         size: 'l',

package/esm/MobileContextMenu/MobileContextMenuGroup.js

@@ -1,8 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+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 React from 'react';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-basic';
+import { Grid } from '@elliemae/ds-grid';
 import { noop } from 'lodash';
 import { PropTypes, describe } from 'react-desc';
 
@@ -13,32 +20,35 @@ const Title = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-atfpfh-0"
 })(["height:24px;line-height:24px;font-size:12px;border-top:1px solid ", ";background:", ";padding:0 ", ";color:", ";font-weight:", ";"], props => props.theme.colors.brand['300'], props => props.theme.colors.brand['200'], props => props.theme.space.xs, props => props.theme.colors.neutral['700'], props => props.theme.fontWeights.semibold);
 
-const DSMobileContextMenuGroup = ({
-  title,
-  isMulti,
-  singleSelect,
-  children,
-  value: groupValue,
-  selectedItems
-}) => /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, title)), /*#__PURE__*/_jsx(Grid, {}, void 0, React.Children.map(children, (child, index) => {
-  const {
-    onClick = noop
-  } = child.props;
-  const value = `${groupValue}:${index}`;
-  let isSelected;
-  if (singleSelect) isSelected = selectedItems === value;else if (isMulti) isSelected = selectedItems.includes(value);
-  return /*#__PURE__*/React.cloneElement(child, {
-    value,
-    key: 'group.'.concat(index),
-    isGroup: true,
+const DSMobileContextMenuGroup = _ref => {
+  let {
+    title,
     isMulti,
     singleSelect,
-    isSelected,
-    onClick: e => onClick(e, _objectSpread({
-      value
-    }, child.props))
-  });
-})));
+    children,
+    value: groupValue,
+    selectedItems
+  } = _ref;
+  return /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, title)), /*#__PURE__*/_jsx(Grid, {}, void 0, React.Children.map(children, (child, index) => {
+    const {
+      onClick = noop
+    } = child.props;
+    const value = "".concat(groupValue, ":").concat(index);
+    let isSelected;
+    if (singleSelect) isSelected = selectedItems === value;else if (isMulti) isSelected = selectedItems.includes(value);
+    return /*#__PURE__*/React.cloneElement(child, {
+      value,
+      key: 'group.'.concat(index),
+      isGroup: true,
+      isMulti,
+      singleSelect,
+      isSelected,
+      onClick: e => onClick(e, _objectSpread({
+        value
+      }, child.props))
+    });
+  })));
+};
 
 const props = {
   /**