@elliemae/ds-form 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/DateInputV2/components/utils.js

@@ -0,0 +1,253 @@
+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) => {
+  // 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;
+    sibling = sibling.nextElementSibling;
+  }
+
+  return sibling;
+};
+
+const getPreviousSibling = (elem, selector) => {
+  let sibling = elem.previousElementSibling;
+  if (!selector) return sibling;
+
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling;
+    sibling = sibling.previousElementSibling;
+  }
+
+  return sibling;
+};
+
+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;
+  const prototype = Object.getPrototypeOf(element);
+  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
+  }));
+};
+
+const formatTimeNumber = (value, shouldAddLeadingZeros, leadingZeros) => {
+  if (value === null || value === undefined) return '';
+  return shouldAddLeadingZeros ? addLeadingZeros(leadingZeros)(value) : String(value);
+};
+
+const getFormattedDay = value => {
+  const v = value.length > 2 ? value.slice(-2) : value;
+  const parsedValue = parseInt(v, 10);
+  if (parsedValue > 31) return '31';
+  return formatTimeNumber(parseTimeNumberFromText(v), true, 2);
+};
+const getShouldShortcircuitDay = value => {
+  const v = value.length > 2 ? value.slice(-2) : value;
+  const parsedValue = parseInt(v, 10);
+  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 v = value.length > 4 ? value.slice(-4) : value;
+  if (parseInt(v) > 9999) return '9999';
+  return formatTimeNumber(parseTimeNumberFromText(v), true, 4);
+};
+const getFormattedMonth = value => {
+  const v = value.length > 2 ? value.slice(-2) : value;
+  const parsedValue = parseInt(v, 10);
+  if (parsedValue > 12) return '12';
+  return formatTimeNumber(parseTimeNumberFromText(v), true, 2);
+};
+const getShouldShortcircuitMonth = value => {
+  const v = value.length > 2 ? value.slice(-2) : value;
+  const parsedValue = parseInt(v, 10);
+  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 parsedInt = parseInt(stringValue);
+  if (isNaN(parsedInt)) return null;
+  return parsedInt;
+}; // 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 || {}; // relatedTarget points to the element that is currently having focus
+
+  if (!nextElementSibling || nextElementSibling !== relatedTarget) {
+    onBlur(blurEvent);
+  }
+};
+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 = 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 {};
+  time.format('MM');
+  time.format('DD');
+  time.format('YYYY');
+  return {
+    month: getFormattedMonth(format),
+    day: getFormattedDay(format),
+    year: getFormattedYear(format)
+  };
+};
+const resetTimeValues = () => ({
+  month: '',
+  day: '',
+  year: ''
+});
+const onInputFocus = e => {
+  e.preventDefault();
+  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 = 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;
+  }
+
+  return result;
+};
+const focusNextInputIfNeeded = (currentEl, max, number, stringValue, currentKey) => {
+  if (shouldFocusNextInput(max, number, stringValue) && !isArrowIncrementDecrement(currentKey)) {
+    focusNextInput(currentEl);
+  }
+};
+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,
+    type: 'text',
+    onKeyDown,
+    onFocus: onInputFocus
+  };
+  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 = "".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 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 };

package/esm/DateInputV2/index.js

@@ -0,0 +1,2 @@
+export { DateInputs as DateInputsV2Impl } from './components/DateInputs.js';
+export { DSDateInputV2, DSDateInputV2WithSchema, DSDateInputV2 as default } from './components/DSDateInput.js';

package/esm/ExpandableInput/DSExpandableInput.js

@@ -0,0 +1,33 @@
+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);
+};
+
+export { DSExpandableInput as default };

package/esm/ExpandableInput/ExpandableInputImpl.js

@@ -0,0 +1,95 @@
+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();
+  }
+
+  render() {
+    const {
+      innerRef,
+      triggerComponent,
+      children,
+      width,
+      isOpen,
+      onOpen,
+      onClose,
+      onBlur,
+      containerProps
+    } = this.props;
+    const InputComponent = React.Children.only(children);
+
+    const handleTriggerClick = e => {
+      if (isFunction(triggerComponent.onClick)) triggerComponent.onClick(e);
+
+      if (isOpen) {
+        onClose();
+      } else {
+        onOpen();
+      }
+    };
+
+    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
+        })]
+      }, void 0, /*#__PURE__*/cloneElement(InputComponent, {
+        className: 'expandable-input__input',
+        innerRef: node => this.input = node,
+        onBlur
+      }))
+    }));
+  }
+
+}
+
+export { ExpandableInputImpl as default };

package/esm/ExpandableInput/index.js

@@ -0,0 +1 @@
+export { default } from './DSExpandableInput.js';

package/esm/FloatingLabelInput/DSFloatingLabelInput.js

@@ -0,0 +1,131 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import FloatingLabelInputImpl from './FloatingLabelInputImpl.js';
+import DSLabel from '../FormItem/Label/DSLabel.js';
+import DSTextBox from '../TextBox/DSTextBox.js';
+
+const noop = () => {};
+
+const DSFloatingLabelInput = _ref => {
+  let {
+    containerProps = {},
+    arialLabel = '',
+
+    /**
+     * Gets the reference for the input controller
+     *
+     * @param {HTMLElement} node
+     */
+    innerRef = noop,
+
+    /**
+     * Custom className for floatingLabelInput
+     */
+    className = '',
+
+    /**
+     * Props injected to the input component
+     *
+     * @type Object
+     */
+    extraInputProps = {},
+
+    /**
+     * Input controller
+     *
+     * @type {element}
+     */
+    inputComponent = DSTextBox,
+
+    /**
+     * Input value
+     *
+     * @type {string}
+     */
+    value = '',
+
+    /**
+     * Label component
+     *
+     * @type {element}
+     */
+    labelComponent = DSLabel,
+
+    /**
+     * Label text
+     *
+     * @type {string | element}
+     */
+    labelText = null,
+
+    /**
+     * Callback when input controller has changed
+     *
+     * @param event
+     */
+    onChange = noop,
+    onBlur = noop,
+    onFocus = noop,
+
+    /**
+     * Whether the label is floating or not
+     *
+     * @type {boolean}
+     */
+    isOpen = false,
+
+    /**
+     * Whether ...
+     *
+     * @type {boolean}
+     */
+    hasError = false,
+
+    /**
+     * Whether ...
+     *
+     * @type {boolean}
+     */
+    readOnly = false,
+
+    /**
+     * Whether ...
+     *
+     * @type {boolean}
+     */
+    disabled = false,
+
+    /**
+     * Whether ...
+     *
+     * @type {boolean}
+     */
+    required = false,
+    optional = false,
+    mask = null,
+    useSubfix = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx(FloatingLabelInputImpl, {
+    arialLabel: arialLabel,
+    className: className,
+    disabled: disabled,
+    extraInputProps: extraInputProps,
+    hasError: hasError,
+    innerRef: innerRef,
+    inputComponent: inputComponent,
+    isOpen: isOpen,
+    labelComponent: labelComponent,
+    labelText: labelText,
+    mask: mask,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    optional: optional,
+    readOnly: readOnly,
+    required: required,
+    useSubfix: useSubfix,
+    value: value
+  });
+};
+
+export { DSFloatingLabelInput as default };