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

package/esm/controlled-checkbox/ControlledCheckbox.js

@@ -15,7 +15,7 @@ import { setMultipleRefs } from './utils/setMultipleRefs.js';
 import { useValidateProps } from './config/useValidateProps.js';
 import { jsx } from 'react/jsx-runtime';
 
-const _excluded = ["id", "disabled", "readOnly", "label", "aria-label", "aria-controls", "onKeyDown"];
+const _excluded = ["id", "disabled", "readOnly", "label", "aria-label", "aria-controls", "onKeyDown", "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; }
 
@@ -32,7 +32,8 @@ const DSControlledCheckbox = props => {
     innerRef,
     tabIndex,
     ariaLabel: legacyAriaLabel,
-    ariaControls: legacyAriaControls
+    ariaControls: legacyAriaControls,
+    'data-testid': dataTestid = 'ds-checkbox-container'
   } = propsWithDefault;
   const handleOnKeyDown = useCallback(e => {
     if (checkboxRef.current && e.key === 'Enter') {
@@ -50,18 +51,21 @@ const DSControlledCheckbox = props => {
     label: globalLabel,
     'aria-label': ariaLabel,
     'aria-controls': ariaControls,
-    onKeyDown
+    onKeyDown,
+    className
   } = _useGetGlobalAttribut,
         restGlobals = _objectWithoutProperties(_useGetGlobalAttribut, _excluded);
 
   return /*#__PURE__*/_jsx(StyledContainer, {
-    "data-testid": "ds-checkbox-container"
+    "data-testid": dataTestid,
+    className: className
   }, void 0, /*#__PURE__*/_jsx(StyledCheckBox, {
     checked: checked,
     hasError: hasError,
     disabled: disabled,
     readOnly: readOnly
   }, void 0, /*#__PURE__*/jsx(StyledInput, _objectSpread(_objectSpread({}, restGlobals), {}, {
+    "data-testid": "ds-checkbox",
     id: id,
     ref: ref => setMultipleRefs([checkboxRef, innerRef])(ref),
     onKeyDown: handleOnKeyDown,

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 };

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.13",
+  "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.13",
-    "@elliemae/ds-form-layout-blocks": "2.3.0-next.13",
-    "@elliemae/ds-grid": "2.3.0-next.13",
-    "@elliemae/ds-icon": "2.3.0-next.13",
-    "@elliemae/ds-icons": "2.3.0-next.13",
-    "@elliemae/ds-props-helpers": "2.3.0-next.13",
-    "@elliemae/ds-system": "2.3.0-next.13",
-    "@elliemae/ds-tooltip": "2.3.0-next.13",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.13",
+    "@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-checkbox/react-desc-prop-types.d.ts

@@ -5,6 +5,7 @@ export declare namespace DSControlledCheckboxT {
         checked: boolean | 'mixed';
         tabIndex?: number;
         hasError?: boolean;
+        'data-testid'?: string;
     }
     interface OptionalProps {
         innerRef: React.RefObject<HTMLInputElement> | React.LegacyRef<HTMLInputElement>;

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>;