@elliemae/ds-mobile 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/MobilePageHeader/MobilePageHeader.js

@@ -0,0 +1,174 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsTruncatedExpandableText = require('@elliemae/ds-truncated-expandable-text');
+var dsGrid = require('@elliemae/ds-grid');
+var dsSystem = require('@elliemae/ds-system');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var Separator = require('../MobileSeparator/Separator.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _ChevronSmallDown;
+const StyledTitle = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1tfu1y9-0"
+})(["font-size:22px;font-weight:", ";color:", ";min-height:", ";padding-top:", ";"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700'], props => props.withBreadcrumb ? 'auto' : '44px', props => props.withBreadcrumb ? '0' : '6px');
+const StyledBreadCrumb = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1tfu1y9-1"
+})(["font-size:16px;font-weight:", ";color:", ";", ""], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['600'], dsSystem.truncate());
+const Label = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1tfu1y9-2"
+})(["color:", ";", ""], props => props.theme.colors.neutral['500'], dsSystem.truncate());
+const Value = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1tfu1y9-3"
+})(["", " color:", ";", " margin-top:", ";"], dsSystem.truncate(), props => props.theme.colors.neutral['600'], props => props.withMarginRight ? "margin-right: 4px;" : '', props => props.withBreadcrumb ? '12px' : '0');
+const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1tfu1y9-4"
+})(["border-bottom:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
+
+const MobilePageHeader = _ref => {
+  let {
+    pageTitle = null,
+    contextMenu = null,
+    firstAction = null,
+    secondAction = null,
+    backArrow = null,
+    breadCrumb = null,
+    onOpenContextMenu = () => null,
+    value,
+    label,
+    theme
+  } = _ref;
+  const hasValue = value === 0 || value;
+  const countActions = React.useMemo(() => {
+    let count = 0;
+    if (firstAction) count++;
+    if (secondAction) count++;
+    return count;
+  }, [firstAction, secondAction]);
+  const [open, setOpen] = React.useState();
+  const handleContext = React.useCallback(() => {
+    setOpen(!open);
+  }, [open]);
+
+  const separator = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: "32px",
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: "24px"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Separator["default"], {
+    direction: "vertical",
+    margin: "xxs",
+    color: ['neutral', '300']
+  })));
+
+  const cols = [1, 'auto'];
+  const cols2 = ['auto'];
+  if (countActions) cols.push('auto');
+  if (hasValue) cols2.push('auto');
+  if (label) cols2.push('auto');
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {
+    cols: cols,
+    pl: theme.space.xs,
+    pr: theme.space.xs,
+    alignItems: "flex-start",
+    width: "100%",
+    "data-testid": "page-header-wrapper"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    cols: cols2
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    cols: backArrow ? ['auto', 1] : [1],
+    alignItems: "flex-start",
+    pr: countActions === 0 && !hasValue && !label ? dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0
+  }, void 0, backArrow && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: breadCrumb ? '56px' : '44px',
+    alignItems: "center"
+  }, void 0, backArrow), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    flexGrow: 0,
+    pt: !breadCrumb ? 0 : theme.space.xxs
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    cols: ['auto', 'auto'],
+    alignItems: "flex-start"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, breadCrumb && /*#__PURE__*/_jsx__default["default"](StyledBreadCrumb, {
+    "data-testid": "page-header-breadcrum"
+  }, void 0, breadCrumb), /*#__PURE__*/_jsx__default["default"](StyledTitle, {
+    maxWidth: "100%",
+    alignItems: "flex-start",
+    withBreadcrumb: !!breadCrumb,
+    "data-testid": "page-header-title"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    pt: breadCrumb ? 0 : theme.space.xxxs
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedExpandableText.TruncatedExpandableText, {
+    value: pageTitle
+  })))), contextMenu && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    alignItems: "center",
+    mt: breadCrumb ? '20px' : '8px'
+  }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+    buttonType: "text",
+    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
+    size: "s",
+    onClick: () => {
+      handleContext();
+      onOpenContextMenu();
+    },
+    containerProps: {
+      'data-testid': 'trigger-context-menu'
+    }
+  }), /*#__PURE__*/React__default["default"].cloneElement(contextMenu, {
+    open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,
+    onChange: (event, item) => {
+      if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);
+      handleContext();
+    }
+  }))))), hasValue && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: breadCrumb ? '56px' : '44px',
+    alignItems: "center",
+    cols: ['auto', 'auto']
+  }, void 0, separator, /*#__PURE__*/_jsx__default["default"](Value, {
+    withMarginRight: !!label,
+    "data-testid": "page-header-value"
+  }, void 0, value)), label && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: breadCrumb ? '56px' : '44px',
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Label, {
+    withBreadcrumb: !!breadCrumb,
+    "data-testid": "page-header-label"
+  }, void 0, label))), countActions > 0 && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    height: breadCrumb ? '56px' : '44px',
+    alignItems: "center",
+    cols: countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']
+  }, void 0, firstAction && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, firstAction), countActions === 2 && separator, secondAction && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, secondAction)));
+};
+
+const pageHeaderProps = {
+  pageTitle: reactDesc.PropTypes.string.description('Page title').isRequired,
+  contextMenu: reactDesc.PropTypes.element.description('Context Menu to open'),
+  onOpenContextMenu: reactDesc.PropTypes.func.description('function called when context menu opens'),
+  firstAction: reactDesc.PropTypes.element.description('Action Button'),
+  secondAction: reactDesc.PropTypes.element.description('Action Button'),
+  backArrow: reactDesc.PropTypes.element.description('Back Arrow Button'),
+  breadCrumb: reactDesc.PropTypes.string.description('BreadCrumbs title'),
+  value: reactDesc.PropTypes.number.description('Page summary value'),
+  label: reactDesc.PropTypes.string.description('Page summary label'),
+  theme: reactDesc.PropTypes.object.description('dimsum theme')
+};
+const PageHeaderWithSchema = reactDesc.describe(MobilePageHeader);
+PageHeaderWithSchema.propTypes = pageHeaderProps;
+const DSMobilePageHeader = dsSystem.withTheme(MobilePageHeader);
+
+exports.DSMobilePageHeader = DSMobilePageHeader;
+exports.PageHeaderWithSchema = PageHeaderWithSchema;

package/cjs/MobilePageHeader/index.js

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

package/cjs/MobileSelectList/MobileSelectList.js

@@ -0,0 +1,145 @@
+'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.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.map.js');
+require('core-js/modules/esnext.iterator.map.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 dsGrid = require('@elliemae/ds-grid');
+var dsForm = require('@elliemae/ds-form');
+var dsSystem = require('@elliemae/ds-system');
+var MobileTouchable = require('../MobileTouchable/MobileTouchable.js');
+var styled = require('./styled.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);
+
+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 MobileSelectList = _ref => {
+  let {
+    open = false,
+    header = null,
+    multiple = false,
+    onChange = lodash.noop,
+    children,
+    theme,
+    zIndex = 1,
+    useSearch,
+    onSearch = lodash.noop,
+    dataTestid = 'mobile-select-list',
+    buttonFooter = null,
+    onApply = lodash.noop,
+    selecteds: initSelecteds = []
+  } = _ref;
+  const rows = ['auto', 1];
+  const [selecteds, setSelected] = React.useState(initSelecteds);
+  const [filter, setFilter] = React.useState('');
+  React.useEffect(() => {
+    setSelected(initSelecteds);
+  }, [initSelecteds]);
+
+  const handleSelection = value => {
+    if (multiple) {
+      const index = selecteds.findIndex(s => s === value);
+      if (index > -1) setSelected(selecteds.filter(s => s !== value));else setSelected([...selecteds, value]);
+    } else setSelected([value]);
+  };
+
+  const handleChange = function (event) {
+    onChange(event, this);
+    handleSelection(this.value);
+  };
+
+  const handleOnSearch = e => {
+    setFilter(e.target.value);
+    onSearch(e);
+  };
+
+  const handleApply = function (e) {
+    if (this.onClick) this.onClick(e);
+    onApply(e, selecteds);
+  };
+
+  if (buttonFooter) rows.push(dsSystem.op('*', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));
+  if (!open) return null;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_jsx__default["default"](styled.StyledContainer, {
+      "data-testid": dataTestid,
+      rows: rows,
+      zIndex: zIndex
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.HeaderContainer, {}, void 0, header, useSearch && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+      alignItems: "center",
+      height: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xl),
+      pl: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+      pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSTextBox, {
+      onChange: handleOnSearch,
+      placeholder: "Filter by name",
+      value: filter
+    }))), /*#__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"](styled.ListContainer, {
+      "data-testid": "".concat(dataTestid, "--list-container")
+    }, void 0, React__default["default"].Children.map(children, child => {
+      let leftAddon = null;
+      let rightAddon = null;
+      const {
+        value,
+        title
+      } = child.props;
+      const found = selecteds.findIndex(s => String(s) === String(value));
+      if (filter && !String(value).toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && !String(title).toLocaleLowerCase().includes(filter.toLocaleLowerCase())) return null;
+
+      if (multiple) {
+        if (found > -1) leftAddon = styled.checked;else leftAddon = styled.checkbox;
+      } else if (found > -1) {
+        rightAddon = styled.selectedMark;
+      }
+
+      return /*#__PURE__*/_jsx__default["default"](MobileTouchable.DSMobileTouchable, {
+        onClick: handleChange.bind(child.props)
+      }, void 0, /*#__PURE__*/React__default["default"].cloneElement(child, {
+        leftAddon,
+        rightAddon
+      }));
+    })))), buttonFooter && /*#__PURE__*/_jsx__default["default"](styled.Footer, {
+      alignItems: "center" // eslint-disable-next-line max-lines
+      ,
+      pl: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+      pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+    }, 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 DSMobileSelectList = dsSystem.withTheme(MobileSelectList);
+
+exports.DSMobileSelectList = DSMobileSelectList;

package/cjs/MobileSelectList/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileSelectList = require('./MobileSelectList.js');
+
+
+
+exports.DSMobileSelectList = MobileSelectList.DSMobileSelectList;

package/cjs/MobileSelectList/styled.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var lodash = require('lodash');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+var dsForm = require('@elliemae/ds-form');
+var dsIcons = require('@elliemae/ds-icons');
+var dsSystem = require('@elliemae/ds-system');
+var MobileTouchable = require('../MobileTouchable/MobileTouchable.js');
+var MobileListItem = require('../MobileListItem/MobileListItem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1dckxve-0"
+})(["background:", ";z-index:", ";position:fixed;width:100%;top:0;left:0;right:0;height:100%;"], props => props.theme.colors.neutral['000'], props => props.zIndex);
+const HeaderContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1dckxve-1"
+})(["border-bottom:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
+const Footer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1dckxve-2"
+})(["border-top:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
+const ListContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1dckxve-3"
+})(["& ", ":last-child ", "{border:none;}"], MobileTouchable.DSMobileTouchable, MobileListItem.DSMobileListItem);
+const checkbox = /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
+  checked: false,
+  onChange: lodash.noop,
+  style: {
+    pointerEvents: 'none'
+  }
+});
+const checked = /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
+  checked: true,
+  onChange: lodash.noop,
+  style: {
+    pointerEvents: 'none'
+  }
+});
+const selectedMark = /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
+  color: ['brand-primary', 600]
+});
+
+exports.Footer = Footer;
+exports.HeaderContainer = HeaderContainer;
+exports.ListContainer = ListContainer;
+exports.StyledContainer = StyledContainer;
+exports.checkbox = checkbox;
+exports.checked = checked;
+exports.selectedMark = selectedMark;

package/cjs/MobileSeparator/Separator.js

@@ -0,0 +1,73 @@
+'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');
+require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+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 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 Separator = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-lje3kq-0"
+})(["border-top:", ";border-left:", ";"], _ref => {
+  let {
+    theme,
+    color,
+    borderType
+  } = _ref;
+  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
+}, _ref2 => {
+  let {
+    theme,
+    color,
+    borderType
+  } = _ref2;
+  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
+});
+
+const MobileSeparator = _ref3 => {
+  let {
+    color = ['neutral', '800'],
+    direction = 'horizontal',
+    type = 'solid',
+    margin = 'xs'
+  } = _ref3;
+  const orientation = direction === 'vertical' ? 'height' : 'width';
+  const xORy = direction === 'vertical' ? 'mx' : 'my';
+  const styles = {
+    width: 0,
+    height: 0,
+    [orientation]: '100%',
+    [xORy]: margin,
+    borderType: type,
+    color
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Separator, _objectSpread({}, styles));
+};
+
+const mobileSeparatorProps = {
+  type: reactDesc.PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),
+  direction: reactDesc.PropTypes.oneOf(['vertical', 'horizontal']).description('Direction of the separator').defaultValue('horizontal'),
+  color: reactDesc.PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),
+  margin: reactDesc.PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']).description('Margin of the separator').defaultValue('xs')
+};
+const MobileSeparatorWithSchema = reactDesc.describe(MobileSeparator);
+MobileSeparatorWithSchema.propTypes = mobileSeparatorProps;
+
+exports.MobileSeparatorWithSchema = MobileSeparatorWithSchema;
+exports["default"] = MobileSeparator;

package/cjs/MobileSeparator/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Separator = require('./Separator.js');
+
+
+
+exports.MobileSeparatorWithSchema = Separator.MobileSeparatorWithSchema;
+exports["default"] = Separator["default"];

package/cjs/MobileTimePicker/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 dsSystem = require('@elliemae/ds-system');
+var styled = require('styled-components');
+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-ra7fth-0"
+})(["input[type=time]&{-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=time]&:active,input[type=time]&:focus{", "}&:before{color:", ";content:'", "';}input[type=time]&::-webkit-datetime-edit,input[type=time]&::-webkit-inner-spin-button,input[type=time]&::-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/MobileTimePicker/MobileTimePicker.js

@@ -0,0 +1,122 @@
+'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 _RecentDocuments;
+
+const DSMobileTimePicker = _ref => {
+  let {
+    disabled,
+    value,
+    tabIndex,
+    placeholder,
+    onChange
+  } = _ref;
+  const inputRef = React.useRef(null);
+  const valueArr = value.split(':');
+  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 displayValue = React.useMemo(() => {
+    if (!value || !valueArr[0] || !valueArr[1]) return '';
+    const ampm = valueArr[0] >= 12 ? 'pm' : 'am';
+    const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];
+    return "".concat(h, " : ").concat(valueArr[1], " ").concat(ampm);
+  }, [value]);
+  return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
+    rightAddon: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      "aria-label": "Time Picker Button",
+      color: !disabled ? dsIcon.DSIconColors.PRIMARY : dsIcon.DSIconColors.NEUTRAL,
+      disabled: disabled,
+      icon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx__default["default"](dsIcons.RecentDocuments, {})),
+      type: "button",
+      buttonType: "secondary",
+      onClick: () => {
+        inputRef.current.focus();
+        inputRef.current.click();
+      }
+    })
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Input.Input, {
+    innerRef: inputRef,
+    type: "time",
+    "data-testid": "ds-mobile-time-picker",
+    "aria-label": "Time Picker Input Mask",
+    disabled: disabled,
+    placeholder: placeholder,
+    tabIndex: tabIndex,
+    value: value,
+    "data-displayvalue": displayValue,
+    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);
+    }
+  }));
+};
+
+DSMobileTimePicker.defaultProps = {
+  disabled: false,
+  tabIndex: 0,
+  placeholder: 'HH : MM am',
+  value: ''
+};
+const pickerProps = {
+  /**
+   * defaults to false
+   */
+  disabled: reactDesc.PropTypes.bool.description('disabled prop, defaults to false'),
+
+  /**
+   * 0 as default
+   */
+  tabIndex: reactDesc.PropTypes.number.description('focus order HTML property, 0 as default'),
+
+  /**
+   * HH : MM am as default
+   */
+  placeholder: reactDesc.PropTypes.string.description('HH : MM am as default'),
+
+  /**
+   * onChange handler, receives change event as first argument
+   */
+  onChange: reactDesc.PropTypes.func.description('onChange handler, receives change event as first argument'),
+
+  /**
+   * HH:MM string representing the time or empty string
+   */
+  value: reactDesc.PropTypes.string.description('HH:MM string representing the time or empty string')
+};
+const DSMobileTimePickerWithSchema = reactDesc.describe(DSMobileTimePicker).description('Time picker for mobile & tablet');
+DSMobileTimePickerWithSchema.propTypes = pickerProps;
+
+exports.DSMobileTimePicker = DSMobileTimePicker;
+exports.DSMobileTimePickerWithSchema = DSMobileTimePickerWithSchema;

package/cjs/MobileTimePicker/index.js

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