@elliemae/ds-mobile 1.55.0-next.7 → 2.0.0-alpha.10

package/esm/MobileSelectList/MobileSelectList.js

@@ -1,190 +1,126 @@
 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 React, { useState, useEffect } from 'react';
 import { noop } from 'lodash';
-import PropTypes from 'prop-types';
 import { Grid } from '@elliemae/ds-basic/Grid';
 import DSTextBox from '@elliemae/ds-basic/form/TextBox';
 import { withTheme, op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
 import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
 import { StyledContainer, HeaderContainer, ListContainer, Footer, checked, checkbox, selectedMark } from './styled.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'styled-components';
-import '@elliemae/ds-basic/form/Checkbox';
-import '@elliemae/ds-icons/Checkmark';
-import '../MobileListItem/MobileListItem.js';
-import 'react-desc';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 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 MobileSelectList = function MobileSelectList(_ref) {
-  var _ref$open = _ref.open,
-      open = _ref$open === void 0 ? false : _ref$open,
-      _ref$header = _ref.header,
-      header = _ref$header === void 0 ? null : _ref$header,
-      _ref$multiple = _ref.multiple,
-      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      children = _ref.children,
-      theme = _ref.theme,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex,
-      useSearch = _ref.useSearch,
-      _ref$onSearch = _ref.onSearch,
-      onSearch = _ref$onSearch === void 0 ? noop : _ref$onSearch,
-      _ref$dataTestid = _ref.dataTestid,
-      dataTestid = _ref$dataTestid === void 0 ? 'mobile-select-list' : _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,
-      _ref$selecteds = _ref.selecteds,
-      initSelecteds = _ref$selecteds === void 0 ? [] : _ref$selecteds;
-  var rows = ['auto', 1];
-
-  var _useState = useState(initSelecteds),
-      _useState2 = _slicedToArray(_useState, 2),
-      selecteds = _useState2[0],
-      setSelected = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      filter = _useState4[0],
-      setFilter = _useState4[1];
-
-  useEffect(function () {
+const MobileSelectList = ({
+  open = false,
+  header = null,
+  multiple = false,
+  onChange = noop,
+  children,
+  theme,
+  zIndex = 1,
+  useSearch,
+  onSearch = noop,
+  dataTestid = 'mobile-select-list',
+  buttonFooter = null,
+  onApply = noop,
+  selecteds: initSelecteds = []
+}) => {
+  const rows = ['auto', 1];
+  const [selecteds, setSelected] = useState(initSelecteds);
+  const [filter, setFilter] = useState('');
+  useEffect(() => {
     setSelected(initSelecteds);
   }, [initSelecteds]);
 
-  var handleSelection = function handleSelection(value) {
+  const handleSelection = value => {
     if (multiple) {
-      var index = selecteds.findIndex(function (s) {
-        return s === value;
-      });
-      if (index > -1) setSelected(selecteds.filter(function (s) {
-        return s !== value;
-      }));else setSelected([].concat(_toConsumableArray(selecteds), [value]));
+      const index = selecteds.findIndex(s => s === value);
+      if (index > -1) setSelected(selecteds.filter(s => s !== value));else setSelected([...selecteds, value]);
     } else setSelected([value]);
   };
 
-  var handleChange = function handleChange(event) {
+  const handleChange = function (event) {
     onChange(event, this);
     handleSelection(this.value);
   };
 
-  var handleOnSearch = function handleOnSearch(e) {
+  const handleOnSearch = e => {
     setFilter(e.target.value);
     onSearch(e);
   };
 
-  var handleApply = function handleApply(e) {
+  const handleApply = function (e) {
     if (this.onClick) this.onClick(e);
     onApply(e, selecteds);
   };
 
   if (buttonFooter) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));
   if (!open) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContainer, {
-    "data-testid": dataTestid,
-    rows: rows,
-    zIndex: zIndex
-  }, /*#__PURE__*/React.createElement(HeaderContainer, null, header, useSearch && /*#__PURE__*/React.createElement(Grid, {
-    alignItems: "center",
-    height: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl),
-    pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
-    pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-  }, /*#__PURE__*/React.createElement(DSTextBox, {
-    onChange: handleOnSearch,
-    placeholder: "Filter by name",
-    value: filter
-  }))), /*#__PURE__*/React.createElement(Grid, {
-    style: {
-      overflow: 'hidden'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    style: {
-      overflow: 'auto'
-    }
-  }, /*#__PURE__*/React.createElement(ListContainer, {
-    "data-testid": "".concat(dataTestid, "--list-container")
-  }, React.Children.map(children, function (child) {
-    var leftAddon = null;
-    var rightAddon = null;
-    var _child$props = child.props,
-        value = _child$props.value,
-        title = _child$props.title;
-    var found = selecteds.findIndex(function (s) {
-      return 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 = checked;else leftAddon = checkbox;
-    } else if (found > -1) {
-      rightAddon = selectedMark;
-    }
-
-    return /*#__PURE__*/React.createElement(DSMobileTouchable, {
-      onClick: handleChange.bind(child.props)
-    }, /*#__PURE__*/React.cloneElement(child, {
-      leftAddon: leftAddon,
-      rightAddon: rightAddon
-    }));
-  })))), buttonFooter && /*#__PURE__*/React.createElement(Footer, {
-    alignItems: "center" // eslint-disable-next-line max-lines
-    ,
-    pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
-    pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-  }, /*#__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__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(StyledContainer, {
+      "data-testid": dataTestid,
+      rows: rows,
+      zIndex: zIndex
+    }, void 0, /*#__PURE__*/_jsx(HeaderContainer, {}, void 0, header, useSearch && /*#__PURE__*/_jsx(Grid, {
+      alignItems: "center",
+      height: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl),
+      pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+      pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+    }, void 0, /*#__PURE__*/_jsx(DSTextBox, {
+      onChange: handleOnSearch,
+      placeholder: "Filter by name",
+      value: filter
+    }))), /*#__PURE__*/_jsx(Grid, {
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      style: {
+        overflow: 'auto'
+      }
+    }, void 0, /*#__PURE__*/_jsx(ListContainer, {
+      "data-testid": `${dataTestid}--list-container`
+    }, void 0, React.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 = checked;else leftAddon = checkbox;
+      } else if (found > -1) {
+        rightAddon = selectedMark;
+      }
+
+      return /*#__PURE__*/_jsx(DSMobileTouchable, {
+        onClick: handleChange.bind(child.props)
+      }, void 0, /*#__PURE__*/React.cloneElement(child, {
+        leftAddon,
+        rightAddon
+      }));
+    })))), buttonFooter && /*#__PURE__*/_jsx(Footer, {
+      alignItems: "center" // eslint-disable-next-line max-lines
+      ,
+      pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+      pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+    }, void 0, /*#__PURE__*/React.cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
+      containerProps: {
+        'data-testid': `${dataTestid}--btn`
+      },
+      buttonType: 'primary',
+      size: 'l',
+      onClick: handleApply.bind(buttonFooter.props)
+    }))))
+  });
 };
 
-var DSMobileSelectList = withTheme(MobileSelectList);
-MobileSelectList.propTypes = {
-  /** show select list */
-  open: PropTypes.bool,
-
-  /** DSMobilePageHeader instance */
-  header: PropTypes.element,
-
-  /** called when a DSMobileListItem is touched */
-  onChange: PropTypes.func,
-
-  /** allow multiple selection */
-  multiple: PropTypes.bool,
-
-  /** Array of DSMobileListItem instances */
-  children: PropTypes.arrayOf(PropTypes.element),
-
-  /** data test id for testing purposes */
-  dataTestid: PropTypes.string,
-
-  /** footer action, DSButton instance */
-  buttonFooter: PropTypes.element,
-
-  /** called when footer action is triggered */
-  onApply: PropTypes.func,
-
-  /** zIndex */
-  zIndex: PropTypes.number,
-
-  /** init selecteds */
-  selecteds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-  theme: PropTypes.object.isRequired,
-  useSearch: PropTypes.bool,
-  onSearch: PropTypes.func
-};
+const DSMobileSelectList = withTheme(MobileSelectList);
 
 export { DSMobileSelectList };
-//# sourceMappingURL=MobileSelectList.js.map

package/esm/MobileSelectList/index.js

@@ -1,20 +1 @@
 export { DSMobileSelectList } from './MobileSelectList.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import 'lodash';
-import 'prop-types';
-import '@elliemae/ds-basic/Grid';
-import '@elliemae/ds-basic/form/TextBox';
-import '@elliemae/ds-system';
-import '../MobileTouchable/MobileTouchable.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'styled-components';
-import './styled.js';
-import '@elliemae/ds-basic/form/Checkbox';
-import '@elliemae/ds-icons/Checkmark';
-import '../MobileListItem/MobileListItem.js';
-import 'react-desc';
-//# sourceMappingURL=index.js.map

package/esm/MobileSelectList/styled.js

@@ -1,55 +1,42 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { noop } from 'lodash';
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-basic/Grid';
 import DSCheckbox from '@elliemae/ds-basic/form/Checkbox';
-import Checkmark from '@elliemae/ds-icons/Checkmark';
+import DSCheckmark from '@elliemae/ds-icons/Checkmark';
 import { border } from '@elliemae/ds-system';
 import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
 import { DSMobileListItem } from '../MobileListItem/MobileListItem.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'prop-types';
-import 'react-desc';
 
-var StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
+const StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1dckxve-0"
-})(["background:", ";z-index:", ";position:fixed;width:100%;top:0;left:0;right:0;height:100%;"], function (props) {
-  return props.theme.colors.neutral['000'];
-}, function (props) {
-  return props.zIndex;
-});
-var HeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
+})(["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(Grid).withConfig({
   componentId: "sc-1dckxve-1"
-})(["border-bottom:", ";"], function (props) {
-  return border(props.theme.colors.neutral['300']);
-});
-var Footer = /*#__PURE__*/styled(Grid).withConfig({
+})(["border-bottom:", ";"], props => border(props.theme.colors.neutral['300']));
+const Footer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1dckxve-2"
-})(["border-top:", ";"], function (props) {
-  return border(props.theme.colors.neutral['300']);
-});
-var ListContainer = /*#__PURE__*/styled.div.withConfig({
+})(["border-top:", ";"], props => border(props.theme.colors.neutral['300']));
+const ListContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1dckxve-3"
 })(["& ", ":last-child ", "{border:none;}"], DSMobileTouchable, DSMobileListItem);
-var checkbox = /*#__PURE__*/React.createElement(DSCheckbox, {
+const checkbox = /*#__PURE__*/_jsx(DSCheckbox, {
   checked: false,
   onChange: noop,
   style: {
     pointerEvents: 'none'
   }
 });
-var checked = /*#__PURE__*/React.createElement(DSCheckbox, {
+const checked = /*#__PURE__*/_jsx(DSCheckbox, {
   checked: true,
   onChange: noop,
   style: {
     pointerEvents: 'none'
   }
 });
-var selectedMark = /*#__PURE__*/React.createElement(Checkmark, {
+const selectedMark = /*#__PURE__*/_jsx(DSCheckmark, {
   color: ['brand-primary', 600]
 });
 
 export { Footer, HeaderContainer, ListContainer, StyledContainer, checkbox, checked, selectedMark };
-//# sourceMappingURL=styled.js.map

package/esm/MobileSeparator/Separator.js

@@ -1,52 +1,51 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React from 'react';
+import 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-basic/Grid';
+import { jsx } from 'react/jsx-runtime';
 
-var Separator = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-lje3kq-0"
-})(["border-top:", ";border-left:", ";"], function (_ref) {
-  var theme = _ref.theme,
-      color = _ref.color,
-      borderType = _ref.borderType;
-  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      color = _ref2.color,
-      borderType = _ref2.borderType;
-  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
-});
+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; }
 
-var MobileSeparator = function MobileSeparator(_ref3) {
-  var _styles;
+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 Separator = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-lje3kq-0"
+})(["border-top:", ";border-left:", ";"], ({
+  theme,
+  color,
+  borderType
+}) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`, ({
+  theme,
+  color,
+  borderType
+}) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`);
 
-  var _ref3$color = _ref3.color,
-      color = _ref3$color === void 0 ? ['neutral', '800'] : _ref3$color,
-      _ref3$direction = _ref3.direction,
-      direction = _ref3$direction === void 0 ? 'horizontal' : _ref3$direction,
-      _ref3$type = _ref3.type,
-      type = _ref3$type === void 0 ? 'solid' : _ref3$type,
-      _ref3$margin = _ref3.margin,
-      margin = _ref3$margin === void 0 ? 'xs' : _ref3$margin;
-  var orientation = direction === 'vertical' ? 'height' : 'width';
-  var xORy = direction === 'vertical' ? 'mx' : 'my';
-  var styles = (_styles = {
+const MobileSeparator = ({
+  color = ['neutral', '800'],
+  direction = 'horizontal',
+  type = 'solid',
+  margin = 'xs'
+}) => {
+  const orientation = direction === 'vertical' ? 'height' : 'width';
+  const xORy = direction === 'vertical' ? 'mx' : 'my';
+  const styles = {
     width: 0,
-    height: 0
-  }, _defineProperty(_styles, orientation, '100%'), _defineProperty(_styles, xORy, margin), _defineProperty(_styles, "borderType", type), _defineProperty(_styles, "color", color), _styles);
-  return /*#__PURE__*/React.createElement(Separator, styles);
+    height: 0,
+    [orientation]: '100%',
+    [xORy]: margin,
+    borderType: type,
+    color
+  };
+  return /*#__PURE__*/jsx(Separator, _objectSpread({}, styles));
 };
 
-var mobileSeparatorProps = {
+const mobileSeparatorProps = {
   type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),
   direction: PropTypes.oneOf(['vertical', 'horizontal']).description('Direction of the separator').defaultValue('horizontal'),
   color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),
   margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']).description('Margin of the separator').defaultValue('xs')
 };
-MobileSeparator.propTypes = mobileSeparatorProps;
-var MobileSeparatorWithSchema = describe(MobileSeparator);
+const MobileSeparatorWithSchema = describe(MobileSeparator);
 MobileSeparatorWithSchema.propTypes = mobileSeparatorProps;
 
 export { MobileSeparatorWithSchema, MobileSeparator as default };
-//# sourceMappingURL=Separator.js.map

package/esm/MobileSeparator/index.js

@@ -1,8 +1,2 @@
 import MobileSeparator from './Separator.js';
 export { MobileSeparatorWithSchema, default } from './Separator.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'react';
-import 'react-desc';
-import 'styled-components';
-import '@elliemae/ds-basic/Grid';
-//# sourceMappingURL=index.js.map

package/esm/MobileTimePicker/Input.js

@@ -1,35 +1,27 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React from 'react';
+import 'react';
 import { __UNSAFE_SPACE_TO_DIMSUM, focus } from '@elliemae/ds-system';
 import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["innerRef"];
-var StyledInput = /*#__PURE__*/styled.input.withConfig({
+const _excluded = ["innerRef"];
+
+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 StyledInput = /*#__PURE__*/styled.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;}"], function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l);
-}, function (props) {
-  return props.theme.colors.neutral['000'];
-}, function (props) {
-  return __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs);
-}, function (props) {
-  return props.theme.colors.neutral[200];
-}, function (props) {
-  return focus(props.theme.colors.brand[700]);
-}, function (props) {
-  return props.value === '' ? props.theme.colors.neutral['500'] : props.theme.colors.neutral['800'];
-}, function (props) {
-  return props.value === '' ? props.placeholder : props['data-displayvalue'];
-});
-var Input = function Input(_ref) {
-  var innerRef = _ref.innerRef,
+})(["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 => __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__*/React.createElement(StyledInput, _extends({
+  return /*#__PURE__*/jsx(StyledInput, _objectSpread({
     ref: innerRef
   }, props));
 };
 
 export { Input };
-//# sourceMappingURL=Input.js.map

package/esm/MobileTimePicker/MobileTimePicker.js

@@ -1,24 +1,24 @@
-import React, { useRef, useEffect, useMemo } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef, useEffect, useMemo } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import { DSIconColors } from '@elliemae/ds-basic/Icon';
 import RecentDocuments from '@elliemae/ds-icons/RecentDocuments';
 import DSButton from '@elliemae/ds-basic/Button';
 import DSInputGroup from '@elliemae/ds-basic/form/InputGroup';
 import { Input } from './Input.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@elliemae/ds-system';
-import 'styled-components';
 
-var DSMobileTimePicker = function DSMobileTimePicker(_ref) {
-  var disabled = _ref.disabled,
-      value = _ref.value,
-      tabIndex = _ref.tabIndex,
-      placeholder = _ref.placeholder,
-      _onChange = _ref.onChange;
-  var inputRef = useRef(null);
-  var valueArr = value.split(':');
-  useEffect(function () {
+var _RecentDocuments;
+
+const DSMobileTimePicker = ({
+  disabled,
+  value,
+  tabIndex,
+  placeholder,
+  onChange
+}) => {
+  const inputRef = useRef(null);
+  const valueArr = value.split(':');
+  useEffect(() => {
     /*
       necessary if value is being set in mount, 
       otherwise the clear won't work on the first click
@@ -28,26 +28,26 @@ var DSMobileTimePicker = function DSMobileTimePicker(_ref) {
       inputRef.current.defaultValue = '';
     }
   }, [inputRef.current]);
-  var displayValue = useMemo(function () {
+  const displayValue = useMemo(() => {
     if (!value || !valueArr[0] || !valueArr[1]) return '';
-    var ampm = valueArr[0] >= 12 ? 'pm' : 'am';
-    var h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];
-    return "".concat(h, " : ").concat(valueArr[1], " ").concat(ampm);
+    const ampm = valueArr[0] >= 12 ? 'pm' : 'am';
+    const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];
+    return `${h} : ${valueArr[1]} ${ampm}`;
   }, [value]);
-  return /*#__PURE__*/React.createElement(DSInputGroup, {
-    rightAddon: /*#__PURE__*/React.createElement(DSButton, {
+  return /*#__PURE__*/_jsx(DSInputGroup, {
+    rightAddon: /*#__PURE__*/_jsx(DSButton, {
       "aria-label": "Time Picker Button",
       color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
       disabled: disabled,
-      icon: /*#__PURE__*/React.createElement(RecentDocuments, null),
+      icon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {})),
       type: "button",
       buttonType: "secondary",
-      onClick: function onClick() {
+      onClick: () => {
         inputRef.current.focus();
         inputRef.current.click();
       }
     })
-  }, /*#__PURE__*/React.createElement(Input, {
+  }, void 0, /*#__PURE__*/_jsx(Input, {
     innerRef: inputRef,
     type: "time",
     "data-testid": "ds-mobile-time-picker",
@@ -57,17 +57,18 @@ var DSMobileTimePicker = function DSMobileTimePicker(_ref) {
     tabIndex: tabIndex,
     value: value,
     "data-displayvalue": displayValue,
-    onChange: function onChange(e) {
+    onChange: e => {
       // https://github.com/facebook/react/issues/8938#issuecomment-360573204
-      var target = e.nativeEvent.target;
+      const {
+        target
+      } = e.nativeEvent;
 
       function iosClearDefault() {
         target.defaultValue = '';
       }
 
       window.setTimeout(iosClearDefault, 0);
-
-      _onChange(e);
+      onChange(e);
     }
   }));
 };
@@ -78,7 +79,7 @@ DSMobileTimePicker.defaultProps = {
   placeholder: 'HH : MM am',
   value: ''
 };
-var pickerProps = {
+const pickerProps = {
   /**
    * defaults to false
    */
@@ -104,9 +105,7 @@ var pickerProps = {
    */
   value: PropTypes.string.description('HH:MM string representing the time or empty string')
 };
-DSMobileTimePicker.propTypes = pickerProps;
-var DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');
+const DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');
 DSMobileTimePickerWithSchema.propTypes = pickerProps;
 
 export { DSMobileTimePicker, DSMobileTimePickerWithSchema };
-//# sourceMappingURL=MobileTimePicker.js.map