@widergy/energy-ui 3.159.0 → 3.160.1

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/UTPanel/versions/V1/components/AdditionalContentModule/index.js

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

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

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

package/dist/esm/components/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