@widergy/energy-ui 3.138.3 → 3.138.5

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.138.5](https://github.com/widergy/energy-ui/compare/v3.138.4...v3.138.5) (2026-02-24)
+
+
+### Bug Fixes
+
+* [PDI-677] updated shortcutpanel ([#764](https://github.com/widergy/energy-ui/issues/764)) ([9b69c0f](https://github.com/widergy/energy-ui/commit/9b69c0f349a4a59eaefbae70e38622c9458402a1))
+
+## [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)
 
 

package/dist/components/UTDataCategory/index.js

@@ -14,10 +14,10 @@ var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _classesUtils = require("../../utils/classesUtils");
 var _testIds = require("../../constants/testIds");
 var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _MainAction = _interopRequireDefault(require("../UTDataElement/components/MainAction"));
 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); }
@@ -92,6 +92,7 @@ const UTDataCategory = _ref => {
   }))));
 };
 UTDataCategory.propTypes = {
+  action: _propTypes.object,
   area: _propTypes.bool,
   areaProps: _propTypes.object,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
@@ -101,6 +102,8 @@ UTDataCategory.propTypes = {
   elements: _propTypes.array,
   elementsProps: _propTypes.object,
   expanded: _propTypes.bool,
+  Icon: _propTypes.string,
+  iconProps: _propTypes.object,
   style: _propTypes.object,
   title: _propTypes.string,
   titleProps: _propTypes.object

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/dist/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryHeader/index.js

@@ -20,7 +20,8 @@ const ExpandedPanelContentCategoryHeaderContainer = _ref => {
     handleToggleCollapsedCategory
   } = _ref;
   const {
-    classes
+    classes,
+    disableCollapsibleCategories
   } = (0, _react.useContext)(_context.default);
   const {
     name
@@ -33,16 +34,21 @@ const ExpandedPanelContentCategoryHeaderContainer = _ref => {
   const handleHeaderHover = action => {
     setHoverMode(action === _constants.MOUSE_ENTER);
   };
+  const headerEvents = disableCollapsibleCategories ? {} : {
+    onMouseEnter: () => handleHeaderHover(_constants.MOUSE_ENTER),
+    onMouseLeave: () => handleHeaderHover(_constants.MOUSE_LEAVE)
+  };
   return /*#__PURE__*/_react.default.createElement(_layout.default, {
-    title: name,
-    icon: icon,
-    hoverMode: hoverMode,
-    handleToggleCollapsedCategory: handleToggleCollapsedCategory,
-    handleHeaderHover: handleHeaderHover,
-    dataTestId: dataTestId,
-    collapsedCategory: collapsedCategory,
+    avatarPalette: avatarPalette,
     classes: classes,
-    avatarPalette: avatarPalette
+    collapsedCategory: collapsedCategory,
+    dataTestId: dataTestId,
+    disableCollapsibleCategories: disableCollapsibleCategories,
+    handleToggleCollapsedCategory: handleToggleCollapsedCategory,
+    headerEvents: headerEvents,
+    hoverMode: hoverMode,
+    icon: icon,
+    title: name
   });
 };
 ExpandedPanelContentCategoryHeaderContainer.propTypes = {

package/dist/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryHeader/layout.js

@@ -11,8 +11,8 @@ var _UTIcon = _interopRequireDefault(require("../../../../../../../../../UTIcon"
 var _UTLabel = _interopRequireDefault(require("../../../../../../../../../UTLabel"));
 var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../../../../../../../UTTouchableWithoutFeedback"));
 var _testIds = require("../../../../../../../../../../constants/testIds");
-var _constants = require("./constants");
 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 {
   AVATAR,
   COLLAPSE_BUTTON,
@@ -24,17 +24,16 @@ const ExpandedPanelContentCategoryHeader = _ref => {
     classes,
     collapsedCategory,
     dataTestId,
-    handleHeaderHover,
+    disableCollapsibleCategories,
     handleToggleCollapsedCategory,
+    headerEvents,
     hoverMode,
     icon,
     title
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("header", {
-    className: classes.expandedPanelContentCategoryHeader,
-    onMouseEnter: () => handleHeaderHover(_constants.MOUSE_ENTER),
-    onMouseLeave: () => handleHeaderHover(_constants.MOUSE_LEAVE)
-  }, hoverMode ? /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+  return /*#__PURE__*/_react.default.createElement("header", _extends({
+    className: "".concat(classes.expandedPanelContentCategoryHeader, " ").concat(disableCollapsibleCategories ? classes.expandedPanelContentCategoryHeaderNoCollapsible : '')
+  }, headerEvents), hoverMode ? /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     dataTestId: "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON),
     onClick: handleToggleCollapsedCategory
   }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
@@ -42,9 +41,9 @@ const ExpandedPanelContentCategoryHeader = _ref => {
     colorTheme: "gray",
     name: "IconChevronDown",
     size: "24"
-  })) : /*#__PURE__*/_react.default.createElement(_UTAvatar.default, {
+  })) : icon ? /*#__PURE__*/_react.default.createElement(_UTAvatar.default, {
     areaShape: "rounded",
-    className: classes.ExpandedPanelContentCategoryHeaderAvatar,
+    className: classes.expandedPanelContentCategoryHeaderAvatar,
     dataTestId: "".concat(dataTestId, ".").concat(AVATAR),
     iconProps: {
       name: icon
@@ -52,8 +51,8 @@ const ExpandedPanelContentCategoryHeader = _ref => {
     palette: avatarPalette,
     size: "small",
     type: "icon"
-  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: classes.ExpandedPanelContentCategoryHeaderLabel,
+  }) : null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.expandedPanelContentCategoryHeaderLabel,
     colorTheme: hoverMode ? 'dark' : 'gray',
     dataTestId: "".concat(dataTestId, ".").concat(LABEL),
     variant: "small",
@@ -69,8 +68,9 @@ ExpandedPanelContentCategoryHeader.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   collapsedCategory: _propTypes.bool,
   dataTestId: _propTypes.string,
-  handleHeaderHover: _propTypes.func,
+  disableCollapsibleCategories: _propTypes.bool,
   handleToggleCollapsedCategory: _propTypes.func,
+  headerEvents: (0, _propTypes.objectOf)(_propTypes.func),
   hoverMode: _propTypes.bool,
   icon: _propTypes.string,
   title: _propTypes.string

package/dist/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryItem/index.js

@@ -22,15 +22,15 @@ const ExpandedPanelContentCategoryItemContainer = _ref => {
     classes,
     closePopper,
     handleSelectFilter,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping,
     openPopper,
     position,
     selectedFilter,
     tooltipsContentMap: {
       editButton,
       deleteButton
-    },
-    handleDeleteFilterGrouping,
-    handleEditFilterGrouping
+    }
   } = (0, _react.useContext)(_context.default);
   const {
     description,
@@ -62,8 +62,8 @@ const ExpandedPanelContentCategoryItemContainer = _ref => {
     deleteButtonTippyRef: deleteButtonTippyRef,
     editButton: editButton,
     editButtonTippyRef: editButtonTippyRef,
-    handleDeleteFilterGrouping: () => handleDeleteFilterGrouping(filter),
-    handleEditFilterGrouping: () => handleEditFilterGrouping(filter),
+    handleDeleteFilterGrouping: onDeleteFilterGrouping ? () => onDeleteFilterGrouping(filter) : undefined,
+    handleEditFilterGrouping: onEditFilterGrouping ? () => onEditFilterGrouping(filter) : undefined,
     handleSelectFilter: handleSelectFilters,
     id: id,
     name: name,

package/dist/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryItem/layout.js

@@ -47,7 +47,7 @@ const ExpandedPanelContentCategoryItem = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
     className: "".concat(classes.expandedPanelContentCategoryItemTitleContainer, " ").concat(selected ? classes.expandedPanelContentCategoryItemTitleContainerSelected : ''),
     dataTestId: "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.NAME_CONTAINER),
-    onClick: handleSelectFilter
+    onClick: selected ? undefined : handleSelectFilter
   }, pinned && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
     colorTheme: selected ? 'accent' : undefined,
     dataTestId: "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.PINNED),
@@ -63,10 +63,10 @@ const ExpandedPanelContentCategoryItem = _ref => {
     className: classes.expandedPanelContentCategoryItemTitleLabel,
     colorTheme: selected ? 'accent' : undefined,
     shade: selected ? '05' : undefined
-  }, name))), !pinned && /*#__PURE__*/_react.default.createElement("section", {
+  }, name))), !pinned && (handleEditFilterGrouping || handleDeleteFilterGrouping) && /*#__PURE__*/_react.default.createElement("section", {
     className: classes.expandedPanelContentCategoryItemActionsContainer,
     onAnimationEnd: animationEnd
-  }, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+  }, handleEditFilterGrouping && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
     arrow: false,
     content: editButton,
     dataTestId: "".concat(dataTestId, ".").concat(EDIT_BUTTON_TOOLTIP),
@@ -85,7 +85,7 @@ const ExpandedPanelContentCategoryItem = _ref => {
     onClick: handleEditFilterGrouping,
     variant: "text",
     size: "small"
-  }))), /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+  }))), handleDeleteFilterGrouping && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
     arrow: false,
     content: deleteButton,
     dataTestId: "".concat(dataTestId, ".").concat(DELETE_BUTTON_TOOLTIP),

package/dist/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/layout.js

@@ -35,7 +35,7 @@ const ExpandedPanelContentCategory = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("section", {
     className: classes.expandedPanelContentCategory
-  }, /*#__PURE__*/_react.default.createElement(_ExpandedPanelContentCategoryHeader.default, {
+  }, category.name && /*#__PURE__*/_react.default.createElement(_ExpandedPanelContentCategoryHeader.default, {
     category: category,
     categoryConfig: categoryConfig,
     collapsedCategory: collapsedCategory,

package/dist/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/index.js

@@ -29,6 +29,7 @@ const ExpandedPanelContentHeaderContainer = _ref => {
     handleAddFilterGroup,
     handleFilterGroupSearch,
     handleTogglePanel,
+    hideAddFilterButton,
     panelTitle,
     position,
     searchValue,
@@ -61,6 +62,7 @@ const ExpandedPanelContentHeaderContainer = _ref => {
     handleFilterGroupSearch: handleFilterGroupSearch,
     handleSearchToggle: handleSearchToggle,
     handleTogglePanel: handleTogglePanel,
+    hideAddFilterButton: hideAddFilterButton,
     panelTitle: panelTitle,
     position: position,
     searchButtonTippyRef: searchButtonTippyRef,

package/dist/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentHeader/layout.js

@@ -4,7 +4,7 @@ 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 _UTButton = _interopRequireDefault(require("../../../../../../../UTButton"));
 var _UTLabel = _interopRequireDefault(require("../../../../../../../UTLabel"));
@@ -14,7 +14,6 @@ var _types = require("../../../../../../types");
 var _testIds = require("../../../../../../../../constants/testIds");
 var _constants = require("./constants");
 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); }
 const {
   filterGrouping
 } = _testIds.TEST_IDS;
@@ -39,6 +38,7 @@ const ExpandedPanelContentHeader = _ref => {
     handleFilterGroupSearch,
     handleSearchToggle,
     handleTogglePanel,
+    hideAddFilterButton,
     panelTitle,
     position,
     searchButtonTippyRef,
@@ -54,7 +54,7 @@ const ExpandedPanelContentHeader = _ref => {
     onChange: handleFilterGroupSearch,
     value: searchValue,
     variant: "white"
-  }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: classes.expandedPanelContentTitle,
     colorTheme: "dark",
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(TITLE) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.title,
@@ -98,7 +98,7 @@ const ExpandedPanelContentHeader = _ref => {
     Icon: _constants.ICON_BY_POSITION[position],
     onClick: handleTogglePanel,
     variant: "text"
-  })))), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+  })))), !hideAddFilterButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     colorTheme: "dark",
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(ADD_FILTER_BUTTON) : filterGrouping.groupingPanel.expandedPanelContent.expandedPanelContentHeader.addFilterButton,
     Icon: "IconPlus",
@@ -117,6 +117,7 @@ ExpandedPanelContentHeader.propTypes = {
   handleFilterGroupSearch: _propTypes.func,
   handleSearchToggle: _propTypes.func,
   handleTogglePanel: _propTypes.func,
+  hideAddFilterButton: _propTypes.bool,
   panelTitle: _propTypes.string,
   position: _propTypes.string,
   searchButtonTippyRef: _types.refType,

package/dist/components/UTShortcutPanel/components/GroupingPanel/index.js

@@ -28,7 +28,8 @@ const GroupingPanelContainer = _ref => {
     position
   } = _ref;
   const {
-    classes
+    classes,
+    scrollProps
   } = (0, _react.useContext)(_context.default);
   const appendedDataTestId = dataTestId ? "".concat(dataTestId, ".").concat(GROUPING_PANEL) : undefined;
   const drawerRef = (0, _react.useRef)(null);
@@ -42,7 +43,8 @@ const GroupingPanelContainer = _ref => {
     onClose: onClose,
     open: open,
     panelTitle: panelTitle,
-    position: position
+    position: position,
+    scrollProps: scrollProps
   });
 };
 GroupingPanelContainer.propTypes = {

package/dist/components/UTShortcutPanel/components/GroupingPanel/layout.js

@@ -13,6 +13,7 @@ var _CollapsedPanelContent = _interopRequireDefault(require("./components/Collap
 var _ExpandedPanelContent = _interopRequireDefault(require("./components/ExpandedPanelContent"));
 require("react-perfect-scrollbar/dist/css/styles.css");
 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 GroupingPanel = _ref => {
   let {
     appendedDataTestId,
@@ -21,7 +22,8 @@ const GroupingPanel = _ref => {
     drawerRef,
     onClose,
     open,
-    position
+    position,
+    scrollProps
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_core.Drawer, {
     anchor: position,
@@ -41,12 +43,12 @@ const GroupingPanel = _ref => {
     ref: drawerRef,
     swipeAreaWidth: 0,
     variant: "permanent"
-  }, open ? /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+  }, open ? /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, _extends({}, scrollProps, {
     className: classes.perfectScrollbar,
     options: {
       suppressScrollX: true
     }
-  }, /*#__PURE__*/_react.default.createElement(_ExpandedPanelContent.default, {
+  }), /*#__PURE__*/_react.default.createElement(_ExpandedPanelContent.default, {
     dataTestId: appendedDataTestId
   })) : /*#__PURE__*/_react.default.createElement(_CollapsedPanelContent.default, {
     dataTestId: appendedDataTestId
@@ -59,6 +61,7 @@ GroupingPanel.propTypes = {
   drawerRef: _propTypes.refType,
   onClose: _propTypes.func,
   open: _propTypes.bool,
-  position: _propTypes.string
+  position: _propTypes.string,
+  scrollProps: _propTypes.object
 };
 var _default = exports.default = GroupingPanel;

package/dist/components/UTShortcutPanel/index.js

@@ -24,14 +24,18 @@ const UTShortcutPanelContainer = _ref => {
     classNames,
     classes: theme,
     dataTestId,
+    disableCollapsibleCategories = false,
     handleSelectFilter,
+    hideAddFilterButton = false,
     iconProps,
     noFiltersText,
     noFiltersTitle,
     onDeleteFilterGrouping,
     onEditFilterGrouping,
+    onTogglePanel,
     panelTitle,
     position = _constants.PANEL_POSITIONS.LEFT,
+    scrollProps,
     selectedFilter,
     startOpen = false,
     tooltipsContentMap = {}
@@ -42,12 +46,12 @@ const UTShortcutPanelContainer = _ref => {
   const [filteredValues, setFilteredValues] = (0, _react.useState)(false);
   const handleTogglePanel = () => {
     setOpen(!open);
+    onTogglePanel === null || onTogglePanel === void 0 || onTogglePanel(!open);
   };
   const [filteredCategories, setFilteredCategories] = (0, _react.useState)(categories);
-  const handleAddFilterGroup = () => {
-    // TODO: desarrollo en otro PR
-    alert('handleAddFilterGroup');
-  };
+
+  // TODO: desarrollo en otro PR
+  const handleAddFilterGroup = () => {};
   const handleFilterGroupSearch = value => {
     const filteredResults = categories.map(category => {
       const filters = category.filters.filter(filter => filter.name.toLowerCase().includes(value.toLowerCase()));
@@ -59,12 +63,6 @@ const UTShortcutPanelContainer = _ref => {
     setFilteredCategories(filteredResults);
     setFilteredValues(Boolean(value));
   };
-  const handleDeleteFilterGrouping = filter => {
-    onDeleteFilterGrouping(filter);
-  };
-  const handleEditFilterGrouping = filter => {
-    onEditFilterGrouping(filter);
-  };
   const [popperState, setPopperState] = (0, _react.useState)({});
   const openPopper = _ref2 => {
     let {
@@ -92,25 +90,28 @@ const UTShortcutPanelContainer = _ref => {
     classes,
     closePopper,
     containerRef: containerRef.current,
+    disableCollapsibleCategories,
     filteredValues,
     handleAddFilterGroup,
-    handleDeleteFilterGrouping,
-    handleEditFilterGrouping,
     handleFilterGroupSearch,
     handleSelectFilter,
     handleTogglePanel,
+    hideAddFilterButton,
     iconProps,
     noFiltersText,
     noFiltersTitle,
+    onDeleteFilterGrouping,
+    onEditFilterGrouping,
     open,
     openPopper,
     panelTitle,
     popperState,
     position,
+    scrollProps,
     selectedFilter,
     theme,
     tooltipsContentMap
-  }), [categories, categoriesConfig, classes, filteredCategories, filteredValues, iconProps, noFiltersText, noFiltersTitle, open, popperState, position, selectedFilter]);
+  }), [categories, categoriesConfig, classes, disableCollapsibleCategories, filteredCategories, filteredValues, hideAddFilterButton, iconProps, noFiltersText, noFiltersTitle, onDeleteFilterGrouping, onEditFilterGrouping, open, popperState, position, scrollProps, selectedFilter, theme, tooltipsContentMap]);
   return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement("section", {
@@ -156,14 +157,18 @@ UTShortcutPanelContainer.propTypes = {
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   dataTestId: _propTypes.string,
+  disableCollapsibleCategories: _propTypes.bool,
   handleSelectFilter: _propTypes.func,
+  hideAddFilterButton: _propTypes.bool,
   iconProps: _iconTypes.iconPropTypes,
   noFiltersText: _propTypes.string,
   noFiltersTitle: _propTypes.string,
   onDeleteFilterGrouping: _propTypes.func,
   onEditFilterGrouping: _propTypes.func,
+  onTogglePanel: _propTypes.func,
   panelTitle: _propTypes.string,
   position: _propTypes.string,
+  scrollProps: _propTypes.object,
   selectedFilter: (0, _propTypes.shape)({
     id: _propTypes.number,
     name: _propTypes.string,

package/dist/components/UTShortcutPanel/layout.js

@@ -4,12 +4,11 @@ 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 _iconTypes = require("../../types/iconTypes");
 var _GroupingPanel = _interopRequireDefault(require("./components/GroupingPanel"));
 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); }
 const UTShortcutPanel = _ref => {
   let {
     children,
@@ -21,7 +20,7 @@ const UTShortcutPanel = _ref => {
     panelTitle,
     position
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GroupingPanel.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_GroupingPanel.default, {
     containerRef: containerRef,
     dataTestId: dataTestId,
     iconProps: iconProps,

package/dist/components/UTShortcutPanel/stories/UTShortcutPanel.stories.js

@@ -28,15 +28,19 @@ var _default = exports.default = {
     children: undefined,
     classNames: undefined,
     dataTestId: _constants2.default.DATA_TEST_ID,
+    disableCollapsibleCategories: false,
     handleSelectFilter: (0, _test.fn)(),
+    hideAddFilterButton: false,
     iconProps: undefined,
     noFiltersTitle: _constants2.default.NO_FILTERS_TITLE,
     noFiltersText: _constants2.default.NO_FILTERS_TEXT,
     onDeleteFilterGrouping: (0, _test.fn)(),
     onEditFilterGrouping: (0, _test.fn)(),
+    onTogglePanel: (0, _test.fn)(),
     panelTitle: _constants2.default.PANEL_TITLE,
     position: _constants2.default.POSITION,
     selectedFilter: undefined,
+    scrollProps: undefined,
     startOpen: true,
     tooltipsContentMap: _constants2.default.TOOLTIPS_CONTENT_MAP
   },
@@ -115,6 +119,18 @@ var _default = exports.default = {
         }
       }
     },
+    disableCollapsibleCategories: {
+      control: 'boolean',
+      description: 'Si es `true`, las categorías no se pueden colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
     handleSelectFilter: {
       action: 'hi',
       control: 'none',
@@ -128,6 +144,18 @@ var _default = exports.default = {
         }
       }
     },
+    hideAddFilterButton: {
+      control: 'boolean',
+      description: 'Si es `true`, el botón de agregar filtro no se muestra.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
     iconProps: {
       control: 'select',
       options: ['default', 'IconX, gray, 18', 'IconHome, error, 30'],
@@ -202,6 +230,18 @@ var _default = exports.default = {
         }
       }
     },
+    onTogglePanel: {
+      control: 'none',
+      description: 'Función callback que se ejecuta cuando se presiona el botón de toggle del panel.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'Function'
+        }
+      }
+    },
     panelTitle: {
       control: 'text',
       description: 'Título del panel.',
@@ -227,6 +267,18 @@ var _default = exports.default = {
         }
       }
     },
+    scrollProps: {
+      control: 'none',
+      description: 'Props para el componente de scroll.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'object'
+        }
+      }
+    },
     selectedFilter: {
       control: 'none',
       description: 'Filtro seleccionado.',
@@ -270,7 +322,7 @@ var _default = exports.default = {
       schema: _propsSchema.default
     },
     controls: {
-      exclude: ['categories', 'categoriesConfig', 'children', 'classNames', 'classes', 'handleSelectFilter', 'onDeleteFilterGrouping', 'onEditFilterGrouping', 'selectedFilter', 'tooltipsContentMap']
+      exclude: ['categories', 'categoriesConfig', 'children', 'classNames', 'classes', 'handleSelectFilter', 'onDeleteFilterGrouping', 'onEditFilterGrouping', 'onTogglePanel', 'scrollProps', 'selectedFilter', 'tooltipsContentMap']
     },
     docs: {
       description: {
@@ -289,7 +341,7 @@ const Playground = exports.Playground = {
   },
   render: args => {
     const [selectedFilter, setSelectedFilter] = (0, _react.useState)(args.selectedFilter);
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", {
       className: _stylesModule.default.storyContainer
     }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
       handleSelectFilter: filter => {

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

@@ -124,9 +124,17 @@
             transform: rotate(-90deg);
           }
 
-          .ExpandedPanelContentCategoryHeaderAvatar {
+          .expandedPanelContentCategoryHeaderAvatar {
             border-radius: var(--radius-md, 8px);
           }
+
+          .expandedPanelContentCategoryHeaderLabel {
+            text-transform: uppercase;
+          }
+        }
+
+        .expandedPanelContentCategoryHeaderNoCollapsible {
+          pointer-events: none;
         }
 
         .expandedPanelContentUserFiltersExpanded {
@@ -194,6 +202,10 @@
           .expandedPanelContentCategoryItemActionsContainer {
             @extend %actionsContainer;
           }
+
+          .expandedPanelContentCategoryItemTitleContainerSelected {
+            cursor: default;
+          }
           
           &:hover,
         &[data-test-hover="true"] {

package/package.json

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