@widergy/energy-ui 3.170.0 → 3.171.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [3.171.1](https://github.com/widergy/energy-ui/compare/v3.171.0...v3.171.1) (2026-06-23)
+
+
+### Bug Fixes
+
+* [OUG] radio group error ([#827](https://github.com/widergy/energy-ui/issues/827)) ([8b3224a](https://github.com/widergy/energy-ui/commit/8b3224a97d184dbc3ca37bb182c8b84e3cbb157a))
+
+# [3.171.0](https://github.com/widergy/energy-ui/compare/v3.170.0...v3.171.0) (2026-06-22)
+
+### Novedades y Mejoras
+
+* Ahora es posible deshabilitar elementos individuales del panel lateral, impidiendo su acceso cuando no están disponibles o no corresponden al contexto del usuario. [#826](https://github.com/widergy/Energy-UI/pull/826) [AXCH-1778](https://widergy.atlassian.net/browse/AXCH-1778)
+
 # [3.170.0](https://github.com/widergy/energy-ui/compare/v3.169.0...v3.170.0) (2026-06-22)
 
 

package/dist/components/UTPanel/UTPanel.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.V1Workflow = exports.V1WithStatus = exports.V1WithPretitle = exports.V1WithPagination = exports.V1WithHeaderItems = exports.V1WithAdditionalContentBadge = exports.V1WithAdditionalContent = exports.V1WithActions = exports.V1LargeSize = exports.V1Inline = exports.V1Default = exports.V1Collapsible = exports.V0WithCustomTitle = exports.V0LeftSide = exports.V0Default = exports.Playground = void 0;
+exports.default = exports.V1Workflow = exports.V1WithStatus = exports.V1WithPretitle = exports.V1WithPagination = exports.V1WithHeaderItems = exports.V1WithAdditionalContentDisabled = exports.V1WithAdditionalContentBadge = exports.V1WithAdditionalContent = exports.V1WithActions = exports.V1LargeSize = exports.V1Inline = exports.V1Default = exports.V1Collapsible = exports.V0WithCustomTitle = exports.V0LeftSide = exports.V0Default = exports.Playground = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("stories/utils");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
@@ -945,6 +945,54 @@ const V1WithAdditionalContentBadge = exports.V1WithAdditionalContentBadge = {
     }
   }
 };
+const V1WithAdditionalContentDisabled = exports.V1WithAdditionalContentDisabled = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Item Deshabilitado',
+    subtitle: 'Sidebar con un ítem inaccesible',
+    panelSide: 'right',
+    size: 'M',
+    additionalContent: [{
+      id: 'settings',
+      Icon: 'IconSettings',
+      BodyComponent: SettingsBodyComponent,
+      tooltipProps: {
+        content: 'Configuración'
+      }
+    }, {
+      id: 'notifications',
+      Icon: 'IconBell',
+      disabled: true,
+      BodyComponent: NotificationsBodyComponent,
+      tooltipProps: {
+        content: 'Notificaciones (no disponible)'
+      }
+    }, {
+      id: 'help',
+      Icon: 'IconHelpCircle',
+      BodyComponent: HelpBodyComponent,
+      tooltipProps: {
+        content: 'Ayuda'
+      }
+    }],
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "body1"
+    }, "El \xEDcono de Notificaciones tiene ", /*#__PURE__*/_react.default.createElement("code", null, "disabled: true"), " y no puede seleccionarse."))
+  },
+  name: 'V1 - Sidebar con Item Deshabilitado',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Usa `disabled: true` en un item de `additionalContent` para deshabilitar el botón de ese item en la sidebar. Los demás items funcionan normalmente.'
+      }
+    }
+  }
+};
 const Playground = exports.Playground = {
   args: {
     version: 'V1',

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

@@ -44,3 +44,17 @@ Component used for displaying a side panel.
 | showBackButton              | boolean | false    | Shows a go back arrow button                                                                                                                                                                                   |
 | showTag                     | bool    | false    | Shows a tag indicator in the header area. When true, the tagProps object is passed to the UTStatus component to render a tag.                                                                                  |
 | tagProps                    | object  | {}       | Object containing props for the UTStatus component used as a tag in the header. Supports all [UTStatus props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTStatus)                    |
+| additionalContent           | array   |          | Array of sidebar items rendered in a collapsible side panel. See structure below.                                                                                                                             |
+
+### `additionalContent` item structure
+
+Each object in the array can contain:
+
+| Field           | Type          | Required | Description                                                                                      |
+| :-------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------ |
+| `id`            | `string`      | ✅        | Unique identifier for the item. Used as the active key and as part of the sidebar button testId. |
+| `Icon`          | `string`      | ✅        | Tabler icon name for the sidebar button (e.g. `'IconSettings'`).                                 |
+| `BodyComponent` | `elementType` | ✅        | React component rendered in the expanded content area when this item is active.                  |
+| `tooltipProps`  | `object`      | ✅        | Props passed to the `UTTooltip` wrapping the sidebar button. Must include `content`.             |
+| `count`         | `number`      | —        | When greater than 0, shows a numeric badge over the sidebar icon.                                |
+| `disabled`      | `bool`        | —        | When `true`, the sidebar button is disabled and the item cannot be selected.                     |

package/dist/components/UTPanel/versions/V1/components/AdditionalContentModule/index.js

@@ -78,6 +78,7 @@ const AdditionalContentModule = _ref => {
       colorTheme: activeId === item.id ? 'primary' : 'gray',
       className: _stylesModule.default.sidebarButton,
       dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id),
+      disabled: item.disabled,
       Icon: item.Icon,
       onClick: () => onSelectItem(activeId === item.id ? null : item.id),
       size: "medium",
@@ -95,6 +96,7 @@ const AdditionalContentModule = _ref => {
 };
 AdditionalContentModule.propTypes = {
   additionalContent: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    disabled: _propTypes.bool,
     id: _propTypes.string.isRequired,
     Icon: _propTypes.string.isRequired,
     count: _propTypes.number,

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

@@ -10,6 +10,8 @@ var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup")
 var _buttonTypes = require("../../../../types/buttonTypes");
 var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _utils = require("../../../UTValidation/utils");
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
 var _Radio = _interopRequireDefault(require("./components/Radio"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _constants = require("./constants");
@@ -21,9 +23,13 @@ const UTRadioGroup = _ref => {
     actions,
     classNames = {},
     dataTestId,
+    descriptionProps,
     disabled,
+    error,
+    errorDataTestId,
     horizontalSpacing = 'medium',
     itemDataTestId,
+    nameProps,
     onChange = () => {},
     options,
     required,
@@ -31,8 +37,6 @@ const UTRadioGroup = _ref => {
     title,
     value = null,
     variant,
-    nameProps,
-    descriptionProps,
     verticalSpacing = 'medium'
   } = _ref;
   const categorizedOptions = (0, _react.useMemo)(() => {
@@ -55,6 +59,7 @@ const UTRadioGroup = _ref => {
       return categoryA === _constants.NO_CATEGORY ? -1 : categoryB === _constants.NO_CATEGORY ? 1 : 0;
     });
   }, [options]);
+  const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, "  ").concat(classNames.root),
     "data-testid": dataTestId
@@ -88,7 +93,10 @@ const UTRadioGroup = _ref => {
       spacing: horizontalSpacing,
       variant: variant
     }, (item === null || item === void 0 ? void 0 : item.configuration) || {}, item))));
-  })));
+  })), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    dataTestId: errorDataTestId,
+    validationData: validationData
+  }));
 };
 UTRadioGroup.propTypes = {
   actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
@@ -97,6 +105,7 @@ UTRadioGroup.propTypes = {
   descriptionProps: _propTypes.object,
   disabled: _propTypes.bool,
   error: _propTypes.string,
+  errorDataTestId: _propTypes.string,
   horizontalSpacing: _propTypes.string,
   itemDataTestId: _propTypes.string,
   nameProps: _propTypes.object,

package/dist/esm/components/UTPanel/UTPanel.stories.js

@@ -939,6 +939,54 @@ export const V1WithAdditionalContentBadge = {
     }
   }
 };
+export const V1WithAdditionalContentDisabled = {
+  args: {
+    version: 'V1',
+    open: false,
+    title: 'Panel con Item Deshabilitado',
+    subtitle: 'Sidebar con un ítem inaccesible',
+    panelSide: 'right',
+    size: 'M',
+    additionalContent: [{
+      id: 'settings',
+      Icon: 'IconSettings',
+      BodyComponent: SettingsBodyComponent,
+      tooltipProps: {
+        content: 'Configuración'
+      }
+    }, {
+      id: 'notifications',
+      Icon: 'IconBell',
+      disabled: true,
+      BodyComponent: NotificationsBodyComponent,
+      tooltipProps: {
+        content: 'Notificaciones (no disponible)'
+      }
+    }, {
+      id: 'help',
+      Icon: 'IconHelpCircle',
+      BodyComponent: HelpBodyComponent,
+      tooltipProps: {
+        content: 'Ayuda'
+      }
+    }],
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "body1"
+    }, "El \xEDcono de Notificaciones tiene ", /*#__PURE__*/React.createElement("code", null, "disabled: true"), " y no puede seleccionarse."))
+  },
+  name: 'V1 - Sidebar con Item Deshabilitado',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Usa `disabled: true` en un item de `additionalContent` para deshabilitar el botón de ese item en la sidebar. Los demás items funcionan normalmente.'
+      }
+    }
+  }
+};
 export const Playground = {
   args: {
     version: 'V1',

package/dist/esm/components/UTPanel/versions/V1/README.md

@@ -44,3 +44,17 @@ Component used for displaying a side panel.
 | showBackButton              | boolean | false    | Shows a go back arrow button                                                                                                                                                                                   |
 | showTag                     | bool    | false    | Shows a tag indicator in the header area. When true, the tagProps object is passed to the UTStatus component to render a tag.                                                                                  |
 | tagProps                    | object  | {}       | Object containing props for the UTStatus component used as a tag in the header. Supports all [UTStatus props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTStatus)                    |
+| additionalContent           | array   |          | Array of sidebar items rendered in a collapsible side panel. See structure below.                                                                                                                             |
+
+### `additionalContent` item structure
+
+Each object in the array can contain:
+
+| Field           | Type          | Required | Description                                                                                      |
+| :-------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------ |
+| `id`            | `string`      | ✅        | Unique identifier for the item. Used as the active key and as part of the sidebar button testId. |
+| `Icon`          | `string`      | ✅        | Tabler icon name for the sidebar button (e.g. `'IconSettings'`).                                 |
+| `BodyComponent` | `elementType` | ✅        | React component rendered in the expanded content area when this item is active.                  |
+| `tooltipProps`  | `object`      | ✅        | Props passed to the `UTTooltip` wrapping the sidebar button. Must include `content`.             |
+| `count`         | `number`      | —        | When greater than 0, shows a numeric badge over the sidebar icon.                                |
+| `disabled`      | `bool`        | —        | When `true`, the sidebar button is disabled and the item cannot be selected.                     |

package/dist/esm/components/UTPanel/versions/V1/components/AdditionalContentModule/index.js

@@ -1,6 +1,6 @@
 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); }
 import React, { useMemo } from 'react';
-import { arrayOf, elementType, func, number, object, shape, string } from 'prop-types';
+import { arrayOf, bool, elementType, func, number, object, shape, string } from 'prop-types';
 import 'react-perfect-scrollbar/dist/css/styles.css';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import UTButton from '../../../../../UTButton';
@@ -70,6 +70,7 @@ const AdditionalContentModule = _ref => {
       colorTheme: activeId === item.id ? 'primary' : 'gray',
       className: styles.sidebarButton,
       dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id),
+      disabled: item.disabled,
       Icon: item.Icon,
       onClick: () => onSelectItem(activeId === item.id ? null : item.id),
       size: "medium",
@@ -87,6 +88,7 @@ const AdditionalContentModule = _ref => {
 };
 AdditionalContentModule.propTypes = {
   additionalContent: arrayOf(shape({
+    disabled: bool,
     id: string.isRequired,
     Icon: string.isRequired,
     count: number,

package/dist/esm/components/UTRadioGroup/versions/V1/index.js

@@ -5,6 +5,8 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import { buttonTypes } from '../../../../types/buttonTypes';
 import UTFieldLabel from '../../../UTFieldLabel';
 import UTLabel from '../../../UTLabel';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTValidation from '../../../UTValidation';
 import Radio from './components/Radio';
 import styles from './styles.module.scss';
 import { NO_CATEGORY } from './constants';
@@ -13,9 +15,13 @@ const UTRadioGroup = _ref => {
     actions,
     classNames = {},
     dataTestId,
+    descriptionProps,
     disabled,
+    error,
+    errorDataTestId,
     horizontalSpacing = 'medium',
     itemDataTestId,
+    nameProps,
     onChange = () => {},
     options,
     required,
@@ -23,8 +29,6 @@ const UTRadioGroup = _ref => {
     title,
     value = null,
     variant,
-    nameProps,
-    descriptionProps,
     verticalSpacing = 'medium'
   } = _ref;
   const categorizedOptions = useMemo(() => {
@@ -47,6 +51,7 @@ const UTRadioGroup = _ref => {
       return categoryA === NO_CATEGORY ? -1 : categoryB === NO_CATEGORY ? 1 : 0;
     });
   }, [options]);
+  const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles.container, "  ").concat(classNames.root),
     "data-testid": dataTestId
@@ -80,7 +85,10 @@ const UTRadioGroup = _ref => {
       spacing: horizontalSpacing,
       variant: variant
     }, (item === null || item === void 0 ? void 0 : item.configuration) || {}, item))));
-  })));
+  })), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: errorDataTestId,
+    validationData: validationData
+  }));
 };
 UTRadioGroup.propTypes = {
   actions: arrayOf(buttonTypes),
@@ -89,6 +97,7 @@ UTRadioGroup.propTypes = {
   descriptionProps: object,
   disabled: bool,
   error: string,
+  errorDataTestId: string,
   horizontalSpacing: string,
   itemDataTestId: string,
   nameProps: object,

package/package.json

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