@widergy/energy-ui 3.159.0 → 3.160.0

package/CHANGELOG.md

@@ -1,16 +1,23 @@
-# [3.159.0](https://github.com/widergy/energy-ui/compare/v3.158.1...v3.159.0) (2026-06-01)
+# [3.160.0](https://github.com/widergy/energy-ui/compare/v3.159.0...v3.160.0) (2026-06-02)
 
 
 ### Features
 
-* [AXAG-276] bundle size ([#801](https://github.com/widergy/energy-ui/issues/801)) ([8d9cc0d](https://github.com/widergy/energy-ui/commit/8d9cc0d75f3176ad366a41bdb03c59982537003e))
+* [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))
 
-## [3.158.1](https://github.com/widergy/energy-ui/compare/v3.158.0...v3.158.1) (2026-06-01)
+# [3.159.0](https://github.com/widergy/energy-ui/compare/v3.158.1...v3.159.0) (2026-06-01)
 
+### Novedades y Mejoras
 
-### Bug Fixes
+* Se optimizó el tamaño de la aplicación: ahora solo se cargan los recursos necesarios según lo que cada pantalla utiliza, lo que mejora los tiempos de carga y el rendimiento general. [#801](https://github.com/widergy/Energy-UI/pull/801) [AXAG-276](https://widergy.atlassian.net/browse/AXAG-276)
+* Los íconos de banderas se cargan de forma inteligente bajo demanda, evitando descargas innecesarias y reduciendo el consumo de datos. [#801](https://github.com/widergy/Energy-UI/pull/801) [AXAG-276](https://widergy.atlassian.net/browse/AXAG-276)
+* Mejoras internas de la plataforma. [#801](https://github.com/widergy/Energy-UI/pull/801) [AXAG-276](https://widergy.atlassian.net/browse/AXAG-276)
+
+## [3.158.1](https://github.com/widergy/energy-ui/compare/v3.158.0...v3.158.1) (2026-06-01)
+
+### Correcciones
 
-* moved components to deprecated ([#802](https://github.com/widergy/energy-ui/issues/802)) ([b305c18](https://github.com/widergy/energy-ui/commit/b305c185d5066725f09ed5a3b321a1feb12dcd02))
+* Mejoras internas de la plataforma. [#802](https://github.com/widergy/Energy-UI/pull/802) [`650c988`](https://github.com/widergy/Energy-UI/commit/650c988) [OUG-999](https://widergy.atlassian.net/browse/OUG-999)
 
 # [3.158.0](https://github.com/widergy/energy-ui/compare/v3.157.1...v3.158.0) (2026-05-19)
 

package/dist/components/UTButton/README.md

@@ -17,12 +17,16 @@ All these variants are defined in the component theme.
 
 ### Color Themes
 
-The color themes are defined by the component consumer and will vary accordingly.They define a set of variables (colors and opacities) that then combined with the variant will change how the buttons looks.
-The components supports an infinite amount of color themes but requieres the consumer to pass at least a `primary` one that works as a default.
+The color themes are defined by the component consumer and will vary accordingly. They define a set of variables (colors and opacities) that then combined with the variant will change how the button looks.
+The components supports an infinite amount of color themes but requires the consumer to pass at least a `primary` one that works as a default.
 
-### Icon
+### Icons
 
-The button can include an icon, which can be either from the Tabler Icons library or a custom SVG rendered as a React component. If using an icon from the Tabler Icons library, you should provide the name of the icon. Alternatively, a custom SVG can be passed directly to the component.
+The button can include up to two icons (left and right), each of which can be either a Tabler Icons name or a custom SVG React component.
+
+- **`LeftIcon`:** rendered at the start of the button content.
+- **`RightIcon`:** rendered at the end of the button content.
+- Additional props for each icon can be passed via `leftIconProps` and `rightIconProps`.
 
 ### Props
 
@@ -34,9 +38,14 @@ The button can include an icon, which can be either from the Tabler Icons librar
 | onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
 | loading              | bool                                                  | false     | If `true` a spinner is shown over the component.                               |
 | disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
-| Icon                 | node \| string                                        |           | An Icon component that can be displayed within the button.                     |
-| iconPlacement        | 'left' \| 'right'                                     | 'left'    | Indicates where the icon is placed in relation with the contents of the button |
-| showTextOnResponsive | bool                                                  | false     | If `true` and Icon is not `null` the contents of the button are not displayed. |
-| type                 | 'string'                                              |           | HTML type attribute.                                                           |
+| LeftIcon             | node \| string                                        |           | Icon rendered at the start of the button.                                      |
+| leftIconProps        | object                                                |           | Additional props to apply to the left icon.                                    |
+| RightIcon            | node \| string                                        |           | Icon rendered at the end of the button.                                        |
+| rightIconProps       | object                                                |           | Additional props to apply to the right icon.                                   |
+| hideTextOnResponsive | bool                                                  | false     | If `true` and an icon is present, the button text is hidden on mobile.         |
+| count                | number                                                |           | Number to display in a badge inside the button.                                |
+| type                 | string                                                |           | HTML type attribute.                                                           |
 | classNames           | object                                                |           | Overrides the default button theme.                                            |
 | children             | node                                                  |           | The component contents.                                                        |
+| Icon                 | node \| string                                        |           | **Deprecated.** Use `LeftIcon` or `RightIcon` instead.                        |
+| iconPlacement        | 'left' \| 'right'                                     | 'left'    | **Deprecated.** Use `LeftIcon` or `RightIcon` instead.                        |

package/dist/components/UTButton/index.js

@@ -32,8 +32,12 @@ const UTButton = _ref => {
     hideTextOnResponsive,
     Icon,
     iconPlacement,
+    LeftIcon,
+    leftIconProps,
     loading,
     onClick,
+    RightIcon,
+    rightIconProps,
     size,
     type,
     variant
@@ -47,27 +51,33 @@ const UTButton = _ref => {
     ...materialButtonClasses
   } = classes;
   const {
-    IconComponent,
-    ...iconProps
+    LeftIconComponent,
+    leftIconProps: leftIconBaseProps,
+    RightIconComponent,
+    rightIconProps: rightIconBaseProps
   } = (0, _react.useMemo)(() => (0, _utils.getIconProps)({
     className: icon,
     colorTheme,
     hasContent: !!children,
     hideTextOnResponsive,
     Icon,
+    iconPlacement,
+    LeftIcon,
+    RightIcon,
     size,
     variant
-  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, size, variant]);
-  const IconToShow = IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, iconProps);
+  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
+  const LeftIconToShow = LeftIconComponent && /*#__PURE__*/_react.default.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
+  const RightIconToShow = RightIconComponent && /*#__PURE__*/_react.default.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
   const counterColorTheme = (0, _utils.getCounterColorTheme)(colorTheme, variant);
   const labelProps = (0, _utils.getLabelProps)(colorTheme, variant, size);
   const RenderedChildren = /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(childrenContainer, " ").concat(_stylesModule.default["".concat(size, "ChildrenContainer")])
   }, count && /*#__PURE__*/_react.default.createElement(_UTBadge.default, {
     colorTheme: counterColorTheme
-  }, count), iconPlacement === _constants.ICON_PLACEMENTS.left && IconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, labelProps, {
+  }, count), LeftIconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, labelProps, {
     className: "".concat(_stylesModule.default.textContainer, " ").concat(textClassName)
-  }), children), iconPlacement !== _constants.ICON_PLACEMENTS.left && IconToShow);
+  }), children), RightIconToShow);
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     classes: materialButtonClasses,
     className: "\n        ".concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))], "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && _stylesModule.default.noChildren, "\n      "),
@@ -89,10 +99,20 @@ UTButton.propTypes = {
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   hideTextOnResponsive: _propTypes.bool,
+  /**
+   * @deprecated Use LeftIcon or RightIcon instead.
+   */
   Icon: _propTypes.elementType,
+  /**
+   * @deprecated Use LeftIcon or RightIcon instead.
+   */
   iconPlacement: _propTypes.string,
+  LeftIcon: _propTypes.elementType,
+  leftIconProps: _propTypes.object,
   loading: _propTypes.bool,
   onClick: _propTypes.func,
+  RightIcon: _propTypes.elementType,
+  rightIconProps: _propTypes.object,
   size: _propTypes.string,
   type: _propTypes.string,
   variant: _propTypes.string

package/dist/components/UTButton/stories/UTButton.stories.js

@@ -14,8 +14,11 @@ var _default = exports.default = {
     children: undefined,
     classNames: undefined,
     count: undefined,
-    Icon: undefined,
+    LeftIcon: undefined,
+    leftIconProps: undefined,
     onClick: undefined,
+    RightIcon: undefined,
+    rightIconProps: undefined,
     ..._storiesConstants.COMMON_ARGS
   },
   argTypes: {

package/dist/components/UTButton/stories/UTButtonAdornments.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.IconPlacementRight = exports.IconPlacementLeft = exports.IconOnly = exports.CountOnly = exports.CountAndIcon = void 0;
+exports.default = exports.RightIconOnly = exports.LeftIconOnly = exports.IconOnly = exports.CountOnly = exports.CountAndIcon = exports.BothIcons = void 0;
 var _ = _interopRequireDefault(require(".."));
 var _storiesConstants = require("./storiesConstants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,29 +20,34 @@ var _default = exports.default = {
     ..._storiesConstants.COMMON_PARAMETERS
   }
 };
-const IconPlacementLeft = exports.IconPlacementLeft = {
+const LeftIconOnly = exports.LeftIconOnly = {
   args: {
-    children: 'Icon Placement Left',
-    Icon: 'IconArrowLeft',
-    iconPlacement: 'left'
+    children: 'Left Icon',
+    LeftIcon: 'IconArrowLeft'
   }
 };
-const IconPlacementRight = exports.IconPlacementRight = {
+const RightIconOnly = exports.RightIconOnly = {
   args: {
-    children: 'Icon Placement Right',
-    Icon: 'IconArrowRight',
-    iconPlacement: 'right'
+    children: 'Right Icon',
+    RightIcon: 'IconArrowRight'
+  }
+};
+const BothIcons = exports.BothIcons = {
+  args: {
+    children: 'Descargas',
+    LeftIcon: 'IconDownload',
+    RightIcon: 'IconChevronDown'
   }
 };
 const IconOnly = exports.IconOnly = {
   args: {
-    Icon: 'IconSearch'
+    LeftIcon: 'IconSearch'
   }
 };
 const CountAndIcon = exports.CountAndIcon = {
   args: {
     count: 7,
-    Icon: 'IconBell'
+    LeftIcon: 'IconBell'
   }
 };
 const CountOnly = exports.CountOnly = {

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

@@ -95,7 +95,7 @@ const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
   },
   hideTextOnResponsive: {
     control: 'boolean',
-    description: 'Si es `true` y el icono no es `null`, el contenido del botón no se muestra en dispositivos móviles.',
+    description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
     table: {
       defaultValue: {
         summary: _constants.DEFAULT_PROPS.hideTextOnResponsive
@@ -105,9 +105,9 @@ const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
       }
     }
   },
-  Icon: {
+  LeftIcon: {
     control: 'text',
-    description: 'Icono a mostrar en el botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
+    description: 'Ícono a mostrar al inicio del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
     table: {
       defaultValue: {
         summary: 'undefined'
@@ -117,16 +117,15 @@ const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
       }
     }
   },
-  iconPlacement: {
-    control: 'inline-radio',
-    description: 'Posición del icono en relación al contenido del botón.',
-    options: Object.values(_constants.ICON_PLACEMENTS),
+  leftIconProps: {
+    control: false,
+    description: 'Props adicionales a aplicar al ícono izquierdo.',
     table: {
       defaultValue: {
-        summary: _constants.DEFAULT_PROPS.iconPlacement
+        summary: 'undefined'
       },
       type: {
-        summary: (0, _utils.joinArgTypes)(Object.values(_constants.ICON_PLACEMENTS))
+        summary: 'object'
       }
     }
   },
@@ -154,6 +153,30 @@ const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
       }
     }
   },
+  RightIcon: {
+    control: 'text',
+    description: 'Ícono a mostrar al final del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(['string', 'ReactComponent'])
+      }
+    }
+  },
+  rightIconProps: {
+    control: false,
+    description: 'Props adicionales a aplicar al ícono derecho.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
   size: {
     control: 'inline-radio',
     description: 'Tamaño del botón.',
@@ -200,7 +223,6 @@ const COMMON_ARGS = exports.COMMON_ARGS = {
   dataTestId: 'customButtonId',
   disabled: _constants.DEFAULT_PROPS.disabled,
   hideTextOnResponsive: _constants.DEFAULT_PROPS.hideTextOnResponsive,
-  iconPlacement: _constants.DEFAULT_PROPS.iconPlacement,
   loading: _constants.DEFAULT_PROPS.loading,
   size: _constants.DEFAULT_PROPS.size,
   type: 'button',

package/dist/components/UTButton/utils.js

@@ -11,24 +11,69 @@ var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const getButtonElementColorTheme = (buttonColorTheme, buttonVariant) => buttonVariant === _constants.VARIANTS_NAMES.filled ? buttonColorTheme === _constants.COLORS_MAPPER.negative ? _Palette.COLOR_THEMES.neutral : _Palette.COLOR_THEMES.negative : _constants.COLORS_MAPPER[buttonColorTheme];
-const getIconProps = _ref => {
+const buildSingleIconProps = _ref => {
   let {
     className,
-    colorTheme: buttonColorTheme,
+    colorTheme,
     hasContent,
     hideTextOnResponsive,
     Icon,
     size,
-    variant: buttonVariant
+    variant
   } = _ref;
-  return Icon ? {
+  if (!Icon) return null;
+  return {
     IconComponent: (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon,
-    className: "\n          ".concat(_stylesModule.default.baseIcon, "\n          ").concat(className, "\n          ").concat(hasContent ? _stylesModule.default.icon : _stylesModule.default["iconOnly".concat((0, _componentUtils.capitalize)(size))], "\n          ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n        "),
+    className: "\n      ".concat(_stylesModule.default.baseIcon, "\n      ").concat(className, "\n      ").concat(hasContent ? _stylesModule.default.icon : _stylesModule.default["iconOnly".concat((0, _componentUtils.capitalize)(size))], "\n      ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n    "),
     ...((0, _componentUtils.isUTIcon)(Icon) ? {
-      colorTheme: getButtonElementColorTheme(buttonColorTheme, buttonVariant),
+      colorTheme: getButtonElementColorTheme(colorTheme, variant),
       name: Icon
     } : {})
-  } : {};
+  };
+};
+const getIconProps = _ref2 => {
+  let {
+    className,
+    colorTheme,
+    hasContent,
+    hideTextOnResponsive,
+    Icon,
+    iconPlacement,
+    LeftIcon,
+    RightIcon,
+    size,
+    variant
+  } = _ref2;
+  const resolvedLeftIcon = LeftIcon || (iconPlacement !== _constants.ICON_PLACEMENTS.right ? Icon : undefined);
+  const resolvedRightIcon = RightIcon || (iconPlacement === _constants.ICON_PLACEMENTS.right ? Icon : undefined);
+  const commonParams = {
+    className,
+    colorTheme,
+    hasContent,
+    hideTextOnResponsive,
+    size,
+    variant
+  };
+  const {
+    IconComponent: LeftIconComponent,
+    ...leftIconProps
+  } = buildSingleIconProps({
+    ...commonParams,
+    Icon: resolvedLeftIcon
+  }) || {};
+  const {
+    IconComponent: RightIconComponent,
+    ...rightIconProps
+  } = buildSingleIconProps({
+    ...commonParams,
+    Icon: resolvedRightIcon
+  }) || {};
+  return {
+    LeftIconComponent: LeftIconComponent || null,
+    leftIconProps,
+    RightIconComponent: RightIconComponent || null,
+    rightIconProps
+  };
 };
 exports.getIconProps = getIconProps;
 const getLabelProps = (buttonColorTheme, buttonVariant, buttonSize) => ({

package/dist/components/UTTable/UTTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithRefresh = exports.WithPagination = exports.WithCustomRenderers = exports.WithActions = exports.TableHeaderV1WithSelection = exports.TableHeaderV1WithRefresh = exports.TableHeaderV1WithAutomaticRefresh = exports.TableHeaderV1WithActions = exports.TableHeaderV1Loading = exports.TableHeaderV1Basic = exports.TableHeaderV0WithReload = exports.TableHeaderV0Basic = exports.StickyHeader = exports.Selectable = exports.Playground = exports.NoPagination = exports.Loading = exports.FitColumnsWidth = exports.ExternalIntegration = exports.ExclusiveSelection = exports.EmptyState = exports.CustomSpacing = exports.CustomNoResults = exports.CompleteExample = exports.ClickableRows = exports.Basic = void 0;
+exports.default = exports.WithRefresh = exports.WithPagination = exports.WithCustomRenderers = exports.WithActions = exports.TableHeaderV1WithSelection = exports.TableHeaderV1WithRefresh = exports.TableHeaderV1WithPrimaryActions = exports.TableHeaderV1WithAutomaticRefresh = exports.TableHeaderV1WithActions = exports.TableHeaderV1Loading = exports.TableHeaderV1Basic = exports.TableHeaderV0WithReload = exports.TableHeaderV0Basic = exports.StickyHeader = exports.Selectable = exports.Playground = exports.NoPagination = exports.Loading = exports.FitColumnsWidth = exports.ExternalIntegration = exports.ExclusiveSelection = exports.EmptyState = exports.CustomSpacing = exports.CustomNoResults = exports.CompleteExample = exports.ClickableRows = exports.Basic = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("stories/utils");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
@@ -933,6 +933,39 @@ const TableHeaderV1WithActions = exports.TableHeaderV1WithActions = {
   },
   name: 'Header V1 - Con Acciones'
 };
+const TableHeaderV1WithPrimaryActions = exports.TableHeaderV1WithPrimaryActions = {
+  args: {
+    data: mockData.slice(0, 10),
+    columns: basicColumns,
+    headerVersion: 'V1',
+    withActionHeader: true,
+    tableTitle: 'Tabla con Acciones Primarias V1',
+    description: 'Header V1 con isPrimary: las acciones primarias siempre son visibles (solo ícono en mobile), las secundarias colapsan en el dots menu.',
+    actionsConfig: [{
+      isPrimary: true,
+      LeftIcon: 'IconPlus',
+      onClick: () => alert('Nuevo trámite'),
+      variant: 'filled',
+      colorTheme: 'primary',
+      size: 'small',
+      children: 'Nuevo trámite'
+    }, {
+      LeftIcon: 'IconDownload',
+      RightIcon: 'IconChevronDown',
+      onClick: () => alert('Descargas'),
+      variant: 'outlined',
+      size: 'small',
+      children: 'Descargas'
+    }, {
+      Icon: 'IconFilter',
+      onClick: () => alert('Filtrar'),
+      variant: 'outlined',
+      size: 'small',
+      children: 'Filtros'
+    }]
+  },
+  name: 'Header V1 - Con Acciones Primarias'
+};
 const TableHeaderV1WithSelection = exports.TableHeaderV1WithSelection = {
   args: {
     data: mockData.slice(0, 10),

package/dist/components/UTTable/components/TableHeader/versions/V1/ActionsMobile.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _partition = _interopRequireDefault(require("lodash/partition"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _UTMenu = _interopRequireDefault(require("../../../../../UTMenu"));
+var _UTTooltip = _interopRequireDefault(require("../../../../../UTTooltip"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const ActionsMobile = _ref => {
+  var _classes$wrapperHeade;
+  let {
+    actions,
+    anchor,
+    classes,
+    closeMenu,
+    menuButtonRef,
+    openMenu,
+    tableHeaderDataTestId
+  } = _ref;
+  const [primaryActions, secondaryActions] = (0, _partition.default)(actions, _ref2 => {
+    let {
+      isPrimary
+    } = _ref2;
+    return isPrimary;
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _isEmpty.default)(secondaryActions) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: menuButtonRef
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenuButton") : '',
+    Icon: "IconDots",
+    onClick: openMenu,
+    variant: "text"
+  })), /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
+    anchor: anchor,
+    classNames: {
+      menuItemContainer: "".concat(_stylesModule.default.wrapperHeaderMenuItem, " ").concat((_classes$wrapperHeade = classes.wrapperHeaderMenuItem) !== null && _classes$wrapperHeade !== void 0 ? _classes$wrapperHeade : '')
+    },
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenu") : '',
+    iconBefore: true,
+    items: (0, _utils.getMenuItems)(secondaryActions, closeMenu),
+    onClose: closeMenu,
+    onOpen: openMenu,
+    popperProps: {
+      disablePortal: true
+    }
+  })), primaryActions.map(actionConfig => actionConfig.tooltip ? /*#__PURE__*/_react.default.createElement(_UTTooltip.default, _extends({
+    key: actionConfig.dataTestId || String(actionConfig.children),
+    className: actionConfig.tooltipClassName,
+    content: actionConfig.tooltip,
+    tippyProps: {
+      arrow: false,
+      placement: 'top'
+    }
+  }, actionConfig.tooltipProps), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    hideTextOnResponsive: true
+  }, actionConfig)))) : /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    key: actionConfig.dataTestId || String(actionConfig.children),
+    dataTestId: actionConfig.dataTestId,
+    hideTextOnResponsive: true
+  }, actionConfig))));
+};
+ActionsMobile.propTypes = {
+  actions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    children: _propTypes.string,
+    dataTestId: _propTypes.string,
+    isPrimary: _propTypes.bool,
+    tooltip: _propTypes.string
+  })),
+  anchor: _propTypes.object,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  closeMenu: _propTypes.func,
+  menuButtonRef: _propTypes.object,
+  openMenu: _propTypes.func,
+  tableHeaderDataTestId: _propTypes.string
+};
+var _default = exports.default = ActionsMobile;

package/dist/components/UTTable/components/TableHeader/versions/V1/index.js

@@ -9,17 +9,17 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
 var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
-var _UTMenu = _interopRequireDefault(require("../../../../../UTMenu"));
 var _UTTooltip = _interopRequireDefault(require("../../../../../UTTooltip"));
 var _useScrollBasedMenu = _interopRequireDefault(require("../../../../../../utils/hooks/use-scroll-based-menu"));
 var _types = require("../../../../types");
+var _ActionsMobile = _interopRequireDefault(require("./ActionsMobile"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _utils = require("./utils");
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const TableHeader = _ref => {
-  var _classes$wrapperHeade, _classes$textElements, _classes$titleAndDesc, _classes$selectedLabe, _classes$refreshAndAc, _classes$wrapperHeade2;
+  var _classes$wrapperHeade, _classes$textElements, _classes$titleAndDesc, _classes$selectedLabe, _classes$refreshAndAc;
   let {
     actions,
     automaticRefreshDelay,
@@ -90,7 +90,7 @@ const TableHeader = _ref => {
     weight: "medium"
   }, selectedLabel)), /*#__PURE__*/_react.default.createElement("article", {
     className: "".concat(_stylesModule.default.refreshAndActions, " ").concat((_classes$refreshAndAc = classes.refreshAndActions) !== null && _classes$refreshAndAc !== void 0 ? _classes$refreshAndAc : '')
-  }, withRefresh && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !isMobile && (loading ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, withRefresh && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isMobile && (loading ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
     dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".ongoingRefreshLabel") : '',
     variant: "small",
@@ -123,27 +123,15 @@ const TableHeader = _ref => {
     onClick: handleRefresh,
     size: "small",
     variant: "text"
-  })))), Array.isArray(actions) && !(0, _isEmpty.default)(actions) && !isDesktop ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    ref: menuButtonRef
-  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenuButton") : '',
-    Icon: "IconDots",
-    onClick: openMenu,
-    variant: "text"
-  })), /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
+  })))), Array.isArray(actions) && !(0, _isEmpty.default)(actions) && !isDesktop ? /*#__PURE__*/_react.default.createElement(_ActionsMobile.default, {
+    actions: actions,
     anchor: anchor,
-    classNames: {
-      menuItemContainer: "".concat(_stylesModule.default.wrapperHeaderMenuItem, " ").concat((_classes$wrapperHeade2 = classes.wrapperHeaderMenuItem) !== null && _classes$wrapperHeade2 !== void 0 ? _classes$wrapperHeade2 : '')
-    },
-    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenu") : '',
-    iconBefore: true,
-    items: (0, _utils.getMenuItems)(actions, closeMenu),
-    onClose: closeMenu,
-    onOpen: openMenu,
-    popperProps: {
-      disablePortal: true
-    }
-  })) : Array.isArray(actions) && actions.map((actionConfig, index) => actionConfig.tooltip ? /*#__PURE__*/_react.default.createElement(_UTTooltip.default, _extends({
+    classes: classes,
+    closeMenu: closeMenu,
+    menuButtonRef: menuButtonRef,
+    openMenu: openMenu,
+    tableHeaderDataTestId: tableHeaderDataTestId
+  }) : Array.isArray(actions) && actions.map((actionConfig, index) => actionConfig.tooltip ? /*#__PURE__*/_react.default.createElement(_UTTooltip.default, _extends({
     className: actionConfig.tooltipClassName,
     content: actionConfig.tooltip,
     dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".").concat(index) : '',
@@ -166,8 +154,11 @@ TableHeader.propTypes = {
     hideTextOnResponsive: _propTypes.bool,
     Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
     iconPlacement: _propTypes.string,
+    isPrimary: _propTypes.bool,
+    LeftIcon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
     loading: _propTypes.bool,
     onClick: _propTypes.func,
+    RightIcon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
     size: _propTypes.string,
     type: _propTypes.string,
     variant: _propTypes.string

package/dist/components/UTTable/components/TableHeader/versions/V1/utils.js

@@ -17,13 +17,16 @@ const getMenuItems = (actions, closeMenu) => actions.map(action => {
   const {
     Icon,
     iconProps,
+    LeftIcon,
     onClick
   } = action;
+  // Icon is deprecated in favor of LeftIcon
+  const resolvedIcon = LeftIcon !== null && LeftIcon !== void 0 ? LeftIcon : Icon;
   return {
     ...action,
-    Icon: Icon ? typeof Icon === 'string' ? () => /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
-      name: Icon
-    }, iconProps)) : Icon : undefined,
+    Icon: resolvedIcon ? typeof resolvedIcon === 'string' ? () => /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+      name: resolvedIcon
+    }, iconProps)) : resolvedIcon : undefined,
     label: action.children,
     onClick: () => {
       onClick();

package/dist/components/UTTable/index.js

@@ -377,8 +377,11 @@ UTTable.propTypes = {
     hideTextOnResponsive: _propTypes.bool,
     Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
     iconPlacement: _propTypes.string,
+    isPrimary: _propTypes.bool,
+    LeftIcon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
     loading: _propTypes.bool,
     onClick: _propTypes.func,
+    RightIcon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
     size: _propTypes.string,
     type: _propTypes.string,
     variant: _propTypes.string

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

@@ -17,12 +17,16 @@ All these variants are defined in the component theme.
 
 ### Color Themes
 
-The color themes are defined by the component consumer and will vary accordingly.They define a set of variables (colors and opacities) that then combined with the variant will change how the buttons looks.
-The components supports an infinite amount of color themes but requieres the consumer to pass at least a `primary` one that works as a default.
+The color themes are defined by the component consumer and will vary accordingly. They define a set of variables (colors and opacities) that then combined with the variant will change how the button looks.
+The components supports an infinite amount of color themes but requires the consumer to pass at least a `primary` one that works as a default.
 
-### Icon
+### Icons
 
-The button can include an icon, which can be either from the Tabler Icons library or a custom SVG rendered as a React component. If using an icon from the Tabler Icons library, you should provide the name of the icon. Alternatively, a custom SVG can be passed directly to the component.
+The button can include up to two icons (left and right), each of which can be either a Tabler Icons name or a custom SVG React component.
+
+- **`LeftIcon`:** rendered at the start of the button content.
+- **`RightIcon`:** rendered at the end of the button content.
+- Additional props for each icon can be passed via `leftIconProps` and `rightIconProps`.
 
 ### Props
 
@@ -34,9 +38,14 @@ The button can include an icon, which can be either from the Tabler Icons librar
 | onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
 | loading              | bool                                                  | false     | If `true` a spinner is shown over the component.                               |
 | disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
-| Icon                 | node \| string                                        |           | An Icon component that can be displayed within the button.                     |
-| iconPlacement        | 'left' \| 'right'                                     | 'left'    | Indicates where the icon is placed in relation with the contents of the button |
-| showTextOnResponsive | bool                                                  | false     | If `true` and Icon is not `null` the contents of the button are not displayed. |
-| type                 | 'string'                                              |           | HTML type attribute.                                                           |
+| LeftIcon             | node \| string                                        |           | Icon rendered at the start of the button.                                      |
+| leftIconProps        | object                                                |           | Additional props to apply to the left icon.                                    |
+| RightIcon            | node \| string                                        |           | Icon rendered at the end of the button.                                        |
+| rightIconProps       | object                                                |           | Additional props to apply to the right icon.                                   |
+| hideTextOnResponsive | bool                                                  | false     | If `true` and an icon is present, the button text is hidden on mobile.         |
+| count                | number                                                |           | Number to display in a badge inside the button.                                |
+| type                 | string                                                |           | HTML type attribute.                                                           |
 | classNames           | object                                                |           | Overrides the default button theme.                                            |
 | children             | node                                                  |           | The component contents.                                                        |
+| Icon                 | node \| string                                        |           | **Deprecated.** Use `LeftIcon` or `RightIcon` instead.                        |
+| iconPlacement        | 'left' \| 'right'                                     | 'left'    | **Deprecated.** Use `LeftIcon` or `RightIcon` instead.                        |

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

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useMemo } from 'react';
-import { bool, func, elementType, objectOf, string, number } from 'prop-types';
+import { bool, func, elementType, object, objectOf, string, number } from 'prop-types';
 import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { capitalize } from '../../utils/componentUtils';
@@ -9,7 +9,7 @@ import UTBadge from '../UTBadge';
 import UTLabel from '../UTLabel';
 import WithTheme from '../WithTheme';
 import { getCounterColorTheme, getIconProps, getLabelProps } from './utils';
-import { ICON_PLACEMENTS, DEFAULT_PROPS } from './constants';
+import { DEFAULT_PROPS } from './constants';
 import { retrieveStyle } from './theme';
 import styles from './styles.module.scss';
 const UTButton = _ref => {
@@ -24,8 +24,12 @@ const UTButton = _ref => {
     hideTextOnResponsive,
     Icon,
     iconPlacement,
+    LeftIcon,
+    leftIconProps,
     loading,
     onClick,
+    RightIcon,
+    rightIconProps,
     size,
     type,
     variant
@@ -39,27 +43,33 @@ const UTButton = _ref => {
     ...materialButtonClasses
   } = classes;
   const {
-    IconComponent,
-    ...iconProps
+    LeftIconComponent,
+    leftIconProps: leftIconBaseProps,
+    RightIconComponent,
+    rightIconProps: rightIconBaseProps
   } = useMemo(() => getIconProps({
     className: icon,
     colorTheme,
     hasContent: !!children,
     hideTextOnResponsive,
     Icon,
+    iconPlacement,
+    LeftIcon,
+    RightIcon,
     size,
     variant
-  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, size, variant]);
-  const IconToShow = IconComponent && /*#__PURE__*/React.createElement(IconComponent, iconProps);
+  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
+  const LeftIconToShow = LeftIconComponent && /*#__PURE__*/React.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
+  const RightIconToShow = RightIconComponent && /*#__PURE__*/React.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
   const counterColorTheme = getCounterColorTheme(colorTheme, variant);
   const labelProps = getLabelProps(colorTheme, variant, size);
   const RenderedChildren = /*#__PURE__*/React.createElement("div", {
     className: "".concat(childrenContainer, " ").concat(styles["".concat(size, "ChildrenContainer")])
   }, count && /*#__PURE__*/React.createElement(UTBadge, {
     colorTheme: counterColorTheme
-  }, count), iconPlacement === ICON_PLACEMENTS.left && IconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/React.createElement(UTLabel, _extends({}, labelProps, {
+  }, count), LeftIconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/React.createElement(UTLabel, _extends({}, labelProps, {
     className: "".concat(styles.textContainer, " ").concat(textClassName)
-  }), children), iconPlacement !== ICON_PLACEMENTS.left && IconToShow);
+  }), children), RightIconToShow);
   return /*#__PURE__*/React.createElement(Button, {
     classes: materialButtonClasses,
     className: "\n        ".concat(styles["padding".concat(capitalize(size))], "\n        ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n      "),
@@ -81,10 +91,20 @@ UTButton.propTypes = {
   dataTestId: string,
   disabled: bool,
   hideTextOnResponsive: bool,
+  /**
+   * @deprecated Use LeftIcon or RightIcon instead.
+   */
   Icon: elementType,
+  /**
+   * @deprecated Use LeftIcon or RightIcon instead.
+   */
   iconPlacement: string,
+  LeftIcon: elementType,
+  leftIconProps: object,
   loading: bool,
   onClick: func,
+  RightIcon: elementType,
+  rightIconProps: object,
   size: string,
   type: string,
   variant: string

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

@@ -7,8 +7,11 @@ export default {
     children: undefined,
     classNames: undefined,
     count: undefined,
-    Icon: undefined,
+    LeftIcon: undefined,
+    leftIconProps: undefined,
     onClick: undefined,
+    RightIcon: undefined,
+    rightIconProps: undefined,
     ...COMMON_ARGS
   },
   argTypes: {

package/dist/esm/components/UTButton/stories/UTButtonAdornments.stories.js

@@ -13,29 +13,34 @@ export default {
     ...COMMON_PARAMETERS
   }
 };
-export const IconPlacementLeft = {
+export const LeftIconOnly = {
   args: {
-    children: 'Icon Placement Left',
-    Icon: 'IconArrowLeft',
-    iconPlacement: 'left'
+    children: 'Left Icon',
+    LeftIcon: 'IconArrowLeft'
   }
 };
-export const IconPlacementRight = {
+export const RightIconOnly = {
   args: {
-    children: 'Icon Placement Right',
-    Icon: 'IconArrowRight',
-    iconPlacement: 'right'
+    children: 'Right Icon',
+    RightIcon: 'IconArrowRight'
+  }
+};
+export const BothIcons = {
+  args: {
+    children: 'Descargas',
+    LeftIcon: 'IconDownload',
+    RightIcon: 'IconChevronDown'
   }
 };
 export const IconOnly = {
   args: {
-    Icon: 'IconSearch'
+    LeftIcon: 'IconSearch'
   }
 };
 export const CountAndIcon = {
   args: {
     count: 7,
-    Icon: 'IconBell'
+    LeftIcon: 'IconBell'
   }
 };
 export const CountOnly = {

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

@@ -1,5 +1,5 @@
 import { joinArgTypes } from 'stories/utils';
-import { VARIANTS_NAMES, SIZES, ICON_PLACEMENTS, DEFAULT_PROPS, COLORS_MAPPER } from '../constants';
+import { VARIANTS_NAMES, SIZES, DEFAULT_PROPS, COLORS_MAPPER } from '../constants';
 
 // Common argTypes used across multiple stories files
 export const COMMON_ARG_TYPES = {
@@ -90,7 +90,7 @@ export const COMMON_ARG_TYPES = {
   },
   hideTextOnResponsive: {
     control: 'boolean',
-    description: 'Si es `true` y el icono no es `null`, el contenido del botón no se muestra en dispositivos móviles.',
+    description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
     table: {
       defaultValue: {
         summary: DEFAULT_PROPS.hideTextOnResponsive
@@ -100,9 +100,9 @@ export const COMMON_ARG_TYPES = {
       }
     }
   },
-  Icon: {
+  LeftIcon: {
     control: 'text',
-    description: 'Icono a mostrar en el botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
+    description: 'Ícono a mostrar al inicio del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
     table: {
       defaultValue: {
         summary: 'undefined'
@@ -112,16 +112,15 @@ export const COMMON_ARG_TYPES = {
       }
     }
   },
-  iconPlacement: {
-    control: 'inline-radio',
-    description: 'Posición del icono en relación al contenido del botón.',
-    options: Object.values(ICON_PLACEMENTS),
+  leftIconProps: {
+    control: false,
+    description: 'Props adicionales a aplicar al ícono izquierdo.',
     table: {
       defaultValue: {
-        summary: DEFAULT_PROPS.iconPlacement
+        summary: 'undefined'
       },
       type: {
-        summary: joinArgTypes(Object.values(ICON_PLACEMENTS))
+        summary: 'object'
       }
     }
   },
@@ -149,6 +148,30 @@ export const COMMON_ARG_TYPES = {
       }
     }
   },
+  RightIcon: {
+    control: 'text',
+    description: 'Ícono a mostrar al final del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: joinArgTypes(['string', 'ReactComponent'])
+      }
+    }
+  },
+  rightIconProps: {
+    control: false,
+    description: 'Props adicionales a aplicar al ícono derecho.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
   size: {
     control: 'inline-radio',
     description: 'Tamaño del botón.',
@@ -195,7 +218,6 @@ export const COMMON_ARGS = {
   dataTestId: 'customButtonId',
   disabled: DEFAULT_PROPS.disabled,
   hideTextOnResponsive: DEFAULT_PROPS.hideTextOnResponsive,
-  iconPlacement: DEFAULT_PROPS.iconPlacement,
   loading: DEFAULT_PROPS.loading,
   size: DEFAULT_PROPS.size,
   type: 'button',

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

@@ -1,27 +1,72 @@
 import { COLOR_THEMES } from '../../constants/Palette';
 import { capitalize, isUTIcon } from '../../utils/componentUtils';
 import UTIcon from '../UTIcon';
-import { COLORS_MAPPER, SIZES, VARIANTS_NAMES } from './constants';
+import { COLORS_MAPPER, ICON_PLACEMENTS, SIZES, VARIANTS_NAMES } from './constants';
 import styles from './styles.module.scss';
 const getButtonElementColorTheme = (buttonColorTheme, buttonVariant) => buttonVariant === VARIANTS_NAMES.filled ? buttonColorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.neutral : COLOR_THEMES.negative : COLORS_MAPPER[buttonColorTheme];
-export const getIconProps = _ref => {
+const buildSingleIconProps = _ref => {
   let {
     className,
-    colorTheme: buttonColorTheme,
+    colorTheme,
     hasContent,
     hideTextOnResponsive,
     Icon,
     size,
-    variant: buttonVariant
+    variant
   } = _ref;
-  return Icon ? {
+  if (!Icon) return null;
+  return {
     IconComponent: isUTIcon(Icon) ? UTIcon : Icon,
-    className: "\n          ".concat(styles.baseIcon, "\n          ").concat(className, "\n          ").concat(hasContent ? styles.icon : styles["iconOnly".concat(capitalize(size))], "\n          ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n        "),
+    className: "\n      ".concat(styles.baseIcon, "\n      ").concat(className, "\n      ").concat(hasContent ? styles.icon : styles["iconOnly".concat(capitalize(size))], "\n      ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n    "),
     ...(isUTIcon(Icon) ? {
-      colorTheme: getButtonElementColorTheme(buttonColorTheme, buttonVariant),
+      colorTheme: getButtonElementColorTheme(colorTheme, variant),
       name: Icon
     } : {})
-  } : {};
+  };
+};
+export const getIconProps = _ref2 => {
+  let {
+    className,
+    colorTheme,
+    hasContent,
+    hideTextOnResponsive,
+    Icon,
+    iconPlacement,
+    LeftIcon,
+    RightIcon,
+    size,
+    variant
+  } = _ref2;
+  const resolvedLeftIcon = LeftIcon || (iconPlacement !== ICON_PLACEMENTS.right ? Icon : undefined);
+  const resolvedRightIcon = RightIcon || (iconPlacement === ICON_PLACEMENTS.right ? Icon : undefined);
+  const commonParams = {
+    className,
+    colorTheme,
+    hasContent,
+    hideTextOnResponsive,
+    size,
+    variant
+  };
+  const {
+    IconComponent: LeftIconComponent,
+    ...leftIconProps
+  } = buildSingleIconProps({
+    ...commonParams,
+    Icon: resolvedLeftIcon
+  }) || {};
+  const {
+    IconComponent: RightIconComponent,
+    ...rightIconProps
+  } = buildSingleIconProps({
+    ...commonParams,
+    Icon: resolvedRightIcon
+  }) || {};
+  return {
+    LeftIconComponent: LeftIconComponent || null,
+    leftIconProps,
+    RightIconComponent: RightIconComponent || null,
+    rightIconProps
+  };
 };
 export const getLabelProps = (buttonColorTheme, buttonVariant, buttonSize) => ({
   colorTheme: getButtonElementColorTheme(buttonColorTheme, buttonVariant),

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

@@ -928,6 +928,39 @@ export const TableHeaderV1WithActions = {
   },
   name: 'Header V1 - Con Acciones'
 };
+export const TableHeaderV1WithPrimaryActions = {
+  args: {
+    data: mockData.slice(0, 10),
+    columns: basicColumns,
+    headerVersion: 'V1',
+    withActionHeader: true,
+    tableTitle: 'Tabla con Acciones Primarias V1',
+    description: 'Header V1 con isPrimary: las acciones primarias siempre son visibles (solo ícono en mobile), las secundarias colapsan en el dots menu.',
+    actionsConfig: [{
+      isPrimary: true,
+      LeftIcon: 'IconPlus',
+      onClick: () => alert('Nuevo trámite'),
+      variant: 'filled',
+      colorTheme: 'primary',
+      size: 'small',
+      children: 'Nuevo trámite'
+    }, {
+      LeftIcon: 'IconDownload',
+      RightIcon: 'IconChevronDown',
+      onClick: () => alert('Descargas'),
+      variant: 'outlined',
+      size: 'small',
+      children: 'Descargas'
+    }, {
+      Icon: 'IconFilter',
+      onClick: () => alert('Filtrar'),
+      variant: 'outlined',
+      size: 'small',
+      children: 'Filtros'
+    }]
+  },
+  name: 'Header V1 - Con Acciones Primarias'
+};
 export const TableHeaderV1WithSelection = {
   args: {
     data: mockData.slice(0, 10),

package/dist/esm/components/UTTable/components/TableHeader/versions/V1/ActionsMobile.js

@@ -0,0 +1,78 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import isEmpty from 'lodash/isEmpty';
+import partition from 'lodash/partition';
+import React from 'react';
+import { arrayOf, bool, func, object, objectOf, shape, string } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import UTMenu from '../../../../../UTMenu';
+import UTTooltip from '../../../../../UTTooltip';
+import styles from './styles.module.scss';
+import { getMenuItems } from './utils';
+const ActionsMobile = _ref => {
+  var _classes$wrapperHeade;
+  let {
+    actions,
+    anchor,
+    classes,
+    closeMenu,
+    menuButtonRef,
+    openMenu,
+    tableHeaderDataTestId
+  } = _ref;
+  const [primaryActions, secondaryActions] = partition(actions, _ref2 => {
+    let {
+      isPrimary
+    } = _ref2;
+    return isPrimary;
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(secondaryActions) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: menuButtonRef
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenuButton") : '',
+    Icon: "IconDots",
+    onClick: openMenu,
+    variant: "text"
+  })), /*#__PURE__*/React.createElement(UTMenu, {
+    anchor: anchor,
+    classNames: {
+      menuItemContainer: "".concat(styles.wrapperHeaderMenuItem, " ").concat((_classes$wrapperHeade = classes.wrapperHeaderMenuItem) !== null && _classes$wrapperHeade !== void 0 ? _classes$wrapperHeade : '')
+    },
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenu") : '',
+    iconBefore: true,
+    items: getMenuItems(secondaryActions, closeMenu),
+    onClose: closeMenu,
+    onOpen: openMenu,
+    popperProps: {
+      disablePortal: true
+    }
+  })), primaryActions.map(actionConfig => actionConfig.tooltip ? /*#__PURE__*/React.createElement(UTTooltip, _extends({
+    key: actionConfig.dataTestId || String(actionConfig.children),
+    className: actionConfig.tooltipClassName,
+    content: actionConfig.tooltip,
+    tippyProps: {
+      arrow: false,
+      placement: 'top'
+    }
+  }, actionConfig.tooltipProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTButton, _extends({
+    hideTextOnResponsive: true
+  }, actionConfig)))) : /*#__PURE__*/React.createElement(UTButton, _extends({
+    key: actionConfig.dataTestId || String(actionConfig.children),
+    dataTestId: actionConfig.dataTestId,
+    hideTextOnResponsive: true
+  }, actionConfig))));
+};
+ActionsMobile.propTypes = {
+  actions: arrayOf(shape({
+    children: string,
+    dataTestId: string,
+    isPrimary: bool,
+    tooltip: string
+  })),
+  anchor: object,
+  classes: objectOf(string),
+  closeMenu: func,
+  menuButtonRef: object,
+  openMenu: func,
+  tableHeaderDataTestId: string
+};
+export default ActionsMobile;

package/dist/esm/components/UTTable/components/TableHeader/versions/V1/index.js

@@ -4,14 +4,14 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { arrayOf, bool, elementType, func, number, objectOf, oneOfType, shape, string } from 'prop-types';
 import UTButton from '../../../../../UTButton';
 import UTLabel from '../../../../../UTLabel';
-import UTMenu from '../../../../../UTMenu';
 import UTTooltip from '../../../../../UTTooltip';
 import useScrollBasedMenu from '../../../../../../utils/hooks/use-scroll-based-menu';
 import { classesType } from '../../../../types';
+import ActionsMobile from './ActionsMobile';
 import styles from './styles.module.scss';
-import { getMenuItems, reloadWindow } from './utils';
+import { reloadWindow } from './utils';
 const TableHeader = _ref => {
-  var _classes$wrapperHeade, _classes$textElements, _classes$titleAndDesc, _classes$selectedLabe, _classes$refreshAndAc, _classes$wrapperHeade2;
+  var _classes$wrapperHeade, _classes$textElements, _classes$titleAndDesc, _classes$selectedLabe, _classes$refreshAndAc;
   let {
     actions,
     automaticRefreshDelay,
@@ -82,7 +82,7 @@ const TableHeader = _ref => {
     weight: "medium"
   }, selectedLabel)), /*#__PURE__*/React.createElement("article", {
     className: "".concat(styles.refreshAndActions, " ").concat((_classes$refreshAndAc = classes.refreshAndActions) !== null && _classes$refreshAndAc !== void 0 ? _classes$refreshAndAc : '')
-  }, withRefresh && /*#__PURE__*/React.createElement(Fragment, null, !isMobile && (loading ? /*#__PURE__*/React.createElement(UTLabel, {
+  }, withRefresh && /*#__PURE__*/React.createElement(React.Fragment, null, !isMobile && (loading ? /*#__PURE__*/React.createElement(UTLabel, {
     colorTheme: "gray",
     dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".ongoingRefreshLabel") : '',
     variant: "small",
@@ -115,27 +115,15 @@ const TableHeader = _ref => {
     onClick: handleRefresh,
     size: "small",
     variant: "text"
-  })))), Array.isArray(actions) && !isEmpty(actions) && !isDesktop ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: menuButtonRef
-  }, /*#__PURE__*/React.createElement(UTButton, {
-    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenuButton") : '',
-    Icon: "IconDots",
-    onClick: openMenu,
-    variant: "text"
-  })), /*#__PURE__*/React.createElement(UTMenu, {
+  })))), Array.isArray(actions) && !isEmpty(actions) && !isDesktop ? /*#__PURE__*/React.createElement(ActionsMobile, {
+    actions: actions,
     anchor: anchor,
-    classNames: {
-      menuItemContainer: "".concat(styles.wrapperHeaderMenuItem, " ").concat((_classes$wrapperHeade2 = classes.wrapperHeaderMenuItem) !== null && _classes$wrapperHeade2 !== void 0 ? _classes$wrapperHeade2 : '')
-    },
-    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenu") : '',
-    iconBefore: true,
-    items: getMenuItems(actions, closeMenu),
-    onClose: closeMenu,
-    onOpen: openMenu,
-    popperProps: {
-      disablePortal: true
-    }
-  })) : Array.isArray(actions) && actions.map((actionConfig, index) => actionConfig.tooltip ? /*#__PURE__*/React.createElement(UTTooltip, _extends({
+    classes: classes,
+    closeMenu: closeMenu,
+    menuButtonRef: menuButtonRef,
+    openMenu: openMenu,
+    tableHeaderDataTestId: tableHeaderDataTestId
+  }) : Array.isArray(actions) && actions.map((actionConfig, index) => actionConfig.tooltip ? /*#__PURE__*/React.createElement(UTTooltip, _extends({
     className: actionConfig.tooltipClassName,
     content: actionConfig.tooltip,
     dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".").concat(index) : '',
@@ -158,8 +146,11 @@ TableHeader.propTypes = {
     hideTextOnResponsive: bool,
     Icon: oneOfType([elementType, string]),
     iconPlacement: string,
+    isPrimary: bool,
+    LeftIcon: oneOfType([elementType, string]),
     loading: bool,
     onClick: func,
+    RightIcon: oneOfType([elementType, string]),
     size: string,
     type: string,
     variant: string

package/dist/esm/components/UTTable/components/TableHeader/versions/V1/utils.js

@@ -9,13 +9,16 @@ export const getMenuItems = (actions, closeMenu) => actions.map(action => {
   const {
     Icon,
     iconProps,
+    LeftIcon,
     onClick
   } = action;
+  // Icon is deprecated in favor of LeftIcon
+  const resolvedIcon = LeftIcon !== null && LeftIcon !== void 0 ? LeftIcon : Icon;
   return {
     ...action,
-    Icon: Icon ? typeof Icon === 'string' ? () => /*#__PURE__*/React.createElement(UTIcon, _extends({
-      name: Icon
-    }, iconProps)) : Icon : undefined,
+    Icon: resolvedIcon ? typeof resolvedIcon === 'string' ? () => /*#__PURE__*/React.createElement(UTIcon, _extends({
+      name: resolvedIcon
+    }, iconProps)) : resolvedIcon : undefined,
     label: action.children,
     onClick: () => {
       onClick();

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

@@ -369,8 +369,11 @@ UTTable.propTypes = {
     hideTextOnResponsive: bool,
     Icon: oneOfType([elementType, string]),
     iconPlacement: string,
+    isPrimary: bool,
+    LeftIcon: oneOfType([elementType, string]),
     loading: bool,
     onClick: func,
+    RightIcon: oneOfType([elementType, string]),
     size: string,
     type: string,
     variant: string

package/package.json

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