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

package/esm/InputMask/DSInputMaskDeprecated.js

@@ -1,370 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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