@elliemae/ds-form 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/DateInputV2/components/utils.js

@@ -1,159 +1,191 @@
-import * as React from "react";
-import { addLeadingZeros } from "@elliemae/ds-utilities";
-import { parseInt, isNaN } from "@elliemae/ds-utilities";
-import moment from "moment";
+import 'core-js/modules/web.dom-collections.iterator.js';
+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();
+
 const getNextSibling = (elem, selector) => {
-  let sibling = elem.nextElementSibling;
-  if (!selector)
-    return sibling;
+  // Get the next sibling element
+  let sibling = elem.nextElementSibling; // If there's no selector, return the first sibling
+
+  if (!selector) return sibling; // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+
   while (sibling) {
-    if (sibling.matches(selector))
-      return sibling;
+    if (sibling.matches(selector)) return sibling;
     sibling = sibling.nextElementSibling;
   }
+
   return sibling;
 };
+
 const getPreviousSibling = (elem, selector) => {
   let sibling = elem.previousElementSibling;
-  if (!selector)
-    return sibling;
+  if (!selector) return sibling;
+
   while (sibling) {
-    if (sibling.matches(selector))
-      return sibling;
+    if (sibling.matches(selector)) return sibling;
     sibling = sibling.previousElementSibling;
   }
+
   return sibling;
 };
-const isArrowIncrementDecrement = (key) => key === "ArrowDown" || key === "ArrowUp";
+
+const isArrowIncrementDecrement = key => key === 'ArrowDown' || key === 'ArrowUp'; // TODO remove and keep `true` behavior ( PUI-4141 )
+
 const setNativeValue = (element, value) => {
-  if (!Object.getOwnPropertyDescriptor(element, "value"))
-    return;
-  const valueSetter = Object.getOwnPropertyDescriptor(element, "value").set;
+  if (!Object.getOwnPropertyDescriptor(element, 'value')) return;
+  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
   const prototype = Object.getPrototypeOf(element);
-  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, "value").set;
+  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
+
   if (valueSetter && valueSetter !== prototypeValueSetter) {
     prototypeValueSetter.call(element, value);
   } else {
     valueSetter.call(element, value);
   }
-  element.dispatchEvent(new Event("input", { bubbles: true }));
+
+  element.dispatchEvent(new Event('input', {
+    bubbles: true
+  }));
 };
+
 const formatTimeNumber = (value, shouldAddLeadingZeros, leadingZeros) => {
-  if (value === null || value === void 0)
-    return "";
+  if (value === null || value === undefined) return '';
   return shouldAddLeadingZeros ? addLeadingZeros(leadingZeros)(value) : String(value);
 };
-const getFormattedDay = (value) => {
+
+const getFormattedDay = value => {
   const v = value.length > 2 ? value.slice(-2) : value;
   const parsedValue = parseInt(v, 10);
-  if (parsedValue > 31)
-    return "31";
+  if (parsedValue > 31) return '31';
   return formatTimeNumber(parseTimeNumberFromText(v), true, 2);
 };
-const getShouldShortcircuitDay = (value) => {
+const getShouldShortcircuitDay = value => {
   const v = value.length > 2 ? value.slice(-2) : value;
   const parsedValue = parseInt(v, 10);
-  if (parsedValue > 31)
-    return true;
-  if (parsedValue > 3 && parsedValue < 10)
-    return true;
+  if (parsedValue > 31) return true; // if the first input is in range 4-9 then there is no other option
+  // so we auto advance
+
+  if (parsedValue > 3 && parsedValue < 10) return true;
   return false;
 };
-const getFormattedYear = (value) => {
+const getFormattedYear = value => {
   const v = value.length > 4 ? value.slice(-4) : value;
-  if (parseInt(v) > 9999)
-    return "9999";
+  if (parseInt(v) > 9999) return '9999';
   return formatTimeNumber(parseTimeNumberFromText(v), true, 4);
 };
-const getFormattedMonth = (value) => {
+const getFormattedMonth = value => {
   const v = value.length > 2 ? value.slice(-2) : value;
   const parsedValue = parseInt(v, 10);
-  if (parsedValue > 12)
-    return "12";
+  if (parsedValue > 12) return '12';
   return formatTimeNumber(parseTimeNumberFromText(v), true, 2);
 };
-const getShouldShortcircuitMonth = (value) => {
+const getShouldShortcircuitMonth = value => {
   const v = value.length > 2 ? value.slice(-2) : value;
   const parsedValue = parseInt(v, 10);
-  if (parsedValue > 12)
-    return true;
-  if (parsedValue > 1 && parsedValue < 10)
-    return true;
+  if (parsedValue > 12) return true; // if the first input is in range 2-9 then there is no other option
+  // so we auto advance
+
+  if (parsedValue > 1 && parsedValue < 10) return true;
   return false;
 };
-const parseTimeNumberFromText = (stringValue) => {
+const parseTimeNumberFromText = stringValue => {
   const parsedInt = parseInt(stringValue);
-  if (isNaN(parsedInt))
-    return null;
+  if (isNaN(parsedInt)) return null;
   return parsedInt;
-};
-const triggerOnBlur = (blurEvent, onBlur = () => {
-}) => {
-  const { target: currentEl = {}, relatedTarget } = blurEvent || {};
+}; // trigger onBlur for entire DateInput control if focus is not in day, month, year
+
+const triggerOnBlur = function (blurEvent) {
+  let onBlur = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
+  const {
+    target: currentEl = {},
+    relatedTarget
+  } = blurEvent || {};
   const nextElement = currentEl.nextElementSibling;
-  const { nextElementSibling } = nextElement || {};
+  const {
+    nextElementSibling
+  } = nextElement || {}; // relatedTarget points to the element that is currently having focus
+
   if (!nextElementSibling || nextElementSibling !== relatedTarget) {
     onBlur(blurEvent);
   }
 };
-const focusNextInput = (currentEl) => {
-  getNextSibling(currentEl, "input")?.focus();
-};
-const focusPreviousInput = (currentEl) => {
-  getPreviousSibling(currentEl, "input")?.focus();
-};
-const getValidTimeNumber = ({ min, max }, number, valueString = "", onError = () => null) => {
-  if (valueString === "0" || number === 0)
-    return null;
-  if (number === void 0 || number === null)
-    return null;
+const focusNextInput = currentEl => {
+  var _getNextSibling;
+
+  (_getNextSibling = getNextSibling(currentEl, 'input')) === null || _getNextSibling === void 0 ? void 0 : _getNextSibling.focus();
+};
+const focusPreviousInput = currentEl => {
+  var _getPreviousSibling;
+
+  (_getPreviousSibling = getPreviousSibling(currentEl, 'input')) === null || _getPreviousSibling === void 0 ? void 0 : _getPreviousSibling.focus();
+};
+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;
+
   if (number > max) {
     onError();
     return max;
   }
+
   if (number < min) {
     onError();
     return min;
   }
+
   return number;
 };
-const shouldFocusNextInput = (max, number = 0, stringValue) => {
-  if (stringValue.length > 1)
-    return true;
+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;
 };
 const getDateValuesFromTime = (time, format) => {
-  if (!time || !time.format)
-    return {};
-  const month = time.format("MM");
-  const day = time.format("DD");
-  const year = time.format("YYYY");
+  if (!time || !time.format) return {};
+  time.format('MM');
+  time.format('DD');
+  time.format('YYYY');
   return {
-    month: getFormattedMonth(format, month),
-    day: getFormattedDay(format, day),
-    year: getFormattedYear(format, year)
+    month: getFormattedMonth(format),
+    day: getFormattedDay(format),
+    year: getFormattedYear(format)
   };
 };
 const resetTimeValues = () => ({
-  month: "",
-  day: "",
-  year: ""
+  month: '',
+  day: '',
+  year: ''
 });
-const onInputFocus = (e) => {
+const onInputFocus = e => {
   e.preventDefault();
-  e.stopPropagation();
+  e.stopPropagation(); // we select the whole value to be able to override the value on first key
+  // we don't use selection color to be consistent with the highlight of the input
+
   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;
-  if (target === "year") {
-    if (result < yearMinRange)
-      result = currentYear;
-    if (result > yearMaxRange)
-      result = currentYear;
+
+  if (target === 'year') {
+    if (result < yearMinRange) result = currentYear;
+    if (result > yearMaxRange) result = currentYear;
   }
+
   return result;
 };
 const focusNextInputIfNeeded = (currentEl, max, number, stringValue, currentKey) => {
@@ -161,68 +193,61 @@ 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]*",
+    pattern: '[0-9]*',
     placeholder,
-    type: "text",
+    type: 'text',
     onKeyDown,
     onFocus: onInputFocus
   };
-  if (digits === 4)
-    props.placeholder = "YYYY";
+  if (digits === 4) props.placeholder = 'YYYY';
   return props;
 };
 const handleCompletedDate = (time, date, show, INTERNAL_V2_NO_MUTATION) => {
+  // clone time to avoid mutation when INTERNAL_V2_NO_MUTATION is true
   const newDate = INTERNAL_V2_NO_MUTATION ? time && moment(time) || moment() : time || moment();
-  const { year, month, day } = date;
-  const { showYear, showMonth, showDay } = show;
-  if (time && !year && !month && !day)
-    return "";
-  newDate.value = `${year}-${month}-${day}`;
-  if (showMonth && month)
-    newDate.month(parseInt(month - 1, 10));
-  if (showDay && day)
-    newDate.date(parseInt(day, 10));
-  if (showYear && year)
-    newDate.year(parseInt(year, 10));
+  const {
+    year,
+    month,
+    day
+  } = date;
+  const {
+    showYear,
+    showMonth,
+    showDay
+  } = show;
+  if (time && !year && !month && !day) return '';
+  newDate.value = "".concat(year, "-").concat(month, "-").concat(day);
+  if (showMonth && month) newDate.month(parseInt(month - 1, 10));
+  if (showDay && day) newDate.date(parseInt(day, 10));
+  if (showYear && year) newDate.year(parseInt(year, 10));
   return newDate;
 };
 const isTimeCompletelySet = (date, show, range) => {
   let neededValues = [];
-  const { year, month, day } = date;
-  const { showYear, showMonth, showDay } = show;
-  const { yearMinRange, yearMaxRange } = range;
-  if (showMonth)
-    neededValues = [...neededValues, month || null];
-  if (showDay)
-    neededValues = [...neededValues, day || null];
-  if (showYear)
-    neededValues = [...neededValues, year || null];
+  const {
+    year,
+    month,
+    day
+  } = date;
+  const {
+    showYear,
+    showMonth,
+    showDay
+  } = show;
+  const {
+    yearMinRange,
+    yearMaxRange
+  } = range;
+  if (showMonth) neededValues = [...neededValues, month || null];
+  if (showDay) neededValues = [...neededValues, day || null];
+  if (showYear) neededValues = [...neededValues, year || null];
   const isValidYear = year < yearMaxRange && year > yearMinRange;
-  return !neededValues.some((value) => !value) && isValidYear;
-};
-export {
-  commonInputProps,
-  focusNextInput,
-  focusNextInputIfNeeded,
-  focusPreviousInput,
-  getDateValuesFromTime,
-  getFormattedDay,
-  getFormattedMonth,
-  getFormattedYear,
-  getNextTimeValue,
-  getShouldShortcircuitDay,
-  getShouldShortcircuitMonth,
-  getValidTimeNumber,
-  handleCompletedDate,
-  isArrowIncrementDecrement,
-  isTimeCompletelySet,
-  onInputFocus,
-  parseTimeNumberFromText,
-  resetTimeValues,
-  setNativeValue,
-  shouldFocusNextInput,
-  triggerOnBlur
-};
-//# sourceMappingURL=utils.js.map
+  return !neededValues.some(value => !value) && isValidYear;
+};
+
+export { commonInputProps, focusNextInput, focusNextInputIfNeeded, focusPreviousInput, getDateValuesFromTime, getFormattedDay, getFormattedMonth, getFormattedYear, getNextTimeValue, getShouldShortcircuitDay, getShouldShortcircuitMonth, getValidTimeNumber, handleCompletedDate, isArrowIncrementDecrement, isTimeCompletelySet, onInputFocus, parseTimeNumberFromText, resetTimeValues, setNativeValue, shouldFocusNextInput, triggerOnBlur };

package/esm/DateInputV2/index.js

@@ -1,7 +1,2 @@
-import * as React from "react";
-import { DateInputs } from "./components/DateInputs";
-export * from "./components/DSDateInput";
-export {
-  DateInputs as DateInputsV2Impl
-};
-//# sourceMappingURL=index.js.map
+export { DateInputs as DateInputsV2Impl } from './components/DateInputs.js';
+export { DSDateInputV2, DSDateInputV2WithSchema, DSDateInputV2 as default } from './components/DSDateInput.js';

package/esm/ExpandableInput/DSExpandableInput.js

@@ -1,33 +1,33 @@
-import * as React from "react";
-import React2 from "react";
-import { ExpandableInputImpl } from "./ExpandableInputImpl";
-const DSExpandableInput = ({
-  containerProps = {},
-  innerRef,
-  className = "",
-  style = {},
-  triggerComponent = void 0,
-  children,
-  isOpen = false,
-  onOpen = () => null,
-  onClose = () => null,
-  onBlur = () => null,
-  width = void 0
-}) => /* @__PURE__ */ React2.createElement(ExpandableInputImpl, {
-  className,
-  containerProps,
-  innerRef,
-  isOpen,
-  onBlur,
-  onClose,
-  onOpen,
-  style,
-  triggerComponent,
-  width
-}, children);
-var DSExpandableInput_default = DSExpandableInput;
-export {
-  DSExpandableInput,
-  DSExpandableInput_default as default
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import ExpandableInputImpl from './ExpandableInputImpl.js';
+
+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);
 };
-//# sourceMappingURL=DSExpandableInput.js.map
+
+export { DSExpandableInput as default };

package/esm/ExpandableInput/ExpandableInputImpl.js

@@ -1,17 +1,50 @@
-import * as React from "react";
-import React2, { Component, cloneElement } from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { isFunction } from "@elliemae/ds-shared/utils";
-import { InputAddonWrapper } from "../Input";
-const blockName = "expandable-input";
-const ExpandableInput = aggregatedClasses("div")(blockName, null, ({ isOpen }) => ({ opened: isOpen }));
-const InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, "wrapper", ({ isOpen }) => ({ opened: isOpen }));
+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';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { isFunction } from '@elliemae/ds-shared/utils';
+import '@babel/runtime/helpers/esm/objectWithoutProperties';
+import '../Input/InputImpl.js';
+import InputAddonWrapper from '../Input/InputAddonWrapper.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 blockName = 'expandable-input';
+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();
+  }
+
   componentDidUpdate(prevProps) {
-    const { isOpen } = this.props;
-    if (isOpen && isOpen !== prevProps.isOpen)
-      this.input.focus();
+    const {
+      isOpen
+    } = this.props;
+    if (isOpen && isOpen !== prevProps.isOpen) this.input.focus();
   }
+
   render() {
     const {
       innerRef,
@@ -24,38 +57,39 @@ class ExpandableInputImpl extends Component {
       onBlur,
       containerProps
     } = this.props;
-    const InputComponent = React2.Children.only(children);
-    const handleTriggerClick = (e) => {
-      if (isFunction(triggerComponent.onClick))
-        triggerComponent.onClick(e);
+    const InputComponent = React.Children.only(children);
+
+    const handleTriggerClick = e => {
+      if (isFunction(triggerComponent.onClick)) triggerComponent.onClick(e);
+
       if (isOpen) {
         onClose();
       } else {
         onOpen();
       }
     };
-    return /* @__PURE__ */ React2.createElement(ExpandableInput, {
-      ...containerProps,
-      classProps: { isOpen },
-      innerRef,
-      style: { width: isOpen && width }
-    }, /* @__PURE__ */ React2.createElement(InputWrapper, {
-      rightComponents: [
-        cloneElement(triggerComponent, {
-          key: "handler",
+
+    return /*#__PURE__*/jsx(ExpandableInput, _objectSpread(_objectSpread({}, containerProps), {}, {
+      classProps: {
+        isOpen
+      },
+      innerRef: innerRef,
+      style: {
+        width: isOpen && width
+      },
+      children: /*#__PURE__*/_jsx(InputWrapper, {
+        rightComponents: [/*#__PURE__*/cloneElement(triggerComponent, {
+          key: 'handler',
           onClick: handleTriggerClick
-        })
-      ]
-    }, cloneElement(InputComponent, {
-      className: "expandable-input__input",
-      innerRef: (node) => this.input = node,
-      onBlur
-    })));
+        })]
+      }, void 0, /*#__PURE__*/cloneElement(InputComponent, {
+        className: 'expandable-input__input',
+        innerRef: node => this.input = node,
+        onBlur
+      }))
+    }));
   }
+
 }
-var ExpandableInputImpl_default = ExpandableInputImpl;
-export {
-  ExpandableInputImpl,
-  ExpandableInputImpl_default as default
-};
-//# sourceMappingURL=ExpandableInputImpl.js.map
+
+export { ExpandableInputImpl as default };

package/esm/ExpandableInput/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./DSExpandableInput";
-//# sourceMappingURL=index.js.map
+export { default } from './DSExpandableInput.js';