@elliemae/ds-form 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/DateInputV2/components/DateInputs.js

@@ -1,180 +1,206 @@
-import * as React from "react";
-import React2, { useState, useEffect } from "react";
-import moment from "moment";
-import {
-  commonInputProps,
-  triggerOnBlur,
-  focusNextInput,
-  getFormattedDay,
-  getShouldShortcircuitDay,
-  getFormattedMonth,
-  getShouldShortcircuitMonth,
-  getFormattedYear
-} from "./utils";
-import { onKeyDownHelper } from "./helpers";
-import { DateInputDivider, DateInputWrapper, DateInputInput, DateInputFluidContainer } from "./styled";
-import { DateInputsPropTypes } from "./propsTypes";
-const FORMAT = "MMDDYYYY";
-const DateInputs = ({ onBlur, onChange, onDateChange, disabled, onCustomKeyDown, time, tabIndex, innerRef }) => {
-  const [month, setMonth] = useState("");
-  const [day, setDay] = useState("");
-  const [year, setYear] = useState("");
+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 { jsx } from 'react/jsx-runtime';
+
+var _DateInputDivider;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const 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 = React2.useRef();
+  const dayRef = React.useRef();
   const [haveInputsOnChangeTriggered, setHaveInputsOnChangeTriggered] = useState(false);
   let digits = 2;
-  let placeholder = "";
-  const handleFluidClick = React2.useCallback((e) => {
+  let placeholder = '';
+  const handleFluidClick = React.useCallback(e => {
     if (!e.target.type && dayRef.current) {
       dayRef.current.focus();
     }
   }, [dayRef.current]);
-  const triggerOnDateChange = React2.useCallback(() => {
+  const triggerOnDateChange = React.useCallback(() => {
     if (month && day && year && haveInputsOnChangeTriggered) {
-      const momentValue = moment(`${month}${day}${year}`, "MMDDYYYY", true);
+      const momentValue = moment("".concat(month).concat(day).concat(year), 'MMDDYYYY', true);
+
       if (momentValue.isValid()) {
         onDateChange(momentValue);
       }
+
       setHaveInputsOnChangeTriggered(false);
     }
-  }, [day, month, year, haveInputsOnChangeTriggered]);
-  const onMonthChange = React2.useCallback((e, isArrowChange) => {
+  }, [day, month, year, haveInputsOnChangeTriggered]); // isArrowChange is coming from the onKeyDown handler in helpers
+
+  const onMonthChange = React.useCallback((e, isArrowChange) => {
     const value = getFormattedMonth(e.target.value);
     const shouldAdvance = getShouldShortcircuitMonth(e.target.value);
     setMonth(value);
     setHaveInputsOnChangeTriggered(true);
+
     if (e.target.value.length > 1 || shouldAdvance) {
-      if (!isArrowChange)
-        focusNextInput(e.target);
+      if (!isArrowChange) focusNextInput(e.target);
       setOnChangeDateTrigger({});
     }
-  }, []);
-  const onDayChange = React2.useCallback((e, isArrowChange) => {
+  }, []); // isArrowChange is coming from the onKeyDown handler in helpers
+
+  const onDayChange = React.useCallback((e, isArrowChange) => {
     const value = getFormattedDay(e.target.value);
     const shouldAdvance = getShouldShortcircuitDay(e.target.value);
     setDay(value);
     setHaveInputsOnChangeTriggered(true);
+
     if (e.target.value.length > 1 || shouldAdvance) {
-      if (!isArrowChange)
-        focusNextInput(e.target);
+      if (!isArrowChange) focusNextInput(e.target);
       setOnChangeDateTrigger({});
     }
   }, []);
-  const onYearChange = React2.useCallback((e) => {
+  const onYearChange = React.useCallback(e => {
     const value = getFormattedYear(e.target.value);
     setYear(value);
     setHaveInputsOnChangeTriggered(true);
     setOnChangeDateTrigger({});
   }, []);
   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) {
-      const momentValue = moment(`${month}${day}${year}`, FORMAT, true);
-      onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);
+      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(() => {
     triggerOnDateChange();
   }, [onChangeDateTrigger]);
   useEffect(() => {
-    if (time && time !== `${month}${day}${year}` && moment(time, "MMDDYYYY").isValid()) {
-      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));
+    if (time && time !== "".concat(month).concat(day).concat(year) && moment(time, 'MMDDYYYY').isValid()) {
+      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));
     } else if (!time && (month || day || year)) {
-      setMonth("");
-      setDay("");
-      setYear("");
+      setMonth('');
+      setDay('');
+      setYear('');
     }
   }, [time]);
-  const onKeyDown = (event) => onKeyDownHelper(event, {
+
+  const onKeyDown = event => onKeyDownHelper(event, {
     onDayChange,
     onMonthChange,
     onYearChange
   });
+
   const renderMonthInput = () => {
-    placeholder = "MM";
-    const onMonthInputBlur = (e) => {
+    placeholder = 'MM';
+
+    const onMonthInputBlur = e => {
       setOnChangeDateTrigger({});
       triggerOnBlur(e, onBlur);
     };
-    return /* @__PURE__ */ React2.createElement(DateInputInput, {
-      ...commonInputProps(digits, onKeyDown, placeholder),
+
+    return /*#__PURE__*/createElement(DateInputInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autoComplete: "off",
       key: "month-input",
       "data-testid": "month",
-      disabled,
+      disabled: disabled,
       name: "month",
       onBlur: onMonthInputBlur,
       onChange: onMonthChange,
       value: month,
-      tabIndex,
+      tabIndex: tabIndex,
       ref: dayRef
-    });
+    }));
   };
+
   const renderDayInput = () => {
-    placeholder = "DD";
-    const onDayInputBlur = (e) => {
+    placeholder = 'DD';
+
+    const onDayInputBlur = e => {
       setOnChangeDateTrigger({});
       triggerOnBlur(e, onBlur);
     };
-    return /* @__PURE__ */ React2.createElement(DateInputInput, {
-      ...commonInputProps(digits, onKeyDown, placeholder),
+
+    return /*#__PURE__*/createElement(DateInputInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autoComplete: "off",
       key: "day-input",
       "data-testid": "day",
-      disabled,
+      disabled: disabled,
       name: "day",
       onBlur: onDayInputBlur,
       onChange: onDayChange,
       value: day,
-      tabIndex
-    });
+      tabIndex: tabIndex
+    }));
   };
+
   const renderYearInput = () => {
-    placeholder = "YY";
+    placeholder = 'YY';
     digits = 4;
-    const onYearInputBlur = (e) => {
+
+    const onYearInputBlur = e => {
       triggerOnBlur(e, onBlur);
     };
-    return /* @__PURE__ */ React2.createElement(DateInputInput, {
-      ...commonInputProps(digits, onKeyDown, placeholder),
+
+    return /*#__PURE__*/createElement(DateInputInput, _objectSpread(_objectSpread({}, commonInputProps(digits, onKeyDown, placeholder)), {}, {
       autoComplete: "off",
       key: "year-input",
       "data-testid": "year",
-      disabled,
+      disabled: disabled,
       name: "year",
       onBlur: onYearInputBlur,
       onChange: onYearChange,
       value: year,
       size: "l",
-      tabIndex
-    });
+      tabIndex: tabIndex
+    }));
   };
+
   const renderDateInputs = () => {
     const inputs = [renderMonthInput(), renderDayInput(), renderYearInput()];
-    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([index ? /* @__PURE__ */ React2.createElement(DateInputDivider, null, "/") : null, input]) : acc, []);
-    return [
-      inputsWithDividers,
-      React2.createElement("span", { key: "span" })
+    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__ */ React2.createElement(DateInputFluidContainer, {
+
+  return /*#__PURE__*/_jsx(DateInputFluidContainer, {
     onClick: handleFluidClick,
     "data-testid": "date-input-fluidContainer"
-  }, /* @__PURE__ */ React2.createElement(DateInputWrapper, {
-    disabled,
+  }, void 0, /*#__PURE__*/jsx(DateInputWrapper, {
+    disabled: disabled,
     ref: innerRef,
     onKeyDown: onCustomKeyDown,
     tabIndex: -1,
-    cols: ["auto", "6px", "auto", "6px", "auto"]
-  }, renderDateInputs()));
-};
-DateInputs.propTypes = DateInputsPropTypes;
-export {
-  DateInputs
+    cols: ['auto', '6px', 'auto', '6px', 'auto'],
+    children: renderDateInputs()
+  }));
 };
-//# sourceMappingURL=DateInputs.js.map
+
+export { DateInputs };

package/esm/DateInputV2/components/helpers.js

@@ -1,73 +1,73 @@
-import * as React from "react";
-import { cloneDeep } from "lodash";
-import { focusNextInput, focusPreviousInput } from "./utils";
+import { cloneDeep } from 'lodash';
+import { focusNextInput, focusPreviousInput } from './utils.js';
+
 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);
+  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);
 };
+
 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;
+  if (newValue < 1) newValue = '01';
+  if (event.target.name === 'day' && newValue > 31) newValue = 31;
+  if (event.target.name === 'month' && newValue > 12) newValue = 12;
   n.target.value = newValue;
   return n;
-};
+}; // eslint-disable-next-line max-statements, complexity
+
+
 const onKeyDownHelper = (event, handlers) => {
   switch (event.key) {
-    case "ArrowLeft": {
-      event.preventDefault();
-      focusPreviousInput(event.target);
-      break;
-    }
-    case "ArrowUp": {
-      event.preventDefault();
-      const n = setTarget(event, 1);
-      callChange(n, handlers, true);
-      break;
-    }
-    case "ArrowDown": {
-      event.preventDefault();
-      const n = setTarget(event, -1);
-      callChange(n, handlers, true);
-      break;
-    }
-    case "ArrowRight": {
-      event.preventDefault();
-      focusNextInput(event.target);
-      break;
-    }
-    case "Tab": {
-      if (event.shiftKey)
+    case 'ArrowLeft':
+      {
+        event.preventDefault();
+        focusPreviousInput(event.target);
+        break;
+      }
+
+    case 'ArrowUp':
+      {
+        event.preventDefault();
+        const n = setTarget(event, 1);
+        callChange(n, handlers, true);
+        break;
+      }
+
+    case 'ArrowDown':
+      {
+        event.preventDefault();
+        const n = setTarget(event, -1);
+        callChange(n, handlers, true);
         break;
-      if (event.target.value.length > 0 && event.target.name !== "year")
+      }
+
+    case 'ArrowRight':
+      {
         event.preventDefault();
-      callChange(event, handlers);
-      break;
-    }
-    case "Backspace": {
-      event.preventDefault();
-      const n = cloneDeep(event);
-      n.target.value = "";
-      callChange(n, handlers, true);
-      break;
-    }
-    case "Enter": {
-      break;
-    }
-    default:
-      break;
+        focusNextInput(event.target);
+        break;
+      }
+
+    case 'Tab':
+      {
+        if (event.shiftKey) break;
+        if (event.target.value.length > 0 && event.target.name !== 'year') event.preventDefault();
+        callChange(event, handlers);
+        break;
+      }
+
+    case 'Backspace':
+      {
+        // HTML Date input behavior, clear everything when deleting
+        event.preventDefault();
+        const n = cloneDeep(event);
+        n.target.value = '';
+        callChange(n, handlers, true);
+        break;
+      }
   }
 };
-export {
-  onKeyDownHelper
-};
-//# sourceMappingURL=helpers.js.map
+
+export { onKeyDownHelper };

package/esm/DateInputV2/components/props.js

@@ -1,20 +1,56 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { noop } from "lodash";
+import { PropTypes } from 'react-desc';
+import { noop } from 'lodash';
+
 const props = {
-  containerProps: PropTypes.object.description("Props to inject to date input wrapper"),
-  onBlur: PropTypes.func.description("Triggers the onBlur when focus moves out of date input"),
-  onFocus: PropTypes.func.description("Triggers the onFocus when the component gets the focus"),
-  onKeyDown: PropTypes.func.description("Triggers the onKeyDown"),
-  onChange: PropTypes.func.description("Allows a function that is triggered once the date input changes"),
-  onDateChange: PropTypes.func.description(" Triggers when the date is completely set and  only once you have blurred the corresponding input. For example if you are editing the day and the year and month are already set, once you completely set the day it will trigger."),
-  onError: PropTypes.func.description("Triggers the onError once one input date is wrong"),
-  value: PropTypes.string.description("Default value once the component is initialized MMDDYYYY"),
-  disabled: PropTypes.bool.description("Whether the date input is disabled or not"),
-  tabIndex: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]).description("tab index")
+  /** Props to inject to date input wrapper */
+  containerProps: PropTypes.object.description('Props to inject to date input wrapper'),
+
+  /**
+   * Triggers the onBlur when focus moves out of date input
+   */
+  onBlur: PropTypes.func.description('Triggers the onBlur when focus moves out of date input'),
+
+  /**
+   * Triggers the onFocus when the component gets the focus
+   */
+  onFocus: PropTypes.func.description('Triggers the onFocus when the component gets the focus'),
+
+  /**
+   * Triggers the onKeyDown
+   */
+  onKeyDown: PropTypes.func.description('Triggers the onKeyDown'),
+
+  /**
+   * Allows a function that is triggered once the date input changes
+   */
+  onChange: PropTypes.func.description('Allows a function that is triggered once the date input changes'),
+
+  /**
+   * Triggers when the date is completely set and  only once you have blurred the
+   * corresponding input. For example if you are editing the day and the year and month
+   * are already set, once you completely set the day it will trigger.
+   */
+  onDateChange: PropTypes.func.description(' Triggers when the date is completely set and  only once you have blurred the corresponding input. For example if you are editing the day and the year and month are already set, once you completely set the day it will trigger.'),
+
+  /**
+   * Triggers the onError once one input date is wrong
+   */
+  onError: PropTypes.func.description('Triggers the onError once one input date is wrong'),
+
+  /**
+   * Default value once the component is initialized MMDDYYYY
+   */
+  value: PropTypes.string.description('Default value once the component is initialized MMDDYYYY'),
+
+  /**
+   * Whether the date input is disabled or not
+   */
+  disabled: PropTypes.bool.description('Whether the date input is disabled or not'),
+
+  /**
+   * tab index
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description('tab index')
 };
 const defaultProps = {
   onFocus: noop,
@@ -23,12 +59,9 @@ const defaultProps = {
   onDateChange: noop,
   onKeyDown: noop,
   onError: noop,
-  value: "",
+  value: '',
   disabled: false,
   containerProps: {}
 };
-export {
-  defaultProps,
-  props
-};
-//# sourceMappingURL=props.js.map
+
+export { defaultProps, props };

package/esm/DateInputV2/components/propsTypes.js

@@ -1,10 +1,9 @@
-import * as React from "react";
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
+
 const DateInputsPropTypes = {
-  innerRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.any })
-  ]),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onDateChange: PropTypes.func,
@@ -21,7 +20,5 @@ const DateInputsPropTypes = {
   time: PropTypes.string,
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
-export {
-  DateInputsPropTypes
-};
-//# sourceMappingURL=propsTypes.js.map
+
+export { DateInputsPropTypes };

package/esm/DateInputV2/components/styled.js

@@ -1,70 +1,34 @@
-import * as React from "react";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-const DateInputFluidContainer = styled(Grid)`
-  width: 100%;
-  height: 100%;
-  align-items: center;
-`;
-const DateInputWrapper = styled(Grid)`
-  align-items: center;
-  align-content: center;
-  ${({ disabled, theme }) => disabled ? `
-    background: ${theme.colors.neutral[100]};
-    color: ${theme.colors.neutral[500]};
-    ` : ""}
-  width: 102px;
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
 
-  &:focus {
-    outline-style: none;
-    box-shadow: none;
-    border-color: transparent;
-  }
-`;
-const DateInputInput = styled.input`
-  outline: none;
-  border: none;
-  border-radius: 0;
-  width: ${(props) => props.size === "l" ? "38px" : "25px"};
-  height: ${(props) => props.theme.space.xs};
-  ${({ disabled, theme }) => disabled ? `
-  background: ${theme.colors.neutral[100]};
-  color: ${theme.colors.neutral[500]};
-  ` : ""}
-  padding-left: 4px;
-  padding-right: 0px;
-  &::placeholder {
-    font-size: 95%;
-    font-style: italic;
-  }
-  :-moz-placeholder {
-    font-size: 95%;
-    font-style: italic;
-  }
+const DateInputFluidContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-ads423-0"
+})(["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;}"], _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, _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;"]);
 
-  ::-moz-placeholder {
-    font-size: 95%;
-    font-style: italic;
-  }
-  &:focus {
-    background: ${({ theme }) => theme.colors.brand["300"]};
-    background-clip: content-box;
-  }
-  ::-moz-selection {
-    background: transparent;
-  }
-  ::selection {
-    background: transparent;
-  }
-`;
-const DateInputDivider = styled.div`
-  padding: 1px;
-  text-align: center;
-`;
-export {
-  DateInputDivider,
-  DateInputFluidContainer,
-  DateInputInput,
-  DateInputWrapper
-};
-//# sourceMappingURL=styled.js.map
+export { DateInputDivider, DateInputFluidContainer, DateInputInput, DateInputWrapper };