@elliemae/ds-mobile 2.3.0-alpha.6 → 2.3.0-next.0

package/cjs/MobileContextMenu/MobileContextMenu.js

@@ -0,0 +1,198 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+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 React = require('react');
+var lodash = require('lodash');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+var Backdrop = require('@elliemae/ds-backdrop');
+var dsSystem = require('@elliemae/ds-system');
+var Group = require('@elliemae/ds-shared/GroupContext/Group');
+var MobileContextMenuGroup = require('./MobileContextMenuGroup.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Group__default = /*#__PURE__*/_interopDefaultLegacy(Group);
+
+var _ContextMenuGroup;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const StyledContainer = /*#__PURE__*/styled__default["default"](dsGrid.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% - ".concat(props.theme.space.xs, ")"), props => props.theme.space.xxs);
+const StyledTitle = /*#__PURE__*/styled__default["default"](dsGrid.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'], dsSystem.truncate(), props => props.theme.colors.neutral['000']);
+const HeaderContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-15ys5tq-2"
+})(["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 = dsSystem.withTheme(_ref => {
+  let {
+    open = false,
+    title = '',
+    multiple = false,
+    singleSelect = false,
+    onChange = lodash.noop,
+    onClickOutside = lodash.noop,
+    children,
+    theme,
+    backdropZIndex,
+    zIndex = 1,
+    dataTestid = 'mobile-context-menu',
+    buttonFooter = null,
+    onApply = lodash.noop,
+    selecteds: initSelecteds
+  } = _ref;
+  const [selectedItems, setSelectedItems] = React.useState([]);
+  const trueSelected = React.useMemo(() => initSelecteds !== undefined ? initSelecteds : [...selectedItems], [initSelecteds, selectedItems]);
+  const containerRef = React.useRef(null);
+
+  const handleChange = (value, childProps, event) => {
+    onChange(value, childProps, event);
+
+    if (initSelecteds === undefined) {
+      if (multiple) setSelectedItems([...value]);else if (singleSelect) setSelectedItems(value);
+    }
+  };
+
+  const handleApply = function (e) {
+    if (this.onClick) this.onClick(e);
+    onApply(e, selectedItems);
+  };
+
+  const rows = [theme.space.s, 1];
+  if (buttonFooter) rows.push('56px');
+  if (!open) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/_jsx__default["default"](Backdrop.DSBackdrop, {
+      type: "cover",
+      zIndex: backdropZIndex,
+      onClick: e => {
+        // PUI-4481 prevent click on elements below backdrop
+        e.stopPropagation();
+        onClickOutside(e);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs(StyledContainer, {
+      zIndex: zIndex,
+      rows: rows,
+      ref: containerRef,
+      "data-testid": "ds-mobile-context-menu",
+      children: [/*#__PURE__*/_jsx__default["default"](HeaderContainer, {
+        justifyContent: "center",
+        alignItems: "center",
+        pl: "xs",
+        pr: "xs"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](StyledTitle, {
+        alignItems: "center",
+        gutter: "xxs",
+        cols: Array(isArr(title) ? title.length : 1).fill('auto')
+      }, void 0, title)), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        style: {
+          overflow: 'hidden'
+        }
+      }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        style: {
+          overflow: 'auto'
+        }
+      }, void 0, /*#__PURE__*/_jsx__default["default"](Group__default["default"], {
+        activeValue: trueSelected,
+        multiple: multiple,
+        onChange: handleChange
+      }, void 0, React__default["default"].Children.map(children, (child, ii) => {
+        var _child$type;
+
+        const isGroup = child.type === (_ContextMenuGroup || (_ContextMenuGroup = /*#__PURE__*/_jsx__default["default"](MobileContextMenuGroup.DSMobileContextMenuGroup, {}))).type || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === MobileContextMenuGroup.DSMobileContextMenuGroup.componentType || child.type === MobileContextMenuGroup.DSMobileContextMenuGroup.type;
+        const {
+          onClick = lodash.noop
+        } = child.props;
+        const value = ii;
+        let isSelected;
+        if (singleSelect) isSelected = trueSelected === value;else if (multiple) isSelected = trueSelected.includes(value);
+        return /*#__PURE__*/React__default["default"].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__default["default"](dsGrid.Grid, {
+        pl: "xs",
+        pr: "xs",
+        alignItems: "center"
+      }, void 0, /*#__PURE__*/React__default["default"].cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
+        containerProps: {
+          'data-testid': "".concat(dataTestid, "--btn")
+        },
+        buttonType: 'primary',
+        size: 'l',
+        onClick: handleApply.bind(buttonFooter.props)
+      })))]
+    })]
+  });
+});
+const props = {
+  /** toggle open the menu */
+  open: reactDesc.PropTypes.bool.description('toggle open the menu'),
+
+  /** context menu title  */
+  title: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.node]))]).description('context menu title'),
+
+  /** change handler for selectable context menu  */
+  onChange: reactDesc.PropTypes.func.description('change handler for selectable context menu'),
+
+  /** multi select */
+  multiple: reactDesc.PropTypes.bool.description('multi select'),
+
+  /** click outside callback handler */
+  onClickOutside: reactDesc.PropTypes.func.description('click outside callback handler'),
+
+  /** array of mobile context menu items */
+  children: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element).description('array of mobile context menu items'),
+
+  /** z index for overlay div */
+  backdropZIndex: reactDesc.PropTypes.number.description('z index for overlay div'),
+
+  /** z index for menu container */
+  zIndex: reactDesc.PropTypes.number.description('z index for menu container'),
+
+  /** for e2e tests */
+  dataTestid: reactDesc.PropTypes.string.description('for e2e tests'),
+
+  /** bottom button */
+  buttonFooter: reactDesc.PropTypes.element.description('bottom button'),
+
+  /** callback */
+  onApply: reactDesc.PropTypes.func.description('callback'),
+
+  /** selected elements for multi and single select */
+  selecteds: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number])), reactDesc.PropTypes.number]).description('selected elements for multi and single select')
+};
+const DSMobileContextMenuWithSchema = reactDesc.describe(DSMobileContextMenu);
+DSMobileContextMenuWithSchema.propTypes = props;
+
+exports.DSMobileContextMenu = DSMobileContextMenu;
+exports.DSMobileContextMenuWithSchema = DSMobileContextMenuWithSchema;

package/cjs/MobileContextMenu/MobileContextMenuGroup.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+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 React = require('react');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+var lodash = require('lodash');
+var reactDesc = require('react-desc');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const Title = /*#__PURE__*/styled__default["default"].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 = _ref => {
+  let {
+    title,
+    isMulti,
+    singleSelect,
+    children,
+    value: groupValue,
+    selectedItems
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title)), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, React__default["default"].Children.map(children, (child, index) => {
+    const {
+      onClick = lodash.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__default["default"].cloneElement(child, {
+      value,
+      key: 'group.'.concat(index),
+      isGroup: true,
+      isMulti,
+      singleSelect,
+      isSelected,
+      onClick: e => onClick(e, _objectSpread({
+        value
+      }, child.props))
+    });
+  })));
+};
+
+const props = {
+  /**
+   * Group title
+   */
+  title: reactDesc.PropTypes.string.isRequired.description('group title'),
+
+  /**
+   *  Array of MobileContextMenuItem
+   */
+  children: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element).isRequired.description('Array of MobileContextMenuItem'),
+
+  /** multi select */
+  isMulti: reactDesc.PropTypes.bool.description('multi select'),
+
+  /** single select */
+  singleSelect: reactDesc.PropTypes.bool.description('single select'),
+
+  /** value for select */
+  value: reactDesc.PropTypes.string.description('value for select'),
+
+  /** selected items, array for multi, string for single */
+  selectedItems: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.string]).description('selected items, array for multi, string for single')
+};
+DSMobileContextMenuGroup.componentType = 'DSMobileContextMenuGroup';
+const DSMobileContextMenuGroupWithSchema = reactDesc.describe(DSMobileContextMenuGroup);
+DSMobileContextMenuGroupWithSchema.propTypes = props;
+
+exports.DSMobileContextMenuGroup = DSMobileContextMenuGroup;
+exports.DSMobileContextMenuGroupWithSchema = DSMobileContextMenuGroupWithSchema;

package/cjs/MobileContextMenu/MobileContextMenuItem.js

@@ -0,0 +1,155 @@
+'use strict';
+
+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 dsGrid = require('@elliemae/ds-grid');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var GroupItem = require('@elliemae/ds-shared/GroupContext/GroupItem');
+var dsForm = require('@elliemae/ds-form');
+var dsIcons = require('@elliemae/ds-icons');
+var MobileTouchable = require('../MobileTouchable/MobileTouchable.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var GroupItem__default = /*#__PURE__*/_interopDefaultLegacy(GroupItem);
+
+var _CheckMark;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const Wrap = /*#__PURE__*/styled__default["default"](props => /*#__PURE__*/jsxRuntime.jsx(MobileTouchable.DSMobileTouchable, _objectSpread({}, props))).withConfig({
+  componentId: "sc-20od94-0"
+})(["border-bottom:none;"]);
+const PropWrap = /*#__PURE__*/styled__default["default"](props => /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread({}, props))).withConfig({
+  componentId: "sc-20od94-1"
+})(["", ""], 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 '';
+});
+const Title = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-20od94-2"
+})(["font-size:16px;color:", ";", ""], props => props.theme.colors.brand['600'], dsSystem.truncate());
+const Label = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-20od94-3"
+})(["font-size:13px;color:", ";"], props => props.theme.colors.neutral['600']);
+const CheckMark = /*#__PURE__*/styled__default["default"](dsIcons.Checkmark).withConfig({
+  componentId: "sc-20od94-4"
+})(["fill:", ";"], props => props.theme.colors.brand['600']);
+
+const DSMobileContextMenuItem = _ref => {
+  var _DSCheckbox, _Grid, _Title;
+
+  let {
+    label,
+    title,
+    leftProp,
+    isGroup,
+    isMulti,
+    singleSelect,
+    isSelected,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onClick = () => {},
+    value
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](GroupItem__default["default"], {
+    render: context => {
+      const {
+        activeValue
+      } = context;
+      let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);
+      if (isGroup) someItemSelected = typeof activeValue === 'string';
+      let showLeftAddon = isSelected;
+      if (isMulti || !singleSelect) showLeftAddon = true;
+      let leftAddon = leftProp || null;
+      if (isMulti) leftAddon = _DSCheckbox || (_DSCheckbox = /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
+        checked: isSelected,
+        "data-testid": "leftAddon-checkbox"
+      }));
+      if (singleSelect) leftAddon = _CheckMark || (_CheckMark = /*#__PURE__*/_jsx__default["default"](CheckMark, {
+        "data-testid": "leftAddon-checkmark"
+      }));
+      return /*#__PURE__*/_jsx__default["default"](Wrap, {
+        "data-testid": "ds-contextmenu-item",
+        onClick: e => {
+          if (singleSelect || isMulti) context.onChange(value, e, {
+            value,
+            label,
+            title
+          });
+          onClick(e);
+        },
+        cols: singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ['40px', 'auto'] : ['auto']
+      }, void 0, (singleSelect && someItemSelected || isMulti || leftAddon) && /*#__PURE__*/_jsx__default["default"](PropWrap, {
+        "data-testid": "left-addon",
+        isMulti: isMulti,
+        alignItems: "center",
+        justifyContent: "center",
+        pl: "16px"
+      }, void 0, showLeftAddon && leftAddon), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        height: "44px",
+        pr: "xs",
+        pl: !leftAddon && isGroup ? '24px' : 'xs'
+      }, void 0, label && (_Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        alignItems: "center"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](Label, {
+        "data-testid": "contextMenuItem-label"
+      }, void 0, label)))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        alignItems: !label ? 'center' : undefined
+      }, void 0, _Title || (_Title = /*#__PURE__*/_jsx__default["default"](Title, {
+        "data-testid": "contextMenuItem-title"
+      }, void 0, title)))));
+    }
+  });
+};
+
+const props = {
+  /** label */
+  label: reactDesc.PropTypes.string.description('label'),
+
+  /** menu item title */
+  title: reactDesc.PropTypes.string.isRequired.description('menu item title'),
+
+  /**  */
+  leftProp: reactDesc.PropTypes.element.description(''),
+
+  /** multi select */
+  isMulti: reactDesc.PropTypes.bool.description('multi select'),
+
+  /**  */
+  singleSelect: reactDesc.PropTypes.bool.description(''),
+
+  /**  */
+  isGroup: reactDesc.PropTypes.bool.description(''),
+
+  /** on click handler */
+  onClick: reactDesc.PropTypes.func.description('on click handler'),
+
+  /** value for select */
+  value: reactDesc.PropTypes.number.description('value for select'),
+
+  /** selected value */
+  isSelected: reactDesc.PropTypes.bool.description('selected value')
+};
+const DSMobileContextMenuItemWithSchema = reactDesc.describe(DSMobileContextMenuItem);
+DSMobileContextMenuItemWithSchema.propTypes = props;
+
+exports.DSMobileContextMenuItem = DSMobileContextMenuItem;
+exports.DSMobileContextMenuItemWithSchema = DSMobileContextMenuItemWithSchema;

package/cjs/MobileContextMenu/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileContextMenu = require('./MobileContextMenu.js');
+var MobileContextMenuItem = require('./MobileContextMenuItem.js');
+var MobileContextMenuGroup = require('./MobileContextMenuGroup.js');
+
+
+
+exports.DSMobileContextMenu = MobileContextMenu.DSMobileContextMenu;
+exports.DSMobileContextMenuWithSchema = MobileContextMenu.DSMobileContextMenuWithSchema;
+exports.DSMobileContextMenuItem = MobileContextMenuItem.DSMobileContextMenuItem;
+exports.DSMobileContextMenuItemWithSchema = MobileContextMenuItem.DSMobileContextMenuItemWithSchema;
+exports.DSMobileContextMenuGroup = MobileContextMenuGroup.DSMobileContextMenuGroup;
+exports.DSMobileContextMenuGroupWithSchema = MobileContextMenuGroup.DSMobileContextMenuGroupWithSchema;

package/cjs/MobileDatePicker/Input.js

@@ -0,0 +1,42 @@
+'use strict';
+
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const _excluded = ["innerRef"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
+  componentId: "sc-1djip5a-0"
+})(["input[type=date]&{-webkit-appearance:none;-moz-appearance:none;-webkit-tap-highlight-color:transparent;appearance:none;color:transparent;white-space:nowrap;position:relative;height:", ";width:100%;max-width:calc(100% - 32px);outline:none;box-sizing:border-box;display:flex;background:", ";padding:0 ", ";z-index:1;border-radius:2px;border:solid 1px ", ";}input[type=date]&:active,input[type=date]&:focus{", "}&:before{color:", ";content:'", "';}input[type=date]&::-webkit-datetime-edit,input[type=date]&::-webkit-inner-spin-button,input[type=date]&::-webkit-clear-button{-webkit-appearance:none;display:none;}"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l), props => props.theme.colors.neutral['000'], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), props => props.theme.colors.neutral[200], props => dsSystem.focus(props.theme.colors.brand[700]), props => props.value === '' ? props.theme.colors.neutral['500'] : props.theme.colors.neutral['800'], props => props.value === '' ? props.placeholder : props['data-displayvalue']);
+const Input = _ref => {
+  let {
+    innerRef
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(StyledInput, _objectSpread({
+    ref: innerRef
+  }, props));
+};
+
+exports.Input = Input;

package/cjs/MobileDatePicker/MobileDatePicker.js

@@ -0,0 +1,117 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var reactDesc = require('react-desc');
+var dsIcon = require('@elliemae/ds-icon');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var dsForm = require('@elliemae/ds-form');
+var Input = require('./Input.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _DatePicker;
+
+const DSMobileDatePicker = _ref => {
+  let {
+    disabled,
+    value,
+    tabIndex,
+    placeholder,
+    onChange
+  } = _ref;
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    /*
+      necessary if value is being set in mount, 
+      otherwise the clear won't work on the first click
+      [SEE input onChange comment]
+    */
+    if (inputRef.current) {
+      inputRef.current.defaultValue = '';
+    }
+  }, [inputRef.current]);
+  const valueArr = value.split('-');
+  const displayValue = value && "".concat(valueArr[1], " / ").concat(valueArr[2], " / ").concat(valueArr[0]);
+  return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
+    rightAddon: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      "aria-label": "Date Picker Button",
+      color: !disabled ? dsIcon.DSIconColors.PRIMARY : dsIcon.DSIconColors.NEUTRAL,
+      disabled: disabled,
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker, {})),
+      type: "button",
+      buttonType: "secondary",
+      onClick: () => {
+        inputRef.current.focus();
+        inputRef.current.click();
+      }
+    })
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Input.Input, {
+    "data-testid": "ds-mobile-date-picker",
+    innerRef: inputRef,
+    "aria-label": "Date Picker Input Mask",
+    disabled: disabled,
+    onKeyDown: e => e.preventDefault(),
+    type: "date",
+    placeholder: placeholder,
+    onChange: e => {
+      // https://github.com/facebook/react/issues/8938#issuecomment-360573204
+      const {
+        target
+      } = e.nativeEvent;
+
+      function iosClearDefault() {
+        target.defaultValue = '';
+      }
+
+      window.setTimeout(iosClearDefault, 0);
+      onChange(e);
+    },
+    tabIndex: tabIndex,
+    value: value,
+    "data-displayvalue": displayValue
+  }));
+};
+
+DSMobileDatePicker.defaultProps = {
+  disabled: false,
+  tabIndex: 0,
+  placeholder: 'MM / DD / YYYY'
+};
+const props = {
+  /**
+   * defaults to false
+   */
+  disabled: reactDesc.PropTypes.bool.description('defaults to false'),
+
+  /**
+   * 0 as default
+   */
+  tabIndex: reactDesc.PropTypes.number.description('0 as default'),
+
+  /**
+   * MM / DD / YYYY as default
+   */
+  placeholder: reactDesc.PropTypes.string.description('MM / DD / YYYY as default'),
+
+  /**
+   * onChange handler, receives change event as first argument
+   */
+  onChange: reactDesc.PropTypes.func.description('onChange handler, receives change event as first argument'),
+
+  /**
+   * ISO8601 string representing the date in format YYYY-MM-DD or empty string
+   */
+  value: reactDesc.PropTypes.string.description('ISO8601 string representing the date in format YYYY-MM-DD or empty string')
+};
+const DSMobileDatePickerWithSchema = reactDesc.describe(DSMobileDatePicker);
+DSMobileDatePickerWithSchema.propTypes = props;
+
+exports.DSMobileDatePicker = DSMobileDatePicker;
+exports.DSMobileDatePickerWithSchema = DSMobileDatePickerWithSchema;

package/cjs/MobileDatePicker/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileDatePicker = require('./MobileDatePicker.js');
+
+
+
+exports.DSMobileDatePicker = MobileDatePicker.DSMobileDatePicker;
+exports.DSMobileDatePickerWithSchema = MobileDatePicker.DSMobileDatePickerWithSchema;