@widergy/energy-ui 3.160.1 → 3.162.0

package/dist/components/UTBanner/utils.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSecondaryLabelColorTheme = exports.getLabelStyles = exports.getLabelColorTheme = exports.getDefaultIconTheme = exports.getDefaultIconSize = exports.getDefaultButtonColorTheme = void 0;
+var _constants = require("./constants");
+/**
+ * Returns the default UTIcon colorTheme and shade for the banner icon based on the
+ * banner's colorTheme and variant. Matches the mobile implementation.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {{ colorTheme: string, shade: string }}
+ */
+const getDefaultIconTheme = (colorTheme, variant) => {
+  var _COLOR_THEMES$ERROR$C;
+  if (variant === _constants.VARIANTS.DARK) {
+    return colorTheme === _constants.COLOR_THEMES.NEGATIVE ? {
+      colorTheme: 'dark',
+      shade: '05'
+    } : {
+      colorTheme: 'light',
+      shade: '01'
+    };
+  }
+  return (_COLOR_THEMES$ERROR$C = {
+    [_constants.COLOR_THEMES.ERROR]: {
+      colorTheme: 'error',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.GRAY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.INFORMATION]: {
+      colorTheme: 'information',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.NEGATIVE]: {
+      colorTheme: 'light',
+      shade: '01'
+    },
+    [_constants.COLOR_THEMES.PRIMARY]: {
+      colorTheme: 'accent',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.SUCCESS]: {
+      colorTheme: 'success',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.WARNING]: {
+      colorTheme: 'warning',
+      shade: '04'
+    },
+    [_constants.COLOR_THEMES.WHITE]: {
+      colorTheme: 'accent',
+      shade: '04'
+    }
+  }[colorTheme]) !== null && _COLOR_THEMES$ERROR$C !== void 0 ? _COLOR_THEMES$ERROR$C : {
+    colorTheme: 'accent',
+    shade: '04'
+  };
+};
+
+/**
+ * Returns the default icon size in pixels based on the banner size.
+ * @param {string} size - One of SIZES values.
+ * @returns {number}
+ */
+exports.getDefaultIconTheme = getDefaultIconTheme;
+const getDefaultIconSize = size => size === _constants.SIZES.LARGE ? 24 : 20;
+
+/**
+ * Returns the default colorTheme for buttons and the close button based on the
+ * banner variant. Dark variant uses 'negative'; light variant uses standard colors.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {{ button: string, onClose: string, secondaryButton: string }}
+ */
+exports.getDefaultIconSize = getDefaultIconSize;
+const getDefaultButtonColorTheme = variant => {
+  const isDark = variant === _constants.VARIANTS.DARK;
+  return {
+    button: isDark ? 'negative' : 'secondary',
+    onClose: isDark ? 'negative' : 'gray',
+    secondaryButton: isDark ? 'negative' : 'secondary'
+  };
+};
+
+/**
+ * Returns the UTLabel variant and weight for the main text (children) based on
+ * the banner size.
+ * @param {string} size - One of SIZES values.
+ * @returns {{ variant: string, weight: string }}
+ */
+exports.getDefaultButtonColorTheme = getDefaultButtonColorTheme;
+const getLabelStyles = size => {
+  var _SIZES$LARGE$SIZES$ME;
+  return (_SIZES$LARGE$SIZES$ME = {
+    [_constants.SIZES.LARGE]: {
+      titleVariant: 'title3',
+      descriptionVariant: 'body'
+    },
+    [_constants.SIZES.MEDIUM]: {
+      titleVariant: 'subtitle1',
+      descriptionVariant: 'small'
+    },
+    [_constants.SIZES.SMALL]: {
+      titleVariant: 'small',
+      descriptionVariant: 'small'
+    }
+  }[size]) !== null && _SIZES$LARGE$SIZES$ME !== void 0 ? _SIZES$LARGE$SIZES$ME : {
+    titleVariant: 'small',
+    descriptionVariant: 'small'
+  };
+};
+
+/**
+ * Returns the UTLabel colorTheme for the banner's main text content based on the
+ * banner's colorTheme and variant. Negative+light and any dark variant use light
+ * (white) text; all other combinations use dark text.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'dark').
+ * @returns {string} UTLabel colorTheme value.
+ */
+exports.getLabelStyles = getLabelStyles;
+const getLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === _constants.COLOR_THEMES.NEGATIVE) {
+    return variant === _constants.VARIANTS.LIGHT ? 'light' : 'dark';
+  }
+  return variant === _constants.VARIANTS.LIGHT ? 'dark' : 'light';
+};
+
+/**
+ * Returns the UTLabel colorTheme for the banner's secondary text content based on the
+ * banner's colorTheme and variant. Negative+light and any dark variant use light
+ * (white) text; all other combinations use gray text.
+ * @param {string} colorTheme - Banner color theme.
+ * @param {string} variant - Banner variant ('light' | 'gray').
+ * @returns {string} UTLabel colorTheme value.
+ */
+exports.getLabelColorTheme = getLabelColorTheme;
+const getSecondaryLabelColorTheme = (colorTheme, variant) => {
+  if (colorTheme === _constants.COLOR_THEMES.NEGATIVE) {
+    return variant === _constants.VARIANTS.LIGHT ? 'light' : 'gray';
+  }
+  return variant === _constants.VARIANTS.LIGHT ? 'gray' : 'light';
+};
+exports.getSecondaryLabelColorTheme = getSecondaryLabelColorTheme;

package/dist/components/UTGraph/index.js

@@ -176,7 +176,7 @@ const UTGraph = _ref => {
       crossAxisLeft,
       crossAxisRight
     } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Bars.default, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Bars.default, {
       crossAxisLeft: crossAxisLeft,
       crossAxisRight: crossAxisRight,
       dataset: dataset,

package/dist/components/UTHeader/index.js

@@ -154,8 +154,9 @@ const UTHeader = _ref => {
       height: BANNER_ICON_SIZE,
       width: BANNER_ICON_SIZE
     },
-    Icon: banner.Icon
-  }, banner.text)));
+    Icon: banner.Icon,
+    title: banner.text
+  })));
 };
 UTHeader.propTypes = {
   actions: (0, _propTypes.arrayOf)(_propTypes.object),

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',
@@ -52,6 +53,7 @@ const ID_CONSTANTS = exports.ID_CONSTANTS = {
   PINNED: 'pinned',
   POPPER: 'popper',
   SEARCH_BUTTON: 'searchButton',
+  SECONDARY_ACTION: 'secondaryAction',
   SEARCH_BUTTON_TOOLTIP: 'searchButtonTooltip',
   SEARCH_FIELD: 'searchField',
   SELECTION_COMPONENT: 'selectionComponent',
@@ -59,6 +61,7 @@ const ID_CONSTANTS = exports.ID_CONSTANTS = {
   SIDEBAR_BUTTON: 'sidebarButton',
   STATUS_MESSAGE: 'statusMessage',
   TABLE: 'table',
+  TERTIARY_ACTION: 'tertiaryAction',
   TABLE_ROW: 'tableRow',
   TITLE: 'title',
   USER_FILTER: 'userFilter',

package/dist/esm/components/UTBanner/README.md

@@ -2,14 +2,47 @@
 
 ### Description
 
-This component displays a banner with information
+Displays a banner with contextual information. Supports multiple color themes, sizes, icon/button placement, and optional close action.
 
 ## Props
 
-| Name       | Type             | Default | Description                                                                 |
-| ---------- | ---------------- | ------- | --------------------------------------------------------------------------- |
-| children   | element          |         | The contents that will be rendered inside the component.                    |
-| classes    | object of string |         | Classes returned by UTBanner's own [theme](./theme.js#L40) `retrieveStyle`. |
-| classNames | object of string |         | Additional classes.                                                         |
-| Icon       | element          |         | Icon to be displayed at the left side of the banner.                        |
-| iconProps  | object           |         | Props to be passed onto the rendered icon.                                  |
+| Name              | Type                                                                              | Default        | Description                                                                 |
+| ----------------- | --------------------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------- |
+| button            | object (UTButton props)                                                           |                | Primary action button. All UTButton props are accepted.                      |
+| buttonPlacement   | `'horizontal'` \| `'vertical'`                                                    | `'horizontal'` | Alignment between the text group and the buttons group.                      |
+| category          | string                                                                            |                | Optional category label shown above the main text (xsmall, uppercase, gray). |
+| children          | node                                                                              |                | Main text content rendered inside the banner.                                |
+| classes           | object of string                                                                  |                | Classes returned by UTBanner's own [theme](./theme.js) `retrieveStyle`.     |
+| classNames        | object of string                                                                  |                | Additional classes merged with the themed classes.                           |
+| colorTheme        | `'error'` \| `'gray'` \| `'information'` \| `'negative'` \| `'primary'` \| `'success'` \| `'warning'` \| `'white'` | `'gray'` | Color theme that determines the banner background.          |
+| helpText          | string                                                                            |                | Optional secondary text shown below the main content (small, gray).          |
+| Icon              | element type                                                                      |                | Icon component rendered at the start of the banner.                          |
+| iconPlacement     | `'horizontal'` \| `'vertical'`                                                    | `'horizontal'` | Alignment between the icon and the text group.                               |
+| iconProps         | object                                                                            |                | Props passed to the `Icon` component.                                        |
+| onClose           | func                                                                              |                | If provided, renders a close button (gray, small, IconX) at the end.         |
+| secondaryButton   | object (UTButton props)                                                           |                | Secondary action button. Renders as `variant="text"` by default.             |
+| size              | `'small'` \| `'medium'` \| `'large'`                                              | `'medium'`     | Controls padding, gap, and icon size.                                        |
+| variant           | `'light'` \| `'dark'`                                                             | `'light'`      | Light or dark tint of the color theme.                                       |
+
+## Usage examples
+
+```jsx
+// Basic
+<UTBanner>Your account has been updated.</UTBanner>
+
+// With color theme and close
+<UTBanner colorTheme="success" onClose={() => dismiss()}>
+  Your changes were saved successfully.
+</UTBanner>
+
+// With category, helpText and actions
+<UTBanner
+  category="Alert"
+  colorTheme="warning"
+  helpText="Contact support if the issue persists."
+  button={{ children: 'Retry', onClick: handleRetry }}
+  secondaryButton={{ children: 'Dismiss', onClick: handleDismiss }}
+>
+  Something went wrong while loading your data.
+</UTBanner>
+```