@elliemae/ds-form 2.0.0-next.7 → 2.0.0-rc.10

package/esm/DateInput/components/DateInputs.js

@@ -1,9 +1,16 @@
+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 _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 React, { useState, useEffect, createElement } from 'react';
+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, useCallback, createElement } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import usePrevious from '@elliemae/ds-utilities/hooks/usePrevious';
+import { usePrevious } from '@elliemae/ds-utilities';
 import { getDateValuesFromTime, isTimeCompletelySet, handleCompletedDate, commonInputProps, focusPreviousInput, setNativeValue, focusNextInput, getNextTimeValue, parseTimeNumberFromText, getValidTimeNumber, formatYear, focusNextInputIfNeeded, formatMonth, formatDay, triggerOnBlur } from './utils.js';
 
 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; }
@@ -14,38 +21,45 @@ const InputTimesGroup = aggregatedClasses('div')(blockName);
 const MonthInput = aggregatedClasses('input')(blockName, 'input input-month');
 const DayInput = aggregatedClasses('input')(blockName, 'input input-day');
 const YearInput = aggregatedClasses('input')(blockName, 'input input-year');
-const Divider = aggregatedClasses('span')(blockName, 'divider', ({
-  value
-}) => ({
-  value
-})); // eslint-disable-next-line react/prop-types
-
-const DateDivider = ({
-  content = ':',
-  value = ''
-}) => /*#__PURE__*/_jsx(Divider, {
-  value: !!value
-}, void 0, content);
-
-const DateInputs = ({
-  innerRef,
-  onBlur,
-  onChange,
-  onCustomKeyDown,
-  onError,
-  format = '',
-  showMonth = true,
-  showDay = true,
-  showYear = true,
-  step = 1,
-  yearMaxRange,
-  disabled,
-  yearMinRange,
-  time,
-  // TODO remove and keep `true` behavior ( PUI-4141 )
-  INTERNAL_V2_NO_MUTATION // eslint-disable-line react/prop-types
-
-}) => {
+const Divider = aggregatedClasses('span')(blockName, 'divider', _ref => {
+  let {
+    value
+  } = _ref;
+  return {
+    value
+  };
+}); // eslint-disable-next-line react/prop-types
+
+const DateDivider = _ref2 => {
+  let {
+    content = ':',
+    value = ''
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Divider, {
+    value: !!value
+  }, void 0, content);
+};
+
+const DateInputs = _ref3 => {
+  let {
+    innerRef,
+    onBlur,
+    onChange,
+    onCustomKeyDown,
+    onError,
+    format = '',
+    showMonth = true,
+    showDay = true,
+    showYear = true,
+    step = 1,
+    yearMaxRange,
+    disabled,
+    yearMinRange,
+    time,
+    // TODO remove and keep `true` behavior ( PUI-4141 )
+    INTERNAL_V2_NO_MUTATION // eslint-disable-line react/prop-types
+
+  } = _ref3;
   const [currentKey, setCurrentKey] = useState('ArrowUp');
   const [month, setMonth] = useState('');
   const [day, setDay] = useState('');
@@ -61,7 +75,7 @@ const DateInputs = ({
       setDay(dateValues.day);
       setYear(dateValues.year);
     }
-  }, [time]);
+  }, [format, time]);
   useEffect(() => {
     if (!time && prevTime) {
       setMonth('');
@@ -76,9 +90,8 @@ const DateInputs = ({
       setDay(dateValues.day);
       setYear(dateValues.year);
     }
-  }, [time, prevTime, format]);
-
-  const isCompletedDate = () => isTimeCompletelySet({
+  }, [time, prevTime, format, prevFormat, onChange]);
+  const isCompletedDate = useCallback(() => isTimeCompletelySet({
     year,
     month,
     day
@@ -89,8 +102,7 @@ const DateInputs = ({
   }, {
     yearMinRange,
     yearMaxRange
-  });
-
+  }), [day, month, showDay, showMonth, showYear, year, yearMaxRange, yearMinRange]);
   useEffect(() => {
     if (INTERNAL_V2_NO_MUTATION) {
       const dateValues = getDateValuesFromTime(time, format);
@@ -127,7 +139,7 @@ const DateInputs = ({
         }, INTERNAL_V2_NO_MUTATION));
       }
     }
-  }, [day, month, year]);
+  }, [INTERNAL_V2_NO_MUTATION, day, format, isCompletedDate, month, onChange, showDay, showMonth, showYear, time, year]);
 
   const triggerChange = () => handleCompletedDate(time, {
     year,
@@ -197,7 +209,8 @@ const DateInputs = ({
   }; // eslint-disable-next-line complexity
 
 
-  const onKeyDown = (event, shouldIncrementDecrement = true) => {
+  const onKeyDown = function (event) {
+    let shouldIncrementDecrement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const {
       value,
       name

package/esm/DateInput/components/utils.js

@@ -1,6 +1,8 @@
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { addLeadingZeros } from '@elliemae/ds-utilities/timeUtils';
-import { parseInt, isNaN } from '@elliemae/ds-utilities/utils';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import { parseInt, isNaN, addLeadingZeros } from '@elliemae/ds-utilities';
 import moment from 'moment';
 
 const currentYear = new Date().getFullYear();
@@ -46,7 +48,8 @@ const parseTimeNumberFromText = stringValue => {
   return parsedInt;
 }; // trigger onBlur for entire DateInput control if focus is not in day, month, year
 
-const triggerOnBlur = (blurEvent, onBlur = () => {}) => {
+const triggerOnBlur = function (blurEvent) {
+  let onBlur = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
   const {
     target: currentEl = {},
     relatedTarget
@@ -74,10 +77,13 @@ const focusPreviousInput = currentEl => {
     previousElement.previousElementSibling.focus();
   }
 };
-const getValidTimeNumber = ({
-  min,
-  max
-}, number, valueString = '', onError = () => null) => {
+const getValidTimeNumber = function (_ref, number) {
+  let {
+    min,
+    max
+  } = _ref;
+  let valueString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let onError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => null;
   if (valueString === '0' || number === 0) return null;
   if (number === undefined || number === null) return null;
 
@@ -93,7 +99,9 @@ const getValidTimeNumber = ({
 
   return number;
 };
-const shouldFocusNextInput = (max, number = 0, stringValue) => {
+const shouldFocusNextInput = function (max) {
+  let number = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let stringValue = arguments.length > 2 ? arguments[2] : undefined;
   if (stringValue.length > 1 && !stringValue.startsWith('0')) return true;
   return number * 10 > max;
 };
@@ -118,7 +126,9 @@ const onInputFocus = e => {
   e.stopPropagation();
   e.target.select();
 };
-const getNextTimeValue = (value, target, yearMinRange, yearMaxRange, step = 1, incrementing = true) => {
+const getNextTimeValue = function (value, target, yearMinRange, yearMaxRange) {
+  let step = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  let incrementing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
   const parsedValue = parseTimeNumberFromText(value);
   let result = incrementing ? parsedValue + step : parsedValue - step;
 
@@ -134,7 +144,10 @@ const focusNextInputIfNeeded = (currentEl, max, number, stringValue, currentKey)
     focusNextInput(currentEl);
   }
 };
-const commonInputProps = (digits = 2, onKeyDown, placeholder) => {
+const commonInputProps = function () {
+  let digits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
+  let onKeyDown = arguments.length > 1 ? arguments[1] : undefined;
+  let placeholder = arguments.length > 2 ? arguments[2] : undefined;
   const props = {
     pattern: '[0-9]*',
     placeholder,

package/esm/DateInputV2/components/DSDateInput.js

@@ -5,42 +5,48 @@ import DSInput from '../../Input/DSInput.js';
 import { DateInputs } from './DateInputs.js';
 import { props, defaultProps } from './props.js';
 
-const DSDateInputV2 = ({
-  onFocus,
-  onBlur,
-  onChange,
-  onDateChange,
-  onKeyDown,
-  onError,
-  value,
-  disabled,
-  containerProps,
-  tabIndex,
-  innerRef
-}) => /*#__PURE__*/_jsx(DSInput, {
-  innerRef: innerRef,
-  containerProps: containerProps,
-  customInputType: ({
-    innerRef: ir
-  }) => /*#__PURE__*/_jsx(DateInputs, {
+const DSDateInputV2 = _ref => {
+  let {
+    onFocus,
+    onBlur,
+    onChange,
+    onDateChange,
+    onKeyDown,
+    onError,
+    value,
+    disabled,
+    containerProps,
+    tabIndex,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSInput, {
+    innerRef: innerRef,
+    containerProps: containerProps,
+    customInputType: _ref2 => {
+      let {
+        innerRef: ir
+      } = _ref2;
+      return /*#__PURE__*/_jsx(DateInputs, {
+        disabled: disabled,
+        innerRef: ir,
+        onBlur: onBlur,
+        onChange: onChange,
+        onDateChange: onDateChange,
+        onCustomKeyDown: onKeyDown,
+        onError: onError,
+        time: value,
+        tabIndex: tabIndex
+      });
+    },
+    disableTooltip: false,
     disabled: disabled,
-    innerRef: ir,
     onBlur: onBlur,
-    onChange: onChange,
-    onDateChange: onDateChange,
-    onCustomKeyDown: onKeyDown,
-    onError: onError,
-    time: value,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
     tabIndex: tabIndex
-  }),
-  disableTooltip: false,
-  disabled: disabled,
-  onBlur: onBlur,
-  onFocus: onFocus,
-  onKeyDown: onKeyDown,
-  value: value,
-  tabIndex: tabIndex
-});
+  });
+};
 
 DSDateInputV2.defaultProps = defaultProps;
 const DSDateInputV2WithSchema = describe(DSDateInputV2);

package/esm/DateInputV2/components/DateInputs.js

@@ -1,6 +1,13 @@
+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';
@@ -14,16 +21,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 = ({
-  onBlur,
-  onChange,
-  onDateChange,
-  disabled,
-  onCustomKeyDown,
-  time,
-  tabIndex,
-  innerRef
-}) => {
+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('');

package/esm/DateInputV2/components/styled.js

@@ -6,18 +6,27 @@ const DateInputFluidContainer = /*#__PURE__*/styled(Grid).withConfig({
 })(["width:100%;height:100%;align-items:center;"]);
 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;}"], ({
-  disabled,
-  theme
-}) => disabled ? "\n    background: ".concat(theme.colors.neutral[100], ";\n    color: ").concat(theme.colors.neutral[500], ";\n    ") : '');
+})(["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    ") : '';
+});
 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;}"], props => props.size === 'l' ? '38px' : '25px', props => props.theme.space.xs, ({
-  disabled,
-  theme
-}) => disabled ? "\n  background: ".concat(theme.colors.neutral[100], ";\n  color: ").concat(theme.colors.neutral[500], ";\n  ") : '', ({
-  theme
-}) => theme.colors.brand['300']);
+})(["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  ") : '';
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.brand['300'];
+});
 const DateInputDivider = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ads423-3"
 })(["padding:1px;text-align:center;"]);

package/esm/DateInputV2/components/utils.js

@@ -1,6 +1,8 @@
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { addLeadingZeros } from '@elliemae/ds-utilities/timeUtils';
-import { parseInt, isNaN } from '@elliemae/ds-utilities/utils';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import { parseInt, isNaN, addLeadingZeros } from '@elliemae/ds-utilities';
 import moment from 'moment';
 
 const currentYear = new Date().getFullYear();
@@ -97,7 +99,8 @@ const parseTimeNumberFromText = stringValue => {
   return parsedInt;
 }; // trigger onBlur for entire DateInput control if focus is not in day, month, year
 
-const triggerOnBlur = (blurEvent, onBlur = () => {}) => {
+const triggerOnBlur = function (blurEvent) {
+  let onBlur = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
   const {
     target: currentEl = {},
     relatedTarget
@@ -121,10 +124,13 @@ const focusPreviousInput = currentEl => {
 
   (_getPreviousSibling = getPreviousSibling(currentEl, 'input')) === null || _getPreviousSibling === void 0 ? void 0 : _getPreviousSibling.focus();
 };
-const getValidTimeNumber = ({
-  min,
-  max
-}, number, valueString = '', onError = () => null) => {
+const getValidTimeNumber = function (_ref, number) {
+  let {
+    min,
+    max
+  } = _ref;
+  let valueString = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let onError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => null;
   if (valueString === '0' || number === 0) return null;
   if (number === undefined || number === null) return null;
 
@@ -140,7 +146,9 @@ const getValidTimeNumber = ({
 
   return number;
 };
-const shouldFocusNextInput = (max, number = 0, stringValue) => {
+const shouldFocusNextInput = function (max) {
+  let number = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let stringValue = arguments.length > 2 ? arguments[2] : undefined;
   if (stringValue.length > 1) return true;
   return number * 10 > max;
 };
@@ -167,7 +175,9 @@ const onInputFocus = e => {
 
   e.target.select();
 };
-const getNextTimeValue = (value, target, yearMinRange, yearMaxRange, step = 1, incrementing = true) => {
+const getNextTimeValue = function (value, target, yearMinRange, yearMaxRange) {
+  let step = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  let incrementing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
   const parsedValue = parseTimeNumberFromText(value);
   let result = incrementing ? parsedValue + step : parsedValue - step;
 
@@ -183,7 +193,10 @@ const focusNextInputIfNeeded = (currentEl, max, number, stringValue, currentKey)
     focusNextInput(currentEl);
   }
 };
-const commonInputProps = (digits = 2, onKeyDown, placeholder) => {
+const commonInputProps = function () {
+  let digits = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
+  let onKeyDown = arguments.length > 1 ? arguments[1] : undefined;
+  let placeholder = arguments.length > 2 ? arguments[2] : undefined;
   const props = {
     pattern: '[0-9]*',
     placeholder,

package/esm/ExpandableInput/DSExpandableInput.js

@@ -2,29 +2,32 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import ExpandableInputImpl from './ExpandableInputImpl.js';
 
-const DSExpandableInput = ({
-  containerProps = {},
-  innerRef,
-  className = '',
-  style = {},
-  triggerComponent = undefined,
-  children,
-  isOpen = false,
-  onOpen = () => null,
-  onClose = () => null,
-  onBlur = () => null,
-  width = undefined
-}) => /*#__PURE__*/_jsx(ExpandableInputImpl, {
-  className: className,
-  containerProps: containerProps,
-  innerRef: innerRef,
-  isOpen: isOpen,
-  onBlur: onBlur,
-  onClose: onClose,
-  onOpen: onOpen,
-  style: style,
-  triggerComponent: triggerComponent,
-  width: width
-}, void 0, children);
+const DSExpandableInput = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    className = '',
+    style = {},
+    triggerComponent = undefined,
+    children,
+    isOpen = false,
+    onOpen = () => null,
+    onClose = () => null,
+    onBlur = () => null,
+    width = undefined
+  } = _ref;
+  return /*#__PURE__*/_jsx(ExpandableInputImpl, {
+    className: className,
+    containerProps: containerProps,
+    innerRef: innerRef,
+    isOpen: isOpen,
+    onBlur: onBlur,
+    onClose: onClose,
+    onOpen: onOpen,
+    style: style,
+    triggerComponent: triggerComponent,
+    width: width
+  }, void 0, children);
+};
 
 export { DSExpandableInput as default };

package/esm/ExpandableInput/ExpandableInputImpl.js

@@ -1,3 +1,8 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { Component, cloneElement } from 'react';
@@ -12,16 +17,22 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 blockName = 'expandable-input';
-const ExpandableInput = aggregatedClasses('div')(blockName, null, ({
-  isOpen
-}) => ({
-  opened: isOpen
-}));
-const InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, 'wrapper', ({
-  isOpen
-}) => ({
-  opened: isOpen
-}));
+const ExpandableInput = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    isOpen
+  } = _ref;
+  return {
+    opened: isOpen
+  };
+});
+const InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, 'wrapper', _ref2 => {
+  let {
+    isOpen
+  } = _ref2;
+  return {
+    opened: isOpen
+  };
+});
 class ExpandableInputImpl extends Component {
   constructor() {
     super();