@widergy/energy-ui 3.164.0 → 3.165.1

package/CHANGELOG.md

@@ -1,14 +1,25 @@
-# [3.164.0](https://github.com/widergy/energy-ui/compare/v3.163.0...v3.164.0) (2026-06-09)
+## [3.165.1](https://github.com/widergy/energy-ui/compare/v3.165.0...v3.165.1) (2026-06-12)
 
 
 ### Bug Fixes
 
-* testid fix ([#816](https://github.com/widergy/energy-ui/issues/816)) ([0285aa9](https://github.com/widergy/energy-ui/commit/0285aa9c2f2fb10dd5a4a6a54788c2d9ea1760d5))
+* added prop position to snackbar ([#818](https://github.com/widergy/energy-ui/issues/818)) ([676e43c](https://github.com/widergy/energy-ui/commit/676e43c4d625578b074506867879b0b8bdbe75ea))
 
+# [3.165.0](https://github.com/widergy/energy-ui/compare/v3.164.0...v3.165.0) (2026-06-10)
 
-### Features
+### Novedades y Mejoras
+
+* Se incorpora un nuevo componente de notificaciones emergentes que permite mostrar mensajes informativos, de éxito, advertencia o error con estilos visuales configurables, soporte de íconos automáticos, acciones interactivas y cierre automático. Reemplaza y supera al componente de alertas anterior, adaptándose al diseño de cada entorno. [#813](https://github.com/widergy/Energy-UI/pull/813) [DIS-1106](https://widergy.atlassian.net/browse/DIS-1106)
+
+# [3.164.0](https://github.com/widergy/energy-ui/compare/v3.163.0...v3.164.0) (2026-06-09)
+
+### Novedades y Mejoras
+
+* Los campos de búsqueda y selección de fechas ahora son reconocibles por herramientas de pruebas automatizadas, mejorando la cobertura y confiabilidad del proceso de validación de la plataforma. [#807](https://github.com/widergy/Energy-UI/pull/807) [#816](https://github.com/widergy/Energy-UI/pull/816) [AUTO-257](https://widergy.atlassian.net/browse/AUTO-257)
+
+### Correcciones
 
-* [AUTO-257] Add test ids to management search ([#807](https://github.com/widergy/energy-ui/issues/807)) ([655afe4](https://github.com/widergy/energy-ui/commit/655afe42a3170099e1bcbb0c971c77fe549fdbb2))
+* Mejoras internas de la plataforma. [`6431431`](https://github.com/widergy/Energy-UI/commit/6431431) [`f0e705e`](https://github.com/widergy/Energy-UI/commit/f0e705e)
 
 # [3.163.0](https://github.com/widergy/energy-ui/compare/v3.162.1...v3.163.0) (2026-06-08)
 

package/dist/components/UTAlert/README.md

@@ -0,0 +1,100 @@
+# UTAlert
+
+Componente de alerta tipo Snackbar para mostrar notificaciones al usuario. Soporta cuatro tipos (success, error, info, warning), markdown en el mensaje y posicionamiento configurable. Se usa habitualmente junto al `AlertHandler` singleton para disparar alertas desde cualquier lugar de la aplicación.
+
+---
+
+## Props
+
+### `content` (shape)
+
+Objeto que controla el estado y la apariencia de la alerta.
+
+| Campo | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `message` | `string` | `undefined` | Mensaje a mostrar. Soporta markdown. |
+| `open` | `boolean` | `false` | Controla si la alerta está visible. |
+| `type` | `'error' \| 'info' \| 'success' \| 'warning'` | `undefined` | Tipo de alerta. Determina el ícono y el color. |
+| `timeDuration` | `number` | `undefined` | Duración en ms antes del cierre automático. |
+| `topRight` | `boolean` | `false` | Si es `true`, aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda. |
+| `onClose` | `function` | `undefined` | Callback ejecutado al cerrar la alerta. |
+
+### Props de nivel superior
+
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `withoutIcon` | `boolean` | `undefined` | Si es `true`, oculta el ícono del tipo de alerta. |
+| `classes` | `object` | `{}` | Clases CSS personalizadas para sobrescribir estilos del tema. |
+| `closeDataTestId` | `string` | `undefined` | Identificador de test para el botón de cierre. |
+| `labelDataTestId` | `string` | `undefined` | Identificador de test para el label del mensaje. |
+
+---
+
+## Uso básico
+
+```jsx
+import { UTAlert } from '@widergy/energy-ui';
+
+const MiComponente = () => (
+  <UTAlert
+    content={{
+      message: 'Operación completada exitosamente.',
+      open: true,
+      type: 'success'
+    }}
+  />
+);
+```
+
+---
+
+## Uso con AlertHandler
+
+El patrón recomendado es inicializar `AlertHandler` una sola vez en el componente raíz y luego llamarlo desde cualquier parte de la aplicación.
+
+```jsx
+import { useEffect, useState } from 'react';
+import { UTAlert, AlertHandler } from '@widergy/energy-ui';
+
+const AppRoot = () => {
+  const [alert, setAlert] = useState();
+
+  useEffect(() => {
+    AlertHandler.init({ setState: setAlert });
+  }, []);
+
+  return (
+    <>
+      <UTAlert content={alert} />
+      {/* resto de la app */}
+    </>
+  );
+};
+
+// Desde cualquier otro componente o servicio:
+AlertHandler.success('Guardado correctamente.');
+AlertHandler.error('Ocurrió un error. Intentá nuevamente.');
+AlertHandler.info('Hay actualizaciones disponibles.');
+AlertHandler.warning('Esta acción no se puede deshacer.');
+```
+
+### Métodos de AlertHandler
+
+| Método | Descripción |
+| ------ | ----------- |
+| `init({ setState, duration })` | Inicializa el handler. `setState` es el setter de React. `duration` es la duración por defecto en ms (default: 5000). |
+| `success(message, topRight?, timeDuration?)` | Muestra una alerta de éxito. |
+| `error(message, topRight?, timeDuration?)` | Muestra una alerta de error. |
+| `info(message, topRight?, timeDuration?)` | Muestra una alerta informativa. |
+| `warning(message, topRight?, timeDuration?)` | Muestra una alerta de advertencia. |
+
+---
+
+## Variantes de tipo
+
+| Tipo | Ícono | Descripción |
+| ---- | ----- | ----------- |
+| `success` | CheckCircle | Para operaciones exitosas. |
+| `error` | Error | Para fallas o errores críticos. |
+| `info` | Info | Para notificaciones informativas. |
+| `warning` | Warning | Para acciones que requieren atención. |

package/dist/components/UTAlert/stories/UTAlert.stories.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TopRight = exports.Test = exports.SinIcono = exports.Playground = exports.ConMarkdown = exports.AllTypes = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _UTButton = _interopRequireDefault(require("../../UTButton"));
+var _ = _interopRequireDefault(require(".."));
+var _storiesConstants = require("./storiesConstants");
+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 composeContent = _ref => {
+  let {
+    message,
+    open,
+    timeDuration,
+    topRight,
+    type
+  } = _ref;
+  return {
+    message,
+    open,
+    timeDuration,
+    topRight,
+    type
+  };
+};
+const AllTypesDemo = () => {
+  const [alertState, setAlertState] = (0, _react.useState)({
+    open: false
+  });
+  const showAlert = type => setAlertState({
+    message: "Alerta de tipo: ".concat(type),
+    open: true,
+    type
+  });
+  const handleClose = () => setAlertState(prev => ({
+    ...prev,
+    open: false
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px'
+    }
+  }, _storiesConstants.ALERT_TYPES.map(type => /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    key: type,
+    onClick: () => showAlert(type),
+    variant: "outlined"
+  }, type)), /*#__PURE__*/_react.default.createElement(_.default, {
+    content: {
+      ...alertState,
+      onClose: handleClose
+    }
+  }));
+};
+var _default = exports.default = {
+  args: {
+    message: 'Este es un mensaje de alerta de ejemplo.',
+    open: true,
+    timeDuration: undefined,
+    topRight: false,
+    type: 'success',
+    withoutIcon: false
+  },
+  argTypes: _storiesConstants.ARG_TYPES,
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['classes', 'closeDataTestId', 'labelDataTestId']
+    },
+    docs: {
+      description: {
+        component: 'Componente de alerta tipo Snackbar para mostrar notificaciones al usuario. Soporta cuatro tipos (success, error, info, warning), markdown en el mensaje y posicionamiento configurable. Se usa habitualmente junto al `AlertHandler` singleton para disparar alertas desde cualquier lugar de la aplicación.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTAlert'
+};
+const Playground = exports.Playground = {
+  name: 'Playground',
+  render: _ref2 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+const AllTypes = exports.AllTypes = {
+  name: 'Todos los Tipos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hacé clic en cada botón para ver el tipo de alerta correspondiente.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/_react.default.createElement(AllTypesDemo, null)
+};
+const TopRight = exports.TopRight = {
+  args: {
+    message: 'Esta alerta aparece en la esquina superior derecha.',
+    open: true,
+    topRight: true,
+    type: 'info'
+  },
+  name: 'Posición Superior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `topRight: true` en el objeto `content`, la alerta aparece en la esquina superior derecha con animación de slide desde la derecha.'
+      }
+    }
+  },
+  render: _ref3 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref3;
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+const SinIcono = exports.SinIcono = {
+  args: {
+    message: 'Alerta sin ícono de tipo.',
+    open: true,
+    type: 'warning',
+    withoutIcon: true
+  },
+  name: 'Sin Ícono',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `withoutIcon: true` se oculta el ícono del tipo de alerta.'
+      }
+    }
+  },
+  render: _ref4 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref4;
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+const ConMarkdown = exports.ConMarkdown = {
+  args: {
+    message: 'Operación completada. El archivo **reporte_enero.pdf** fue generado *exitosamente*.',
+    open: true,
+    type: 'success'
+  },
+  name: 'Con Markdown',
+  parameters: {
+    docs: {
+      description: {
+        story: 'El campo `message` soporta sintaxis markdown. El texto se renderiza a través de `UTLabel` con `withMarkdown`.'
+      }
+    }
+  },
+  render: _ref5 => {
+    let {
+      message,
+      open,
+      timeDuration,
+      topRight,
+      type,
+      withoutIcon
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement(_.default, {
+      content: composeContent({
+        message,
+        open,
+        timeDuration,
+        topRight,
+        type
+      }),
+      withoutIcon: withoutIcon
+    });
+  }
+};
+const Test = exports.Test = {
+  name: 'Test',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Story para el Test Runner. Renderiza los cuatro tipos de alerta simultáneamente.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _storiesConstants.ALERT_TYPES.map(type => /*#__PURE__*/_react.default.createElement(_.default, {
+    key: type,
+    content: {
+      message: "Alerta ".concat(type),
+      open: true,
+      type
+    }
+  })))
+};

package/dist/components/UTAlert/stories/storiesConstants.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARG_TYPES = exports.ALERT_TYPES = void 0;
+var _utils = require("stories/utils");
+const ALERT_TYPES = exports.ALERT_TYPES = ['error', 'info', 'success', 'warning'];
+const ARG_TYPES = exports.ARG_TYPES = {
+  closeDataTestId: {
+    control: false,
+    description: 'Identificador de test para el botón de cierre.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  labelDataTestId: {
+    control: false,
+    description: 'Identificador de test para el label del mensaje.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  message: {
+    control: 'text',
+    description: 'Mensaje a mostrar en la alerta. Pertenece al objeto `content`. Soporta markdown.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  open: {
+    control: 'boolean',
+    description: 'Controla si la alerta está visible. Pertenece al objeto `content`.',
+    table: {
+      defaultValue: {
+        summary: 'false'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  timeDuration: {
+    control: 'number',
+    description: 'Duración en milisegundos antes del cierre automático. Pertenece al objeto `content`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  topRight: {
+    control: 'boolean',
+    description: 'Si es `true`, la alerta aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda. Pertenece al objeto `content`.',
+    table: {
+      defaultValue: {
+        summary: 'false'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  type: {
+    control: 'select',
+    description: 'Tipo de alerta. Determina el ícono y el color. Pertenece al objeto `content`.',
+    options: ALERT_TYPES,
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(ALERT_TYPES)
+      }
+    }
+  },
+  withoutIcon: {
+    control: 'boolean',
+    description: 'Si es `true`, oculta el ícono del tipo de alerta.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  }
+};

package/dist/components/UTBanner/index.js

@@ -27,6 +27,7 @@ const UTBanner = _ref => {
     colorTheme = _constants.DEFAULT_PROPS.colorTheme,
     dataTestId,
     description,
+    descriptionProps,
     helpText,
     Icon,
     iconPlacement = _constants.DEFAULT_PROPS.iconPlacement,
@@ -35,6 +36,7 @@ const UTBanner = _ref => {
     secondaryButton,
     size = _constants.DEFAULT_PROPS.size,
     title,
+    titleProps,
     variant = _constants.DEFAULT_PROPS.variant
   } = _ref;
   const isVerticalButton = buttonPlacement === _constants.PLACEMENTS.VERTICAL;
@@ -86,16 +88,18 @@ const UTBanner = _ref => {
     dataTestId: dataTestId ? "".concat(dataTestId, ".category.").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
     variant: "xsmall",
     weight: "medium"
-  }, category), !!title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, category), !!title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: labelColorTheme,
-    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.TITLE, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
     variant: titleVariant,
     weight: "medium"
-  }, title), !!description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, titleProps, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.TITLE, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined
+  }), title), !!description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: labelColorTheme,
-    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.DESCRIPTION, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
     variant: descriptionVariant
-  }, description), !!helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, descriptionProps, {
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.DESCRIPTION, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined
+  }), description), !!helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: secondaryLabelColorTheme,
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.HELP_TEXT, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
     variant: "small"
@@ -127,6 +131,7 @@ UTBanner.propTypes = {
   colorTheme: (0, _propTypes.oneOf)(Object.values(_constants.COLOR_THEMES)),
   dataTestId: _propTypes.string,
   description: _propTypes.string,
+  descriptionProps: _propTypes.object,
   helpText: _propTypes.string,
   Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
   iconPlacement: (0, _propTypes.oneOf)(Object.values(_constants.PLACEMENTS)),
@@ -135,6 +140,7 @@ UTBanner.propTypes = {
   secondaryButton: _types.buttonType,
   size: (0, _propTypes.oneOf)(Object.values(_constants.SIZES)),
   title: _propTypes.string,
+  titleProps: _propTypes.object,
   variant: (0, _propTypes.oneOf)(Object.values(_constants.VARIANTS))
 };
 var _default = exports.default = UTBanner;

package/dist/components/UTBanner/stories/UTBanner.stories.js

@@ -47,6 +47,10 @@ var _default = exports.default = {
       control: 'text',
       description: 'Optional body text shown below the title (small).'
     },
+    descriptionProps: {
+      control: 'object',
+      description: 'Extra props spread into the UTLabel that renders the description.'
+    },
     helpText: {
       control: 'text',
       description: 'Optional secondary text shown below the description (small, gray).'
@@ -81,6 +85,10 @@ var _default = exports.default = {
       control: 'text',
       description: 'Main text of the banner.'
     },
+    titleProps: {
+      control: 'object',
+      description: 'Extra props spread into the UTLabel that renders the title.'
+    },
     variant: {
       control: {
         type: 'select'