@widergy/energy-ui 3.33.0 → 3.33.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.33.1](https://github.com/widergy/energy-ui/compare/v3.33.0...v3.33.1) (2024-10-21)
+
+
+### Bug Fixes
+
+* component fixes ([#514](https://github.com/widergy/energy-ui/issues/514)) ([a2afbcf](https://github.com/widergy/energy-ui/commit/a2afbcf96dbc1b3c9afb155a7687db9c4d22b4e1))
+
 # [3.33.0](https://github.com/widergy/energy-ui/compare/v3.32.0...v3.33.0) (2024-10-18)
 
 

package/dist/components/UTBaseInputField/index.js

@@ -78,6 +78,7 @@ const UTBaseInputField = _ref => {
     const adornmentProps = {
       ...adornment.props,
       error,
+      focused,
       disabled: disabled && !readOnly,
       classNames: adornment.name === _constants.COMPONENT_KEYS.ACTION ? {
         root: _stylesModule.default.actionButton
@@ -86,7 +87,7 @@ const UTBaseInputField = _ref => {
     return Component ? /*#__PURE__*/_react.default.createElement(Component, _extends({}, adornmentProps, {
       key: adornment.name
     })) : null;
-  }, [error, disabled, readOnly]);
+  }, [error, disabled, readOnly, focused]);
   return /*#__PURE__*/_react.default.createElement(_TextField.default, {
     margin: "none",
     autoComplete: "new-password",

package/dist/components/UTBaseInputField/theme.js

@@ -37,7 +37,6 @@ const retrieveStyle = _ref => {
       bottom: verticalPadding
     },
     root: {
-      minWidth: '320px',
       backgroundColor: theme.Palette.light['01'],
       paddingBottom: hasCharactersCount ? multilineVerticalPadding : verticalPadding,
       paddingLeft: horizontalPadding,

package/dist/components/UTCheckList/versions/V1/README.MD

@@ -10,7 +10,7 @@
 | ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
 | classNames        | objectOf(string) |         | Custom class names to apply to different elements of the checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`).                |
 | error             | string           |         | Error message to display.                                                                                                                         |
-| horizontalSpacing | string           | large   | Spacing between the checkbox and the title horizontally.                                                                                          |
+| horizontalSpacing | string           | medium  | Spacing between the checkbox and the title horizontally.                                                                                          |
 | isSimple          | bool             | false   | Simplifies the selection process to only allow single checkbox selection.                                                                         |
 | onChange          | func.isRequired  |         | Function to call when the selection changes.                                                                                                      |
 | options           | arrayOf(shape)   |         | Array of options to be displayed as checkboxes. Each option is an object with `label`, `value`, `disabled`, `checked`, and optionally `category`. |
@@ -21,7 +21,7 @@
 | title             | string           |         | Title for the checklist.                                                                                                                          |
 | value             | arrayOf(string)  | []      | Array of selected values.                                                                                                                         |
 | variant           | string           |         | Variant style for the checklist.                                                                                                                  |
-| verticalSpacing   | string           | large   | Spacing between the checkbox items vertically.                                                                                                    |
+| verticalSpacing | string | medium | Spacing between the checkbox items vertically. |
 
 ### Option Object
 

package/dist/components/UTCheckList/versions/V1/constants.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.SPACING = void 0;
 const SPACING = exports.SPACING = {
   SMALL: 'small',
-  LARGE: 'large'
+  MEDIUM: 'medium'
 };

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

@@ -22,8 +22,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const UTCheckList = _ref => {
   let {
     classNames = {},
+    dataTestId,
     error,
-    horizontalSpacing = 'large',
+    horizontalSpacing = 'medium',
     isSimple = false,
     onChange = () => {},
     options,
@@ -34,7 +35,7 @@ const UTCheckList = _ref => {
     title,
     value = null,
     variant,
-    verticalSpacing = 'large'
+    verticalSpacing = 'medium'
   } = _ref;
   const reversedBasedOnVariant = (0, _utils2.getPropValueBasedOnVariant)(variant, reversed, true);
   const verticalSpacingBasedOnVariant = (0, _utils2.getPropValueBasedOnVariant)(variant, verticalSpacing, _constants.SPACING.SMALL);
@@ -82,7 +83,8 @@ const UTCheckList = _ref => {
     onChange(areAllSelected ? [] : enabledOptions.map(item => item.value));
   }, [areAllSelected, enabledOptions, onChange]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(smallVerticalSpacingClass, " ").concat(classNames.root)
+    className: "".concat(_stylesModule.default.container, " ").concat(smallVerticalSpacingClass, " ").concat(classNames.root),
+    "data-testid": dataTestId
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerContainer, " ").concat(classNames.header)
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
@@ -128,6 +130,7 @@ const UTCheckList = _ref => {
 };
 UTCheckList.propTypes = {
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
   error: _propTypes.string,
   horizontalSpacing: _propTypes.string,
   isSimple: _propTypes.bool,
@@ -137,7 +140,7 @@ UTCheckList.propTypes = {
     disabled: _propTypes.bool,
     label: _propTypes.string,
     value: _propTypes.string,
-    category: _propTypes.string // Nueva propiedad opcional para la categoría
+    category: _propTypes.string
   })),
   required: _propTypes.bool,
   reversed: _propTypes.bool,

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

@@ -1,4 +1,4 @@
-$spacing-large: 16px;
+$spacing-medium: 16px;
 $spacing-small: 8px;
 
 .buttonVariant {
@@ -8,7 +8,7 @@ $spacing-small: 8px;
 .categoryContainer {
   display: flex;
   flex-direction: column;
-  grid-gap: $spacing-large;
+  grid-gap: $spacing-medium;
 }
 
 .categoryTitle {
@@ -19,14 +19,14 @@ $spacing-small: 8px;
   display: flex;
   flex-direction: column;
   align-self: flex-start;
-  grid-gap: $spacing-large;
+  grid-gap: $spacing-medium;
   width: 100%;
 }
 
 .container {
   display: flex;
   flex-direction: column;
-  grid-gap: $spacing-large;
+  grid-gap: $spacing-medium;
 }
 
 .headerContainer {

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

@@ -14,6 +14,7 @@
 | isSimple      | bool             | false     | **Deprecated**: Please avoid using this property in future implementations.           |
 | onChange      | func             |           | Function to call when the checkbox state changes.                                     |
 | required      | bool             | false     | Indicates if the checkbox is required.                                                |
+| spacing       | string           | 'medium'  | Defines the spacing between the checkbox and the label. Can be 'small' or 'medium'.   |
 | title         | string           |           | Title to display next to the checkbox. Supports markdown when `withMarkdown` is true. |
 | value         | bool             | false     | Indicates if the checkbox is checked.                                                 |
 | variant       | string           | 'default' | Defines the visual variant of the checkbox.                                           |

package/dist/components/UTCheckbox/versions/V1/constants.js

@@ -8,6 +8,6 @@ const CHECKED_ICON = exports.CHECKED_ICON = 'IconCheck';
 const INDETERMINATE_ICON = exports.INDETERMINATE_ICON = 'IconMinus';
 const SPACING = exports.SPACING = {
   SMALL: 'small',
-  LARGE: 'large'
+  MEDIUM: 'medium'
 };
 const BUTTON_VARIANT = exports.BUTTON_VARIANT = 'button';

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

@@ -22,6 +22,7 @@ const UTCheckbox = _ref => {
   let {
     classes: theme,
     classNames,
+    dataTestId,
     disabled,
     indeterminate,
     isSimple = false,
@@ -49,6 +50,7 @@ const UTCheckbox = _ref => {
   const rootComponentProps = variant === _constants.BUTTON_VARIANT ? touchableProps : {};
   const boxContainerProps = variant === _constants.BUTTON_VARIANT ? {} : touchableProps;
   return /*#__PURE__*/_react.default.createElement(RootComponent, _extends({
+    dataTestId: dataTestId,
     className: classes.container
   }, rootComponentProps), /*#__PURE__*/_react.default.createElement(BoxContainerComponent, _extends({
     className: classes.boxContainer
@@ -66,15 +68,16 @@ const UTCheckbox = _ref => {
     name: iconName,
     size: 16
   })))), /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    className: classes.title,
     colorTheme: shouldHighlightLabel ? 'accent' : 'dark',
     required: required,
-    className: classes.title,
     withMarkdown: withMarkdown
   }, title));
 };
 UTCheckbox.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   indeterminate: _propTypes.bool,
   /**

package/dist/components/UTCheckbox/versions/V1/theme.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _constants = require("./constants");
-const NORMAL_SPACING = 16;
+const MEDIUM_SPACING = 16;
 const SMALL_SPACING = 8;
 const baseCheckBoxTheme = theme => ({
   container: {
@@ -37,7 +37,7 @@ const conditionalStyles = _ref => {
     theme,
     disabled
   } = _ref;
-  const spacingValue = spacing === _constants.SPACING.SMALL ? SMALL_SPACING : NORMAL_SPACING;
+  const spacingValue = spacing === _constants.SPACING.SMALL ? SMALL_SPACING : MEDIUM_SPACING;
   return {
     container: {
       ...(reversed && {

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

@@ -37,59 +37,84 @@ const UTPhoneInput = _ref => {
     title,
     titleVariant,
     translations = {
-      areaCodeWithoutZeroError: 'Ingrese el código sin 0',
-      invalidAreaCodeError: 'Código de área inválido'
+      areaCodeMinLenghtError: 'El código de área debe contener al menos 2 caracteres.',
+      areaCodeWithoutZeroError: 'El código de área debe comenzar sin 0.',
+      invalidAreaCodeError: 'No pudimos reconocer el código de área ingresado. Intenta con uno diferente.'
     },
     validations,
     value,
     withAreaCode = true
   } = _ref;
-  const [areaCode, setAreaCode] = (0, _react.useState)('');
-  const [areaCodeError, setAreaCodeError] = (0, _react.useState)('');
-  const [isValidCode, setIsValidCode] = (0, _react.useState)(false);
+  const [areaCodeState, setAreaCodeState] = (0, _react.useState)({
+    code: '',
+    error: ''
+  });
+  const [blurWithError, setBlurWithError] = (0, _react.useState)(false);
   const [phoneNumber, setPhoneNumber] = (0, _react.useState)('');
+  const {
+    areaCodeWithoutZeroError,
+    invalidAreaCodeError,
+    areaCodeMinLenghtError
+  } = translations;
   (0, _react.useEffect)(() => {
     if (value && withAreaCode) {
       const [code, phone] = value.split('-');
-      setAreaCode(code || '');
+      setAreaCodeState(prevState => ({
+        ...prevState,
+        code: code || ''
+      }));
       setPhoneNumber(phone || '');
     } else if (value && !withAreaCode) {
       setPhoneNumber(value);
     }
   }, [value, withAreaCode]);
+  const validateAreaCode = code => {
+    if (!code) return '';
+    if (code.length === 1) return areaCodeMinLenghtError;
+    if (code.startsWith('0')) return areaCodeWithoutZeroError;
+    const isValidCode = _constants2.AREA_CODES.find(element => element.code === code);
+    return !isValidCode ? invalidAreaCodeError : '';
+  };
+  const handleOnBlur = () => {
+    const validationError = validateAreaCode(areaCodeState.code);
+    setAreaCodeState(prevState => ({
+      ...prevState,
+      error: validationError
+    }));
+    setBlurWithError(!!validationError);
+    onBlur === null || onBlur === void 0 || onBlur();
+  };
   (0, _react.useEffect)(() => {
-    const {
-      areaCodeWithoutZeroError,
-      invalidAreaCodeError
-    } = translations;
-    if (areaCode) {
-      if (areaCode.startsWith('0')) {
-        setAreaCodeError(areaCodeWithoutZeroError);
-        setIsValidCode(false);
-      } else {
-        const code = _constants2.AREA_CODES.find(element => element.code === areaCode);
-        setIsValidCode(!!code);
-        setAreaCodeError(!code ? invalidAreaCodeError : '');
-      }
+    if (blurWithError) {
+      const validationError = validateAreaCode(areaCodeState.code);
+      setAreaCodeState(prevState => ({
+        ...prevState,
+        error: validationError
+      }));
     }
-  }, [areaCode, translations]);
-  const handleChangeAreaCode = (0, _react.useCallback)(areaCodeValue => {
-    setAreaCode(areaCodeValue);
-  }, []);
+  }, [areaCodeState.code, blurWithError]);
+  const handleChangeAreaCode = areaCodeValue => {
+    setAreaCodeState(prevState => ({
+      ...prevState,
+      code: areaCodeValue
+    }));
+  };
   const handleChangePhoneNumber = (0, _react.useCallback)(phoneNumberValue => {
     setPhoneNumber(phoneNumberValue);
   }, []);
   (0, _react.useEffect)(() => {
-    if (areaCode !== '' || phoneNumber !== '') {
-      const newValue = withAreaCode ? "".concat(areaCode, "-").concat(phoneNumber) : phoneNumber;
+    if (areaCodeState.code !== '' || phoneNumber !== '') {
+      const newValue = withAreaCode ? "".concat(areaCodeState.code, "-").concat(phoneNumber) : phoneNumber;
       if (newValue !== value) {
         onChange(newValue);
       }
     }
-  }, [areaCode, phoneNumber, withAreaCode, onChange, value]);
-  const validationData = validations || areaCodeError && (0, _utils.formatErrorToValidation)(areaCodeError) || error && (0, _utils.formatErrorToValidation)(error);
+  }, [areaCodeState.code, phoneNumber, withAreaCode, onChange, value]);
+  const validationData = validations || areaCodeState.error && (0, _utils.formatErrorToValidation)(areaCodeState.error) || error && (0, _utils.formatErrorToValidation)(error);
   const hasError = (validationData === null || validationData === void 0 ? void 0 : validationData.length) > 0;
   const titleColorTheme = readOnly ? 'gray' : 'dark';
+  const getAreaCodeMaxLength = () => Math.min(maxLength - phoneNumber.length, 4);
+  const getPhoneNumberMaxLength = () => withAreaCode ? Math.min(maxLength - areaCodeState.code.length, maxLength - 2) : maxLength;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
@@ -106,8 +131,8 @@ const UTPhoneInput = _ref => {
     dataTestId: areaCodeDataTestId,
     disabled: disabled,
     error: hasError,
-    maxLength: 4,
-    onBlur: onBlur,
+    maxLength: getAreaCodeMaxLength(),
+    onBlur: handleOnBlur,
     onChange: handleChangeAreaCode,
     onFocus: onFocus,
     placeholder: areaCodePlaceholder,
@@ -118,32 +143,32 @@ const UTPhoneInput = _ref => {
         changeOnError: true
       }
     }],
-    value: areaCode
+    value: areaCodeState.code
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.phoneContainer
   }, /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
-    type: "numeric",
     alwaysShowPlaceholder: true,
     dataTestId: phoneNumberDataTestId,
-    disabled: withAreaCode && !isValidCode || disabled || readOnly,
-    error: hasError && !areaCodeError,
-    maxLength: withAreaCode ? maxLength - ((areaCode === null || areaCode === void 0 ? void 0 : areaCode.length) || 0) : maxLength,
-    onBlur: onBlur,
-    onChange: handleChangePhoneNumber,
-    onFocus: onFocus,
-    placeholder: placeholder,
+    disabled: disabled,
+    error: hasError && !areaCodeState.error,
     leftAdornments: countryCode && !withAreaCode ? [{
       name: _constants.COMPONENT_KEYS.PREFIX,
       props: {
         text: countryCode
       }
     }] : [],
+    maxLength: getPhoneNumberMaxLength(),
+    onBlur: onBlur,
+    onChange: handleChangePhoneNumber,
+    onFocus: onFocus,
+    placeholder: placeholder,
     rightAdornments: [{
       name: _constants.COMPONENT_KEYS.ICON,
       props: {
         changeOnError: true
       }
     }],
+    type: "numeric",
     value: phoneNumber
   }))), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",

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

@@ -97,7 +97,8 @@ const UTTextInput = _ref => {
     return adornments;
   }, [suffix, RightIcon, error, action, tooltip]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classNames.container)
+    className: "".concat(_stylesModule.default.container, " ").concat(classNames.container),
+    "data-testid": dataTestId
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
     colorTheme: titleColorTheme,
     variant: _inputs.TITLE_VARIANTS[titleVariant],
@@ -105,7 +106,6 @@ const UTTextInput = _ref => {
   }, title), /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: alwaysShowPlaceholder,
     classNames: classNames,
-    dataTestId: dataTestId,
     disabled: disabled,
     error: error,
     id: id,

package/dist/components/UTTouchableWithoutFeedback/index.js

@@ -17,6 +17,7 @@ const UTTouchableWithoutFeedback = _ref => {
     children,
     className,
     containerSetter,
+    dataTestId,
     disabled = false,
     keyName,
     onClick,
@@ -34,12 +35,13 @@ const UTTouchableWithoutFeedback = _ref => {
     }
   };
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
-    role: "button",
-    onClick: handleClick,
+    "aria-disabled": disabled,
     className: "".concat(_stylesModule.default.container, " ").concat(className, " ").concat(disabled && _stylesModule.default.disabled),
+    "data-testid": dataTestId,
     key: keyName,
+    onClick: handleClick,
     ref: setRef,
-    "aria-disabled": disabled,
+    role: "button",
     tabIndex: disabled ? -1 : 0
   }), children, /*#__PURE__*/_react.default.createElement(_UTRipple.default, {
     elem: buttonRef,
@@ -49,6 +51,7 @@ const UTTouchableWithoutFeedback = _ref => {
 UTTouchableWithoutFeedback.propTypes = {
   className: _propTypes.string,
   containerSetter: _propTypes.func,
+  dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   keyName: _propTypes.string,
   onClick: _propTypes.func,

package/dist/components/UTValidation/index.js

@@ -20,12 +20,14 @@ const UTValidation = _ref => {
   let {
     classes,
     className,
+    dataTestId,
     validationData = []
   } = _ref;
   if ((0, _lodash.isEmpty)(validationData)) return null;
   const showIcon = status => _constants.STATUSES_WITH_ICON.includes(status);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(className, " ").concat(_stylesModule.default.container)
+    className: "".concat(className, " ").concat(_stylesModule.default.container),
+    "data-testid": dataTestId
   }, validationData.map((_ref2, index) => {
     let {
       items,
@@ -81,6 +83,7 @@ const validationDataProptypes = exports.validationDataProptypes = (0, _propTypes
 UTValidation.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
+  dataTestId: _propTypes.string,
   validationData: validationDataProptypes
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTValidation);

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

@@ -7,7 +7,6 @@
   padding: 16px;
   position: absolute;
   right: 16px;
-  z-index: 9999;
 }
 
 .content {

package/package.json

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