@widergy/energy-ui 3.138.2 → 3.138.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.138.4](https://github.com/widergy/energy-ui/compare/v3.138.3...v3.138.4) (2026-02-19)
+
+
+### Bug Fixes
+
+* [CX-1935] Update test id support for UTRadioGroup v0 ([#766](https://github.com/widergy/energy-ui/issues/766)) ([6b5caae](https://github.com/widergy/energy-ui/commit/6b5caaeae33abdc1aaa3bd09a7133919b1a67be0))
+
+## [3.138.3](https://github.com/widergy/energy-ui/compare/v3.138.2...v3.138.3) (2026-02-13)
+
+
+### Bug Fixes
+
+* [OUG] data category fixes ([#765](https://github.com/widergy/energy-ui/issues/765)) ([5c7d558](https://github.com/widergy/energy-ui/commit/5c7d55817047e6ccb784809f2e16394f5f96b014))
+
 ## [3.138.2](https://github.com/widergy/energy-ui/compare/v3.138.1...v3.138.2) (2026-02-11)
 
 

package/dist/components/UTDataCategory/index.js

@@ -13,9 +13,11 @@ var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _classesUtils = require("../../utils/classesUtils");
 var _testIds = require("../../constants/testIds");
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _theme = require("./theme");
 var _constants = require("./constants");
+var _MainAction = _interopRequireDefault(require("../UTDataElement/components/MainAction"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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); }
@@ -24,6 +26,7 @@ const {
 } = _testIds.TEST_IDS;
 const UTDataCategory = _ref => {
   let {
+    action,
     area,
     classes: theme,
     classNames,
@@ -32,9 +35,12 @@ const UTDataCategory = _ref => {
     elements = [],
     elementsProps = {},
     expanded = false,
+    Icon,
+    iconProps,
     title,
     titleProps
   } = _ref;
+  const IconComponent = typeof Icon === 'string' ? _UTIcon.default : Icon;
   const showTitle = !!title;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
   const [isCollapsed, setIsCollapsed] = (0, _react.useState)(showTitle && collapsable && !expanded);
@@ -47,7 +53,10 @@ const UTDataCategory = _ref => {
     "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.container) : undefined
   }, title && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.title
-  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+  }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
+    name: Icon,
+    colorTheme: "gray"
+  }, iconProps)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray",
     weight: "medium"
   }, titleProps), title), collapsable && /*#__PURE__*/_react.default.createElement("div", {
@@ -58,7 +67,7 @@ const UTDataCategory = _ref => {
     onClick: toggleCollapsed,
     size: "small",
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataCategory.collapseButton) : undefined
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  })), action && /*#__PURE__*/_react.default.createElement(_MainAction.default, action)), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       gridTemplateRows: isCollapsed ? '0fr' : '1fr',
       marginTop: isCollapsed || !showTitle ? 0 : 16

package/dist/components/UTRadioGroup/UTRadioGroup.mdx

@@ -12,6 +12,6 @@ import * as UTRadioGroupStories from './UTRadioGroup.stories';
 
 Esta documentación corresponde a **UTRadioGroup V1**. La versión anterior (V0) no está documentada y se mantiene únicamente para compatibilidad hacia atrás.
 
-<Canvas of={UTRadioGroupStories.Default} name="UTRadioGroup" version="V1" />
+<Canvas of={UTRadioGroupStories.Playground} name="UTRadioGroup" version="V1" />
 
 <ArgTypes exclude={['classes', 'style', 'title']} />

package/dist/components/UTRadioGroup/UTRadioGroup.stories.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = exports.Categorized = exports.CardVariant = exports.ButtonVariant = void 0;
+exports.default = exports.V1Categorized = exports.V1CardVariant = exports.V1ButtonVariant = exports.V0WithField = exports.V0WithDividers = exports.V0Disabled = exports.V0Basic = exports.Playground = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _previewApi = require("@storybook/preview-api");
 var _utils = require("stories/utils");
 var _constants = require("../UTCheckbox/versions/V1/constants");
 var _constants2 = require("./versions/V1/components/Radio/constants");
-var _V = _interopRequireDefault(require("./versions/V1"));
+var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: 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 defaultOptions = [{
@@ -28,14 +29,28 @@ const defaultOptions = [{
 }];
 var _default = exports.default = {
   args: {
+    version: 'V1',
     options: defaultOptions,
     title: 'Selecciona una opción',
     value: ''
   },
   argTypes: {
+    version: {
+      control: 'inline-radio',
+      options: ['V0', 'V1'],
+      description: 'Versión del componente a utilizar.',
+      table: {
+        defaultValue: {
+          summary: 'V1'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(['V0', 'V1'])
+        }
+      }
+    },
     title: {
       control: 'text',
-      description: 'Título del campo.',
+      description: 'Título del campo (V1 only).',
       table: {
         defaultValue: {
           summary: 'undefined'
@@ -43,6 +58,138 @@ var _default = exports.default = {
         type: {
           summary: 'string'
         }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    field: {
+      control: 'object',
+      description: 'Objeto de configuración del campo (V0 only). Contiene title, required, read_only, etc.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    input: {
+      control: 'object',
+      description: 'Objeto input con value y onChange (V0 only). Similar al patrón de Redux Form.',
+      table: {
+        defaultValue: {
+          summary: '{ value: "", onChange: () => {} }'
+        },
+        type: {
+          summary: 'object'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    labelKey: {
+      control: 'text',
+      description: 'Clave para obtener la etiqueta de cada opción (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'name'
+        },
+        type: {
+          summary: 'string'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    valueKey: {
+      control: 'text',
+      description: 'Clave para obtener el valor de cada opción (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'value'
+        },
+        type: {
+          summary: 'string'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    divider: {
+      control: 'boolean',
+      description: 'Muestra divisores entre las opciones (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    disableRipple: {
+      control: 'boolean',
+      description: 'Deshabilita el efecto ripple de Material-UI (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    withUpperTitle: {
+      control: 'boolean',
+      description: 'Muestra el título en la parte superior usando UTFieldLabel (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    hideLabels: {
+      control: 'boolean',
+      description: 'Oculta las etiquetas (V0 only).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
       }
     },
     options: {
@@ -107,7 +254,7 @@ var _default = exports.default = {
     },
     variant: {
       control: 'select',
-      description: 'Estilo de variante para el campo.',
+      description: 'Estilo de variante para el campo (V1 only).',
       options: Object.values(_constants2.RADIO_VARIANTS),
       table: {
         defaultValue: {
@@ -116,11 +263,15 @@ var _default = exports.default = {
         type: {
           summary: (0, _utils.joinArgTypes)(Object.values(_constants2.RADIO_VARIANTS))
         }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
       }
     },
     horizontalSpacing: {
       control: 'select',
-      description: 'Espaciado entre el botón de radio y el título horizontalmente.',
+      description: 'Espaciado entre el botón de radio y el título horizontalmente (V1 only).',
       options: Object.values(_constants.SPACING),
       table: {
         defaultValue: {
@@ -129,11 +280,15 @@ var _default = exports.default = {
         type: {
           summary: (0, _utils.joinArgTypes)(Object.values(_constants.SPACING))
         }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
       }
     },
     verticalSpacing: {
       control: 'select',
-      description: 'Espaciado entre los elementos de botones de radio verticalmente.',
+      description: 'Espaciado entre los elementos de botones de radio verticalmente (V1 only).',
       options: Object.values(_constants.SPACING),
       table: {
         defaultValue: {
@@ -142,11 +297,15 @@ var _default = exports.default = {
         type: {
           summary: (0, _utils.joinArgTypes)(Object.values(_constants.SPACING))
         }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
       }
     },
     reversed: {
       control: 'boolean',
-      description: 'Si es verdadero, invierte el orden del título y el botón de radio.',
+      description: 'Si es verdadero, invierte el orden del título y el botón de radio (V1 only).',
       table: {
         defaultValue: {
           summary: 'false'
@@ -154,6 +313,10 @@ var _default = exports.default = {
         type: {
           summary: 'bool'
         }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
       }
     },
     dataTestId: {
@@ -205,28 +368,59 @@ var _default = exports.default = {
       }
     }
   },
-  component: _V.default,
+  component: _.default,
   parameters: {
     controls: {
       exclude: ['classes', 'style']
     },
     docs: {
       description: {
-        component: 'UTRadioGroup es un componente personalizable que renderiza un grupo de botones de radio, permitiendo a los usuarios seleccionar una sola opción de una lista proporcionada. Soporta características como visualización de errores, opciones dinámicas y diferentes variantes. Además, permite agrupar opciones por categoría, con las opciones sin agrupar apareciendo primero.'
+        component: 'UTRadioGroup es un componente personalizable que renderiza un grupo de botones de radio, permitiendo a los usuarios seleccionar una sola opción de una lista proporcionada. Está disponible en dos versiones: V0 (basado en Material-UI con patrón de input similar a Redux Form) y V1 (versión moderna con características avanzadas como variantes card/button, categorización de opciones, y espaciado personalizable).'
       }
     }
   },
   title: 'Energy-UI/UTRadioGroup'
+}; // Template for V1 stories
+const V1Template = args => {
+  const [{
+    value
+  }, updateArgs] = (0, _previewApi.useArgs)();
+  const handleChange = newValue => {
+    updateArgs({
+      value: newValue
+    });
+    if (args.onChange) args.onChange(newValue);
+  };
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    value: value,
+    onChange: handleChange
+  }));
 };
-const Default = exports.Default = {
-  render: args => {
-    const [value, setValue] = _react.default.useState(args.value || '');
-    return /*#__PURE__*/_react.default.createElement(_V.default, _extends({}, args, {
-      value: value,
-      onChange: setValue
-    }));
-  },
+
+// Template for V0 stories
+const V0Template = args => {
+  var _args$input;
+  const [{
+    value
+  }, updateArgs] = (0, _previewApi.useArgs)();
+  const handleChange = newValue => {
+    updateArgs({
+      value: newValue
+    });
+    if (args.onChange) args.onChange(newValue);
+  };
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    input: {
+      name: ((_args$input = args.input) === null || _args$input === void 0 ? void 0 : _args$input.name) || 'radio-group-v0',
+      value: value || '',
+      onChange: handleChange
+    }
+  }));
+};
+const Playground = exports.Playground = {
+  render: V1Template,
   args: {
+    version: 'V1',
     options: defaultOptions,
     title: 'Selecciona una opción',
     value: '',
@@ -239,15 +433,10 @@ const Default = exports.Default = {
   },
   name: 'Playground'
 };
-const Categorized = exports.Categorized = {
-  render: args => {
-    const [value, setValue] = _react.default.useState(args.value || '');
-    return /*#__PURE__*/_react.default.createElement(_V.default, _extends({}, args, {
-      value: value,
-      onChange: setValue
-    }));
-  },
+const V1Categorized = exports.V1Categorized = {
+  render: V1Template,
   args: {
+    version: 'V1',
     options: [{
       name: 'Opción 1',
       value: '1'
@@ -268,37 +457,96 @@ const Categorized = exports.Categorized = {
     title: 'Opciones Categorizadas',
     value: ''
   },
-  name: 'Opciones Categorizadas'
+  name: 'V1 - Opciones Categorizadas'
 };
-const CardVariant = exports.CardVariant = {
-  render: args => {
-    const [value, setValue] = _react.default.useState(args.value || '');
-    return /*#__PURE__*/_react.default.createElement(_V.default, _extends({}, args, {
-      value: value,
-      onChange: setValue
-    }));
-  },
+const V1CardVariant = exports.V1CardVariant = {
+  render: V1Template,
   args: {
+    version: 'V1',
     options: defaultOptions,
     title: 'Opciones de Estilo Card',
     value: '',
     variant: 'card'
   },
-  name: 'Variante Card'
+  name: 'V1 - Variante Card'
 };
-const ButtonVariant = exports.ButtonVariant = {
-  render: args => {
-    const [value, setValue] = _react.default.useState(args.value || '');
-    return /*#__PURE__*/_react.default.createElement(_V.default, _extends({}, args, {
-      value: value,
-      onChange: setValue
-    }));
-  },
+const V1ButtonVariant = exports.V1ButtonVariant = {
+  render: V1Template,
   args: {
+    version: 'V1',
     options: defaultOptions,
     title: 'Opciones de Estilo Button',
     value: '',
     variant: 'button'
   },
-  name: 'Variante Button'
+  name: 'V1 - Variante Button'
+};
+
+// V0 Stories
+const V0Basic = exports.V0Basic = {
+  render: V0Template,
+  args: {
+    version: 'V0',
+    options: defaultOptions,
+    value: '',
+    labelKey: 'name',
+    valueKey: 'value',
+    disabled: false,
+    divider: false,
+    disableRipple: false,
+    input: {
+      name: 'radio-group-v0'
+    }
+  },
+  name: 'V0 - Básico'
+};
+const V0WithField = exports.V0WithField = {
+  render: V0Template,
+  args: {
+    version: 'V0',
+    options: defaultOptions,
+    value: '',
+    labelKey: 'name',
+    valueKey: 'value',
+    withUpperTitle: true,
+    field: {
+      title: 'Selecciona una opción',
+      required: true,
+      read_only: false
+    },
+    input: {
+      name: 'radio-group-v0-field'
+    }
+  },
+  name: 'V0 - Con Campo y Título Superior'
+};
+const V0WithDividers = exports.V0WithDividers = {
+  render: V0Template,
+  args: {
+    version: 'V0',
+    options: defaultOptions,
+    value: '',
+    labelKey: 'name',
+    valueKey: 'value',
+    divider: true,
+    input: {
+      name: 'radio-group-v0-dividers'
+    }
+  },
+  name: 'V0 - Con Divisores'
+};
+const V0Disabled = exports.V0Disabled = {
+  render: V0Template,
+  args: {
+    version: 'V0',
+    options: defaultOptions,
+    value: '1',
+    labelKey: 'name',
+    valueKey: 'value',
+    disabled: true,
+    input: {
+      name: 'radio-group-v0-disabled'
+    }
+  },
+  name: 'V0 - Deshabilitado'
 };

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

@@ -52,6 +52,7 @@ class UTRadioGroup extends _react.PureComponent {
           root: "\n            ".concat(classes.root, "\n            ").concat(isChecked && classes.checkedRoot, "\n            ").concat(option.disabled && classes.disabledRoot, "\n          "),
           label: classes.label
         },
+        "data-testid": dataTestId,
         disabled: disabled || option.disabled,
         label: CustomRadioLabel ? /*#__PURE__*/_react.default.createElement(CustomRadioLabel, {
           option: option,
@@ -64,7 +65,7 @@ class UTRadioGroup extends _react.PureComponent {
             checked: "".concat(classes.checked, " ").concat(classes.checkedIconRoot)
           },
           inputProps: {
-            'data-testid': dataTestId ? "".concat(dataTestId, ".").concat(index) : null
+            'data-testid': dataTestId ? "".concat(dataTestId, ".input") : null
           }
         }),
         className: "".concat(classes.formControlLabel, " \n              ").concat(this.props.divider && index === 0 && classes.topDivider, " \n              ").concat(this.props.divider && classes.divider, "\n              ").concat(className)
@@ -87,7 +88,7 @@ class UTRadioGroup extends _react.PureComponent {
     } = this.props;
     const shouldShowUpperTitle = ((field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) || hideLabels) && withUpperTitle && (field === null || field === void 0 ? void 0 : field.title);
     const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, _extends({
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, _extends({
       actions: actions,
       className: classes.title,
       readOnly: field.read_only,

package/package.json

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