@elliemae/ds-controlled-form 2.3.0-next.16 → 2.3.0-next.17

package/cjs/controlled-mask-hook/hooks/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var usePhoneMask = require('./usePhoneMask.js');
+
+
+
+exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.usePhoneMask = usePhoneMask.usePhoneMask;

package/cjs/controlled-mask-hook/hooks/usePhoneMask.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsUtilities = require('@elliemae/ds-utilities');
+var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
+var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
+var setCursorPosition = require('../utils/setCursorPosition.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+const phoneSpecialChars = [['(', 0], [') ', 4], ['-', 9]];
+
+const conformValue = (rawValue, cursorPos, lastKeyCode) => {
+  // Work with digits only
+  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We can't have zeros at the start of the array
+
+  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1); // We only consider first 10 digits
+
+
+  maskedValue = maskedValue.slice(0, 10);
+  const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters.addSpecialCharacters(maskedValue, phoneSpecialChars, maskedPos, lastKeyCode);
+};
+
+const usePhoneMask = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskHookDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown
+  } = propsWithDefault;
+  const lastKeyCode = React.useRef('Unidentified');
+  const scheduleAfterRender = dsUtilities.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] = React.useState(0);
+  const onKeyDown = React.useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = React.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);
+    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.setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UsePhoneMaskWithSchema = dsPropsHelpers.describe(usePhoneMask);
+UsePhoneMaskWithSchema.propTypes = reactDescPropTypes.DSMaskHookPropsTypes;
+
+exports.UsePhoneMaskWithSchema = UsePhoneMaskWithSchema;
+exports.usePhoneMask = usePhoneMask;

package/cjs/controlled-mask-hook/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var usePhoneMask = require('./hooks/usePhoneMask.js');
+
+
+
+exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.usePhoneMask = usePhoneMask.usePhoneMask;

package/cjs/controlled-mask-hook/react-desc-prop-types.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+const DSMaskHookDefaultProps = {
+  onChange: () => null,
+  onKeyDown: () => null,
+  onBlur: () => null
+};
+const DSMaskHookPropsTypes = {
+  valueSetter: dsPropsHelpers.PropTypes.func.description('React set state function for the value').isRequired,
+  onChange: dsPropsHelpers.PropTypes.func.description('Callback for onChange'),
+  onKeyDown: dsPropsHelpers.PropTypes.func.description('Callback for onKeyDown')
+};
+
+exports.DSMaskHookDefaultProps = DSMaskHookDefaultProps;
+exports.DSMaskHookPropsTypes = DSMaskHookPropsTypes;

package/cjs/controlled-mask-hook/utils/addSpecialCharacters.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+
+/* eslint-disable max-params */
+
+/**
+ *
+ * @param {string[]} maskWithoutSpecialChars An array of characters with the unfinished mask
+ * @param {[string, number][]} specialCharsDescr An array of tuples. Each tuple contains a string and a position (What string to add in a particular position)
+ * @param {number} maskedPos Current masked position
+ * @param {string} lastKeyCode Last key code of the user
+ * @returns {[string, number]} A tuple containing the final mask and the final masked position
+ */
+const addSpecialCharacters = (maskWithoutSpecialChars, specialCharsDescr, maskedPos, lastKeyCode) => {
+  const finalMask = maskWithoutSpecialChars;
+  let finalMaskedPos = maskedPos; // We insert the special chars in the respective positions, tweaking the masked pos
+
+  specialCharsDescr.forEach(_ref => {
+    let [chars, pos] = _ref;
+
+    if (finalMask.length > pos) {
+      finalMask.splice(pos, 0, ...chars);
+      if (finalMaskedPos >= pos) finalMaskedPos += chars.length;
+    }
+  });
+
+  if (lastKeyCode !== 'Backspace' && finalMaskedPos < finalMask.length) {
+    // If not erasing, move the cursor forward if we are in a special chars area
+    specialCharsDescr.forEach(_ref2 => {
+      let [chars, pos] = _ref2;
+      if (finalMaskedPos === pos) finalMaskedPos += chars.length;
+    });
+  } 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;
+    });
+  }
+
+  return [finalMask.join(''), finalMaskedPos];
+};
+
+exports.addSpecialCharacters = addSpecialCharacters;

package/cjs/controlled-mask-hook/utils/getPartialMaskedPos.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getPartialMaskedPos = (rawValue, maskWithoutSpecialChars, cursorPos) => {
+  let maskedPos = 0;
+
+  for (let i = 0; i < cursorPos; i += 1) {
+    if (maskWithoutSpecialChars[maskedPos] === rawValue[i]) maskedPos += 1;
+  }
+
+  return maskedPos;
+};
+
+exports.getPartialMaskedPos = getPartialMaskedPos;

package/cjs/controlled-mask-hook/utils/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addSpecialCharacters = require('./addSpecialCharacters.js');
+var getPartialMaskedPos = require('./getPartialMaskedPos.js');
+var setCursorPosition = require('./setCursorPosition.js');
+
+
+
+exports.addSpecialCharacters = addSpecialCharacters.addSpecialCharacters;
+exports.getPartialMaskedPos = getPartialMaskedPos.getPartialMaskedPos;
+exports.setCursorPosition = setCursorPosition.setCursorPosition;

package/cjs/controlled-mask-hook/utils/setCursorPosition.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const setCursorPosition = (input, position) => {
+  input.setSelectionRange(position, position, 'forward');
+};
+
+exports.setCursorPosition = setCursorPosition;

package/cjs/controlled-text-input/DSInputText.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var dsIcon = require('@elliemae/ds-icon');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var useInputText = require('./config/useInputText.js');
+var dataTestIds = require('./exported-related/data-test-ids.js');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
+var components = require('./styled/components.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["className"];
+
+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__default["default"](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 DSInputText = props => {
+  const _useInputText = useInputText.useInputText(props),
+        {
+    globalAttributes: {
+      className
+    },
+    hasFocus,
+    handlers,
+    propsWithDefault,
+    xstyledProps
+  } = _useInputText,
+        otherGlobalAttributes = _objectWithoutProperties__default["default"](_useInputText.globalAttributes, _excluded);
+
+  const {
+    clearable,
+    disabled,
+    hasError,
+    innerRef,
+    placeholder,
+    readOnly,
+    inputSize,
+    onClear,
+    value
+  } = propsWithDefault;
+  const shouldDisplayClearButton = clearable && value !== '';
+  return /*#__PURE__*/jsxRuntime.jsxs(components.StyledInputWrapper, _objectSpread(_objectSpread({
+    className: className,
+    cols: shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto'],
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    hasError: hasError,
+    hasFocus: hasFocus,
+    inputSize: inputSize
+  }, xstyledProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(components.StyledInput, _objectSpread(_objectSpread({
+      "data-testid": dataTestIds.DSInputTextDataTestIds.INPUT,
+      disabled: disabled,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      ref: innerRef,
+      value: value
+    }, handlers), otherGlobalAttributes)), shouldDisplayClearButton && /*#__PURE__*/_jsx__default["default"](components.StyledClearButton, {
+      "aria-label": "Clear input value",
+      buttonType: "icon",
+      "data-testid": dataTestIds.DSInputTextDataTestIds.CLEAR_BUTTON,
+      onClick: onClear
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.CloseMedium, {
+      color: dsIcon.DSIconColors.PRIMARY
+    }))]
+  }));
+};
+const DSInputTextWithSchema = dsPropsHelpers.describe(DSInputText);
+DSInputTextWithSchema.propTypes = reactDescPropTypes.DSInputTextPropTypes;
+
+exports.DSInputText = DSInputText;
+exports.DSInputTextWithSchema = DSInputTextWithSchema;

package/cjs/controlled-text-input/config/useInputText.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var React = require('react');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+const useInputText = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(props, reactDescPropTypes.DSInputTextPropTypes);
+  const {
+    onValueChange
+  } = propsWithDefault; // =============================================================================
+  // INTERNAL STATE
+  // =============================================================================
+
+  const [hasFocus, setHasFocus] = React.useState(false); // ===========================================================================
+  // INTERNAL HANDLERS
+  // ===========================================================================
+
+  const handleOnChange = React.useCallback(e => {
+    onValueChange(e.target.value, e);
+  }, [onValueChange]);
+  const handleOnFocus = React.useCallback(() => {
+    setHasFocus(true);
+  }, []);
+  const handleOnBlur = React.useCallback(() => {
+    setHasFocus(false);
+  }, []); // =============================================================================
+  // GLOBAL ATTRIBUTES & XSTYLED PROPS
+  // =============================================================================
+
+  const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
+    onChange: handleOnChange,
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur
+  });
+  const xstyledProps = dsPropsHelpers.useGetXstyledProps(propsWithDefault);
+  return React.useMemo(() => ({
+    globalAttributes,
+    hasFocus,
+    handlers: {
+      onChange: handleOnChange,
+      onFocus: handleOnFocus,
+      onBlur: handleOnBlur
+    },
+    propsWithDefault,
+    xstyledProps
+  }), [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps]);
+};
+
+exports.useInputText = useInputText;

package/cjs/controlled-text-input/exported-related/data-test-ids.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputTextDataTestIds = {
+  INPUT: 'ds-input-text-input',
+  CLEAR_BUTTON: 'ds-input-text-clear-button'
+};
+
+exports.DSInputTextDataTestIds = DSInputTextDataTestIds;

package/cjs/controlled-text-input/exported-related/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dataTestIds = require('./data-test-ids.js');
+var theming = require('./theming.js');
+
+
+
+exports.DSInputTextDataTestIds = dataTestIds.DSInputTextDataTestIds;
+exports.DSInputTextName = theming.DSInputTextName;
+exports.DSInputTextSlots = theming.DSInputTextSlots;

package/cjs/controlled-text-input/exported-related/theming.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputTextName = 'ds-input-text';
+const DSInputTextSlots = {
+  INPUT_WRAPPER: 'root',
+  INPUT: 'input',
+  CLEAR_BUTTON: 'input-clear-button'
+};
+
+exports.DSInputTextName = DSInputTextName;
+exports.DSInputTextSlots = DSInputTextSlots;

package/cjs/controlled-text-input/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSInputText = require('./DSInputText.js');
+var dataTestIds = require('./exported-related/data-test-ids.js');
+var theming = require('./exported-related/theming.js');
+
+
+
+exports.DSInputText = DSInputText.DSInputText;
+exports.DSInputTextWithSchema = DSInputText.DSInputTextWithSchema;
+exports.DSInputTextDataTestIds = dataTestIds.DSInputTextDataTestIds;
+exports.DSInputTextName = theming.DSInputTextName;
+exports.DSInputTextSlots = theming.DSInputTextSlots;

package/cjs/controlled-text-input/react-desc-prop-types.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_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__default["default"](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 defaultProps = {
+  value: '',
+  onValueChange: () => null,
+  onClear: () => null,
+  placeholder: 'Hint Text',
+  disabled: false,
+  readOnly: false,
+  hasError: false,
+  innerRef: () => null,
+  inputSize: 'm',
+  clearable: false
+};
+const DSInputTextPropTypes = _objectSpread(_objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), dsPropsHelpers.xstyledPropTypes), {}, {
+  value: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.string)]).description('Value of the input').defaultValue(''),
+  onChange: dsPropsHelpers.PropTypes.func.description('onChange event handler').defaultValue(() => null),
+  placeholder: dsPropsHelpers.PropTypes.string.description('Value of the placeholder').defaultValue(''),
+  innerRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.object, dsPropsHelpers.PropTypes.func]).description('Reference to the input').defaultValue(null),
+  disabled: dsPropsHelpers.PropTypes.bool.description('Whether the input is disabled').defaultValue(false),
+  readOnly: dsPropsHelpers.PropTypes.bool.description('Whether the input is readonly').defaultValue(false),
+  hasError: dsPropsHelpers.PropTypes.bool.description('Whether the input has error').defaultValue(false),
+  inputSize: dsPropsHelpers.PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),
+  clearable: dsPropsHelpers.PropTypes.bool.description('Whether the input is clearable').defaultValue(false)
+});
+
+exports.DSInputTextPropTypes = DSInputTextPropTypes;
+exports.defaultProps = defaultProps;

package/cjs/controlled-text-input/styled/borders.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const commonBorderCss = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('neutral-400'));
+const readOnlyBorderCss = dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  border-top-color: ", ";\n"])), dsSystem.th.color('neutral-400'));
+const disabledBorderCss = commonBorderCss;
+const hasErrorBorderCss = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('danger-900'));
+const hoverBorderCss = dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('brand-700'));
+const focusBorderCss = dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -1px;\n"])), dsSystem.th.color('brand-700'));
+const getBorderCss = props => {
+  if (props.isDisabled) return disabledBorderCss;
+  if (props.hasFocus) return focusBorderCss;
+  if (props.hasError) return hasErrorBorderCss;
+  if (props.isReadOnly) return readOnlyBorderCss;
+  return commonBorderCss;
+};
+const getHoverBorderCss = props => {
+  if (props.isDisabled) return disabledBorderCss;
+  if (props.hasFocus) return focusBorderCss;
+  return hoverBorderCss;
+};
+
+exports.getBorderCss = getBorderCss;
+exports.getHoverBorderCss = getHoverBorderCss;

package/cjs/controlled-text-input/styled/components.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var DSButton = require('@elliemae/ds-button');
+var dsGrid = require('@elliemae/ds-grid');
+var dsSystem = require('@elliemae/ds-system');
+var styledComponents = require('@xstyled/styled-components');
+var theming = require('../exported-related/theming.js');
+var borders = require('./borders.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3;
+const StyledInputWrapper = dsSystem.styled(dsGrid.Grid, {
+  name: theming.DSInputTextName,
+  slot: theming.DSInputTextSlots.INPUT_WRAPPER
+})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  height: ", ";\n\n  ", "\n  border-radius: 2px;\n\n  :hover {\n    ", "\n  }\n\n  ", "\n  ", "\n  ", "\n"])), _ref => {
+  let {
+    inputSize
+  } = _ref;
+  return inputSize === 'm' ? '28px' : '24px';
+}, borders.getBorderCss, borders.getHoverBorderCss, styledComponents.layout, styledComponents.space, styledComponents.sizing);
+const StyledInput = dsSystem.styled('input', {
+  name: theming.DSInputTextName,
+  slot: theming.DSInputTextSlots.INPUT
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  padding: 0 ", ";\n  border: none;\n  outline: none;\n  border-radius: 2px;\n\n  width: 100%;\n  height: 100%;\n  font-size: 13px;\n\n  ::placeholder {\n    font-weight: ", ";\n    font-style: italic;\n    color: ", ";\n  }\n\n  :disabled {\n    background-color: ", ";\n    color: #616b7f;\n    cursor: not-allowed;\n  }\n"])), dsSystem.th.space('xxs'), dsSystem.th.fontWeight('regular'), dsSystem.th.color('neutral-500'), dsSystem.th.color('neutral-080'));
+const StyledClearButton = dsSystem.styled(DSButton.DSButtonV2, {
+  name: theming.DSInputTextName,
+  slot: theming.DSInputTextSlots.CLEAR_BUTTON
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  height: 100%;\n  min-width: 20px;\n  width: 20px;\n  &:after {\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n  }\n  :focus {\n    border-width: 0px;\n  }\n"])));
+
+exports.StyledClearButton = StyledClearButton;
+exports.StyledInput = StyledInput;
+exports.StyledInputWrapper = StyledInputWrapper;

package/cjs/index.js

@@ -2,7 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var Autocomplete = require('./controlled-autocomplete/Autocomplete.js');
 var ControlledCheckbox = require('./controlled-checkbox/ControlledCheckbox.js');
+var ComboBox = require('./controlled-combobox/ComboBox.js');
 var ControlledDateRangePicker = require('./controlled-date-range-picker/ControlledDateRangePicker.js');
 var ControlledDateRangePickerDatatestid = require('./controlled-date-range-picker/ControlledDateRangePickerDatatestid.js');
 var ControlledDateRangePickerTypes = require('./controlled-date-range-picker/ControlledDateRangePickerTypes.js');
@@ -13,14 +15,20 @@ var stringHelpers = require('./controlled-date-time-picker/utils/stringHelpers.j
 var dateTimeHelpers = require('./controlled-date-time-picker/utils/dateTimeHelpers.js');
 var dateHelpers = require('./controlled-date-time-picker/utils/dateHelpers.js');
 var timeHelpers = require('./controlled-date-time-picker/utils/timeHelpers.js');
+var usePhoneMask = require('./controlled-mask-hook/hooks/usePhoneMask.js');
+var DSInputText = require('./controlled-text-input/DSInputText.js');
+var dataTestIds = require('./controlled-text-input/exported-related/data-test-ids.js');
+var theming = require('./controlled-text-input/exported-related/theming.js');
 var ControlledToggle = require('./controlled-toggle/ControlledToggle.js');
-var Autocomplete = require('./controlled-autocomplete/Autocomplete.js');
-var ComboBox = require('./controlled-combobox/ComboBox.js');
 
 
 
+exports.DSAutocomplete = Autocomplete.DSAutocomplete;
+exports.DSAutocompleteWithSchema = Autocomplete.DSAutocompleteWithSchema;
 exports.DSControlledCheckbox = ControlledCheckbox.DSControlledCheckbox;
 exports.DSControlledCheckboxWithSchema = ControlledCheckbox.DSControlledCheckboxWithSchema;
+exports.DSComboBox = ComboBox.DSComboBox;
+exports.DSComboBoxWithSchema = ComboBox.DSComboBoxWithSchema;
 exports.DSControlledDateRangePicker = ControlledDateRangePicker.DSControlledDateRangePicker;
 exports.DSControlledDateRangePickerWithSchema = ControlledDateRangePicker.DSControlledDateRangePickerWithSchema;
 exports.ControlledDateRangePickerDatatestid = ControlledDateRangePickerDatatestid.ControlledDateRangePickerDatatestid;
@@ -37,9 +45,12 @@ exports.getDateValuesFromDate = dateHelpers.getDateValuesFromDate;
 exports.getDayFromDateString = dateHelpers.getDayFromDateString;
 exports.getValidationDateStringMetaInfo = dateHelpers.getValidationDateStringMetaInfo;
 exports.getValidationTimeStringMetaInfo = timeHelpers.getValidationTimeStringMetaInfo;
+exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.usePhoneMask = usePhoneMask.usePhoneMask;
+exports.DSInputText = DSInputText.DSInputText;
+exports.DSInputTextWithSchema = DSInputText.DSInputTextWithSchema;
+exports.DSInputTextDataTestIds = dataTestIds.DSInputTextDataTestIds;
+exports.DSInputTextName = theming.DSInputTextName;
+exports.DSInputTextSlots = theming.DSInputTextSlots;
 exports.DSControlledToggle = ControlledToggle.DSControlledToggle;
 exports.DSControlledToggleWithSchema = ControlledToggle.DSControlledToggleWithSchema;
-exports.DSAutocomplete = Autocomplete.DSAutocomplete;
-exports.DSAutocompleteWithSchema = Autocomplete.DSAutocompleteWithSchema;
-exports.DSComboBox = ComboBox.DSComboBox;
-exports.DSComboBoxWithSchema = ComboBox.DSComboBoxWithSchema;

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

@@ -0,0 +1 @@
+export { UsePhoneMaskWithSchema, usePhoneMask } from './usePhoneMask.js';

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

@@ -0,0 +1,67 @@
+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/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 { DSMaskHookPropsTypes, DSMaskHookDefaultProps } from '../react-desc-prop-types.js';
+
+const phoneSpecialChars = [['(', 0], [') ', 4], ['-', 9]];
+
+const conformValue = (rawValue, cursorPos, lastKeyCode) => {
+  // Work with digits only
+  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We can't have zeros at the start of the array
+
+  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1); // We only consider first 10 digits
+
+
+  maskedValue = maskedValue.slice(0, 10);
+  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters(maskedValue, phoneSpecialChars, maskedPos, lastKeyCode);
+};
+
+const usePhoneMask = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown
+  } = 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);
+    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]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UsePhoneMaskWithSchema = describe(usePhoneMask);
+UsePhoneMaskWithSchema.propTypes = DSMaskHookPropsTypes;
+
+export { UsePhoneMaskWithSchema, usePhoneMask };