@widergy/energy-ui 3.43.0 → 3.44.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.44.0](https://github.com/widergy/energy-ui/compare/v3.43.0...v3.44.0) (2024-11-22)
+
+
+### Features
+
+* [UGB-2008] add UTCBUInput version V1 ([#532](https://github.com/widergy/energy-ui/issues/532)) ([8db24f6](https://github.com/widergy/energy-ui/commit/8db24f6fb2bb6f44ce215a11888f2279e808c4b5))
+
 # [3.43.0](https://github.com/widergy/energy-ui/compare/v3.42.1...v3.43.0) (2024-11-14)
 
 

package/dist/components/UTBaseInputField/index.js

@@ -20,7 +20,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const UTBaseInputField = _ref => {
   let {
-    alwaysShowPlaceholder,
     classes: theme,
     classNames = {},
     dataTestId,
@@ -70,7 +69,6 @@ const UTBaseInputField = _ref => {
       }
     }
   }, [type]);
-  const shouldShowPlaceholder = alwaysShowPlaceholder || focused;
   const multiline = maxRows > 1;
   const hasCharactersCount = (0, _react.useMemo)(() => showCharacterCount && maxLength && !disabled && !readOnly, [showCharacterCount, maxLength, disabled, readOnly]);
   const validLeftAdornments = (0, _react.useMemo)(() => (0, _utils.validateAdornments)(leftAdornments) ? leftAdornments : [], [leftAdornments]);
@@ -91,11 +89,15 @@ const UTBaseInputField = _ref => {
     })) : null;
   }, [error, disabled, readOnly, focused]);
   return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
-    autoComplete: "new-password",
+    autocomplete: "new-password",
     className: classes.container,
     disabled: disabled || readOnly,
     error: error,
+    form: {
+      autocomplete: 'off'
+    },
     id: id,
+    inputRef: inputRef,
     margin: "none",
     maxRows: maxRows,
     minRows: maxRows,
@@ -104,10 +106,9 @@ const UTBaseInputField = _ref => {
     onChange: handleChange,
     onFocus: handleFocus,
     onKeyDown: handleKeyDown,
-    placeholder: shouldShowPlaceholder ? placeholder : '',
+    placeholder: placeholder,
     type: type === 'numeric' ? 'text' : type,
     value: value,
-    inputRef: inputRef,
     variant: "outlined"
   }, muiProps, {
     InputProps: {
@@ -120,7 +121,7 @@ const UTBaseInputField = _ref => {
       classes: {
         adornedEnd: _stylesModule.default.elementsContainer,
         adornedStart: _stylesModule.default.elementsContainer,
-        input: "".concat(classes.input, " ").concat(focused && classes.focusedInput),
+        input: classes.input,
         notchedOutline: "".concat(classes.inputContainer, " ").concat(focused && classes.focusedInputContainer),
         root: "".concat(classes.root, " ").concat(focused && classes.focusedRoot, " ").concat(value && classes.withValueRoot)
       },

package/dist/components/UTBaseInputField/styles.module.scss

@@ -9,12 +9,6 @@
   grid-gap: 16px;
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 8px;
-}
-
 .elementsContainer {
   grid-gap: 16px;
 }

package/dist/components/UTBaseInputField/theme.js

@@ -51,8 +51,21 @@ const getBorderColor = _ref2 => {
   if (error) return "".concat(theme.Palette.error['04'], " !important");
   return "".concat(theme.Palette.light['05'], " !important");
 };
-const retrieveStyle = props => {
-  const {
+const getBackgroundColorOnHover = _ref3 => {
+  let {
+    theme,
+    variant,
+    error,
+    readOnly
+  } = _ref3;
+  if (variant === 'gray') return theme.Palette.light['05'];
+  if (variant === 'transparent' && error) return theme.Palette.error['02'];
+  if (!readOnly) return theme.Palette.light['03'];
+  return undefined;
+};
+const retrieveStyle = _ref4 => {
+  let {
+    alwaysShowPlaceholder,
     disabled: receivedDisabled,
     error,
     inputSize,
@@ -61,7 +74,7 @@ const retrieveStyle = props => {
     showCharacterCount,
     theme,
     variant
-  } = props;
+  } = _ref4;
   const disabled = receivedDisabled && !readOnly;
   const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
   const {
@@ -91,7 +104,27 @@ const retrieveStyle = props => {
         paddingRight: 0
       }),
       '&:hover': {
-        backgroundColor: variant === 'gray' ? theme.Palette.light['05'] : variant === 'transparent' && error ? theme.Palette.error['02'] : !readOnly && theme.Palette.light['03']
+        backgroundColor: getBackgroundColorOnHover({
+          theme,
+          variant,
+          error,
+          readOnly
+        })
+      },
+      '&:active': {
+        ...(!disabled && !readOnly && {
+          backgroundColor: theme.Palette.light['01'],
+          '& $inputContainer': {
+            borderColor: error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(theme.Palette.accent['04'], " !important"),
+            borderWidth: '2px'
+          },
+          '& $input': {
+            '&::placeholder': {
+              color: "".concat(theme.Palette.gray['02'], " !important"),
+              opacity: 1
+            }
+          }
+        })
       }
     },
     inputContainer: {
@@ -139,20 +172,22 @@ const retrieveStyle = props => {
       textOverflow: 'ellipsis',
       '&::placeholder': {
         color: variant === 'transparent' && !disabled ? theme.Palette.dark['05'] : theme.Palette.gray['02'],
-        opacity: 1
+        opacity: alwaysShowPlaceholder ? 1 : 0,
+        transition: 'none',
+        userSelect: 'none'
       },
       '&::selection': {
         backgroundColor: theme.Palette.accent['02']
       },
+      '&:focus': {
+        '&::placeholder': {
+          color: "".concat(theme.Palette.gray['02'], " !important"),
+          opacity: 1
+        }
+      },
       ...(disabled && {
         color: theme.Palette.gray['04']
       })
-    },
-    focusedInput: {
-      '&::placeholder': {
-        color: theme.Palette.gray['02'],
-        opacity: 1
-      }
     }
   };
 };

package/dist/components/UTCBUInput/index.js

@@ -4,92 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTTextInput = _interopRequireDefault(require("../UTTextInput"));
-var _formTypes = require("../../types/formTypes");
-var _theme = require("./theme");
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const UTCBUInput = _ref => {
   let {
-    classes,
-    dataTestId,
-    field,
-    helperTextDataTestId,
-    input,
-    meta
+    version = 'V0',
+    ...props
   } = _ref;
-  const {
-    onChange,
-    value
-  } = input;
-  const {
-    placeholder,
-    title,
-    configuration
-  } = field;
-  const {
-    entities,
-    cbu_number_key: cbuNumberKey,
-    cbu_entity_key: cbuEntityKey
-  } = configuration;
-  const [entity, setEntity] = (0, _react.useState)('');
-  const onChangeText = newValue => {
-    const index = entities.findIndex(entityValue => new RegExp(entityValue.expression).test(newValue));
-    const entityToSet = index === -1 ? '' : entities[index].entity_name;
-    setEntity(entityToSet);
-    onChange({
-      [cbuNumberKey]: newValue,
-      [cbuEntityKey]: entityToSet
-    });
-  };
-  return /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
-    captionLabel: entity,
-    dataTestId: dataTestId,
-    field: field,
-    FormHelperTextProps: {
-      classes: {
-        root: classes.helper
-      }
-    },
-    helperTextDataTestId: helperTextDataTestId,
-    input: {
-      onChange: onChangeText,
-      value: {
-        [cbuNumberKey]: value[cbuNumberKey],
-        [cbuEntityKey]: entity
-      }
-    },
-    inputObjectKey: cbuNumberKey,
-    label: title,
-    meta: meta,
-    placeholder: placeholder,
-    disabled: field === null || field === void 0 ? void 0 : field.read_only
-  });
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTCBUInput.propTypes = {
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  dataTestId: _propTypes.string,
-  field: (0, _propTypes.shape)({
-    placeholder: _propTypes.string,
-    title: _propTypes.string,
-    configuration: (0, _propTypes.shape)({
-      entities: _propTypes.array
-    }),
-    cbu_number_key: _propTypes.string,
-    cbu_entity_key: _propTypes.string
-  }),
-  helperTextDataTestId: _propTypes.string,
-  input: (0, _propTypes.shape)({
-    onChange: _propTypes.func,
-    value: (0, _propTypes.shape)({
-      cbuNumber: _propTypes.string,
-      entityName: _propTypes.string
-    })
-  }),
-  meta: _formTypes.metaPropTypes
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTCBUInput);
+var _default = exports.default = UTCBUInput;

package/dist/components/UTCBUInput/versions/V0/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _formTypes = require("../../../../types/formTypes");
+var _UTTextInput = _interopRequireDefault(require("../../../UTTextInput"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _theme = require("./theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const UTCBUInput = _ref => {
+  let {
+    classes,
+    dataTestId,
+    field,
+    helperTextDataTestId,
+    input,
+    meta
+  } = _ref;
+  const {
+    onChange,
+    value
+  } = input;
+  const {
+    placeholder,
+    title,
+    configuration
+  } = field;
+  const {
+    entities,
+    cbu_number_key: cbuNumberKey,
+    cbu_entity_key: cbuEntityKey
+  } = configuration;
+  const [entity, setEntity] = (0, _react.useState)('');
+  const onChangeText = newValue => {
+    const index = entities.findIndex(entityValue => new RegExp(entityValue.expression).test(newValue));
+    const entityToSet = index === -1 ? '' : entities[index].entity_name;
+    setEntity(entityToSet);
+    onChange({
+      [cbuNumberKey]: newValue,
+      [cbuEntityKey]: entityToSet
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    captionLabel: entity,
+    dataTestId: dataTestId,
+    field: field,
+    FormHelperTextProps: {
+      classes: {
+        root: classes.helper
+      }
+    },
+    helperTextDataTestId: helperTextDataTestId,
+    input: {
+      onChange: onChangeText,
+      value: {
+        [cbuNumberKey]: value[cbuNumberKey],
+        [cbuEntityKey]: entity
+      }
+    },
+    inputObjectKey: cbuNumberKey,
+    label: title,
+    meta: meta,
+    placeholder: placeholder,
+    disabled: field === null || field === void 0 ? void 0 : field.read_only
+  });
+};
+UTCBUInput.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  field: (0, _propTypes.shape)({
+    placeholder: _propTypes.string,
+    title: _propTypes.string,
+    configuration: (0, _propTypes.shape)({
+      entities: _propTypes.array
+    }),
+    cbu_number_key: _propTypes.string,
+    cbu_entity_key: _propTypes.string
+  }),
+  helperTextDataTestId: _propTypes.string,
+  input: (0, _propTypes.shape)({
+    onChange: _propTypes.func,
+    value: (0, _propTypes.shape)({
+      cbuNumber: _propTypes.string,
+      entityName: _propTypes.string
+    })
+  }),
+  meta: _formTypes.metaPropTypes
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTCBUInput);

package/dist/components/UTCBUInput/versions/V1/README.md

@@ -0,0 +1,46 @@
+# UTCBUInput
+
+## Description
+
+`UTCBUInput` is a configurable input component for handling CBU (Clave Bancaria Uniforme) numbers, often used in banking contexts. It allows users to input a CBU number and automatically detects the corresponding entity (e.g., bank name) based on predefined rules. The component provides validation feedback, supports error messages, and can be customized through various props.
+
+## Props
+
+| Name                | Type                                                                       | Default | Description                                                                                                |
+| ------------------- | -------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
+| entityConfiguration | shape({ cbu_number_key: string, cbu_entity_key: string, entities: array }) |         | Configuration for handling CBU numbers, including keys for CBU number and entity, and entity list.         |
+| error               | string                                                                     |         | Error message to display below the input field.                                                            |
+| onChange            | func                                                                       |         | Callback function triggered when the input value changes. Returns an object containing the CBU and entity. |
+| value               | shape({ cbuNumber: string, entityName: string })                           | `{}`    | Initial value for the CBU input. Expected format is an object with `cbuNumber` and `entityName`.           |
+| ...props            | any                                                                        |         | Inherits all other props from `UTTextInput`.                                                               |
+
+### Entity Configuration
+
+The `entityConfiguration` prop defines the configuration for CBU numbers and includes the following keys:
+
+- **cbu_number_key**: The key for accessing the CBU number within the `value` object.
+- **cbu_entity_key**: The key for accessing the entity name within the `value` object.
+- **entities**: An array of objects, each containing `expression` (a regex pattern to match the CBU) and `entity_name` (the name of the entity to display).
+
+### Handling Errors and Validations
+
+Errors and validations are managed through the `error` and `validations` props:
+
+- The `error` prop will display an error message below the input if a validation fails.
+- The `validations` prop displays the detected entity name in a validation format if the CBU is valid.
+
+If the `error` prop is set, any entity-related validation message will be hidden, ensuring only one validation message appears at a time.
+
+### Example Configuration for entityConfiguration
+
+```javascript
+const fieldConfiguration = {
+  cbu_number_key: 'CBU',
+  cbu_entity_key: 'BANK',
+  entities: [
+    { expression: '^005', entity_name: 'A.B.N. AMRO BANK N.V.' },
+    { expression: '^006', entity_name: 'BANCO SUDAMERIS' }
+    // Additional entities...
+  ]
+};
+```

package/dist/components/UTCBUInput/versions/V1/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _V = require("../../../UTTextInput/versions/V1");
+var _UTTextInput = _interopRequireDefault(require("../../../UTTextInput"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const UTCBUInput = _ref => {
+  let {
+    cbu_entity_key: cbuEntityKey,
+    cbu_number_key: cbuNumberKey,
+    entities,
+    error,
+    onChange,
+    value = {},
+    ...props
+  } = _ref;
+  const findEntity = input => {
+    const matchedEntity = entities.find(_ref2 => {
+      let {
+        expression
+      } = _ref2;
+      return new RegExp(expression).test(input);
+    });
+    return matchedEntity ? matchedEntity.entity_name : '';
+  };
+  const entity = (0, _react.useMemo)(() => findEntity(value[cbuNumberKey] || ''), [value, cbuNumberKey, entities]);
+  const validations = (0, _react.useMemo)(() => entity && !error ? [{
+    items: [{
+      text: entity,
+      withIcon: false
+    }]
+  }] : [], [entity, error]);
+  const onChangeText = newValue => {
+    const entityToSet = findEntity(newValue);
+    onChange({
+      [cbuNumberKey]: newValue,
+      [cbuEntityKey]: entityToSet
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_UTTextInput.default, _extends({}, props, {
+    error: error,
+    onBlur: undefined,
+    onChange: onChangeText,
+    type: "numeric",
+    validations: validations,
+    value: value[cbuNumberKey],
+    version: "V1"
+  }));
+};
+UTCBUInput.propTypes = {
+  cbu_entity_key: _propTypes.string,
+  cbu_number_key: _propTypes.string,
+  entities: _propTypes.array,
+  error: _propTypes.string,
+  onChange: _propTypes.func,
+  value: (0, _propTypes.shape)({
+    cbuNumber: _propTypes.string,
+    entityName: _propTypes.string
+  }),
+  ..._V.propTypes
+};
+var _default = exports.default = UTCBUInput;

package/dist/components/UTPhoneInput/versions/V1/README.md

@@ -15,9 +15,7 @@
 | error                 | string                                                                    |                                                                                                            | Error message displayed below the input fields.                                                                                      |
 | helpText              | string                                                                    |                                                                                                            | Help text displayed below the input fields.                                                                                          |
 | maxLength             | number                                                                    | 10                                                                                                         | Maximum number of characters allowed in the phone number input (excluding the area code).                                            |
-| onBlur                | func                                                                      |                                                                                                            | Function called when either the area code or phone number input loses focus.                                                         |
 | onChange              | func                                                                      |                                                                                                            | Function called when either the area code or phone number value changes. Should handle concatenated values (`areaCode-phoneNumber`). |
-| onFocus               | func                                                                      |                                                                                                            | Function called when either the area code or phone number input gains focus.                                                         |
 | phoneNumberDataTestId | string                                                                    |                                                                                                            | Identifier for the phone number input field, useful for testing.                                                                     |
 | placeholder           | string                                                                    |                                                                                                            | Placeholder text displayed in the phone number input when it's empty.                                                                |
 | readOnly              | bool                                                                      | false                                                                                                      | Makes the area code and phone number input fields read-only.                                                                         |

package/dist/components/UTPhoneInput/versions/V1/index.js

@@ -27,9 +27,7 @@ const UTPhoneInput = _ref => {
     error,
     helpText,
     maxLength = 10,
-    onBlur,
     onChange,
-    onFocus,
     phoneNumberDataTestId,
     placeholder,
     readOnly,
@@ -82,7 +80,6 @@ const UTPhoneInput = _ref => {
       error: validationError
     }));
     setBlurWithError(!!validationError);
-    onBlur === null || onBlur === void 0 || onBlur();
   };
   (0, _react.useEffect)(() => {
     if (blurWithError) {
@@ -123,9 +120,7 @@ const UTPhoneInput = _ref => {
     variant: _inputs.TITLE_VARIANTS[titleVariant]
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.inputsContainer
-  }, withAreaCode && /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.areaCodeContainer
-  }, /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
+  }, withAreaCode && /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     type: "numeric",
     alwaysShowPlaceholder: true,
     dataTestId: areaCodeDataTestId,
@@ -134,9 +129,11 @@ const UTPhoneInput = _ref => {
     maxLength: getAreaCodeMaxLength(),
     onBlur: handleOnBlur,
     onChange: handleChangeAreaCode,
-    onFocus: onFocus,
     placeholder: areaCodePlaceholder,
     readOnly: readOnly,
+    classNames: {
+      container: _stylesModule.default.areaCodeContainer
+    },
     rightAdornments: [{
       name: _constants.COMPONENT_KEYS.ICON,
       props: {
@@ -144,9 +141,7 @@ const UTPhoneInput = _ref => {
       }
     }],
     value: areaCodeState.code
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.phoneContainer
-  }, /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
+  }), /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: true,
     dataTestId: phoneNumberDataTestId,
     disabled: disabled,
@@ -157,10 +152,11 @@ const UTPhoneInput = _ref => {
         text: countryCode
       }
     }] : [],
+    classNames: {
+      container: _stylesModule.default.phoneContainer
+    },
     maxLength: getPhoneNumberMaxLength(),
-    onBlur: onBlur,
     onChange: handleChangePhoneNumber,
-    onFocus: onFocus,
     placeholder: placeholder,
     rightAdornments: [{
       name: _constants.COMPONENT_KEYS.ICON,
@@ -170,7 +166,7 @@ const UTPhoneInput = _ref => {
     }],
     type: "numeric",
     value: phoneNumber
-  }))), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  })), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
     variant: "small"
   }, helpText), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
@@ -185,9 +181,7 @@ UTPhoneInput.propTypes = {
   error: _propTypes.string,
   helpText: _propTypes.string,
   maxLength: _propTypes.number,
-  onBlur: _propTypes.func,
   onChange: _propTypes.func,
-  onFocus: _propTypes.func,
   phoneNumberDataTestId: _propTypes.string,
   placeholder: _propTypes.string,
   readOnly: _propTypes.bool,

package/dist/components/UTPhoneInput/versions/V1/styles.module.scss

@@ -12,9 +12,12 @@
 }
 
 .areaCodeContainer {
-  width: 110px;
+  flex: 0 1 auto;
+  max-width: 110px;
+  min-width: 85px;
 }
 
 .phoneContainer {
-  width: 209px;
+  flex: 1 1 auto;
+  min-width: 120px;
 }

package/dist/components/UTSelect/versions/V1/index.js

@@ -66,6 +66,18 @@ const UTSelect = _ref => {
       setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, null, multiple));
     }
   }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset]);
+  (0, _react.useEffect)(() => {
+    if (!isPopperOpen) {
+      const displayValue = (0, _utils2.getDisplayValue)(value, optionsSortedByCategory, multiple);
+      setSearchTerm(displayValue);
+      setShowClearButton(displayValue);
+    }
+  }, [value, optionsSortedByCategory, multiple, isPopperOpen]);
+  (0, _react.useEffect)(() => {
+    if (isPopperOpen) {
+      setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
+    }
+  }, [optionsSortedByCategory]);
   (0, _react.useEffect)(() => {
     setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
   }, []);

package/dist/components/UTTextInput/versions/V1/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.propTypes = exports.default = void 0;
 var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../../../UTBaseInputField/constants");
 var _utils = require("../../../UTValidation/utils");
@@ -14,9 +15,9 @@ var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTValidation = _interopRequireWildcard(require("../../../UTValidation"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const UTTextInput = _ref => {
   let {
     action,
@@ -53,7 +54,7 @@ const UTTextInput = _ref => {
     value = null
   } = _ref;
   const titleColorTheme = readOnly ? 'gray' : 'dark';
-  const validationData = (0, _react.useMemo)(() => validations || error && (0, _utils.formatErrorToValidation)(error), [error, validations]);
+  const validationData = (0, _react.useMemo)(() => !(0, _isEmpty.default)(validations) ? validations : error && (0, _utils.formatErrorToValidation)(error), [error, validations]);
   const leftAdornments = (0, _react.useMemo)(() => {
     const adornments = [];
     if (LeftIcon) adornments.push({

package/dist/index.js

@@ -479,9 +479,9 @@ var _UTPanel = _interopRequireDefault(require("./components/UTPanel"));
 var _UTPasswordField = _interopRequireDefault(require("./components/UTPasswordField"));
 var _UTPhoneInput = _interopRequireDefault(require("./components/UTPhoneInput"));
 var _UTPieChart = _interopRequireDefault(require("./components/UTPieChart"));
+var _UTPopUp = _interopRequireDefault(require("./components/UTPopUp"));
 var _UTProductItem = _interopRequireDefault(require("./components/UTProductItem"));
 var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"));
-var _UTPopUp = _interopRequireDefault(require("./components/UTPopUp"));
 var _UTRadioGroup = _interopRequireDefault(require("./components/UTRadioGroup"));
 var _UTRating = _interopRequireDefault(require("./components/UTRating"));
 var _UTSearchField = _interopRequireDefault(require("./components/UTSearchField"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.43.0",
+  "version": "3.44.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",