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

package/esm/InputMask/DSInputMaskDeprecated.js

@@ -0,0 +1,370 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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 React, { Component } from 'react';
+import { isEqual } from 'lodash';
+import { conformToMask, adjustCaretPosition } from 'text-mask-core';
+import setCaretPosition from './utils/setCaretPosition.js';
+import DSTextBox from '../TextBox/DSTextBox.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["autoFocus", "style", "disabled", "className", "name", "maxLength", "minLength", "fluidWidth", "placeholder", "onKeyDown", "onClick", "onChange", "onFocus", "onBlur", "onPaste", "onKeyUp", "hasError", "readOnly", "type", "innerRef", "clearable", "leftComponent", "rightComponent", "value"];
+
+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 getValueFromEventOrString = e => {
+  let value = e;
+
+  if (e && e.target) {
+    const {
+      target: {
+        value: eValue
+      }
+    } = e;
+    value = eValue;
+  }
+
+  return value;
+};
+
+const getRawMask = function (mask) {
+  let rawValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return typeof mask === 'function' ? mask(rawValue) : mask;
+}; // this is not safe because we don't take in consideration a lot of cases
+// just a monkeypatch untill we get the v2 going,
+// this work with "internal" masks...
+
+
+const UNSAFEGetRawValue = (value, mask) => {
+  var _safeValue$split, _safeValue$split$filt;
+
+  const safeValue = getValueFromEventOrString(value);
+  if (!safeValue) return '';
+  const rawMask = getRawMask(mask, value);
+  const characterToStrip = rawMask.filter(char => typeof char === 'string');
+  return safeValue === null || safeValue === void 0 ? void 0 : (_safeValue$split = safeValue.split('')) === null || _safeValue$split === void 0 ? void 0 : (_safeValue$split$filt = _safeValue$split.filter(char => {
+    const indexCharToStrip = characterToStrip.findIndex(strip => strip === char);
+
+    if (indexCharToStrip >= 0) {
+      characterToStrip.splice(indexCharToStrip, 1);
+      return false;
+    }
+
+    return true;
+  })) === null || _safeValue$split$filt === void 0 ? void 0 : _safeValue$split$filt.join('');
+}; // this is not safe because we don't take in consideration a lot of cases
+// just a monkeypatch untill we get the v2 going,
+// this work with "internal" masks...
+
+
+const UNSAFEIsRawValue = (value, mask) => {
+  var _safeValue$split2;
+
+  const safeValue = getValueFromEventOrString(value);
+  if (!safeValue) return false;
+  const rawMask = getRawMask(mask, safeValue);
+  const characterToStrip = rawMask.filter(char => typeof char === 'string');
+  if (safeValue) safeValue === null || safeValue === void 0 ? void 0 : (_safeValue$split2 = safeValue.split('')) === null || _safeValue$split2 === void 0 ? void 0 : _safeValue$split2.forEach(char => {
+    const indexCharToStrip = characterToStrip.findIndex(strip => strip === char);
+
+    if (indexCharToStrip >= 0) {
+      characterToStrip.splice(indexCharToStrip, 1);
+    }
+  }); // if we matched all the character to strip, this is not a raw value
+  // unsafe, but "good enough" for most masks...
+
+  return characterToStrip.length !== 0;
+};
+
+class DSInputMaskDeprecated extends Component {
+  constructor(props) {
+    var _this;
+
+    super(props);
+    _this = this;
+    this.lastkey = null;
+    this.lastkeycode = null;
+
+    this.conformValue = function (rawValueOrEvent, currentCaretPosition) {
+      let {
+        skipCaretPositioning = false,
+        skipOnChangeCallback = false
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      const {
+        previousConformedValue
+      } = _this.state;
+      const {
+        onChange,
+        mask,
+        placeholderChar = '_',
+        pipe
+      } = _this.props;
+      const rawValue = getValueFromEventOrString(rawValueOrEvent); // short-circuit logic if user cleared the input
+
+      if (rawValue.length === 0) {
+        _this.setState({
+          maskedValue: rawValue,
+          previousConformedValue: rawValue,
+          focus: true
+        }, () => {
+          const event = {
+            target: {
+              value: rawValue,
+              originalValue: rawValue
+            },
+            lastkey: _this.lastkey
+          };
+          onChange(event);
+        });
+
+        return;
+      }
+
+      const rawMaskWithTraps = getRawMask(mask, rawValue);
+      const rawMask = rawMaskWithTraps.filter(val => val !== '[]'); // generate the final result we want to put in the state and in the input box
+
+      const conformToMaskResults = conformToMask(rawValue, rawMask, _objectSpread({
+        guide: false,
+        placeholderChar
+      }, previousConformedValue && {
+        previousConformedValue
+      }));
+      const {
+        conformedValue: pipelessConformed
+      } = conformToMaskResults; // when the last character must be always preserved we need to manually ensure it
+      //  because
+      //    conformToMask -> guide: false will interpeter the last character
+      //     will remove the last character if it's part of the mask
+      //   we may want to add a prop for this in the future?
+      //   this is used for example with "decimal" and "percentage" masks
+
+      let conformedValueEnsureLastMaskChar = pipelessConformed;
+      const lastMaskChar = rawMask[rawMask.length - 1];
+      const lastValueChar = pipelessConformed.charAt(pipelessConformed.length - 1);
+
+      if (typeof lastMaskChar === 'string' && lastMaskChar !== lastValueChar) {
+        conformedValueEnsureLastMaskChar = pipelessConformed + lastMaskChar;
+      }
+
+      let pipeResult = {
+        indexesOfPipedChars: [],
+        value: conformedValueEnsureLastMaskChar,
+        valid: true
+      };
+      if (typeof pipe === 'function') pipeResult = pipe()(conformedValueEnsureLastMaskChar); // if the pipe results in an invalid value, we don't allow the change
+      //   meaning the final result will be like the user never tried to change the input
+      //   this is because the user will have to inject the validation in his pipe
+      //   probably pipe is never used, because this never worked before...
+      //   we will deprecate the "pipe" props in the future
+
+      const conformedValue = pipeResult.valid ? pipeResult.value : previousConformedValue; // generate the "placeholder" used in calculating new caret position
+      // this means we need
+      //   empty string as a value
+      //   guide:true
+      //   we can ignore "previousConformedValue" parameter
+
+      const generatedPlaceHolder = conformToMask('', rawMask, {
+        guide: true,
+        placeholderChar
+      });
+      const {
+        indexesOfPipedChars
+      } = pipeResult;
+      const adjustCaretPositionOpts = {
+        previousConformedValue,
+        conformedValue,
+        currentCaretPosition,
+        rawValue,
+        placeholderChar,
+        placeholder: generatedPlaceHolder.conformedValue,
+        indexesOfPipedChars,
+        caretTrapIndexes: []
+      };
+      const caretPos = adjustCaretPosition(adjustCaretPositionOpts);
+
+      _this.setState({
+        maskedValue: conformedValue,
+        previousConformedValue: conformedValue,
+        focus: true
+      }, () => {
+        const event = {
+          target: {
+            value: conformedValue,
+            originalValue: rawValue
+          },
+          lastkey: _this.lastkey
+        };
+        if (!skipOnChangeCallback) onChange(event);
+        if (!skipCaretPositioning) setTimeout(() => setCaretPosition(_this.inputref, caretPos));
+      });
+    };
+
+    this.handleOnChange = e => {
+      var _e$target;
+
+      const rawValue = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '';
+      const {
+        selectionEnd
+      } = e.target;
+      const currentCaretPosition = selectionEnd;
+      this.conformValue(rawValue, currentCaretPosition);
+    };
+
+    this.handleKeyDown = e => {
+      e.stopPropagation();
+      const {
+        onKeyDown
+      } = this.props;
+      this.lastkey = e.key;
+      this.lastkeycode = e.keyCode;
+      onKeyDown(e);
+    };
+
+    this.handleBlur = e => {
+      const {
+        onBlur
+      } = this.props;
+      this.setState({
+        focus: false
+      });
+      onBlur(e);
+    };
+
+    this.inputref = /*#__PURE__*/React.createRef();
+    this.state = {
+      maskedValue: '',
+      previousConformedValue: ''
+    };
+    this.conformValue = this.conformValue.bind(this);
+  }
+
+  componentDidMount() {
+    const {
+      value,
+      mask
+    } = this.props;
+    const isAlreadyRaw = UNSAFEIsRawValue(value, mask);
+    const rawVal = isAlreadyRaw ? value : UNSAFEGetRawValue(value, mask);
+    if (rawVal === '') return; // if value from props is raw, we invoke onChange
+    //  not invoking onChange on a raw value breaks the internal components depending on this...
+
+    const shouldSkipOnChange = !isAlreadyRaw;
+    this.conformValue(rawVal, rawVal.length, {
+      skipCaretPositioning: true,
+      skipOnChangeCallback: shouldSkipOnChange
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    // ensure the mask is re-applied when value/mask props changes.
+    // this is required by internal implementations like DSDateRangePicker
+    const {
+      value: prevValOrEvent,
+      mask: prevMask
+    } = prevProps;
+    const {
+      value: valOrEvent,
+      mask
+    } = this.props;
+    const value = getValueFromEventOrString(valOrEvent);
+    const isAlreadyRaw = UNSAFEIsRawValue(value, mask);
+    const rawVal = isAlreadyRaw ? value : UNSAFEGetRawValue(value, mask);
+    if (rawVal === '') return;
+    const rawMask = getRawMask(mask, rawVal);
+    const prevVal = getValueFromEventOrString(prevValOrEvent);
+    const prevIsAlreadyRaw = UNSAFEIsRawValue(prevVal, prevMask);
+    const prevRawVal = prevIsAlreadyRaw ? prevVal : UNSAFEGetRawValue(prevVal, prevMask);
+    const prevRawMask = getRawMask(prevMask, prevRawVal); // we need to compare "raw" masks, because mask sometimes are functions
+    //  and if we don't compare raw mask, isEqual will produce unexpected result
+    //  which would lead to infinite loops
+
+    if (prevVal !== value || !isEqual(prevRawMask, rawMask)) {
+      // if value from props is raw, we invoke onChange
+      //  not invoking onChange on a raw value breaks the internal components depending on this...
+      const shouldSkipOnChange = !isAlreadyRaw;
+      this.conformValue(rawVal, rawVal.length, {
+        skipCaretPositioning: true,
+        skipOnChangeCallback: shouldSkipOnChange
+      });
+    }
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      autoFocus,
+      style,
+      disabled,
+      className,
+      name,
+      maxLength,
+      minLength,
+      fluidWidth,
+      placeholder,
+      onKeyDown,
+      onClick,
+      onChange,
+      onFocus,
+      onBlur,
+      onPaste,
+      onKeyUp,
+      hasError,
+      readOnly,
+      type,
+      innerRef,
+      clearable = false,
+      leftComponent,
+      rightComponent,
+      value
+    } = _this$props,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
+    const {
+      maskedValue,
+      focus
+    } = this.state; // if component is "controlled" we print the value from the props
+    // if it's not controlled we use the internal state
+    // handleOnChange has the logic to invoke the onChange with the mask applied
+    // if the dev controls the component but pass down a value not conformed to the mask
+    // it's a problem to be fixed on the dev side.
+    // this means no "get derived state from props" mumbo-jumbos
+
+    const propsValue = getValueFromEventOrString(value);
+    const finalValue = typeof propsValue === 'string' || typeof propsValue === 'number' ? propsValue : maskedValue;
+    return /*#__PURE__*/jsx(DSTextBox, _objectSpread(_objectSpread({}, rest), {}, {
+      "aria-label": rest['aria-label'],
+      className: className,
+      clearable: clearable,
+      disabled: disabled,
+      fluidWidth: fluidWidth,
+      hasError: hasError,
+      isActive: focus,
+      leftComponent: leftComponent,
+      maxLength: maxLength,
+      minLength: minLength,
+      name: name,
+      onBlur: this.handleBlur,
+      onChange: this.handleOnChange,
+      onClick: onClick,
+      onFocus: onFocus,
+      onKeyDown: this.handleKeyDown,
+      onKeyUp: onKeyUp,
+      onPaste: onPaste,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      rightComponent: rightComponent,
+      style: style,
+      type: type,
+      value: finalValue
+    }));
+  }
+
+}
+
+export { DSInputMaskDeprecated as default };

package/esm/InputMask/InputMaskContext.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const InputMaskContext = /*#__PURE__*/React.createContext({
+  rawValue: '',
+  setRawValue: () => null,
+  rawMask: null,
+  setRawMask: () => null,
+  focus: false,
+  setFocus: () => null,
+  lastkey: {
+    code: null,
+    key: null
+  },
+  setLastkey: () => null,
+  cursorPosition: {
+    current: 0
+  },
+  setCursorPosition: () => null
+});
+
+export { InputMaskContext };

package/esm/InputMask/MaskPipes.js

@@ -0,0 +1,8 @@
+import { autoCorrectedDatePipe } from './addons/AutoCorrectedDatePipe.js';
+
+const MASK_PIPES = {
+  AUTO_CORRECT_DATE: autoCorrectedDatePipe
+};
+const maskPipes = [MASK_PIPES.AUTO_CORRECT_DATE];
+
+export { MASK_PIPES, maskPipes };

package/esm/InputMask/MaskTypes.js

@@ -0,0 +1,35 @@
+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';
+
+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; }
+
+/* eslint-disable no-unused-vars */
+const MASK_TYPES = {
+  DATE: 'ds-mask-date',
+  DATE_DEPRECATED: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+  DATE_TIME: 'ds-mask-date-time',
+  DATE_TIME_DEPRECATED: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', /[0-2]/, /[0-9]/, ':', /[0-5]/, /[0-9]/],
+  DICTIONARY: props => _objectSpread({
+    type: 'ds-mask-dictionary'
+  }, props),
+  PHONE: 'ds-mask-phone',
+  PHONE_INTENATIONAL: 'ds-mask-phone-international',
+  SSN: 'ds-mask-ssn',
+  US_ZIP_CODE: 'ds-mask-us-zip-code',
+  ZIP_CODE_SEARCH: 'ds-mask-zip-code-search',
+  NUMBER: props => _number => _objectSpread({
+    type: 'ds-mask-number'
+  }, props),
+  PERCENT: props => _number => _objectSpread({
+    type: 'ds-mask-percent'
+  }, props)
+};
+const maskTypes = [MASK_TYPES.DATE, MASK_TYPES.DATE_DEPRECATED, MASK_TYPES.DATE_TIME, MASK_TYPES.DATE_TIME_DEPRECATED, MASK_TYPES.PHONE, MASK_TYPES.PHONE_INTENATIONAL, MASK_TYPES.SSN, MASK_TYPES.US_ZIP_CODE, MASK_TYPES.NUMBER, MASK_TYPES.PERCENT];
+
+export { MASK_TYPES, maskTypes };

package/esm/InputMask/addons/AutoCorrectedDatePipe.js

@@ -0,0 +1,81 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/es.string.replace.js';
+
+const maxValueMonth = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+const formatOrder = ['yyyy', 'yy', 'mm', 'dd', 'HH', 'MM', 'SS'];
+const autoCorrectedDatePipe = function () {
+  let dateFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'mm dd yyyy';
+  let {
+    minYear = 1,
+    maxYear = 9999
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const dateFormatArray = dateFormat.split(/[^dmyHMS]+/).sort((a, b) => formatOrder.indexOf(a) - formatOrder.indexOf(b));
+  return conformedValue => {
+    const indexesOfPipedChars = [];
+    const maxValue = {
+      dd: 31,
+      mm: 12,
+      yy: 99,
+      yyyy: maxYear,
+      HH: 23,
+      MM: 59,
+      SS: 59
+    };
+    const minValue = {
+      dd: 1,
+      mm: 1,
+      yy: 0,
+      yyyy: minYear,
+      HH: 0,
+      MM: 0,
+      SS: 0
+    };
+    const conformedValueArr = conformedValue.split(''); // Check first digit
+
+    dateFormatArray.forEach(format => {
+      const position = dateFormat.indexOf(format);
+      const maxFirstDigit = parseInt(maxValue[format].toString().substr(0, 1), 10);
+
+      if (parseInt(conformedValueArr[position], 10) > maxFirstDigit) {
+        conformedValueArr[position + 1] = conformedValueArr[position];
+        conformedValueArr[position] = 0;
+        indexesOfPipedChars.push(position);
+      }
+    }); // Check for invalid date
+
+    let month = 0;
+    const isInvalid = dateFormatArray.some(format => {
+      const position = dateFormat.indexOf(format);
+      const {
+        length
+      } = format;
+      const textValue = conformedValue.substr(position, length).replace(/\D/g, '');
+      const value = parseInt(textValue, 10);
+
+      if (format === 'mm') {
+        month = value || 0;
+      }
+
+      const maxValueForFormat = format === 'dd' ? maxValueMonth[month] : maxValue[format];
+
+      if (format === 'yyyy' && (minYear !== 1 || maxYear !== 9999)) {
+        const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
+        const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
+        return value < scopedMinValue || value > scopedMaxValue;
+      }
+
+      return value > maxValueForFormat || textValue.length === length && value < minValue[format];
+    });
+    return {
+      value: conformedValueArr.join(''),
+      valid: !isInvalid,
+      indexesOfPipedChars
+    };
+  };
+};
+
+export { autoCorrectedDatePipe };

package/esm/InputMask/defaultProps.js

@@ -0,0 +1,32 @@
+import { MASK_TYPES } from './MaskTypes.js';
+
+const defaultProps = {
+  autoFocus: false,
+  style: {},
+  disabled: false,
+  className: '',
+  name: '',
+  maxLength: 255,
+  minLength: 0,
+  fluidWidth: false,
+  onKeyDown: () => null,
+  onClick: () => null,
+  onChange: () => null,
+  onFocus: () => null,
+  onBlur: () => null,
+  onPaste: () => null,
+  onKeyUp: () => null,
+  value: '',
+  hasError: false,
+  readOnly: false,
+  innerRef: null,
+  type: 'text',
+  clearable: false,
+  leftComponent: null,
+  rightComponent: null,
+  mask: MASK_TYPES.DATE,
+  pipe: null,
+  useSubfix: ''
+};
+
+export { defaultProps };

package/esm/InputMask/index.js

@@ -0,0 +1,3 @@
+export { DSInputMask, DSInputMaskWithSchema, DSInputMask as default } from './DSInputMask.js';
+export { MASK_TYPES } from './MaskTypes.js';
+export { MASK_PIPES } from './MaskPipes.js';