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

package/esm/MobileCard/index.js

@@ -4,26 +4,8 @@ import MobileGroup from './Group.js';
 export { DSMobileCardGroupWithSchema } from './Group.js';
 export { ActionAddon } from './ActionAddon.js';
 export { SubIcons } from './CardIcons.js';
-import 'react';
-import 'react-desc';
-import 'styled-components';
-import 'styled-system';
-import '@elliemae/ds-system';
-import '@elliemae/ds-shared/GroupContext/GroupItem';
-import '@elliemae/ds-grid';
-import './StyledCard.js';
-import './ExpandChevron.js';
-import 'prop-types';
-import '@elliemae/ds-icons';
-import './useHeight.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'polished';
-import './ExpandableRegion.js';
-import '@elliemae/ds-shared/GroupContext/Group';
-import '@elliemae/ds-button';
 
 MobileCard.Group = MobileGroup;
-var DSMobileCard = MobileCard;
+const DSMobileCard = MobileCard;
 
 export { DSMobileCard };
-//# sourceMappingURL=index.js.map

package/esm/MobileCard/useHeight.js

@@ -1,4 +1,4 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect } from 'react';
 import { rem } from 'polished';
 
@@ -7,20 +7,12 @@ function getCurrentFont() {
 }
 
 function useHeight(ref) {
-  var _useState = useState('0rem'),
-      _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1];
-
-  var _useState3 = useState(13),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentFont = _useState4[0],
-      setCurrentFont = _useState4[1];
-
-  useEffect(function () {
+  const [height, setHeight] = useState('0rem');
+  const [currentFont, setCurrentFont] = useState(13);
+  useEffect(() => {
     setCurrentFont(getCurrentFont());
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (ref.current && height !== rem(ref.current.clientHeight, currentFont)) {
       setHeight(rem(ref.current.clientHeight, currentFont));
     }
@@ -29,4 +21,3 @@ function useHeight(ref) {
 }
 
 export { useHeight };
-//# sourceMappingURL=useHeight.js.map

package/esm/MobileContextMenu/MobileContextMenu.js

@@ -1,169 +1,140 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.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-grid';
-import { DSBackdrop } from '@elliemae/ds-backdrop';
+import { Grid } from '@elliemae/ds-basic/Grid';
+import { DSBackdrop } from '@elliemae/ds-basic';
 import { truncate, withTheme } from '@elliemae/ds-system';
 import Group from '@elliemae/ds-shared/GroupContext/Group';
 import { DSMobileContextMenuGroup } from './MobileContextMenuGroup.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _ContextMenuGroup;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = 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; }
-var StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
+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);"], function (props) {
-  return props.theme.colors.neutral['000'];
-}, function (props) {
-  return props.zIndex;
-}, function (props) {
-  return "calc(100% - ".concat(props.theme.space.xs, ")");
-}, function (props) {
-  return props.theme.space.xxs;
-});
-var StyledTitle = /*#__PURE__*/styled(Grid).withConfig({
+})(["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:", ";}"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.colors.neutral['000'];
-}, truncate(), function (props) {
-  return props.theme.colors.neutral['000'];
-});
-var HeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
+})(["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']);
+const HeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-15ys5tq-2"
-})(["border-top-left-radius:5px;border-top-right-radius:5px;background:", ";"], function (props) {
-  return props.theme.colors.brand['600'];
-});
-
-var isArr = function isArr(prop) {
-  return Array.isArray(prop);
-};
-
-var DSMobileContextMenu = withTheme(function (_ref) {
-  var _ref$open = _ref.open,
-      open = _ref$open === void 0 ? false : _ref$open,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
-      _ref$multiple = _ref.multiple,
-      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-      _ref$singleSelect = _ref.singleSelect,
-      singleSelect = _ref$singleSelect === void 0 ? false : _ref$singleSelect,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      _ref$onClickOutside = _ref.onClickOutside,
-      onClickOutside = _ref$onClickOutside === void 0 ? noop : _ref$onClickOutside,
-      children = _ref.children,
-      theme = _ref.theme,
-      backdropZIndex = _ref.backdropZIndex,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex,
-      _ref$dataTestid = _ref.dataTestid,
-      dataTestid = _ref$dataTestid === void 0 ? 'mobile-context-menu' : _ref$dataTestid,
-      _ref$buttonFooter = _ref.buttonFooter,
-      buttonFooter = _ref$buttonFooter === void 0 ? null : _ref$buttonFooter,
-      _ref$onApply = _ref.onApply,
-      onApply = _ref$onApply === void 0 ? noop : _ref$onApply,
-      initSelecteds = _ref.selecteds;
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedItems = _useState2[0],
-      setSelectedItems = _useState2[1];
-
-  var trueSelected = useMemo(function () {
-    return initSelecteds !== undefined ? initSelecteds : _toConsumableArray(selectedItems);
-  }, [initSelecteds, selectedItems]);
-  var containerRef = useRef(null);
-
-  var handleChange = function handleChange(value, childProps, event) {
+})(["border-top-left-radius:5px;border-top-right-radius:5px;background:", ";"], props => props.theme.colors.brand['600']);
+
+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 [selectedItems, setSelectedItems] = useState([]);
+  const trueSelected = useMemo(() => initSelecteds !== undefined ? initSelecteds : [...selectedItems], [initSelecteds, selectedItems]);
+  const containerRef = useRef(null);
+
+  const handleChange = (value, childProps, event) => {
     onChange(value, childProps, event);
 
     if (initSelecteds === undefined) {
-      if (multiple) setSelectedItems(_toConsumableArray(value));else if (singleSelect) setSelectedItems(value);
+      if (multiple) setSelectedItems([...value]);else if (singleSelect) setSelectedItems(value);
     }
   };
 
-  var handleApply = function handleApply(e) {
+  const handleApply = function (e) {
     if (this.onClick) this.onClick(e);
     onApply(e, selectedItems);
   };
 
-  var rows = [theme.space.s, 1];
+  const rows = [theme.space.s, 1];
   if (buttonFooter) rows.push('56px');
   if (!open) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DSBackdrop, {
-    type: "cover",
-    zIndex: backdropZIndex,
-    onClick: function onClick(e) {
-      // PUI-4481 prevent click on elements below backdrop
-      e.stopPropagation();
-      onClickOutside(e);
-    }
-  }), /*#__PURE__*/React.createElement(StyledContainer, {
-    zIndex: zIndex,
-    rows: rows,
-    ref: containerRef,
-    "data-testid": "ds-mobile-context-menu"
-  }, /*#__PURE__*/React.createElement(HeaderContainer, {
-    justifyContent: "center",
-    alignItems: "center",
-    pl: "xs",
-    pr: "xs"
-  }, /*#__PURE__*/React.createElement(StyledTitle, {
-    alignItems: "center",
-    gutter: "xxs",
-    cols: Array(isArr(title) ? title.length : 1).fill('auto')
-  }, title)), /*#__PURE__*/React.createElement(Grid, {
-    style: {
-      overflow: 'hidden'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    style: {
-      overflow: 'auto'
-    }
-  }, /*#__PURE__*/React.createElement(Group, {
-    activeValue: trueSelected,
-    multiple: multiple,
-    onChange: handleChange
-  }, React.Children.map(children, function (child, ii) {
-    var _child$type;
-
-    var isGroup = child.type === React.createElement(DSMobileContextMenuGroup, null).type || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === DSMobileContextMenuGroup.componentType || child.type === DSMobileContextMenuGroup.type;
-    var _child$props$onClick = child.props.onClick,
-        onClick = _child$props$onClick === void 0 ? noop : _child$props$onClick;
-    var value = ii;
-    var isSelected;
-    if (singleSelect) isSelected = trueSelected === value;else if (multiple) isSelected = trueSelected.includes(value);
-    return /*#__PURE__*/React.cloneElement(child, {
-      value: value,
-      key: "cm.".concat(ii),
-      isMulti: multiple,
-      singleSelect: singleSelect,
-      isSelected: isSelected,
-      onClick: !isGroup ? function (e) {
-        return onClick(e, child.props);
-      } : null,
-      selectedItems: isGroup ? trueSelected : null
-    });
-  })))), buttonFooter && /*#__PURE__*/React.createElement(Grid, {
-    pl: "xs",
-    pr: "xs",
-    alignItems: "center"
-  }, /*#__PURE__*/React.cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
-    containerProps: {
-      'data-testid': "".concat(dataTestid, "--btn")
-    },
-    buttonType: 'primary',
-    size: 'l',
-    onClick: handleApply.bind(buttonFooter.props)
-  })))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(DSBackdrop, {
+      type: "cover",
+      zIndex: backdropZIndex,
+      onClick: e => {
+        // PUI-4481 prevent click on elements below backdrop
+        e.stopPropagation();
+        onClickOutside(e);
+      }
+    }), /*#__PURE__*/jsxs(StyledContainer, {
+      zIndex: zIndex,
+      rows: rows,
+      ref: containerRef,
+      "data-testid": "ds-mobile-context-menu",
+      children: [/*#__PURE__*/_jsx(HeaderContainer, {
+        justifyContent: "center",
+        alignItems: "center",
+        pl: "xs",
+        pr: "xs"
+      }, void 0, /*#__PURE__*/_jsx(StyledTitle, {
+        alignItems: "center",
+        gutter: "xxs",
+        cols: Array(isArr(title) ? title.length : 1).fill('auto')
+      }, void 0, title)), /*#__PURE__*/_jsx(Grid, {
+        style: {
+          overflow: 'hidden'
+        }
+      }, void 0, /*#__PURE__*/_jsx(Grid, {
+        style: {
+          overflow: 'auto'
+        }
+      }, void 0, /*#__PURE__*/_jsx(Group, {
+        activeValue: trueSelected,
+        multiple: multiple,
+        onChange: handleChange
+      }, void 0, React.Children.map(children, (child, ii) => {
+        var _child$type;
+
+        const isGroup = child.type === (_ContextMenuGroup || (_ContextMenuGroup = /*#__PURE__*/_jsx(DSMobileContextMenuGroup, {}))).type || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === DSMobileContextMenuGroup.componentType || child.type === DSMobileContextMenuGroup.type;
+        const {
+          onClick = noop
+        } = child.props;
+        const value = ii;
+        let isSelected;
+        if (singleSelect) isSelected = trueSelected === value;else if (multiple) isSelected = trueSelected.includes(value);
+        return /*#__PURE__*/React.cloneElement(child, {
+          value,
+          key: "cm.".concat(ii),
+          isMulti: multiple,
+          singleSelect,
+          isSelected,
+          onClick: !isGroup ? e => onClick(e, child.props) : null,
+          selectedItems: isGroup ? trueSelected : null
+        });
+      })))), buttonFooter && /*#__PURE__*/_jsx(Grid, {
+        pl: "xs",
+        pr: "xs",
+        alignItems: "center"
+      }, void 0, /*#__PURE__*/React.cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
+        containerProps: {
+          'data-testid': "".concat(dataTestid, "--btn")
+        },
+        buttonType: 'primary',
+        size: 'l',
+        onClick: handleApply.bind(buttonFooter.props)
+      })))]
+    })]
+  });
 });
-var props = {
+const props = {
   /** toggle open the menu */
   open: PropTypes.bool.description('toggle open the menu'),
 
@@ -200,9 +171,7 @@ var props = {
   /** selected elements for multi and single select */
   selecteds: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.number]).description('selected elements for multi and single select')
 };
-DSMobileContextMenu.propTypes = props;
-var DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);
+const DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);
 DSMobileContextMenuWithSchema.propTypes = props;
 
 export { DSMobileContextMenu, DSMobileContextMenuWithSchema };
-//# sourceMappingURL=MobileContextMenu.js.map

package/esm/MobileContextMenu/MobileContextMenuGroup.js

@@ -1,58 +1,46 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
 import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-grid';
+import { Grid } from '@elliemae/ds-basic';
 import { noop } from 'lodash';
 import { PropTypes, describe } from 'react-desc';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = 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; }
-var Title = /*#__PURE__*/styled.div.withConfig({
+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:", ";"], function (props) {
-  return props.theme.colors.brand['300'];
-}, function (props) {
-  return props.theme.colors.brand['200'];
-}, function (props) {
-  return props.theme.space.xs;
-}, function (props) {
-  return props.theme.colors.neutral['700'];
-}, function (props) {
-  return props.theme.fontWeights.semibold;
-});
+})(["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);
 
-var DSMobileContextMenuGroup = function DSMobileContextMenuGroup(_ref) {
-  var title = _ref.title,
-      isMulti = _ref.isMulti,
-      singleSelect = _ref.singleSelect,
-      children = _ref.children,
-      groupValue = _ref.value,
-      selectedItems = _ref.selectedItems;
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Title, null, title)), /*#__PURE__*/React.createElement(Grid, null, React.Children.map(children, function (child, index) {
-    var _child$props$onClick = child.props.onClick,
-        _onClick = _child$props$onClick === void 0 ? noop : _child$props$onClick;
+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 = "".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))
+  });
+})));
 
-    var value = "".concat(groupValue, ":").concat(index);
-    var isSelected;
-    if (singleSelect) isSelected = selectedItems === value;else if (isMulti) isSelected = selectedItems.includes(value);
-    return /*#__PURE__*/React.cloneElement(child, {
-      value: value,
-      key: 'group.'.concat(index),
-      isGroup: true,
-      isMulti: isMulti,
-      singleSelect: singleSelect,
-      isSelected: isSelected,
-      onClick: function onClick(e) {
-        return _onClick(e, _objectSpread({
-          value: value
-        }, child.props));
-      }
-    });
-  })));
-};
-
-var props = {
+const props = {
   /**
    * Group title
    */
@@ -75,10 +63,8 @@ var props = {
   /** selected items, array for multi, string for single */
   selectedItems: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).description('selected items, array for multi, string for single')
 };
-DSMobileContextMenuGroup.propTypes = props;
 DSMobileContextMenuGroup.componentType = 'DSMobileContextMenuGroup';
-var DSMobileContextMenuGroupWithSchema = describe(DSMobileContextMenuGroup);
+const DSMobileContextMenuGroupWithSchema = describe(DSMobileContextMenuGroup);
 DSMobileContextMenuGroupWithSchema.propTypes = props;
 
 export { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema };
-//# sourceMappingURL=MobileContextMenuGroup.js.map

package/esm/MobileContextMenu/MobileContextMenuItem.js

@@ -1,114 +1,109 @@
-import React from 'react';
+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 { Grid } from '@elliemae/ds-grid';
+import { Grid } from '@elliemae/ds-basic/Grid';
 import styled from 'styled-components';
 import { truncate } from '@elliemae/ds-system';
 import GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';
-import { DSCheckbox } from '@elliemae/ds-form';
-import { Checkmark } from '@elliemae/ds-icons';
+import DSCheckbox from '@elliemae/ds-basic/form/Checkbox';
+import DSCheckmark from '@elliemae/ds-icons/Checkmark';
 import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'lodash';
-import 'prop-types';
-
-/* eslint-disable max-lines */
-var Wrap = /*#__PURE__*/styled(function (props) {
-  return /*#__PURE__*/React.createElement(DSMobileTouchable, props);
-}).withConfig({
+import { jsx } from 'react/jsx-runtime';
+
+var _CheckMark;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = 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 Wrap = /*#__PURE__*/styled(props => /*#__PURE__*/jsx(DSMobileTouchable, _objectSpread({}, props))).withConfig({
   componentId: "sc-20od94-0"
 })(["border-bottom:none;"]);
-var PropWrap = /*#__PURE__*/styled(function (props) {
-  return /*#__PURE__*/React.createElement(Grid, props);
-}).withConfig({
+const PropWrap = /*#__PURE__*/styled(props => /*#__PURE__*/jsx(Grid, _objectSpread({}, props))).withConfig({
   componentId: "sc-20od94-1"
-})(["", ""], function (props) {
+})(["", ""], props => {
   if (!props.isMulti) {
     return "\n      & > span {\n        height: 18px;\n        width: 18px;\n      }\n\n      & > span > svg {\n        height: 18px;\n        width: 18px;\n      }\n      ";
   }
 
   return '';
 });
-var Title = /*#__PURE__*/styled.span.withConfig({
+const Title = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-20od94-2"
-})(["font-size:16px;color:", ";", ""], function (props) {
-  return props.theme.colors.brand['600'];
-}, truncate());
-var Label = /*#__PURE__*/styled.span.withConfig({
+})(["font-size:16px;color:", ";", ""], props => props.theme.colors.brand['600'], truncate());
+const Label = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-20od94-3"
-})(["font-size:13px;color:", ";"], function (props) {
-  return props.theme.colors.neutral['600'];
-});
-var CheckMark = /*#__PURE__*/styled(Checkmark).withConfig({
+})(["font-size:13px;color:", ";"], props => props.theme.colors.neutral['600']);
+const CheckMark = /*#__PURE__*/styled(DSCheckmark).withConfig({
   componentId: "sc-20od94-4"
-})(["fill:", ";"], function (props) {
-  return props.theme.colors.brand['600'];
-});
+})(["fill:", ";"], props => props.theme.colors.brand['600']);
+
+const DSMobileContextMenuItem = ({
+  label,
+  title,
+  leftProp,
+  isGroup,
+  isMulti,
+  singleSelect,
+  isSelected,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onClick = () => {},
+  value
+}) => {
+  var _Checkbox, _Grid, _Title;
 
-var DSMobileContextMenuItem = function DSMobileContextMenuItem(_ref) {
-  var label = _ref.label,
-      title = _ref.title,
-      leftProp = _ref.leftProp,
-      isGroup = _ref.isGroup,
-      isMulti = _ref.isMulti,
-      singleSelect = _ref.singleSelect,
-      isSelected = _ref.isSelected,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      value = _ref.value;
-
-  return /*#__PURE__*/React.createElement(GroupItem, {
-    render: function render(context) {
-      var activeValue = context.activeValue;
-      var someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);
+  return /*#__PURE__*/_jsx(GroupItem, {
+    render: context => {
+      const {
+        activeValue
+      } = context;
+      let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);
       if (isGroup) someItemSelected = typeof activeValue === 'string';
-      var showLeftAddon = isSelected;
+      let showLeftAddon = isSelected;
       if (isMulti || !singleSelect) showLeftAddon = true;
-      var leftAddon = leftProp || null;
-      if (isMulti) leftAddon = /*#__PURE__*/React.createElement(DSCheckbox, {
+      let leftAddon = leftProp || null;
+      if (isMulti) leftAddon = _Checkbox || (_Checkbox = /*#__PURE__*/_jsx(DSCheckbox, {
         checked: isSelected,
         "data-testid": "leftAddon-checkbox"
-      });
-      if (singleSelect) leftAddon = /*#__PURE__*/React.createElement(CheckMark, {
+      }));
+      if (singleSelect) leftAddon = _CheckMark || (_CheckMark = /*#__PURE__*/_jsx(CheckMark, {
         "data-testid": "leftAddon-checkmark"
-      });
-      return /*#__PURE__*/React.createElement(Wrap, {
+      }));
+      return /*#__PURE__*/_jsx(Wrap, {
         "data-testid": "ds-contextmenu-item",
-        onClick: function onClick(e) {
+        onClick: e => {
           if (singleSelect || isMulti) context.onChange(value, e, {
-            value: value,
-            label: label,
-            title: title
+            value,
+            label,
+            title
           });
-
-          _onClick(e);
+          onClick(e);
         },
         cols: singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ['40px', 'auto'] : ['auto']
-      }, (singleSelect && someItemSelected || isMulti || leftAddon) && /*#__PURE__*/React.createElement(PropWrap, {
+      }, void 0, (singleSelect && someItemSelected || isMulti || leftAddon) && /*#__PURE__*/_jsx(PropWrap, {
         "data-testid": "left-addon",
         isMulti: isMulti,
         alignItems: "center",
         justifyContent: "center",
         pl: "16px"
-      }, showLeftAddon && leftAddon), /*#__PURE__*/React.createElement(Grid, {
+      }, void 0, showLeftAddon && leftAddon), /*#__PURE__*/_jsx(Grid, {
         height: "44px",
         pr: "xs",
         pl: !leftAddon && isGroup ? '24px' : 'xs'
-      }, label && /*#__PURE__*/React.createElement(Grid, {
+      }, void 0, label && (_Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {
         alignItems: "center"
-      }, /*#__PURE__*/React.createElement(Label, {
+      }, void 0, /*#__PURE__*/_jsx(Label, {
         "data-testid": "contextMenuItem-label"
-      }, label)), /*#__PURE__*/React.createElement(Grid, {
+      }, void 0, label)))), /*#__PURE__*/_jsx(Grid, {
         alignItems: !label ? 'center' : undefined
-      }, /*#__PURE__*/React.createElement(Title, {
+      }, void 0, _Title || (_Title = /*#__PURE__*/_jsx(Title, {
         "data-testid": "contextMenuItem-title"
-      }, title))));
+      }, void 0, title)))));
     }
   });
 };
 
-var props = {
+const props = {
   /** label */
   label: PropTypes.string.description('label'),
 
@@ -136,9 +131,7 @@ var props = {
   /** selected value */
   isSelected: PropTypes.bool.description('selected value')
 };
-DSMobileContextMenuItem.propTypes = props;
-var DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);
+const DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);
 DSMobileContextMenuItemWithSchema.propTypes = props;
 
 export { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };
-//# sourceMappingURL=MobileContextMenuItem.js.map