@widergy/energy-ui 3.170.0 → 3.171.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.171.0](https://github.com/widergy/energy-ui/compare/v3.170.0...v3.171.0) (2026-06-22)
+
+
+### Features
+
+* disabled prop in sidebar utpanel ([#826](https://github.com/widergy/energy-ui/issues/826)) ([f7ce127](https://github.com/widergy/energy-ui/commit/f7ce127d78e5c49d0a8b9a80eae8d2dae02c381d))
+
 # [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/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/package.json

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