@elliemae/ds-form 1.60.0 → 2.0.0-alpha.12

package/esm/DateInputV2/components/DateInputs.js

@@ -1,66 +1,53 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useEffect } from 'react';
+import 'core-js/modules/esnext.async-iterator.filter.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 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import React, { useState, useEffect, createElement } from 'react';
 import moment from 'moment';
 import { getFormattedMonth, getShouldShortcircuitMonth, focusNextInput, getFormattedDay, getShouldShortcircuitDay, getFormattedYear, commonInputProps, triggerOnBlur } from './utils.js';
 import { onKeyDownHelper } from './helpers.js';
 import { DateInputFluidContainer, DateInputWrapper, DateInputInput, DateInputDivider } from './styled.js';
-import { DateInputsPropTypes } from './propsTypes.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@elliemae/ds-utilities';
-import 'lodash';
-import 'styled-components';
-import '@elliemae/ds-grid';
-import 'prop-types';
-
-var FORMAT = 'MMDDYYYY';
-var DateInputs = function DateInputs(_ref) {
-  var onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      onDateChange = _ref.onDateChange,
-      disabled = _ref.disabled,
-      onCustomKeyDown = _ref.onCustomKeyDown,
-      time = _ref.time,
-      tabIndex = _ref.tabIndex,
-      innerRef = _ref.innerRef;
-
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      month = _useState2[0],
-      setMonth = _useState2[1];
-
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      day = _useState4[0],
-      setDay = _useState4[1];
-
-  var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      year = _useState6[0],
-      setYear = _useState6[1];
-
-  var _useState7 = useState({}),
-      _useState8 = _slicedToArray(_useState7, 2),
-      onChangeDateTrigger = _useState8[0],
-      setOnChangeDateTrigger = _useState8[1];
-
-  var dayRef = React.useRef();
-
-  var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      haveInputsOnChangeTriggered = _useState10[0],
-      setHaveInputsOnChangeTriggered = _useState10[1];
-
-  var digits = 2;
-  var placeholder = '';
-  var handleFluidClick = React.useCallback(function (e) {
+import { jsx } from 'react/jsx-runtime';
+
+var _DateInputDivider;
+
+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 FORMAT = 'MMDDYYYY';
+const DateInputs = _ref => {
+  let {
+    onBlur,
+    onChange,
+    onDateChange,
+    disabled,
+    onCustomKeyDown,
+    time,
+    tabIndex,
+    innerRef
+  } = _ref;
+  const [month, setMonth] = useState('');
+  const [day, setDay] = useState('');
+  const [year, setYear] = useState('');
+  const [onChangeDateTrigger, setOnChangeDateTrigger] = useState({});
+  const dayRef = React.useRef();
+  const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);
+  let digits = 2;
+  let placeholder = '';
+  const handleFluidClick = React.useCallback(e => {
     if (!e.target.type && dayRef.current) {
       dayRef.current.focus();
     }
   }, [dayRef.current]);
-  var triggerOnDateChange = React.useCallback(function () {
+  const triggerOnDateChange = React.useCallback(() => {
     if (month && day && year && haveInputsOnChangeTriggered) {
-      var momentValue = moment("".concat(month).concat(day).concat(year), 'MMDDYYYY', true);
+      const momentValue = moment("".concat(month).concat(day).concat(year), 'MMDDYYYY', true);
 
       if (momentValue.isValid()) {
         onDateChange(momentValue);
@@ -70,9 +57,9 @@ var DateInputs = function DateInputs(_ref) {
     }
   }, [day, month, year, haveInputsOnChangeTriggered]); // isArrowChange is coming from the onKeyDown handler in helpers
 
-  var onMonthChange = React.useCallback(function (e, isArrowChange) {
-    var value = getFormattedMonth(e.target.value);
-    var shouldAdvance = getShouldShortcircuitMonth(e.target.value);
+  const onMonthChange = React.useCallback((e, isArrowChange) => {
+    const value = getFormattedMonth(e.target.value);
+    const shouldAdvance = getShouldShortcircuitMonth(e.target.value);
     setMonth(value);
     setHaveInputsOnChangeTriggered(true);
 
@@ -82,9 +69,9 @@ var DateInputs = function DateInputs(_ref) {
     }
   }, []); // isArrowChange is coming from the onKeyDown handler in helpers
 
-  var onDayChange = React.useCallback(function (e, isArrowChange) {
-    var value = getFormattedDay(e.target.value);
-    var shouldAdvance = getShouldShortcircuitDay(e.target.value);
+  const onDayChange = React.useCallback((e, isArrowChange) => {
+    const value = getFormattedDay(e.target.value);
+    const shouldAdvance = getShouldShortcircuitDay(e.target.value);
     setDay(value);
     setHaveInputsOnChangeTriggered(true);
 
@@ -93,26 +80,26 @@ var DateInputs = function DateInputs(_ref) {
       setOnChangeDateTrigger({});
     }
   }, []);
-  var onYearChange = React.useCallback(function (e) {
-    var value = getFormattedYear(e.target.value);
+  const onYearChange = React.useCallback(e => {
+    const value = getFormattedYear(e.target.value);
     setYear(value);
     setHaveInputsOnChangeTriggered(true);
     setOnChangeDateTrigger({});
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     // When component mounts haveInputsOnChangeTriggered is set to false
     // so this is not triggered on mount but is triggered with all other changes
     if (haveInputsOnChangeTriggered) {
-      var momentValue = moment("".concat(month).concat(day).concat(year), FORMAT, true);
+      const momentValue = moment("".concat(month).concat(day).concat(year), FORMAT, true);
       onChange("".concat(month).concat(day).concat(year), momentValue.isValid() ? momentValue : null);
     }
   }, [day, month, year]);
-  useEffect(function () {
+  useEffect(() => {
     triggerOnDateChange();
   }, [onChangeDateTrigger]);
-  useEffect(function () {
+  useEffect(() => {
     if (time && time !== "".concat(month).concat(day).concat(year) && moment(time, 'MMDDYYYY').isValid()) {
-      var values = String(time || '');
+      const values = String(time || '');
       if (values.slice(0, 2)) setMonth(values.slice(0, 2));
       if (values.slice(2, 4)) setDay(values.slice(2, 4));
       if (values.slice(4, 8)) setYear(values.slice(4, 8));
@@ -123,23 +110,21 @@ var DateInputs = function DateInputs(_ref) {
     }
   }, [time]);
 
-  var onKeyDown = function onKeyDown(event) {
-    return onKeyDownHelper(event, {
-      onDayChange: onDayChange,
-      onMonthChange: onMonthChange,
-      onYearChange: onYearChange
-    });
-  };
+  const onKeyDown = event => onKeyDownHelper(event, {
+    onDayChange,
+    onMonthChange,
+    onYearChange
+  });
 
-  var renderMonthInput = function renderMonthInput() {
+  const renderMonthInput = () => {
     placeholder = 'MM';
 
-    var onMonthInputBlur = function onMonthInputBlur(e) {
+    const onMonthInputBlur = e => {
       setOnChangeDateTrigger({});
       triggerOnBlur(e, onBlur);
     };
 
-    return /*#__PURE__*/React.createElement(DateInputInput, _extends({}, commonInputProps(digits, onKeyDown, placeholder), {
+    return /*#__PURE__*/createElement(DateInputInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autoComplete: "off",
       key: "month-input",
       "data-testid": "month",
@@ -153,15 +138,15 @@ var DateInputs = function DateInputs(_ref) {
     }));
   };
 
-  var renderDayInput = function renderDayInput() {
+  const renderDayInput = () => {
     placeholder = 'DD';
 
-    var onDayInputBlur = function onDayInputBlur(e) {
+    const onDayInputBlur = e => {
       setOnChangeDateTrigger({});
       triggerOnBlur(e, onBlur);
     };
 
-    return /*#__PURE__*/React.createElement(DateInputInput, _extends({}, commonInputProps(digits, onKeyDown, placeholder), {
+    return /*#__PURE__*/createElement(DateInputInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autoComplete: "off",
       key: "day-input",
       "data-testid": "day",
@@ -174,15 +159,15 @@ var DateInputs = function DateInputs(_ref) {
     }));
   };
 
-  var renderYearInput = function renderYearInput() {
+  const renderYearInput = () => {
     placeholder = 'YY';
     digits = 4;
 
-    var onYearInputBlur = function onYearInputBlur(e) {
+    const onYearInputBlur = e => {
       triggerOnBlur(e, onBlur);
     };
 
-    return /*#__PURE__*/React.createElement(DateInputInput, _extends({}, commonInputProps(digits, onKeyDown, placeholder), {
+    return /*#__PURE__*/createElement(DateInputInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autoComplete: "off",
       key: "year-input",
       "data-testid": "year",
@@ -196,29 +181,26 @@ var DateInputs = function DateInputs(_ref) {
     }));
   };
 
-  var renderDateInputs = function renderDateInputs() {
-    var inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];
-    var inputsWithDividers = inputs.reduce(function (acc, input, index) {
-      return input ? acc.concat([index ? /*#__PURE__*/React.createElement(DateInputDivider, null, "/") : null, input]) : acc;
-    }, []);
+  const renderDateInputs = () => {
+    const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];
+    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([index ? _DateInputDivider || (_DateInputDivider = /*#__PURE__*/_jsx(DateInputDivider, {}, void 0, "/")) : null, input]) : acc, []);
     return [inputsWithDividers, /*#__PURE__*/React.createElement('span', {
       key: 'span'
     }) // hack for next/prev focus
     ];
   };
 
-  return /*#__PURE__*/React.createElement(DateInputFluidContainer, {
+  return /*#__PURE__*/_jsx(DateInputFluidContainer, {
     onClick: handleFluidClick,
     "data-testid": "date-input-fluidContainer"
-  }, /*#__PURE__*/React.createElement(DateInputWrapper, {
+  }, void 0, /*#__PURE__*/jsx(DateInputWrapper, {
     disabled: disabled,
     ref: innerRef,
     onKeyDown: onCustomKeyDown,
     tabIndex: -1,
-    cols: ['auto', '6px', 'auto', '6px', 'auto']
-  }, renderDateInputs()));
+    cols: ['auto', '6px', 'auto', '6px', 'auto'],
+    children: renderDateInputs()
+  }));
 };
-DateInputs.propTypes = DateInputsPropTypes;
 
 export { DateInputs };
-//# sourceMappingURL=DateInputs.js.map

package/esm/DateInputV2/components/helpers.js

@@ -1,18 +1,15 @@
 import { cloneDeep } from 'lodash';
 import { focusNextInput, focusPreviousInput } from './utils.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@elliemae/ds-utilities';
-import 'moment';
 
-var callChange = function callChange(event, handlers, isArrowChange) {
+const callChange = (event, handlers, isArrowChange) => {
   if (event.target.name === 'day') handlers.onDayChange(event, isArrowChange);
   if (event.target.name === 'month') handlers.onMonthChange(event, isArrowChange);
   if (event.target.name === 'year') handlers.onYearChange(event, isArrowChange);
 };
 
-var setTarget = function setTarget(event, v) {
-  var n = cloneDeep(event);
-  var newValue = parseInt(n.target.value || 0, 10) + v;
+const setTarget = (event, v) => {
+  const n = cloneDeep(event);
+  let newValue = parseInt(n.target.value || 0, 10) + v;
   if (newValue < 1) newValue = '01';
   if (event.target.name === 'day' && newValue > 31) newValue = 31;
   if (event.target.name === 'month' && newValue > 12) newValue = 12;
@@ -21,7 +18,7 @@ var setTarget = function setTarget(event, v) {
 }; // eslint-disable-next-line max-statements, complexity
 
 
-var onKeyDownHelper = function onKeyDownHelper(event, handlers) {
+const onKeyDownHelper = (event, handlers) => {
   switch (event.key) {
     case 'ArrowLeft':
       {
@@ -33,7 +30,7 @@ var onKeyDownHelper = function onKeyDownHelper(event, handlers) {
     case 'ArrowUp':
       {
         event.preventDefault();
-        var n = setTarget(event, 1);
+        const n = setTarget(event, 1);
         callChange(n, handlers, true);
         break;
       }
@@ -41,10 +38,8 @@ var onKeyDownHelper = function onKeyDownHelper(event, handlers) {
     case 'ArrowDown':
       {
         event.preventDefault();
-
-        var _n = setTarget(event, -1);
-
-        callChange(_n, handlers, true);
+        const n = setTarget(event, -1);
+        callChange(n, handlers, true);
         break;
       }
 
@@ -67,15 +62,12 @@ var onKeyDownHelper = function onKeyDownHelper(event, handlers) {
       {
         // HTML Date input behavior, clear everything when deleting
         event.preventDefault();
-
-        var _n2 = cloneDeep(event);
-
-        _n2.target.value = '';
-        callChange(_n2, handlers, true);
+        const n = cloneDeep(event);
+        n.target.value = '';
+        callChange(n, handlers, true);
         break;
       }
   }
 };
 
 export { onKeyDownHelper };
-//# sourceMappingURL=helpers.js.map

package/esm/DateInputV2/components/props.js

@@ -1,7 +1,7 @@
 import { PropTypes } from 'react-desc';
 import { noop } from 'lodash';
 
-var props = {
+const props = {
   /** Props to inject to date input wrapper */
   containerProps: PropTypes.object.description('Props to inject to date input wrapper'),
 
@@ -52,7 +52,7 @@ var props = {
    */
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('tab index')
 };
-var defaultProps = {
+const defaultProps = {
   onFocus: noop,
   onBlur: noop,
   onChange: noop,
@@ -65,4 +65,3 @@ var defaultProps = {
 };
 
 export { defaultProps, props };
-//# sourceMappingURL=props.js.map

package/esm/DateInputV2/components/propsTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-var DateInputsPropTypes = {
+const DateInputsPropTypes = {
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.any
   })]),
@@ -22,4 +22,3 @@ var DateInputsPropTypes = {
 };
 
 export { DateInputsPropTypes };
-//# sourceMappingURL=propsTypes.js.map

package/esm/DateInputV2/components/styled.js

@@ -1,33 +1,34 @@
 import styled from 'styled-components';
 import { Grid } from '@elliemae/ds-grid';
 
-var DateInputFluidContainer = /*#__PURE__*/styled(Grid).withConfig({
+const DateInputFluidContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-ads423-0"
 })(["width:100%;height:100%;align-items:center;"]);
-var DateInputWrapper = /*#__PURE__*/styled(Grid).withConfig({
+const DateInputWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-ads423-1"
-})(["align-items:center;align-content:center;", " width:102px;&:focus{outline-style:none;box-shadow:none;border-color:transparent;}"], function (_ref) {
-  var disabled = _ref.disabled,
-      theme = _ref.theme;
+})(["align-items:center;align-content:center;", " width:102px;&:focus{outline-style:none;box-shadow:none;border-color:transparent;}"], _ref => {
+  let {
+    disabled,
+    theme
+  } = _ref;
   return disabled ? "\n    background: ".concat(theme.colors.neutral[100], ";\n    color: ").concat(theme.colors.neutral[500], ";\n    ") : '';
 });
-var DateInputInput = /*#__PURE__*/styled.input.withConfig({
+const DateInputInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-ads423-2"
-})(["outline:none;border:none;border-radius:0;width:", ";height:", ";", " padding-left:4px;padding-right:0px;&::placeholder{font-size:95%;font-style:italic;}:-moz-placeholder{font-size:95%;font-style:italic;}::-moz-placeholder{font-size:95%;font-style:italic;}&:focus{background:", ";background-clip:content-box;}::-moz-selection{background:transparent;}::selection{background:transparent;}"], function (props) {
-  return props.size === 'l' ? '38px' : '25px';
-}, function (props) {
-  return props.theme.space.xs;
-}, function (_ref2) {
-  var disabled = _ref2.disabled,
-      theme = _ref2.theme;
+})(["outline:none;border:none;border-radius:0;width:", ";height:", ";", " padding-left:4px;padding-right:0px;&::placeholder{font-size:95%;font-style:italic;}:-moz-placeholder{font-size:95%;font-style:italic;}::-moz-placeholder{font-size:95%;font-style:italic;}&:focus{background:", ";background-clip:content-box;}::-moz-selection{background:transparent;}::selection{background:transparent;}"], props => props.size === 'l' ? '38px' : '25px', props => props.theme.space.xs, _ref2 => {
+  let {
+    disabled,
+    theme
+  } = _ref2;
   return disabled ? "\n  background: ".concat(theme.colors.neutral[100], ";\n  color: ").concat(theme.colors.neutral[500], ";\n  ") : '';
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.colors.brand['300'];
 });
-var DateInputDivider = /*#__PURE__*/styled.div.withConfig({
+const DateInputDivider = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ads423-3"
 })(["padding:1px;text-align:center;"]);
 
 export { DateInputDivider, DateInputFluidContainer, DateInputInput, DateInputWrapper };
-//# sourceMappingURL=styled.js.map