@elliemae/ds-controlled-form 2.4.1-rc.0 → 2.4.1-rc.12

package/esm/large-text-input/exported-related/index.js

@@ -0,0 +1,2 @@
+export { DSControlledLargetTextInputDatatestids } from './data-test-ids.js';
+export { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './theming.js';

package/esm/large-text-input/exported-related/theming.js

@@ -0,0 +1,8 @@
+const DSControlledLargeTextInputName = 'ds-controlled-large-text-input';
+const DSControlledLargeTextInputSlots = {
+  CONTAINER: 'root',
+  INPUT: 'input',
+  CHAR_COUNTER: 'char-counter'
+};
+
+export { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots };

package/esm/large-text-input/index.js

@@ -0,0 +1,3 @@
+export { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema } from './DSControlledLargeTextInput.js';
+export { DSControlledLargetTextInputDatatestids } from './exported-related/data-test-ids.js';
+export { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/theming.js';

package/esm/large-text-input/react-desc-prop-types.js

@@ -0,0 +1,36 @@
+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 { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';
+
+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 noop = () => {};
+
+const defaultProps = {
+  value: '',
+  onChange: noop,
+  withoutCharacterCounter: false,
+  resizable: false,
+  hasError: false
+};
+const propTypes = _objectSpread(_objectSpread(_objectSpread({}, globalAttributesPropTypes), xstyledPropTypes), {}, {
+  value: PropTypes.string.description('Text are value.').defaultValue(''),
+  onChange: PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),
+  resizable: PropTypes.bool.description('Enables to resize the component.').defaultValue(false),
+  rows: PropTypes.string.description('Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.'),
+  withoutCharacterCounter: PropTypes.bool.description('Removes the character counter.').defaultValue(false),
+  id: PropTypes.string.description('Unique id.'),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),
+  maxLength: PropTypes.string.description('Max characters allowed.'),
+  disabled: PropTypes.bool.description('Set disabled state.'),
+  readOnly: PropTypes.bool.description('Set readonly state.'),
+  hasError: PropTypes.bool.description('Set error state.').defaultValue(false)
+});
+
+export { defaultProps, propTypes };

package/esm/large-text-input/styles.js

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled } from '@elliemae/ds-system';
+import { layout, space, sizing } from '@xstyled/styled-components';
+import { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/theming.js';
+
+var _templateObject, _templateObject2, _templateObject3;
+const StyledContainer = styled('div', {
+  name: DSControlledLargeTextInputName,
+  slot: DSControlledLargeTextInputSlots.CONTAINER
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-gap: 4px;\n  grid-template-rows: auto auto;\n  grid-template-columns: fit-content;\n  ", "\n  ", "\n  ", "\n"])), layout, space, sizing);
+const StyledCharCounter = styled('span', {
+  name: DSControlledLargeTextInputName,
+  slot: DSControlledLargeTextInputSlots.CHAR_COUNTER
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  justify-self: flex-end;\n"])));
+const StyledTextArea = styled('textarea', {
+  name: DSControlledLargeTextInputName,
+  slot: DSControlledLargeTextInputSlots.INPUT
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  ", "\n  &:disabled {\n    &:hover {\n      cursor: not-allowed;\n    }\n  }\n\n  ", "\n"])), _ref => {
+  let {
+    resizable
+  } = _ref;
+  return resizable ? "" : "resize: none;";
+}, _ref2 => {
+  let {
+    hasError
+  } = _ref2;
+  return hasError ? "border: 1px solid red;" : "";
+});
+
+export { StyledCharCounter, StyledContainer, StyledTextArea };

package/esm/mask-hook/hooks/index.js

@@ -1,4 +1,5 @@
-export { UsePhoneMaskWithSchema, usePhoneMask } from './usePhoneMask.js';
-export { UseNumberMaskWithSchema, useNumberMask } from './useNumberMask.js';
-export { UseSSNMaskWithSchema, useSSNMask } from './useSSNMask.js';
-export { UseZipCodeMaskWithSchema, useZipCode } from './useZipCode.js';
+export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask } from './usePhoneMask.js';
+export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask } from './useNumberMask.js';
+export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask } from './useSSNMask.js';
+export { UseRegExpMaskWithSchema, isRegExp, useRegExpMask } from './useRegExpMask.js';
+export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask } from './useZipCodeMask.js';

package/esm/mask-hook/hooks/useNumberMask.js

@@ -10,6 +10,8 @@ import { useCallbackAfterRender } from '@elliemae/ds-utilities';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { DSMaskNumberHookPropsTypes, DSMaskNumberHookDefaultProps } from '../react-desc-prop-types.js';
 
 const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];
@@ -156,7 +158,11 @@ const useNumberMask = props => {
     onBlur
   };
 };
+const getNumberMaskedValue = (value, opts) => {
+  const [maskedValue] = conformValue(value, value.length - 1, '', opts);
+  return maskedValue;
+};
 const UseNumberMaskWithSchema = describe(useNumberMask);
 UseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;
 
-export { UseNumberMaskWithSchema, useNumberMask };
+export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask };

package/esm/mask-hook/hooks/usePhoneMask.js

@@ -9,6 +9,8 @@ import { useCallbackAfterRender } from '@elliemae/ds-utilities';
 import { addSpecialCharacters } from '../utils/addSpecialCharacters.js';
 import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from '../react-desc-prop-types.js';
 
 const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];
@@ -78,7 +80,11 @@ const usePhoneMask = props => {
     onChange
   };
 };
+const getPhoneMaskedValue = (value, opts) => {
+  const [maskedValue] = conformValue(value, value.length - 1, '', opts);
+  return maskedValue;
+};
 const UsePhoneMaskWithSchema = describe(usePhoneMask);
 UsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;
 
-export { UsePhoneMaskWithSchema, usePhoneMask };
+export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask };

package/esm/mask-hook/hooks/useRegExpMask.js

@@ -0,0 +1,116 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useCallback } from 'react';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { useCallbackAfterRender } from '@elliemae/ds-utilities';
+import { addSpecialCharacters } from '../utils/addSpecialCharacters.js';
+import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
+import { setCursorPosition } from '../utils/setCursorPosition.js';
+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 { flatStringArray } from '../utils/flatStringArray.js';
+import { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from '../react-desc-prop-types.js';
+
+const isRegExp = item => typeof item === 'object';
+
+const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
+  const specialChars = [];
+  const flatRegExp = flatStringArray(regExp);
+  const rawValueArray = rawValue.split('');
+  let offSet = 0;
+  let charsFound = 0;
+  let specialCharsLeft = '';
+  let fullRegExpMatched = false;
+  const maskedValue = [];
+
+  for (let i = 0; i < flatRegExp.length; i += 1) {
+    if (isRegExp(flatRegExp[i])) {
+      specialCharsLeft = '';
+      fullRegExpMatched = false;
+
+      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {
+        var _rawValueArray$j;
+
+        const match = (_rawValueArray$j = rawValueArray[j]) === null || _rawValueArray$j === void 0 ? void 0 : _rawValueArray$j.match(flatRegExp[i]);
+
+        if (match) {
+          maskedValue.push(match[0]);
+          charsFound += 1;
+          fullRegExpMatched = true;
+          break;
+        } else {
+          offSet += 1;
+        }
+      }
+
+      if (filledMask && !fullRegExpMatched) {
+        maskedValue.push('_');
+      }
+    } else {
+      specialChars.push([flatRegExp[i], i]);
+      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;
+      specialCharsLeft += flatRegExp[i];
+    }
+  }
+
+  if (!fullRegExpMatched) specialCharsLeft = '';
+  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters(maskedValue, specialChars, maskedPos, lastKeyCode);
+  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];
+};
+
+const useRegExpMask = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskRegExpHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskRegExpHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+    regExp,
+    filledMask
+  } = propsWithDefault;
+  const lastKeyCode = useRef('Unidentified');
+  const scheduleAfterRender = useCallbackAfterRender(); // Some times, the value of the mask is not gonna change (user types invalid char for example)
+  // This makes the input to go from "correct" -> "incorrect" -> "correct"
+  // But since the input is controlled, the input does not re-render
+  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async
+  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event
+
+  const [, setKey] = useState(0);
+  const onKeyDown = useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = useCallback(e => {
+    var _e$target$selectionEn;
+
+    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, regExp, filledMask);
+    valueSetter(prevMask => {
+      // Here we need to update the key
+      if (mask === prevMask) setKey(key => key + 1);
+      return mask;
+    });
+    if (userOnChange) userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  const onBlur = useCallback(e => {
+    if (filledMask) {
+      const maskedValue = e.target.value.split('');
+      const flatRegExp = flatStringArray(regExp);
+      const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');
+      if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));
+    }
+
+    if (userOnBlur) userOnBlur(e);
+  }, [valueSetter, userOnBlur]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseRegExpMaskWithSchema = describe(useRegExpMask);
+UseRegExpMaskWithSchema.propTypes = DSMaskRegExpHookPropsTypes;
+
+export { UseRegExpMaskWithSchema, isRegExp, useRegExpMask };

package/esm/mask-hook/hooks/useSSNMask.js

@@ -8,6 +8,8 @@ import { useCallbackAfterRender } from '@elliemae/ds-utilities';
 import { addSpecialCharacters } from '../utils/addSpecialCharacters.js';
 import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { DSMaskHookPropsTypes, DSMaskHookDefaultProps } from '../react-desc-prop-types.js';
 
 const ssnSpecialChars = [['-', 3], ['-', 6]];
@@ -61,7 +63,11 @@ const useSSNMask = props => {
     onChange
   };
 };
+const getSSNMaskedValue = value => {
+  const [maskedValue] = conformValue(value, value.length - 1, '');
+  return maskedValue;
+};
 const UseSSNMaskWithSchema = describe(useSSNMask);
 UseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;
 
-export { UseSSNMaskWithSchema, useSSNMask };
+export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask };

package/esm/mask-hook/hooks/{useZipCode.js → useZipCodeMask.js}

@@ -8,20 +8,22 @@ import { useCallbackAfterRender } from '@elliemae/ds-utilities';
 import { addSpecialCharacters } from '../utils/addSpecialCharacters.js';
 import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { DSMaskHookPropsTypes, DSMaskHookDefaultProps } from '../react-desc-prop-types.js';
 
 const zipCodeSpecialChars = [['-', 5]];
 
 const conformValue = (rawValue, cursorPos, lastKeyCode) => {
   // Work with digits only
-  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 5 digits
+  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 9 digits
 
-  maskedValue = maskedValue.slice(0, 6);
+  maskedValue = maskedValue.slice(0, 9);
   const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
   return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
 };
 
-const useZipCode = props => {
+const useZipCodeMask = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);
   const {
@@ -58,7 +60,11 @@ const useZipCode = props => {
     onChange
   };
 };
-const UseZipCodeMaskWithSchema = describe(useZipCode);
+const getUseZipMaskedValue = value => {
+  const [maskedValue] = conformValue(value, value.length - 1, '');
+  return maskedValue;
+};
+const UseZipCodeMaskWithSchema = describe(useZipCodeMask);
 UseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;
 
-export { UseZipCodeMaskWithSchema, useZipCode };
+export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask };

package/esm/mask-hook/index.js

@@ -1,4 +1,5 @@
-export { UsePhoneMaskWithSchema, usePhoneMask } from './hooks/usePhoneMask.js';
-export { UseNumberMaskWithSchema, useNumberMask } from './hooks/useNumberMask.js';
-export { UseSSNMaskWithSchema, useSSNMask } from './hooks/useSSNMask.js';
-export { UseZipCodeMaskWithSchema, useZipCode } from './hooks/useZipCode.js';
+export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask } from './hooks/usePhoneMask.js';
+export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask } from './hooks/useNumberMask.js';
+export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask } from './hooks/useSSNMask.js';
+export { UseRegExpMaskWithSchema, isRegExp, useRegExpMask } from './hooks/useRegExpMask.js';
+export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask } from './hooks/useZipCodeMask.js';

package/esm/mask-hook/react-desc-prop-types.js

@@ -17,6 +17,9 @@ const DSMaskHookDefaultProps = {
 const DSMaskPhoneHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   isInternational: false
 });
+const DSMaskRegExpHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
+  filledMask: false
+});
 const DSMaskNumberHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   suffix: '',
   prefix: '',
@@ -30,6 +33,10 @@ const DSMaskHookPropsTypes = {
   onChange: PropTypes.func.description('Callback for onChange'),
   onKeyDown: PropTypes.func.description('Callback for onKeyDown')
 };
+const DSMaskRegExpHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  regExp: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])).description('Array with regexp or special chars per character').isRequired,
+  filledMask: PropTypes.bool.description('Show blank chars positions').defaultValue(false)
+});
 const DSMaskPhoneHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
   isInternational: PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false)
 });
@@ -42,4 +49,4 @@ const DSMaskNumberHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPro
   decimalRequired: PropTypes.bool.description('Wether decimal part is mandatory').defaultValue(false)
 });
 
-export { DSMaskHookDefaultProps, DSMaskHookPropsTypes, DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes, DSMaskPhoneHookDefaultProps, DSMaskPhoneHookPropsTypes };
+export { DSMaskHookDefaultProps, DSMaskHookPropsTypes, DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes, DSMaskPhoneHookDefaultProps, DSMaskPhoneHookPropsTypes, DSMaskRegExpHookDefaultProps, DSMaskRegExpHookPropsTypes };

package/esm/mask-hook/utils/addSpecialCharacters.js

@@ -34,10 +34,9 @@ const addSpecialCharacters = (maskWithoutSpecialChars, specialCharsDescr, masked
     });
   } else if (lastKeyCode === 'Backspace' && finalMaskedPos) {
     // If erasing, move the cursor back if we are in a special chars area
-    specialCharsDescr.forEach(_ref3 => {
-      let [chars, pos] = _ref3;
-      if (pos + 1 <= finalMaskedPos && finalMaskedPos <= pos + chars.length) finalMaskedPos = pos;
-    });
+    for (let i = specialCharsDescr.length - 1; i >= 0; i -= 1) {
+      if (specialCharsDescr[i][1] + 1 <= finalMaskedPos && finalMaskedPos <= specialCharsDescr[i][1] + specialCharsDescr[i][0].length) [, finalMaskedPos] = specialCharsDescr[i];
+    }
   }
 
   return [finalMask.join(''), finalMaskedPos];

package/esm/mask-hook/utils/flatStringArray.js

@@ -0,0 +1,14 @@
+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 'core-js/modules/web.dom-collections.iterator.js';
+
+const flatStringArray = stringArray => stringArray.reduce((acc, curr) => {
+  if (typeof curr === 'string') {
+    return [...acc, ...curr.split('')];
+  }
+
+  return [...acc, curr];
+}, []);
+
+export { flatStringArray };

package/esm/mask-hook/utils/index.js

@@ -2,3 +2,4 @@ export { addSpecialCharacters } from './addSpecialCharacters.js';
 export { getPartialMaskedPos } from './getPartialMaskedPos.js';
 export { setCursorPosition } from './setCursorPosition.js';
 export { filterNumbersOnly } from './sharedFilters.js';
+export { flatStringArray } from './flatStringArray.js';