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

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/{dist/esm → esm}/MobileCard/useHeight.js

@@ -1,11 +1,13 @@
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { rem } from "polished";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+import { rem } from 'polished';
+
 function getCurrentFont() {
-  return Number(window.getComputedStyle(document.querySelector(":root")).getPropertyValue("font-size").match(/\d+/)[0]);
+  return Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
 }
+
 function useHeight(ref) {
-  const [height, setHeight] = useState("0rem");
+  const [height, setHeight] = useState('0rem');
   const [currentFont, setCurrentFont] = useState(13);
   useEffect(() => {
     setCurrentFont(getCurrentFont());
@@ -17,7 +19,5 @@ function useHeight(ref) {
   }, [ref.current, currentFont]);
   return height;
 }
-export {
-  useHeight
-};
-//# sourceMappingURL=useHeight.js.map
+
+export { useHeight };

package/esm/MobileContextMenu/MobileContextMenu.js

@@ -0,0 +1,185 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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-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';
+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); 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(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(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(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']);
+const HeaderContainer = /*#__PURE__*/styled(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 = 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);
+
+  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__*/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)
+      })))]
+    })]
+  });
+});
+const props = {
+  /** toggle open the menu */
+  open: PropTypes.bool.description('toggle open the menu'),
+
+  /** context menu title  */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]))]).description('context menu title'),
+
+  /** change handler for selectable context menu  */
+  onChange: PropTypes.func.description('change handler for selectable context menu'),
+
+  /** multi select */
+  multiple: PropTypes.bool.description('multi select'),
+
+  /** click outside callback handler */
+  onClickOutside: PropTypes.func.description('click outside callback handler'),
+
+  /** array of mobile context menu items */
+  children: PropTypes.arrayOf(PropTypes.element).description('array of mobile context menu items'),
+
+  /** z index for overlay div */
+  backdropZIndex: PropTypes.number.description('z index for overlay div'),
+
+  /** z index for menu container */
+  zIndex: PropTypes.number.description('z index for menu container'),
+
+  /** for e2e tests */
+  dataTestid: PropTypes.string.description('for e2e tests'),
+
+  /** bottom button */
+  buttonFooter: PropTypes.element.description('bottom button'),
+
+  /** callback */
+  onApply: PropTypes.func.description('callback'),
+
+  /** 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')
+};
+const DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);
+DSMobileContextMenuWithSchema.propTypes = props;
+
+export { DSMobileContextMenu, DSMobileContextMenuWithSchema };

package/esm/MobileContextMenu/MobileContextMenuGroup.js

@@ -0,0 +1,80 @@
+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-grid';
+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); 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(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.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(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 = {
+  /**
+   * Group title
+   */
+  title: PropTypes.string.isRequired.description('group title'),
+
+  /**
+   *  Array of MobileContextMenuItem
+   */
+  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Array of MobileContextMenuItem'),
+
+  /** multi select */
+  isMulti: PropTypes.bool.description('multi select'),
+
+  /** single select */
+  singleSelect: PropTypes.bool.description('single select'),
+
+  /** value for select */
+  value: PropTypes.string.description('value for select'),
+
+  /** 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.componentType = 'DSMobileContextMenuGroup';
+const DSMobileContextMenuGroupWithSchema = describe(DSMobileContextMenuGroup);
+DSMobileContextMenuGroupWithSchema.propTypes = props;
+
+export { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema };

package/esm/MobileContextMenu/MobileContextMenuItem.js

@@ -0,0 +1,143 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { Grid } from '@elliemae/ds-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 { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
+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); 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(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(props => /*#__PURE__*/jsx(DSMobileTouchable, _objectSpread({}, props))).withConfig({
+  componentId: "sc-20od94-0"
+})(["border-bottom:none;"]);
+const PropWrap = /*#__PURE__*/styled(props => /*#__PURE__*/jsx(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.span.withConfig({
+  componentId: "sc-20od94-2"
+})(["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:", ";"], props => props.theme.colors.neutral['600']);
+const CheckMark = /*#__PURE__*/styled(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(GroupItem, {
+    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(DSCheckbox, {
+        checked: isSelected,
+        "data-testid": "leftAddon-checkbox"
+      }));
+      if (singleSelect) leftAddon = _CheckMark || (_CheckMark = /*#__PURE__*/_jsx(CheckMark, {
+        "data-testid": "leftAddon-checkmark"
+      }));
+      return /*#__PURE__*/_jsx(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(PropWrap, {
+        "data-testid": "left-addon",
+        isMulti: isMulti,
+        alignItems: "center",
+        justifyContent: "center",
+        pl: "16px"
+      }, void 0, showLeftAddon && leftAddon), /*#__PURE__*/_jsx(Grid, {
+        height: "44px",
+        pr: "xs",
+        pl: !leftAddon && isGroup ? '24px' : 'xs'
+      }, void 0, label && (_Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {
+        alignItems: "center"
+      }, void 0, /*#__PURE__*/_jsx(Label, {
+        "data-testid": "contextMenuItem-label"
+      }, void 0, label)))), /*#__PURE__*/_jsx(Grid, {
+        alignItems: !label ? 'center' : undefined
+      }, void 0, _Title || (_Title = /*#__PURE__*/_jsx(Title, {
+        "data-testid": "contextMenuItem-title"
+      }, void 0, title)))));
+    }
+  });
+};
+
+const props = {
+  /** label */
+  label: PropTypes.string.description('label'),
+
+  /** menu item title */
+  title: PropTypes.string.isRequired.description('menu item title'),
+
+  /**  */
+  leftProp: PropTypes.element.description(''),
+
+  /** multi select */
+  isMulti: PropTypes.bool.description('multi select'),
+
+  /**  */
+  singleSelect: PropTypes.bool.description(''),
+
+  /**  */
+  isGroup: PropTypes.bool.description(''),
+
+  /** on click handler */
+  onClick: PropTypes.func.description('on click handler'),
+
+  /** value for select */
+  value: PropTypes.number.description('value for select'),
+
+  /** selected value */
+  isSelected: PropTypes.bool.description('selected value')
+};
+const DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);
+DSMobileContextMenuItemWithSchema.propTypes = props;
+
+export { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };

package/esm/MobileContextMenu/index.js

@@ -0,0 +1,3 @@
+export { DSMobileContextMenu, DSMobileContextMenuWithSchema } from './MobileContextMenu.js';
+export { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema } from './MobileContextMenuItem.js';
+export { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema } from './MobileContextMenuGroup.js';

package/esm/MobileDatePicker/Input.js

@@ -0,0 +1,32 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM, focus } from '@elliemae/ds-system';
+import { jsx } from 'react/jsx-runtime';
+
+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(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.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 => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l), props => props.theme.colors.neutral['000'], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), props => props.theme.colors.neutral[200], props => 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(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledInput, _objectSpread({
+    ref: innerRef
+  }, props));
+};
+
+export { Input };

package/esm/MobileDatePicker/MobileDatePicker.js

@@ -0,0 +1,107 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef, useEffect } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { DatePicker } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { DSInputGroup } from '@elliemae/ds-form';
+import { Input } from './Input.js';
+
+var _DatePicker;
+
+const DSMobileDatePicker = _ref => {
+  let {
+    disabled,
+    value,
+    tabIndex,
+    placeholder,
+    onChange
+  } = _ref;
+  const inputRef = useRef(null);
+  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(DSInputGroup, {
+    rightAddon: /*#__PURE__*/_jsx(DSButton, {
+      "aria-label": "Date Picker Button",
+      color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
+      disabled: disabled,
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
+      type: "button",
+      buttonType: "secondary",
+      onClick: () => {
+        inputRef.current.focus();
+        inputRef.current.click();
+      }
+    })
+  }, void 0, /*#__PURE__*/_jsx(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: PropTypes.bool.description('defaults to false'),
+
+  /**
+   * 0 as default
+   */
+  tabIndex: PropTypes.number.description('0 as default'),
+
+  /**
+   * MM / DD / YYYY as default
+   */
+  placeholder: PropTypes.string.description('MM / DD / YYYY as default'),
+
+  /**
+   * onChange handler, receives change event as first argument
+   */
+  onChange: 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: PropTypes.string.description('ISO8601 string representing the date in format YYYY-MM-DD or empty string')
+};
+const DSMobileDatePickerWithSchema = describe(DSMobileDatePicker);
+DSMobileDatePickerWithSchema.propTypes = props;
+
+export { DSMobileDatePicker, DSMobileDatePickerWithSchema };

package/esm/MobileDatePicker/index.js

@@ -0,0 +1 @@
+export { DSMobileDatePicker, DSMobileDatePickerWithSchema } from './MobileDatePicker.js';