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

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

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

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

@@ -0,0 +1,14 @@
+import { PropTypes } from '@elliemae/ds-props-helpers';
+
+const DSMaskHookDefaultProps = {
+  onChange: () => null,
+  onKeyDown: () => null,
+  onBlur: () => null
+};
+const DSMaskHookPropsTypes = {
+  valueSetter: PropTypes.func.description('React set state function for the value').isRequired,
+  onChange: PropTypes.func.description('Callback for onChange'),
+  onKeyDown: PropTypes.func.description('Callback for onKeyDown')
+};
+
+export { DSMaskHookDefaultProps, DSMaskHookPropsTypes };

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

@@ -0,0 +1,46 @@
+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/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];
+};
+
+export { addSpecialCharacters };

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

@@ -0,0 +1,11 @@
+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;
+};
+
+export { getPartialMaskedPos };

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

@@ -0,0 +1,3 @@
+export { addSpecialCharacters } from './addSpecialCharacters.js';
+export { getPartialMaskedPos } from './getPartialMaskedPos.js';
+export { setCursorPosition } from './setCursorPosition.js';

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

@@ -0,0 +1,5 @@
+const setCursorPosition = (input, position) => {
+  input.setSelectionRange(position, position, 'forward');
+};
+
+export { setCursorPosition };

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

@@ -0,0 +1,78 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { CloseMedium } from '@elliemae/ds-icons';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { describe } from '@elliemae/ds-props-helpers';
+import { useInputText } from './config/useInputText.js';
+import { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';
+import { DSInputTextPropTypes } from './react-desc-prop-types.js';
+import { StyledInputWrapper, StyledInput, StyledClearButton } from './styled/components.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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(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(props),
+        {
+    globalAttributes: {
+      className
+    },
+    hasFocus,
+    handlers,
+    propsWithDefault,
+    xstyledProps
+  } = _useInputText,
+        otherGlobalAttributes = _objectWithoutProperties(_useInputText.globalAttributes, _excluded);
+
+  const {
+    clearable,
+    disabled,
+    hasError,
+    innerRef,
+    placeholder,
+    readOnly,
+    inputSize,
+    onClear,
+    value
+  } = propsWithDefault;
+  const shouldDisplayClearButton = clearable && value !== '';
+  return /*#__PURE__*/jsxs(StyledInputWrapper, _objectSpread(_objectSpread({
+    className: className,
+    cols: shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto'],
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    hasError: hasError,
+    hasFocus: hasFocus,
+    inputSize: inputSize
+  }, xstyledProps), {}, {
+    children: [/*#__PURE__*/jsx(StyledInput, _objectSpread(_objectSpread({
+      "data-testid": DSInputTextDataTestIds.INPUT,
+      disabled: disabled,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      ref: innerRef,
+      value: value
+    }, handlers), otherGlobalAttributes)), shouldDisplayClearButton && /*#__PURE__*/_jsx(StyledClearButton, {
+      "aria-label": "Clear input value",
+      buttonType: "icon",
+      "data-testid": DSInputTextDataTestIds.CLEAR_BUTTON,
+      onClick: onClear
+    }, void 0, /*#__PURE__*/_jsx(CloseMedium, {
+      color: DSIconColors.PRIMARY
+    }))]
+  }));
+};
+const DSInputTextWithSchema = describe(DSInputText);
+DSInputTextWithSchema.propTypes = DSInputTextPropTypes;
+
+export { DSInputText, DSInputTextWithSchema };

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

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

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

@@ -0,0 +1,6 @@
+const DSInputTextDataTestIds = {
+  INPUT: 'ds-input-text-input',
+  CLEAR_BUTTON: 'ds-input-text-clear-button'
+};
+
+export { DSInputTextDataTestIds };

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

@@ -0,0 +1,2 @@
+export { DSInputTextDataTestIds } from './data-test-ids.js';
+export { DSInputTextName, DSInputTextSlots } from './theming.js';

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

@@ -0,0 +1,8 @@
+const DSInputTextName = 'ds-input-text';
+const DSInputTextSlots = {
+  INPUT_WRAPPER: 'root',
+  INPUT: 'input',
+  CLEAR_BUTTON: 'input-clear-button'
+};
+
+export { DSInputTextName, DSInputTextSlots };

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

@@ -0,0 +1,3 @@
+export { DSInputText, DSInputTextWithSchema } from './DSInputText.js';
+export { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';
+export { DSInputTextName, DSInputTextSlots } from './exported-related/theming.js';

package/esm/controlled-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 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({}, globalAttributesPropTypes), xstyledPropTypes), {}, {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)]).description('Value of the input').defaultValue(''),
+  onChange: PropTypes.func.description('onChange event handler').defaultValue(() => null),
+  placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Reference to the input').defaultValue(null),
+  disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),
+  readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),
+  hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),
+  inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),
+  clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false)
+});
+
+export { DSInputTextPropTypes, defaultProps };

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

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { css, th } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const commonBorderCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('neutral-400'));
+const readOnlyBorderCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  border-top-color: ", ";\n"])), th.color('neutral-400'));
+const disabledBorderCss = commonBorderCss;
+const hasErrorBorderCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('danger-900'));
+const hoverBorderCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), th.color('brand-700'));
+const focusBorderCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -1px;\n"])), 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;
+};
+
+export { getBorderCss, getHoverBorderCss };

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

@@ -0,0 +1,28 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { Grid } from '@elliemae/ds-grid';
+import { styled, th } from '@elliemae/ds-system';
+import { layout, space, sizing } from '@xstyled/styled-components';
+import { DSInputTextName, DSInputTextSlots } from '../exported-related/theming.js';
+import { getBorderCss, getHoverBorderCss } from './borders.js';
+
+var _templateObject, _templateObject2, _templateObject3;
+const StyledInputWrapper = styled(Grid, {
+  name: DSInputTextName,
+  slot: DSInputTextSlots.INPUT_WRAPPER
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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';
+}, getBorderCss, getHoverBorderCss, layout, space, sizing);
+const StyledInput = styled('input', {
+  name: DSInputTextName,
+  slot: DSInputTextSlots.INPUT
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), th.space('xxs'), th.fontWeight('regular'), th.color('neutral-500'), th.color('neutral-080'));
+const StyledClearButton = styled(DSButtonV2, {
+  name: DSInputTextName,
+  slot: DSInputTextSlots.CLEAR_BUTTON
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])));
+
+export { StyledClearButton, StyledInput, StyledInputWrapper };

package/esm/index.js

@@ -1,4 +1,6 @@
+export { DSAutocomplete, DSAutocompleteWithSchema } from './controlled-autocomplete/Autocomplete.js';
 export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './controlled-checkbox/ControlledCheckbox.js';
+export { DSComboBox, DSComboBoxWithSchema } from './controlled-combobox/ComboBox.js';
 export { DSControlledDateRangePicker, DSControlledDateRangePickerWithSchema } from './controlled-date-range-picker/ControlledDateRangePicker.js';
 export { ControlledDateRangePickerDatatestid } from './controlled-date-range-picker/ControlledDateRangePickerDatatestid.js';
 export { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './controlled-date-range-picker/ControlledDateRangePickerTypes.js';
@@ -9,6 +11,8 @@ export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from '
 export { getValidationDateTimeStringMetaInfo } from './controlled-date-time-picker/utils/dateTimeHelpers.js';
 export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './controlled-date-time-picker/utils/dateHelpers.js';
 export { getValidationTimeStringMetaInfo } from './controlled-date-time-picker/utils/timeHelpers.js';
+export { UsePhoneMaskWithSchema, usePhoneMask } from './controlled-mask-hook/hooks/usePhoneMask.js';
+export { DSInputText, DSInputTextWithSchema } from './controlled-text-input/DSInputText.js';
+export { DSInputTextDataTestIds } from './controlled-text-input/exported-related/data-test-ids.js';
+export { DSInputTextName, DSInputTextSlots } from './controlled-text-input/exported-related/theming.js';
 export { DSControlledToggle, DSControlledToggleWithSchema } from './controlled-toggle/ControlledToggle.js';
-export { DSAutocomplete, DSAutocompleteWithSchema } from './controlled-autocomplete/Autocomplete.js';
-export { DSComboBox, DSComboBoxWithSchema } from './controlled-combobox/ComboBox.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.3.0-next.16",
+  "version": "2.3.0-next.17",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -39,6 +39,74 @@
       "import": "./esm/controlled-toggle/ControlledToggle.js",
       "require": "./cjs/controlled-toggle/ControlledToggle.js"
     },
+    "./controlled-text-input/styled/components": {
+      "import": "./esm/controlled-text-input/styled/components.js",
+      "require": "./cjs/controlled-text-input/styled/components.js"
+    },
+    "./controlled-text-input/styled/borders": {
+      "import": "./esm/controlled-text-input/styled/borders.js",
+      "require": "./cjs/controlled-text-input/styled/borders.js"
+    },
+    "./controlled-text-input/react-desc-prop-types": {
+      "import": "./esm/controlled-text-input/react-desc-prop-types.js",
+      "require": "./cjs/controlled-text-input/react-desc-prop-types.js"
+    },
+    "./controlled-text-input": {
+      "import": "./esm/controlled-text-input/index.js",
+      "require": "./cjs/controlled-text-input/index.js"
+    },
+    "./controlled-text-input/exported-related/theming": {
+      "import": "./esm/controlled-text-input/exported-related/theming.js",
+      "require": "./cjs/controlled-text-input/exported-related/theming.js"
+    },
+    "./controlled-text-input/exported-related": {
+      "import": "./esm/controlled-text-input/exported-related/index.js",
+      "require": "./cjs/controlled-text-input/exported-related/index.js"
+    },
+    "./controlled-text-input/exported-related/data-test-ids": {
+      "import": "./esm/controlled-text-input/exported-related/data-test-ids.js",
+      "require": "./cjs/controlled-text-input/exported-related/data-test-ids.js"
+    },
+    "./controlled-text-input/DSInputText": {
+      "import": "./esm/controlled-text-input/DSInputText.js",
+      "require": "./cjs/controlled-text-input/DSInputText.js"
+    },
+    "./controlled-text-input/config/useInputText": {
+      "import": "./esm/controlled-text-input/config/useInputText.js",
+      "require": "./cjs/controlled-text-input/config/useInputText.js"
+    },
+    "./controlled-mask-hook/utils/setCursorPosition": {
+      "import": "./esm/controlled-mask-hook/utils/setCursorPosition.js",
+      "require": "./cjs/controlled-mask-hook/utils/setCursorPosition.js"
+    },
+    "./controlled-mask-hook/utils": {
+      "import": "./esm/controlled-mask-hook/utils/index.js",
+      "require": "./cjs/controlled-mask-hook/utils/index.js"
+    },
+    "./controlled-mask-hook/utils/getPartialMaskedPos": {
+      "import": "./esm/controlled-mask-hook/utils/getPartialMaskedPos.js",
+      "require": "./cjs/controlled-mask-hook/utils/getPartialMaskedPos.js"
+    },
+    "./controlled-mask-hook/utils/addSpecialCharacters": {
+      "import": "./esm/controlled-mask-hook/utils/addSpecialCharacters.js",
+      "require": "./cjs/controlled-mask-hook/utils/addSpecialCharacters.js"
+    },
+    "./controlled-mask-hook/react-desc-prop-types": {
+      "import": "./esm/controlled-mask-hook/react-desc-prop-types.js",
+      "require": "./cjs/controlled-mask-hook/react-desc-prop-types.js"
+    },
+    "./controlled-mask-hook": {
+      "import": "./esm/controlled-mask-hook/index.js",
+      "require": "./cjs/controlled-mask-hook/index.js"
+    },
+    "./controlled-mask-hook/hooks/usePhoneMask": {
+      "import": "./esm/controlled-mask-hook/hooks/usePhoneMask.js",
+      "require": "./cjs/controlled-mask-hook/hooks/usePhoneMask.js"
+    },
+    "./controlled-mask-hook/hooks": {
+      "import": "./esm/controlled-mask-hook/hooks/index.js",
+      "require": "./cjs/controlled-mask-hook/hooks/index.js"
+    },
     "./controlled-date-time-picker/utils/timeHelpers": {
       "import": "./esm/controlled-date-time-picker/utils/timeHelpers.js",
       "require": "./cjs/controlled-date-time-picker/utils/timeHelpers.js"
@@ -720,15 +788,16 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-next.16",
-    "@elliemae/ds-form-layout-blocks": "2.3.0-next.16",
-    "@elliemae/ds-grid": "2.3.0-next.16",
-    "@elliemae/ds-icon": "2.3.0-next.16",
-    "@elliemae/ds-icons": "2.3.0-next.16",
-    "@elliemae/ds-props-helpers": "2.3.0-next.16",
-    "@elliemae/ds-system": "2.3.0-next.16",
-    "@elliemae/ds-tooltip": "2.3.0-next.16",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.16",
+    "@elliemae/ds-button": "2.3.0-next.17",
+    "@elliemae/ds-form-layout-blocks": "2.3.0-next.17",
+    "@elliemae/ds-grid": "2.3.0-next.17",
+    "@elliemae/ds-icon": "2.3.0-next.17",
+    "@elliemae/ds-icons": "2.3.0-next.17",
+    "@elliemae/ds-props-helpers": "2.3.0-next.17",
+    "@elliemae/ds-system": "2.3.0-next.17",
+    "@elliemae/ds-tooltip": "2.3.0-next.17",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.17",
+    "@xstyled/styled-components": "~3.5.1",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/controlled-autocomplete/parts/controls/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
+export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     minWidth: number;
     hasError: boolean;
 }, never>;

package/types/controlled-combobox/parts/controls/styled.d.ts

@@ -6,9 +6,9 @@ interface StyledControlsWrapperT {
     minWidth: number;
     disabled?: boolean;
 }
-export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, StyledControlsWrapperT, never>;
+export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, StyledControlsWrapperT, never>;
 export declare const StyledSelection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledHeaderActionsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeaderActionsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyleDropdownIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyleHeaderActionsSeparator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/types/controlled-combobox/parts/dropdown-indicator/styled.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const StyledDropDownButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDropDownButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;

package/types/controlled-date-time-picker/parts/Pickers/Calendar/Styleds.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-export declare const StyledIconTriggerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledIconTriggerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledShadowWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isControllerOnly: boolean;
 }, never>;
 export declare const StyledCalendarWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledHeader: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledHeaderButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeaderButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBody: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDayBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledWeekDaysListWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDayBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWeekDaysListWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWeekDaysHeaderItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const CalendarFooterMessage: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;

package/types/controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/Styleds.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledIconTriggerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledIconTriggerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCalendarWithTimeWheelWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isControllerOnly: boolean;
 }, never>;

package/types/controlled-date-time-picker/parts/Pickers/TimeWheel/Styleds.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledIconTriggerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledIconTriggerButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWheelList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface StyledWheelListItemPropsT {
     isCurrentListItem?: boolean;
@@ -9,11 +9,11 @@ export declare const StyledTimePickerContainer: import("styled-components").Styl
     showShadow?: boolean | undefined;
     isControllerOnly: boolean;
 }, never>;
-export declare const StyledTimePickerHead: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTimePickerHead: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTimePickerWheelsLegend: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTimePickerWheelWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTimeBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTimeBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWheelListItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledWheelListItemPropsT, never>;
-export declare const StyledWheelChangeTimeBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWheelChangeTimeBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
 export declare const TimeWheelFooterMessage: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/types/controlled-date-time-picker/parts/Styleds.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-export declare const StyledSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledColonSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledColonSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const Styled2DigitsInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMin4DigitsInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInputsWrapperGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInputsWrapperGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDateInputsWrapperGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTimeInputsWrapperGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPickersIconsWrapperGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
+export declare const StyledPickersIconsWrapperGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     isControllerOnly: boolean;
 }, never>;
-export declare const StyledFocusWithIn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledClearButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFocusWithIn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledClearButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;

package/types/controlled-mask-hook/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './usePhoneMask';

package/types/controlled-mask-hook/hooks/usePhoneMask.d.ts

@@ -0,0 +1,3 @@
+import { DSMaskT } from '../react-desc-prop-types';
+export declare const usePhoneMask: DSMaskT.Hook;
+export declare const UsePhoneMaskWithSchema: any;

package/types/controlled-mask-hook/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export type { DSMaskT } from './react-desc-prop-types';

package/types/controlled-mask-hook/react-desc-prop-types.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare namespace DSMaskT {
+    interface HookArgs {
+        valueSetter: React.Dispatch<React.SetStateAction<string>>;
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => void;
+        onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+        onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    }
+    interface HookReturn {
+        onChange: React.ChangeEventHandler<HTMLInputElement>;
+        onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+        onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    }
+    type Hook = (args: HookArgs) => HookReturn;
+}
+export declare const DSMaskHookDefaultProps: Partial<DSMaskT.HookArgs>;
+export declare const DSMaskHookPropsTypes: React.WeakValidationMap<unknown>;

package/types/controlled-mask-hook/tests/usePhoneMask.test.d.ts

@@ -0,0 +1 @@
+export {};