@widergy/energy-ui 3.165.0 → 3.165.1

package/CHANGELOG.md

@@ -1,9 +1,15 @@
-# [3.165.0](https://github.com/widergy/energy-ui/compare/v3.164.0...v3.165.0) (2026-06-10)
+## [3.165.1](https://github.com/widergy/energy-ui/compare/v3.165.0...v3.165.1) (2026-06-12)
 
 
-### Features
+### Bug Fixes
+
+* 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)
+
+### Novedades y Mejoras
 
-* [DIS-1106] utsnackbar ([#813](https://github.com/widergy/energy-ui/issues/813)) ([cd5423d](https://github.com/widergy/energy-ui/commit/cd5423d419f87c44b0cc698fa9df1d338dab7b4a))
+* 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)
 

package/dist/components/UTSnackbar/README.md

@@ -18,7 +18,7 @@ Componente de notificación tipo Snackbar. Soporta cinco `colorTheme`: los cuatr
 | `description` | `string` | `undefined` | Texto secundario debajo del mensaje principal. |
 | `icon` | `string` | `undefined` | Nombre de ícono Tabler para sobreescribir el ícono por defecto (ej: `IconStar`). |
 | `withoutIcon` | `boolean` | `undefined` | Oculta el ícono. |
-| `topRight` | `boolean` | `false` | Si es `true`, aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda. |
+| `position` | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | Posición del snackbar en la pantalla. Determina también la dirección del slide de entrada. |
 | `timeDuration` | `number` | `undefined` | Duración en ms antes del cierre automático. |
 | `onClose` | `function` | `undefined` | Callback al cerrar el snackbar. |
 | `classes` | `object` | `{}` | Clases CSS personalizadas para sobrescribir estilos del tema. |

package/dist/components/UTSnackbar/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VARIANT_CLASS_MAP = exports.VARIANTS = exports.LABEL_COLOR_MAP = exports.ICON_NAME_MAP = exports.DEFAULT_PROPS = exports.COLOR_THEMES = exports.ACTION_BUTTON_CONFIG_MAP = void 0;
+exports.VARIANT_CLASS_MAP = exports.VARIANTS = exports.POSITIONS = exports.LABEL_COLOR_MAP = exports.ICON_NAME_MAP = exports.DEFAULT_PROPS = exports.COLOR_THEMES = exports.ACTION_BUTTON_CONFIG_MAP = void 0;
 var _Palette = require("../../constants/Palette");
 const COLOR_THEMES = exports.COLOR_THEMES = {
   error: 'error',
@@ -16,10 +16,16 @@ const VARIANTS = exports.VARIANTS = {
   dark: 'dark',
   light: 'light'
 };
+const POSITIONS = exports.POSITIONS = {
+  bottomLeft: 'bottomLeft',
+  bottomRight: 'bottomRight',
+  topLeft: 'topLeft',
+  topRight: 'topRight'
+};
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   colorTheme: COLOR_THEMES.success,
   open: false,
-  topRight: false,
+  position: POSITIONS.bottomLeft,
   variant: VARIANTS.dark
 };
 const VARIANT_CLASS_MAP = exports.VARIANT_CLASS_MAP = {

package/dist/components/UTSnackbar/index.js

@@ -14,6 +14,7 @@ var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _testIds = require("../../constants/testIds");
 var _constants = require("./constants");
+var _utils = require("./utils");
 var _theme = require("./theme");
 var _types = require("./types");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -29,9 +30,9 @@ const UTSnackbar = _ref => {
     message,
     onClose,
     open = _constants.DEFAULT_PROPS.open,
+    position = _constants.DEFAULT_PROPS.position,
     secondaryButton,
     timeDuration,
-    topRight = _constants.DEFAULT_PROPS.topRight,
     variant = _constants.DEFAULT_PROPS.variant,
     withoutIcon
   } = _ref;
@@ -45,13 +46,10 @@ const UTSnackbar = _ref => {
   const labelColorConfig = _constants.LABEL_COLOR_MAP[variantClassKey] || _constants.LABEL_COLOR_MAP.successDark;
   const actionButtonConfig = _constants.ACTION_BUTTON_CONFIG_MAP[variantClassKey];
   const iconName = withoutIcon ? null : icon || _constants.ICON_NAME_MAP[colorTheme];
-  const anchor = {
-    horizontal: topRight ? 'right' : 'left',
-    vertical: topRight ? 'top' : 'bottom'
-  };
-  const transition = {
-    direction: topRight ? 'left' : 'up'
-  };
+  const {
+    anchor,
+    transition
+  } = (0, _utils.getAnchorAndTransition)(position);
   const testIds = {
     close: dataTestId ? "".concat(dataTestId, ".close") : undefined,
     description: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.DESCRIPTION, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
@@ -127,9 +125,9 @@ UTSnackbar.propTypes = {
   message: _propTypes.string,
   onClose: _propTypes.func,
   open: _propTypes.bool,
+  position: (0, _propTypes.oneOf)(Object.values(_constants.POSITIONS)),
   secondaryButton: _types.buttonType,
   timeDuration: _propTypes.number,
-  topRight: _propTypes.bool,
   variant: (0, _propTypes.oneOf)(Object.values(_constants.VARIANTS)),
   withoutIcon: _propTypes.bool
 };

package/dist/components/UTSnackbar/stories/UTSnackbar.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WhiteVariants = exports.TopRight = exports.Test = exports.SinIcono = exports.SemanticLight = exports.SemanticDark = exports.Playground = exports.ConMarkdown = exports.ConDescripcion = exports.ConAcciones = exports.ConAccionPrimaria = exports.AllVariants = void 0;
+exports.default = exports.WhiteVariants = exports.TopRight = exports.TopLeft = exports.Test = exports.SinIcono = exports.SemanticLight = exports.SemanticDark = exports.Playground = exports.ConMarkdown = exports.ConDescripcion = exports.ConAcciones = exports.ConAccionPrimaria = exports.BottomRight = exports.AllVariants = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _UTButton = _interopRequireDefault(require("../../UTButton"));
 var _ = _interopRequireDefault(require(".."));
@@ -88,8 +88,8 @@ var _default = exports.default = {
     message: 'Operación realizada exitosamente.',
     open: true,
     colorTheme: _constants.DEFAULT_PROPS.colorTheme,
+    position: _constants.DEFAULT_PROPS.position,
     variant: _constants.DEFAULT_PROPS.variant,
-    topRight: _constants.DEFAULT_PROPS.topRight,
     withoutIcon: false,
     icon: undefined,
     timeDuration: undefined,
@@ -252,14 +252,48 @@ const TopRight = exports.TopRight = {
     message: 'Esta notificación aparece en la esquina superior derecha.',
     open: true,
     colorTheme: _constants.COLOR_THEMES.info,
-    variant: _constants.VARIANTS.dark,
-    topRight: true
+    position: _constants.POSITIONS.topRight,
+    variant: _constants.VARIANTS.dark
   },
   name: 'Posición Superior Derecha',
   parameters: {
     docs: {
       description: {
-        story: 'Con `topRight: true` el snackbar aparece en la esquina superior derecha con slide desde la derecha.'
+        story: 'Con `position="topRight"` el snackbar aparece en la esquina superior derecha con slide desde la derecha.'
+      }
+    }
+  }
+};
+const BottomRight = exports.BottomRight = {
+  args: {
+    message: 'Esta notificación aparece en la esquina inferior derecha.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.success,
+    position: _constants.POSITIONS.bottomRight,
+    variant: _constants.VARIANTS.dark
+  },
+  name: 'Posición Inferior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="bottomRight"` el snackbar aparece en la esquina inferior derecha con slide desde abajo.'
+      }
+    }
+  }
+};
+const TopLeft = exports.TopLeft = {
+  args: {
+    message: 'Esta notificación aparece en la esquina superior izquierda.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.warning,
+    position: _constants.POSITIONS.topLeft,
+    variant: _constants.VARIANTS.dark
+  },
+  name: 'Posición Superior Izquierda',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="topLeft"` el snackbar aparece en la esquina superior izquierda con slide desde arriba.'
       }
     }
   }

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

@@ -128,15 +128,16 @@ const ARG_TYPES = exports.ARG_TYPES = {
       }
     }
   },
-  topRight: {
-    control: 'boolean',
-    description: 'Si es `true`, el snackbar aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda.',
+  position: {
+    control: 'select',
+    description: 'Posición del snackbar en la pantalla.',
+    options: Object.values(_constants.POSITIONS),
     table: {
       defaultValue: {
-        summary: 'false'
+        summary: _constants.POSITIONS.bottomLeft
       },
       type: {
-        summary: 'boolean'
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.POSITIONS))
       }
     }
   },

package/dist/components/UTSnackbar/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAnchorAndTransition = void 0;
+var _constants = require("./constants");
+const ANCHOR_TRANSITION_MAP = {
+  [_constants.POSITIONS.bottomLeft]: {
+    anchor: {
+      horizontal: 'left',
+      vertical: 'bottom'
+    },
+    transition: {
+      direction: 'up'
+    }
+  },
+  [_constants.POSITIONS.bottomRight]: {
+    anchor: {
+      horizontal: 'right',
+      vertical: 'bottom'
+    },
+    transition: {
+      direction: 'up'
+    }
+  },
+  [_constants.POSITIONS.topLeft]: {
+    anchor: {
+      horizontal: 'left',
+      vertical: 'top'
+    },
+    transition: {
+      direction: 'down'
+    }
+  },
+  [_constants.POSITIONS.topRight]: {
+    anchor: {
+      horizontal: 'right',
+      vertical: 'top'
+    },
+    transition: {
+      direction: 'left'
+    }
+  }
+};
+
+/**
+ * Devuelve anchorOrigin y TransitionProps para el Snackbar según la posición indicada.
+ * @param {string} position - Posición del snackbar (bottomLeft, bottomRight, topLeft, topRight).
+ * @returns {{ anchor: { horizontal: string, vertical: string }, transition: { direction: string } }}
+ */
+const getAnchorAndTransition = position => ANCHOR_TRANSITION_MAP[position] || ANCHOR_TRANSITION_MAP[_constants.POSITIONS.bottomLeft];
+exports.getAnchorAndTransition = getAnchorAndTransition;

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

@@ -18,7 +18,7 @@ Componente de notificación tipo Snackbar. Soporta cinco `colorTheme`: los cuatr
 | `description` | `string` | `undefined` | Texto secundario debajo del mensaje principal. |
 | `icon` | `string` | `undefined` | Nombre de ícono Tabler para sobreescribir el ícono por defecto (ej: `IconStar`). |
 | `withoutIcon` | `boolean` | `undefined` | Oculta el ícono. |
-| `topRight` | `boolean` | `false` | Si es `true`, aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda. |
+| `position` | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | Posición del snackbar en la pantalla. Determina también la dirección del slide de entrada. |
 | `timeDuration` | `number` | `undefined` | Duración en ms antes del cierre automático. |
 | `onClose` | `function` | `undefined` | Callback al cerrar el snackbar. |
 | `classes` | `object` | `{}` | Clases CSS personalizadas para sobrescribir estilos del tema. |

package/dist/esm/components/UTSnackbar/constants.js

@@ -10,10 +10,16 @@ export const VARIANTS = {
   dark: 'dark',
   light: 'light'
 };
+export const POSITIONS = {
+  bottomLeft: 'bottomLeft',
+  bottomRight: 'bottomRight',
+  topLeft: 'topLeft',
+  topRight: 'topRight'
+};
 export const DEFAULT_PROPS = {
   colorTheme: COLOR_THEMES.success,
   open: false,
-  topRight: false,
+  position: POSITIONS.bottomLeft,
   variant: VARIANTS.dark
 };
 export const VARIANT_CLASS_MAP = {

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

@@ -8,7 +8,8 @@ import UTIcon from '../UTIcon';
 import UTLabel from '../UTLabel';
 import WithTheme from '../WithTheme';
 import { ID_CONSTANTS } from '../../constants/testIds';
-import { ACTION_BUTTON_CONFIG_MAP, COLOR_THEMES, DEFAULT_PROPS, ICON_NAME_MAP, LABEL_COLOR_MAP, VARIANT_CLASS_MAP, VARIANTS } from './constants';
+import { ACTION_BUTTON_CONFIG_MAP, COLOR_THEMES, DEFAULT_PROPS, ICON_NAME_MAP, LABEL_COLOR_MAP, POSITIONS, VARIANT_CLASS_MAP, VARIANTS } from './constants';
+import { getAnchorAndTransition } from './utils';
 import { retrieveMuiTheme } from './theme';
 import { buttonType } from './types';
 import styles from './styles.module.scss';
@@ -22,9 +23,9 @@ const UTSnackbar = _ref => {
     message,
     onClose,
     open = DEFAULT_PROPS.open,
+    position = DEFAULT_PROPS.position,
     secondaryButton,
     timeDuration,
-    topRight = DEFAULT_PROPS.topRight,
     variant = DEFAULT_PROPS.variant,
     withoutIcon
   } = _ref;
@@ -38,13 +39,10 @@ const UTSnackbar = _ref => {
   const labelColorConfig = LABEL_COLOR_MAP[variantClassKey] || LABEL_COLOR_MAP.successDark;
   const actionButtonConfig = ACTION_BUTTON_CONFIG_MAP[variantClassKey];
   const iconName = withoutIcon ? null : icon || ICON_NAME_MAP[colorTheme];
-  const anchor = {
-    horizontal: topRight ? 'right' : 'left',
-    vertical: topRight ? 'top' : 'bottom'
-  };
-  const transition = {
-    direction: topRight ? 'left' : 'up'
-  };
+  const {
+    anchor,
+    transition
+  } = getAnchorAndTransition(position);
   const testIds = {
     close: dataTestId ? "".concat(dataTestId, ".close") : undefined,
     description: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.DESCRIPTION, ".").concat(ID_CONSTANTS.LABEL) : undefined,
@@ -120,9 +118,9 @@ UTSnackbar.propTypes = {
   message: string,
   onClose: func,
   open: bool,
+  position: oneOf(Object.values(POSITIONS)),
   secondaryButton: buttonType,
   timeDuration: number,
-  topRight: bool,
   variant: oneOf(Object.values(VARIANTS)),
   withoutIcon: bool
 };

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

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useState } from 'react';
 import UTButton from '../../UTButton';
 import UTSnackbar from '..';
-import { COLOR_THEMES, DEFAULT_PROPS, VARIANTS } from '../constants';
+import { COLOR_THEMES, DEFAULT_PROPS, POSITIONS, VARIANTS } from '../constants';
 import { ARG_TYPES } from './storiesConstants';
 const SEMANTIC_COLOR_THEMES = [COLOR_THEMES.success, COLOR_THEMES.error, COLOR_THEMES.warning, COLOR_THEMES.info];
 const AllTypesDemo = () => {
@@ -80,8 +80,8 @@ export default {
     message: 'Operación realizada exitosamente.',
     open: true,
     colorTheme: DEFAULT_PROPS.colorTheme,
+    position: DEFAULT_PROPS.position,
     variant: DEFAULT_PROPS.variant,
-    topRight: DEFAULT_PROPS.topRight,
     withoutIcon: false,
     icon: undefined,
     timeDuration: undefined,
@@ -244,14 +244,48 @@ export const TopRight = {
     message: 'Esta notificación aparece en la esquina superior derecha.',
     open: true,
     colorTheme: COLOR_THEMES.info,
-    variant: VARIANTS.dark,
-    topRight: true
+    position: POSITIONS.topRight,
+    variant: VARIANTS.dark
   },
   name: 'Posición Superior Derecha',
   parameters: {
     docs: {
       description: {
-        story: 'Con `topRight: true` el snackbar aparece en la esquina superior derecha con slide desde la derecha.'
+        story: 'Con `position="topRight"` el snackbar aparece en la esquina superior derecha con slide desde la derecha.'
+      }
+    }
+  }
+};
+export const BottomRight = {
+  args: {
+    message: 'Esta notificación aparece en la esquina inferior derecha.',
+    open: true,
+    colorTheme: COLOR_THEMES.success,
+    position: POSITIONS.bottomRight,
+    variant: VARIANTS.dark
+  },
+  name: 'Posición Inferior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="bottomRight"` el snackbar aparece en la esquina inferior derecha con slide desde abajo.'
+      }
+    }
+  }
+};
+export const TopLeft = {
+  args: {
+    message: 'Esta notificación aparece en la esquina superior izquierda.',
+    open: true,
+    colorTheme: COLOR_THEMES.warning,
+    position: POSITIONS.topLeft,
+    variant: VARIANTS.dark
+  },
+  name: 'Posición Superior Izquierda',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="topLeft"` el snackbar aparece en la esquina superior izquierda con slide desde arriba.'
       }
     }
   }

package/dist/esm/components/UTSnackbar/stories/storiesConstants.js

@@ -1,5 +1,5 @@
 import { joinArgTypes } from 'stories/utils';
-import { COLOR_THEMES, VARIANTS } from '../constants';
+import { COLOR_THEMES, POSITIONS, VARIANTS } from '../constants';
 export const ARG_TYPES = {
   button: {
     control: 'object',
@@ -122,15 +122,16 @@ export const ARG_TYPES = {
       }
     }
   },
-  topRight: {
-    control: 'boolean',
-    description: 'Si es `true`, el snackbar aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda.',
+  position: {
+    control: 'select',
+    description: 'Posición del snackbar en la pantalla.',
+    options: Object.values(POSITIONS),
     table: {
       defaultValue: {
-        summary: 'false'
+        summary: POSITIONS.bottomLeft
       },
       type: {
-        summary: 'boolean'
+        summary: joinArgTypes(Object.values(POSITIONS))
       }
     }
   },

package/dist/esm/components/UTSnackbar/utils.js

@@ -0,0 +1,46 @@
+import { POSITIONS } from './constants';
+const ANCHOR_TRANSITION_MAP = {
+  [POSITIONS.bottomLeft]: {
+    anchor: {
+      horizontal: 'left',
+      vertical: 'bottom'
+    },
+    transition: {
+      direction: 'up'
+    }
+  },
+  [POSITIONS.bottomRight]: {
+    anchor: {
+      horizontal: 'right',
+      vertical: 'bottom'
+    },
+    transition: {
+      direction: 'up'
+    }
+  },
+  [POSITIONS.topLeft]: {
+    anchor: {
+      horizontal: 'left',
+      vertical: 'top'
+    },
+    transition: {
+      direction: 'down'
+    }
+  },
+  [POSITIONS.topRight]: {
+    anchor: {
+      horizontal: 'right',
+      vertical: 'top'
+    },
+    transition: {
+      direction: 'left'
+    }
+  }
+};
+
+/**
+ * Devuelve anchorOrigin y TransitionProps para el Snackbar según la posición indicada.
+ * @param {string} position - Posición del snackbar (bottomLeft, bottomRight, topLeft, topRight).
+ * @returns {{ anchor: { horizontal: string, vertical: string }, transition: { direction: string } }}
+ */
+export const getAnchorAndTransition = position => ANCHOR_TRANSITION_MAP[position] || ANCHOR_TRANSITION_MAP[POSITIONS.bottomLeft];

package/package.json

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