@widergy/energy-ui 3.160.0 → 3.161.0

package/CHANGELOG.md

@@ -1,9 +1,21 @@
-# [3.160.0](https://github.com/widergy/energy-ui/compare/v3.159.0...v3.160.0) (2026-06-02)
+# [3.161.0](https://github.com/widergy/energy-ui/compare/v3.160.1...v3.161.0) (2026-06-05)
 
 
 ### Features
 
-* [AXCH-1489] second icon in ut button ([#805](https://github.com/widergy/energy-ui/issues/805)) ([a66bfc8](https://github.com/widergy/energy-ui/commit/a66bfc86748b07e516e5e5b53c2a08dcf3268d74))
+* [AXCH-1712, AXCH-1713, AXCH-1716 y AXCH-1717] quick filters ([#808](https://github.com/widergy/energy-ui/issues/808)) ([080d7b7](https://github.com/widergy/energy-ui/commit/080d7b7310549263783fc15d748fb597b51bf209))
+
+## [3.160.1](https://github.com/widergy/energy-ui/compare/v3.160.0...v3.160.1) (2026-06-04)
+
+### Correcciones
+
+* Se corrigió un problema que impedía desplazarse correctamente por el contenido adicional del panel de unidades de trabajo. [#810](https://github.com/widergy/Energy-UI/pull/810) [AXCH-1748](https://widergy.atlassian.net/browse/AXCH-1748) [AXCH-1742](https://widergy.atlassian.net/browse/AXCH-1742)
+
+# [3.160.0](https://github.com/widergy/energy-ui/compare/v3.159.0...v3.160.0) (2026-06-02)
+
+### Novedades y Mejoras
+
+* Los botones de acción ahora admiten un segundo ícono en el extremo derecho, lo que permite mayor flexibilidad visual sin afectar el comportamiento existente. [#805](https://github.com/widergy/Energy-UI/pull/805) [AXCH-1489](https://widergy.atlassian.net/browse/AXCH-1489)
 
 # [3.159.0](https://github.com/widergy/energy-ui/compare/v3.158.1...v3.159.0) (2026-06-01)
 

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

@@ -34,10 +34,15 @@ const AdditionalContentModule = _ref => {
   const defaultTooltipContainer = tooltipContainer || (() => document.body);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.additionalContentWrapper
-  }, activeContent && /*#__PURE__*/_react.default.createElement("div", {
+  }, activeContent && /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+    options: {
+      suppressScrollX: true
+    },
+    className: _stylesModule.default.sidebarScroll
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.bodyComponent,
     "data-testid": panel.additionalContent.body
-  }, ActiveBodyComponent && /*#__PURE__*/_react.default.createElement(ActiveBodyComponent, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, ActiveBodyComponent && /*#__PURE__*/_react.default.createElement(ActiveBodyComponent, null))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.sidebar, " ").concat(!activeContent ? _stylesModule.default.sidebarCollapsed : ''),
     "data-testid": panel.additionalContent.sidebar
   }, /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {

package/dist/components/UTPanel/versions/V1/components/AdditionalContentModule/styles.module.scss

@@ -23,9 +23,10 @@ $sidebar-width: 56px;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
+  height: 100%;
   min-width: $body-component-width;
   opacity: 1;
-  overflow: hidden;
+  overflow-y: auto;
   padding: 24px 24px 16px 24px;
   width: $body-component-width;
 }

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

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _context = _interopRequireDefault(require("../../../../../../../../context"));
 var _utils = require("../../../../../../../../utils");
 var _layout = _interopRequireDefault(require("./layout"));
-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 _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 ExpandedPanelContentCategoryItemContainer = _ref => {
   var _name$toLowerCase, _name$toLowerCase$spl, _name$toLowerCase$spl2;
   let {
@@ -22,11 +21,13 @@ const ExpandedPanelContentCategoryItemContainer = _ref => {
     classes,
     closePopper,
     handleSelectFilter,
+    invalidParamsConfig,
     onDeleteFilterGrouping,
     onEditFilterGrouping,
     openPopper,
     position,
     selectedFilter,
+    showActionsOnPinned,
     tooltipsContentMap: {
       editButton,
       deleteButton
@@ -34,10 +35,12 @@ const ExpandedPanelContentCategoryItemContainer = _ref => {
   } = (0, _react.useContext)(_context.default);
   const {
     description,
+    hasInvalidParams,
     name,
     pinned,
     category
   } = filter;
+  const resolvedHasInvalidParams = hasInvalidParams ? invalidParamsConfig !== null && invalidParamsConfig !== void 0 ? invalidParamsConfig : true : false;
   const id = "".concat(name === null || name === void 0 || (_name$toLowerCase = name.toLowerCase) === null || _name$toLowerCase === void 0 || (_name$toLowerCase = _name$toLowerCase.call(name)) === null || _name$toLowerCase === void 0 || (_name$toLowerCase$spl = _name$toLowerCase.split) === null || _name$toLowerCase$spl === void 0 || (_name$toLowerCase$spl = _name$toLowerCase$spl.call(_name$toLowerCase, ' ')) === null || _name$toLowerCase$spl === void 0 || (_name$toLowerCase$spl2 = _name$toLowerCase$spl.join) === null || _name$toLowerCase$spl2 === void 0 ? void 0 : _name$toLowerCase$spl2.call(_name$toLowerCase$spl, '_'), "_").concat(category);
   const deleteButtonTippyRef = (0, _react.useRef)(null);
   const editButtonTippyRef = (0, _react.useRef)(null);
@@ -65,12 +68,14 @@ const ExpandedPanelContentCategoryItemContainer = _ref => {
     handleDeleteFilterGrouping: onDeleteFilterGrouping ? () => onDeleteFilterGrouping(filter) : undefined,
     handleEditFilterGrouping: onEditFilterGrouping ? () => onEditFilterGrouping(filter) : undefined,
     handleSelectFilter: handleSelectFilters,
+    hasInvalidParams: resolvedHasInvalidParams,
     id: id,
     name: name,
     openItemDescription: handleOpenItemDescription,
     pinned: pinned,
     position: position,
-    selected: (0, _isEqual.default)(selectedFilter, filter)
+    showActionsOnPinned: showActionsOnPinned,
+    selected: (selectedFilter === null || selectedFilter === void 0 ? void 0 : selectedFilter.id) != null && selectedFilter.id === (filter === null || filter === void 0 ? void 0 : filter.id) && selectedFilter.category === (filter === null || filter === void 0 ? void 0 : filter.category)
   });
 };
 ExpandedPanelContentCategoryItemContainer.propTypes = {

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

@@ -34,13 +34,19 @@ const ExpandedPanelContentCategoryItem = _ref => {
     handleDeleteFilterGrouping,
     handleEditFilterGrouping,
     handleSelectFilter,
+    hasInvalidParams,
     id,
     name,
     openItemDescription,
     pinned,
     position,
-    selected
+    selected,
+    showActionsOnPinned
   } = _ref;
+  const isInvalidParamsObject = typeof hasInvalidParams === 'object';
+  const invalidIconName = (isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.iconName : null) || 'IconAlertTriangle';
+  const invalidIconSize = (isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.size : null) || '16';
+  const invalidTooltipText = isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.tooltipText : undefined;
   return /*#__PURE__*/_react.default.createElement("article", {
     className: "".concat(classes.expandedPanelContentCategoryItem, " ").concat(selected ? classes.expandedPanelContentCategoryItemSelected : ''),
     id: id
@@ -63,7 +69,25 @@ const ExpandedPanelContentCategoryItem = _ref => {
     className: classes.expandedPanelContentCategoryItemTitleLabel,
     colorTheme: selected ? 'accent' : undefined,
     shade: selected ? '05' : undefined
-  }, name))), !pinned && (handleEditFilterGrouping || handleDeleteFilterGrouping) && /*#__PURE__*/_react.default.createElement("section", {
+  }, name)), hasInvalidParams && (invalidTooltipText ? /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: invalidTooltipText,
+    tippyProps: {
+      appendTo: () => document.body,
+      placement: 'top'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.hasInvalidParamsTooltipContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    colorTheme: "warning",
+    dataTestId: "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.INVALID_PARAMS),
+    name: invalidIconName,
+    size: invalidIconSize
+  }))) : /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    colorTheme: "warning",
+    dataTestId: "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.INVALID_PARAMS),
+    name: invalidIconName,
+    size: invalidIconSize
+  }))), (!pinned || showActionsOnPinned) && (handleEditFilterGrouping || handleDeleteFilterGrouping) && /*#__PURE__*/_react.default.createElement("section", {
     className: classes.expandedPanelContentCategoryItemActionsContainer,
     onAnimationEnd: animationEnd
   }, handleEditFilterGrouping && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
@@ -118,11 +142,17 @@ ExpandedPanelContentCategoryItem.propTypes = {
   handleDeleteFilterGrouping: _propTypes.func,
   handleEditFilterGrouping: _propTypes.func,
   handleSelectFilter: _propTypes.func,
+  hasInvalidParams: (0, _propTypes.oneOfType)([_propTypes.bool, (0, _propTypes.shape)({
+    iconName: _propTypes.string,
+    size: _propTypes.string,
+    tooltipText: _propTypes.string
+  })]),
   id: _propTypes.string,
   name: _propTypes.string,
   openItemDescription: _propTypes.func,
   pinned: _propTypes.bool,
   position: _propTypes.string,
-  selected: _propTypes.bool
+  selected: _propTypes.bool,
+  showActionsOnPinned: _propTypes.bool
 };
 var _default = exports.default = ExpandedPanelContentCategoryItem;

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

@@ -32,6 +32,7 @@ const ExpandedPanelContentHeaderContainer = _ref => {
     hideAddFilterButton,
     panelTitle,
     position,
+    searchResetTrigger,
     searchValue,
     tooltipsContentMap: {
       collapseButton,
@@ -39,6 +40,9 @@ const ExpandedPanelContentHeaderContainer = _ref => {
     }
   } = (0, _react.useContext)(_context.default);
   const [searchOpen, setSearchOpen] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (searchResetTrigger > 0) setSearchOpen(false);
+  }, [searchResetTrigger]);
   const handleSearchToggle = () => {
     handleFilterGroupSearch('');
     setSearchOpen(!searchOpen);

package/dist/components/UTShortcutPanel/index.js

@@ -28,6 +28,7 @@ const UTShortcutPanelContainer = _ref => {
     handleSelectFilter,
     hideAddFilterButton = false,
     iconProps,
+    invalidParamsConfig,
     noFiltersText,
     noFiltersTitle,
     onDeleteFilterGrouping,
@@ -36,6 +37,8 @@ const UTShortcutPanelContainer = _ref => {
     panelTitle,
     position = _constants.PANEL_POSITIONS.LEFT,
     scrollProps,
+    searchResetKey,
+    showActionsOnPinned = false,
     selectedFilter,
     startOpen = false,
     tooltipsContentMap = {}
@@ -44,6 +47,7 @@ const UTShortcutPanelContainer = _ref => {
   const containerRef = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(startOpen);
   const [filteredValues, setFilteredValues] = (0, _react.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, _react.useState)('');
   const handleTogglePanel = () => {
     setOpen(!open);
     onTogglePanel === null || onTogglePanel === void 0 || onTogglePanel(!open);
@@ -52,8 +56,8 @@ const UTShortcutPanelContainer = _ref => {
 
   // TODO: desarrollo en otro PR
   const handleAddFilterGroup = () => {};
-  const handleFilterGroupSearch = value => {
-    const filteredResults = categories.map(category => {
+  const applySearch = (value, source) => {
+    const filteredResults = source.map(category => {
       const filters = category.filters.filter(filter => filter.name.toLowerCase().includes(value.toLowerCase()));
       return {
         ...category,
@@ -63,6 +67,10 @@ const UTShortcutPanelContainer = _ref => {
     setFilteredCategories(filteredResults);
     setFilteredValues(Boolean(value));
   };
+  const handleFilterGroupSearch = value => {
+    setSearchTerm(value);
+    applySearch(value, categories);
+  };
   const [popperState, setPopperState] = (0, _react.useState)({});
   const openPopper = _ref2 => {
     let {
@@ -82,8 +90,19 @@ const UTShortcutPanelContainer = _ref => {
     setPopperState({});
   };
   (0, _react.useEffect)(() => {
-    setFilteredCategories(categories);
+    if (searchTerm) {
+      applySearch(searchTerm, categories);
+    } else {
+      setFilteredCategories(categories);
+    }
   }, [categories]);
+  const [searchResetTrigger, setSearchResetTrigger] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    setSearchTerm('');
+    setFilteredValues(false);
+    setFilteredCategories(categories);
+    setSearchResetTrigger(prev => prev + 1);
+  }, [searchResetKey]);
   const contextValue = (0, _react.useMemo)(() => ({
     categories: filteredCategories,
     categoriesConfig,
@@ -98,6 +117,7 @@ const UTShortcutPanelContainer = _ref => {
     handleTogglePanel,
     hideAddFilterButton,
     iconProps,
+    invalidParamsConfig,
     noFiltersText,
     noFiltersTitle,
     onDeleteFilterGrouping,
@@ -108,10 +128,12 @@ const UTShortcutPanelContainer = _ref => {
     popperState,
     position,
     scrollProps,
+    searchResetTrigger,
     selectedFilter,
+    showActionsOnPinned,
     theme,
     tooltipsContentMap
-  }), [categories, categoriesConfig, classes, disableCollapsibleCategories, filteredCategories, filteredValues, hideAddFilterButton, iconProps, noFiltersText, noFiltersTitle, onDeleteFilterGrouping, onEditFilterGrouping, open, popperState, position, scrollProps, selectedFilter, theme, tooltipsContentMap]);
+  }), [categories, categoriesConfig, classes, disableCollapsibleCategories, filteredCategories, filteredValues, hideAddFilterButton, iconProps, invalidParamsConfig, noFiltersText, noFiltersTitle, onDeleteFilterGrouping, onEditFilterGrouping, showActionsOnPinned, open, popperState, position, scrollProps, searchResetTrigger, selectedFilter, theme, tooltipsContentMap]);
   return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement("section", {
@@ -161,14 +183,21 @@ UTShortcutPanelContainer.propTypes = {
   handleSelectFilter: _propTypes.func,
   hideAddFilterButton: _propTypes.bool,
   iconProps: _iconTypes.iconPropTypes,
+  invalidParamsConfig: (0, _propTypes.shape)({
+    iconName: _propTypes.string,
+    size: _propTypes.string,
+    tooltipText: _propTypes.string
+  }),
   noFiltersText: _propTypes.string,
   noFiltersTitle: _propTypes.string,
   onDeleteFilterGrouping: _propTypes.func,
   onEditFilterGrouping: _propTypes.func,
   onTogglePanel: _propTypes.func,
+  showActionsOnPinned: _propTypes.bool,
   panelTitle: _propTypes.string,
   position: _propTypes.string,
   scrollProps: _propTypes.object,
+  searchResetKey: _propTypes.string,
   selectedFilter: (0, _propTypes.shape)({
     id: _propTypes.number,
     name: _propTypes.string,

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

@@ -32,6 +32,7 @@ var _default = exports.default = {
     handleSelectFilter: (0, _test.fn)(),
     hideAddFilterButton: false,
     iconProps: undefined,
+    invalidParamsConfig: undefined,
     noFiltersTitle: _constants2.default.NO_FILTERS_TITLE,
     noFiltersText: _constants2.default.NO_FILTERS_TEXT,
     onDeleteFilterGrouping: (0, _test.fn)(),
@@ -39,8 +40,10 @@ var _default = exports.default = {
     onTogglePanel: (0, _test.fn)(),
     panelTitle: _constants2.default.PANEL_TITLE,
     position: _constants2.default.POSITION,
+    searchResetKey: undefined,
     selectedFilter: undefined,
     scrollProps: undefined,
+    showActionsOnPinned: false,
     startOpen: true,
     tooltipsContentMap: _constants2.default.TOOLTIPS_CONTENT_MAP
   },
@@ -182,6 +185,18 @@ var _default = exports.default = {
         }
       }
     },
+    invalidParamsConfig: {
+      control: 'object',
+      description: 'Configuración del ícono de advertencia que se muestra en ítems con `hasInvalidParams: true`. Si se pasa `tooltipText`, el ícono muestra un tooltip al hacer hover. `iconName` e `size` son opcionales (defaults: `IconAlertTriangle`, `16`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ iconName?: string; size?: string; tooltipText?: string }'
+        }
+      }
+    },
     noFiltersTitle: {
       control: 'text',
       description: 'Título para el componente de filtros vacíos.',
@@ -279,6 +294,18 @@ var _default = exports.default = {
         }
       }
     },
+    searchResetKey: {
+      control: 'text',
+      description: 'Cuando cambia de valor, resetea el estado de búsqueda interna del panel. Útil para limpiar el input al cambiar de tab o categoría.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string | number'
+        }
+      }
+    },
     selectedFilter: {
       control: 'none',
       description: 'Filtro seleccionado.',
@@ -291,6 +318,18 @@ var _default = exports.default = {
         }
       }
     },
+    showActionsOnPinned: {
+      control: 'boolean',
+      description: 'Si es `true`, los botones de editar y eliminar se muestran también en ítems con `pinned: true`. Por defecto son ocultados en filtros pinned.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
     startOpen: {
       control: 'boolean',
       description: 'Indica si el panel se renderiza abierto.',

package/dist/components/UTShortcutPanel/stories/constants.json

@@ -107,6 +107,8 @@
           "name": "Filtro Custom 3",
           "order": 4,
           "pinned": false,
+          "filter_type": "private",
+          "hasInvalidParams": true,
           "visible": true
         }
       ],

package/dist/components/UTShortcutPanel/stories/props.schema.json

@@ -65,7 +65,16 @@
                 },
                 "backoffice_user_id": {
                   "type": ["string", "null"],
-                  "description": "ID of the backoffice user who created this filter, or null for system filters"
+                  "description": "ID del agente propietario del filtro."
+                },
+                "filter_type": {
+                  "type": "string",
+                  "enum": ["private", "supervisor"],
+                  "description": "Tipo de filtro: 'private' (solo visible para el creador) o 'supervisor' (visible para todos, implica pinned: true)."
+                },
+                "hasInvalidParams": {
+                  "type": "boolean",
+                  "description": "Cuando es true, el ítem muestra el ícono de advertencia. El ícono, su tamaño y el tooltip se configuran desde la prop invalidParamsConfig del panel (defaults: IconAlertTriangle, size 16, sin tooltip). Se computa en el selector makeSelectFilterCategoriesWithValidation."
                 },
                 "filter_params": {
                   "type": "array",

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

@@ -11,7 +11,6 @@
 }
 
 %actionsContainer {
-  animation-fill-mode: forwards;
   display: none;
 }
 
@@ -190,8 +189,12 @@
             overflow: hidden;
 
             .hoverableContainer {
-            flex-grow: 1;
-              overflow: hidden; 
+              flex-grow: 1;
+              overflow: hidden;
+
+              &:first-child {
+                padding-left: var(--UT-shortcutPanel-item-no-icon-padding-left, 4px);
+              }
             }
           }
 
@@ -203,6 +206,11 @@
             @extend %actionsContainer;
           }
 
+          .hasInvalidParamsTooltipContainer {
+            align-items: center;
+            display: flex;
+          }
+
           .expandedPanelContentCategoryItemTitleContainerSelected {
             cursor: default;
           }

package/dist/constants/testIds.js

@@ -40,6 +40,7 @@ const ID_CONSTANTS = exports.ID_CONSTANTS = {
   HEADER: 'header',
   HELP_TEXT: 'helpText',
   ICON: 'icon',
+  INVALID_PARAMS: 'invalidParams',
   LABEL: 'label',
   MAIN_BUTTON: 'mainButton',
   NAME: 'name',

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

@@ -26,10 +26,15 @@ const AdditionalContentModule = _ref => {
   const defaultTooltipContainer = tooltipContainer || (() => document.body);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.additionalContentWrapper
-  }, activeContent && /*#__PURE__*/React.createElement("div", {
+  }, activeContent && /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    options: {
+      suppressScrollX: true
+    },
+    className: styles.sidebarScroll
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.bodyComponent,
     "data-testid": panel.additionalContent.body
-  }, ActiveBodyComponent && /*#__PURE__*/React.createElement(ActiveBodyComponent, null)), /*#__PURE__*/React.createElement("div", {
+  }, ActiveBodyComponent && /*#__PURE__*/React.createElement(ActiveBodyComponent, null))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles.sidebar, " ").concat(!activeContent ? styles.sidebarCollapsed : ''),
     "data-testid": panel.additionalContent.sidebar
   }, /*#__PURE__*/React.createElement(PerfectScrollbar, {

package/dist/esm/components/UTPanel/versions/V1/components/AdditionalContentModule/styles.module.scss

@@ -23,9 +23,10 @@ $sidebar-width: 56px;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
+  height: 100%;
   min-width: $body-component-width;
   opacity: 1;
-  overflow: hidden;
+  overflow-y: auto;
   padding: 24px 24px 16px 24px;
   width: $body-component-width;
 }

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

@@ -1,4 +1,3 @@
-import isEqual from 'lodash/isEqual';
 import React, { useContext, useRef } from 'react';
 import { object, string } from 'prop-types';
 import UTShortcutPanelContext from '../../../../../../../../context';
@@ -14,11 +13,13 @@ const ExpandedPanelContentCategoryItemContainer = _ref => {
     classes,
     closePopper,
     handleSelectFilter,
+    invalidParamsConfig,
     onDeleteFilterGrouping,
     onEditFilterGrouping,
     openPopper,
     position,
     selectedFilter,
+    showActionsOnPinned,
     tooltipsContentMap: {
       editButton,
       deleteButton
@@ -26,10 +27,12 @@ const ExpandedPanelContentCategoryItemContainer = _ref => {
   } = useContext(UTShortcutPanelContext);
   const {
     description,
+    hasInvalidParams,
     name,
     pinned,
     category
   } = filter;
+  const resolvedHasInvalidParams = hasInvalidParams ? invalidParamsConfig !== null && invalidParamsConfig !== void 0 ? invalidParamsConfig : true : false;
   const id = "".concat(name === null || name === void 0 || (_name$toLowerCase = name.toLowerCase) === null || _name$toLowerCase === void 0 || (_name$toLowerCase = _name$toLowerCase.call(name)) === null || _name$toLowerCase === void 0 || (_name$toLowerCase$spl = _name$toLowerCase.split) === null || _name$toLowerCase$spl === void 0 || (_name$toLowerCase$spl = _name$toLowerCase$spl.call(_name$toLowerCase, ' ')) === null || _name$toLowerCase$spl === void 0 || (_name$toLowerCase$spl2 = _name$toLowerCase$spl.join) === null || _name$toLowerCase$spl2 === void 0 ? void 0 : _name$toLowerCase$spl2.call(_name$toLowerCase$spl, '_'), "_").concat(category);
   const deleteButtonTippyRef = useRef(null);
   const editButtonTippyRef = useRef(null);
@@ -57,12 +60,14 @@ const ExpandedPanelContentCategoryItemContainer = _ref => {
     handleDeleteFilterGrouping: onDeleteFilterGrouping ? () => onDeleteFilterGrouping(filter) : undefined,
     handleEditFilterGrouping: onEditFilterGrouping ? () => onEditFilterGrouping(filter) : undefined,
     handleSelectFilter: handleSelectFilters,
+    hasInvalidParams: resolvedHasInvalidParams,
     id: id,
     name: name,
     openItemDescription: handleOpenItemDescription,
     pinned: pinned,
     position: position,
-    selected: isEqual(selectedFilter, filter)
+    showActionsOnPinned: showActionsOnPinned,
+    selected: (selectedFilter === null || selectedFilter === void 0 ? void 0 : selectedFilter.id) != null && selectedFilter.id === (filter === null || filter === void 0 ? void 0 : filter.id) && selectedFilter.category === (filter === null || filter === void 0 ? void 0 : filter.category)
   });
 };
 ExpandedPanelContentCategoryItemContainer.propTypes = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { bool, func, object, string } from 'prop-types';
+import { bool, func, object, oneOfType, shape, string } from 'prop-types';
 import UTButton from '../../../../../../../../../UTButton';
 import UTIcon from '../../../../../../../../../UTIcon';
 import UTLabel from '../../../../../../../../../UTLabel';
@@ -27,13 +27,19 @@ const ExpandedPanelContentCategoryItem = _ref => {
     handleDeleteFilterGrouping,
     handleEditFilterGrouping,
     handleSelectFilter,
+    hasInvalidParams,
     id,
     name,
     openItemDescription,
     pinned,
     position,
-    selected
+    selected,
+    showActionsOnPinned
   } = _ref;
+  const isInvalidParamsObject = typeof hasInvalidParams === 'object';
+  const invalidIconName = (isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.iconName : null) || 'IconAlertTriangle';
+  const invalidIconSize = (isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.size : null) || '16';
+  const invalidTooltipText = isInvalidParamsObject ? hasInvalidParams === null || hasInvalidParams === void 0 ? void 0 : hasInvalidParams.tooltipText : undefined;
   return /*#__PURE__*/React.createElement("article", {
     className: "".concat(classes.expandedPanelContentCategoryItem, " ").concat(selected ? classes.expandedPanelContentCategoryItemSelected : ''),
     id: id
@@ -56,7 +62,25 @@ const ExpandedPanelContentCategoryItem = _ref => {
     className: classes.expandedPanelContentCategoryItemTitleLabel,
     colorTheme: selected ? 'accent' : undefined,
     shade: selected ? '05' : undefined
-  }, name))), !pinned && (handleEditFilterGrouping || handleDeleteFilterGrouping) && /*#__PURE__*/React.createElement("section", {
+  }, name)), hasInvalidParams && (invalidTooltipText ? /*#__PURE__*/React.createElement(UTTooltip, {
+    content: invalidTooltipText,
+    tippyProps: {
+      appendTo: () => document.body,
+      placement: 'top'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classes.hasInvalidParamsTooltipContainer
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "warning",
+    dataTestId: "".concat(dataTestId, ".").concat(ID_CONSTANTS.INVALID_PARAMS),
+    name: invalidIconName,
+    size: invalidIconSize
+  }))) : /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "warning",
+    dataTestId: "".concat(dataTestId, ".").concat(ID_CONSTANTS.INVALID_PARAMS),
+    name: invalidIconName,
+    size: invalidIconSize
+  }))), (!pinned || showActionsOnPinned) && (handleEditFilterGrouping || handleDeleteFilterGrouping) && /*#__PURE__*/React.createElement("section", {
     className: classes.expandedPanelContentCategoryItemActionsContainer,
     onAnimationEnd: animationEnd
   }, handleEditFilterGrouping && /*#__PURE__*/React.createElement(UTTooltip, {
@@ -111,11 +135,17 @@ ExpandedPanelContentCategoryItem.propTypes = {
   handleDeleteFilterGrouping: func,
   handleEditFilterGrouping: func,
   handleSelectFilter: func,
+  hasInvalidParams: oneOfType([bool, shape({
+    iconName: string,
+    size: string,
+    tooltipText: string
+  })]),
   id: string,
   name: string,
   openItemDescription: func,
   pinned: bool,
   position: string,
-  selected: bool
+  selected: bool,
+  showActionsOnPinned: bool
 };
 export default ExpandedPanelContentCategoryItem;

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

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { string } from 'prop-types';
 import UTShortcutPanelContext from '../../../../../../context';
 import { handleAnimationEnd } from '../../../../../../utils';
@@ -24,6 +24,7 @@ const ExpandedPanelContentHeaderContainer = _ref => {
     hideAddFilterButton,
     panelTitle,
     position,
+    searchResetTrigger,
     searchValue,
     tooltipsContentMap: {
       collapseButton,
@@ -31,6 +32,9 @@ const ExpandedPanelContentHeaderContainer = _ref => {
     }
   } = useContext(UTShortcutPanelContext);
   const [searchOpen, setSearchOpen] = useState(false);
+  useEffect(() => {
+    if (searchResetTrigger > 0) setSearchOpen(false);
+  }, [searchResetTrigger]);
   const handleSearchToggle = () => {
     handleFilterGroupSearch('');
     setSearchOpen(!searchOpen);

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

@@ -20,6 +20,7 @@ const UTShortcutPanelContainer = _ref => {
     handleSelectFilter,
     hideAddFilterButton = false,
     iconProps,
+    invalidParamsConfig,
     noFiltersText,
     noFiltersTitle,
     onDeleteFilterGrouping,
@@ -28,6 +29,8 @@ const UTShortcutPanelContainer = _ref => {
     panelTitle,
     position = PANEL_POSITIONS.LEFT,
     scrollProps,
+    searchResetKey,
+    showActionsOnPinned = false,
     selectedFilter,
     startOpen = false,
     tooltipsContentMap = {}
@@ -36,6 +39,7 @@ const UTShortcutPanelContainer = _ref => {
   const containerRef = useRef(null);
   const [open, setOpen] = useState(startOpen);
   const [filteredValues, setFilteredValues] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
   const handleTogglePanel = () => {
     setOpen(!open);
     onTogglePanel === null || onTogglePanel === void 0 || onTogglePanel(!open);
@@ -44,8 +48,8 @@ const UTShortcutPanelContainer = _ref => {
 
   // TODO: desarrollo en otro PR
   const handleAddFilterGroup = () => {};
-  const handleFilterGroupSearch = value => {
-    const filteredResults = categories.map(category => {
+  const applySearch = (value, source) => {
+    const filteredResults = source.map(category => {
       const filters = category.filters.filter(filter => filter.name.toLowerCase().includes(value.toLowerCase()));
       return {
         ...category,
@@ -55,6 +59,10 @@ const UTShortcutPanelContainer = _ref => {
     setFilteredCategories(filteredResults);
     setFilteredValues(Boolean(value));
   };
+  const handleFilterGroupSearch = value => {
+    setSearchTerm(value);
+    applySearch(value, categories);
+  };
   const [popperState, setPopperState] = useState({});
   const openPopper = _ref2 => {
     let {
@@ -74,8 +82,19 @@ const UTShortcutPanelContainer = _ref => {
     setPopperState({});
   };
   useEffect(() => {
-    setFilteredCategories(categories);
+    if (searchTerm) {
+      applySearch(searchTerm, categories);
+    } else {
+      setFilteredCategories(categories);
+    }
   }, [categories]);
+  const [searchResetTrigger, setSearchResetTrigger] = useState(0);
+  useEffect(() => {
+    setSearchTerm('');
+    setFilteredValues(false);
+    setFilteredCategories(categories);
+    setSearchResetTrigger(prev => prev + 1);
+  }, [searchResetKey]);
   const contextValue = useMemo(() => ({
     categories: filteredCategories,
     categoriesConfig,
@@ -90,6 +109,7 @@ const UTShortcutPanelContainer = _ref => {
     handleTogglePanel,
     hideAddFilterButton,
     iconProps,
+    invalidParamsConfig,
     noFiltersText,
     noFiltersTitle,
     onDeleteFilterGrouping,
@@ -100,10 +120,12 @@ const UTShortcutPanelContainer = _ref => {
     popperState,
     position,
     scrollProps,
+    searchResetTrigger,
     selectedFilter,
+    showActionsOnPinned,
     theme,
     tooltipsContentMap
-  }), [categories, categoriesConfig, classes, disableCollapsibleCategories, filteredCategories, filteredValues, hideAddFilterButton, iconProps, noFiltersText, noFiltersTitle, onDeleteFilterGrouping, onEditFilterGrouping, open, popperState, position, scrollProps, selectedFilter, theme, tooltipsContentMap]);
+  }), [categories, categoriesConfig, classes, disableCollapsibleCategories, filteredCategories, filteredValues, hideAddFilterButton, iconProps, invalidParamsConfig, noFiltersText, noFiltersTitle, onDeleteFilterGrouping, onEditFilterGrouping, showActionsOnPinned, open, popperState, position, scrollProps, searchResetTrigger, selectedFilter, theme, tooltipsContentMap]);
   return /*#__PURE__*/React.createElement(UTShortcutPanelContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("section", {
@@ -153,14 +175,21 @@ UTShortcutPanelContainer.propTypes = {
   handleSelectFilter: func,
   hideAddFilterButton: bool,
   iconProps: iconPropTypes,
+  invalidParamsConfig: shape({
+    iconName: string,
+    size: string,
+    tooltipText: string
+  }),
   noFiltersText: string,
   noFiltersTitle: string,
   onDeleteFilterGrouping: func,
   onEditFilterGrouping: func,
   onTogglePanel: func,
+  showActionsOnPinned: bool,
   panelTitle: string,
   position: string,
   scrollProps: object,
+  searchResetKey: string,
   selectedFilter: shape({
     id: number,
     name: string,

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

@@ -24,6 +24,7 @@ export default {
     handleSelectFilter: fn(),
     hideAddFilterButton: false,
     iconProps: undefined,
+    invalidParamsConfig: undefined,
     noFiltersTitle: data.NO_FILTERS_TITLE,
     noFiltersText: data.NO_FILTERS_TEXT,
     onDeleteFilterGrouping: fn(),
@@ -31,8 +32,10 @@ export default {
     onTogglePanel: fn(),
     panelTitle: data.PANEL_TITLE,
     position: data.POSITION,
+    searchResetKey: undefined,
     selectedFilter: undefined,
     scrollProps: undefined,
+    showActionsOnPinned: false,
     startOpen: true,
     tooltipsContentMap: data.TOOLTIPS_CONTENT_MAP
   },
@@ -174,6 +177,18 @@ export default {
         }
       }
     },
+    invalidParamsConfig: {
+      control: 'object',
+      description: 'Configuración del ícono de advertencia que se muestra en ítems con `hasInvalidParams: true`. Si se pasa `tooltipText`, el ícono muestra un tooltip al hacer hover. `iconName` e `size` son opcionales (defaults: `IconAlertTriangle`, `16`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ iconName?: string; size?: string; tooltipText?: string }'
+        }
+      }
+    },
     noFiltersTitle: {
       control: 'text',
       description: 'Título para el componente de filtros vacíos.',
@@ -271,6 +286,18 @@ export default {
         }
       }
     },
+    searchResetKey: {
+      control: 'text',
+      description: 'Cuando cambia de valor, resetea el estado de búsqueda interna del panel. Útil para limpiar el input al cambiar de tab o categoría.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string | number'
+        }
+      }
+    },
     selectedFilter: {
       control: 'none',
       description: 'Filtro seleccionado.',
@@ -283,6 +310,18 @@ export default {
         }
       }
     },
+    showActionsOnPinned: {
+      control: 'boolean',
+      description: 'Si es `true`, los botones de editar y eliminar se muestran también en ítems con `pinned: true`. Por defecto son ocultados en filtros pinned.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
     startOpen: {
       control: 'boolean',
       description: 'Indica si el panel se renderiza abierto.',

package/dist/esm/components/UTShortcutPanel/stories/constants.json

@@ -107,6 +107,8 @@
           "name": "Filtro Custom 3",
           "order": 4,
           "pinned": false,
+          "filter_type": "private",
+          "hasInvalidParams": true,
           "visible": true
         }
       ],

package/dist/esm/components/UTShortcutPanel/stories/props.schema.json

@@ -65,7 +65,16 @@
                 },
                 "backoffice_user_id": {
                   "type": ["string", "null"],
-                  "description": "ID of the backoffice user who created this filter, or null for system filters"
+                  "description": "ID del agente propietario del filtro."
+                },
+                "filter_type": {
+                  "type": "string",
+                  "enum": ["private", "supervisor"],
+                  "description": "Tipo de filtro: 'private' (solo visible para el creador) o 'supervisor' (visible para todos, implica pinned: true)."
+                },
+                "hasInvalidParams": {
+                  "type": "boolean",
+                  "description": "Cuando es true, el ítem muestra el ícono de advertencia. El ícono, su tamaño y el tooltip se configuran desde la prop invalidParamsConfig del panel (defaults: IconAlertTriangle, size 16, sin tooltip). Se computa en el selector makeSelectFilterCategoriesWithValidation."
                 },
                 "filter_params": {
                   "type": "array",

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

@@ -11,7 +11,6 @@
 }
 
 %actionsContainer {
-  animation-fill-mode: forwards;
   display: none;
 }
 
@@ -190,8 +189,12 @@
             overflow: hidden;
 
             .hoverableContainer {
-            flex-grow: 1;
-              overflow: hidden; 
+              flex-grow: 1;
+              overflow: hidden;
+
+              &:first-child {
+                padding-left: var(--UT-shortcutPanel-item-no-icon-padding-left, 4px);
+              }
             }
           }
 
@@ -203,6 +206,11 @@
             @extend %actionsContainer;
           }
 
+          .hasInvalidParamsTooltipContainer {
+            align-items: center;
+            display: flex;
+          }
+
           .expandedPanelContentCategoryItemTitleContainerSelected {
             cursor: default;
           }

package/dist/esm/constants/testIds.js

@@ -34,6 +34,7 @@ export const ID_CONSTANTS = {
   HEADER: 'header',
   HELP_TEXT: 'helpText',
   ICON: 'icon',
+  INVALID_PARAMS: 'invalidParams',
   LABEL: 'label',
   MAIN_BUTTON: 'mainButton',
   NAME: 'name',

package/package.json

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