@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/components/UTIcon/theme.js

@@ -4,27 +4,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = exports.retrieveColor = exports.getIconProps = exports.getComponent = exports.getClassNames = void 0;
+var _react = _interopRequireDefault(require("react"));
 var TablerIcons = _interopRequireWildcard(require("@tabler/icons-react"));
 var _componentUtils = require("../../utils/componentUtils");
 var _countries = _interopRequireDefault(require("../../constants/countries"));
-var _Flag = _interopRequireDefault(require("./components/Flag"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const retrieveColor = _ref => {
+const FLAG_CODES = new Set(_countries.default.map(_ref => {
+  let {
+    code
+  } = _ref;
+  return code;
+}));
+const flagComponentCache = {};
+const getFlagComponent = code => {
+  if (!flagComponentCache[code]) {
+    flagComponentCache[code] = /*#__PURE__*/_react.default.lazy(() => (specifier => new Promise(r => r(specifier)).then(s => _interopRequireWildcard(require(s))))("./components/FlagsIcons/flagsComponents/".concat(code)));
+  }
+  return flagComponentCache[code];
+};
+const retrieveColor = _ref2 => {
   var _theme$Palette$action;
   let {
     colorTheme,
     shade,
     theme
-  } = _ref;
+  } = _ref2;
   const colorThemeDefinition = theme.Palette[colorTheme] || ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorTheme]) || theme.Palette[_constants.DEFAULT_COLOR_THEME];
   const colorShade = shade || (0, _componentUtils.getDefaultColorShade)(colorTheme);
   return colorThemeDefinition[colorShade];
 };
 exports.retrieveColor = retrieveColor;
-const getIconProps = _ref2 => {
+const getIconProps = _ref3 => {
   let {
     color,
     colorTheme,
@@ -35,7 +48,7 @@ const getIconProps = _ref2 => {
     size,
     style,
     theme
-  } = _ref2;
+  } = _ref3;
   const themeColor = retrieveColor({
     colorTheme: color || colorTheme,
     theme,
@@ -43,6 +56,7 @@ const getIconProps = _ref2 => {
   });
   const filled = name.endsWith(_constants.FILLED_ICON_SUFIX);
   const isEnergyIcon = name.startsWith(_constants.ENERGY_ICON_PREFIX);
+  const isFlag = FLAG_CODES.has(name);
   const iconColor = filled ? _constants.FILLED_ICON_COLOR : themeColor;
   const internalFill = fillTheme && retrieveColor({
     colorTheme: fillTheme,
@@ -60,6 +74,10 @@ const getIconProps = _ref2 => {
       height: size
     })
   };
+  const flagProps = {
+    width: size || 24,
+    height: size || 24
+  };
   return {
     style: filled ? {
       color: themeColor
@@ -67,7 +85,7 @@ const getIconProps = _ref2 => {
     ...(internalFill && {
       fill: internalFill
     }),
-    ...(isEnergyIcon ? energyIconProps : defaultIconProps),
+    ...(isEnergyIcon ? energyIconProps : isFlag ? flagProps : defaultIconProps),
     name
   };
 };
@@ -78,7 +96,7 @@ const VARIANT_STYLE_MAPPER = function () {
     ...variantStyles
   };
 };
-const getClassNames = _ref3 => {
+const getClassNames = _ref4 => {
   let {
     area,
     color,
@@ -87,12 +105,12 @@ const getClassNames = _ref3 => {
     className,
     size,
     variant
-  } = _ref3;
+  } = _ref4;
   const variantStyle = VARIANT_STYLE_MAPPER(classes)["".concat(colorTheme || color).concat((0, _componentUtils.capitalize)(variant))];
   return "".concat(className, " ").concat(_stylesModule.default.icon, " ").concat(area && "".concat(_stylesModule.default.withArea, " ").concat(variantStyle, " ").concat(_stylesModule.default["size".concat(size)]));
 };
 exports.getClassNames = getClassNames;
-const retrieveStyle = _ref4 => {
+const retrieveStyle = _ref5 => {
   var _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4;
   let {
     areaColor,
@@ -100,7 +118,7 @@ const retrieveStyle = _ref4 => {
     colorTheme,
     shade,
     theme
-  } = _ref4;
+  } = _ref5;
   const borderColor = retrieveColor({
     colorTheme: color || colorTheme,
     theme,
@@ -132,12 +150,9 @@ const retrieveStyle = _ref4 => {
 };
 exports.retrieveStyle = retrieveStyle;
 const getComponent = name => {
-  if (_countries.default.find(_ref5 => {
-    let {
-      code
-    } = _ref5;
-    return code === name;
-  })) return _Flag.default;
-  return _constants.ENERGY_ICONS[name] || TablerIcons[name];
+  if (_constants.ENERGY_ICONS[name]) return _constants.ENERGY_ICONS[name];
+  if (TablerIcons[name]) return TablerIcons[name];
+  if (FLAG_CODES.has(name)) return getFlagComponent(name);
+  return null;
 };
 exports.getComponent = getComponent;

package/dist/components/UTLabel/components/Markdown/components/Citation/index.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var _UTChip = _interopRequireDefault(require("../../../../../UTChip"));
+var _UTIcon = _interopRequireDefault(require("../../../../../UTIcon"));
 var _WithCustomHandler = _interopRequireDefault(require("../WithCustomHandler"));
 var _utils = require("./utils");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Citation = _ref => {
@@ -18,16 +19,22 @@ const Citation = _ref => {
   } = _ref;
   const onClick = () => window.open(url, '_blank', 'noopener,noreferrer');
   const icon = (0, _utils.getIcon)(label, url);
-  return /*#__PURE__*/_react.default.createElement(_UTChip.default, {
-    adornment: {
-      props: {
-        name: icon
-      },
-      type: 'icon'
-    },
+  const onKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') onClick();
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container,
     onClick: onClick,
-    size: "small"
-  }, label);
+    onKeyDown: onKeyDown,
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    colorTheme: "gray",
+    name: icon,
+    size: 20
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.label
+  }, label));
 };
 Citation.propTypes = {
   label: _propTypes.string,

package/dist/components/UTLabel/components/Markdown/components/Citation/styles.module.scss

@@ -0,0 +1,37 @@
+.container {
+  align-items: center;
+  background-color: var(--light03);
+  border-color: transparent;
+  border-radius: 30px;
+  border-style: solid;
+  border-width: 1px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  grid-gap: 8px;
+  padding: 4px 8px;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  width: fit-content;
+
+  &:hover {
+    background-color: var(--light04);
+  }
+
+  &:active {
+    background-color: var(--light05);
+  }
+}
+
+.label {
+  color: var(--gray04);
+  font-size: var(--UT-label-size-small, 0.875rem);
+  font-weight: var(--UT-label-weight-regular, 400);
+  line-height: var(--UT-label-lh-small, 1.25rem);
+  margin: 0;
+}

package/dist/components/UTPhoneInput/versions/V1/index.js

@@ -26,6 +26,7 @@ const UTPhoneInput = _ref => {
     areaCodeDataTestId,
     areaCodePlaceholder,
     disabled,
+    editablePrefix = false,
     error,
     helpText,
     inputSize,
@@ -47,16 +48,15 @@ const UTPhoneInput = _ref => {
     validationDataTestId,
     validations,
     value,
-    withAreaCode = true,
-    editablePrefix = false
+    withAreaCode = true
   } = _ref;
   const [areaCodeState, setAreaCodeState] = (0, _react.useState)({
     code: '',
     error: ''
   });
   const [blurWithError, setBlurWithError] = (0, _react.useState)(false);
-  const [prefixState, setPrefixState] = (0, _react.useState)((value === null || value === void 0 ? void 0 : value.prefix) || prefix);
   const [phoneNumber, setPhoneNumber] = (0, _react.useState)('');
+  const [prefixState, setPrefixState] = (0, _react.useState)((value === null || value === void 0 ? void 0 : value.prefix) || prefix);
   const {
     areaCodeWithoutZeroError,
     invalidAreaCodeError,
@@ -143,38 +143,39 @@ const UTPhoneInput = _ref => {
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.inputsContainer
   }, prefix && /*#__PURE__*/_react.default.createElement(_UTSelect.default, {
-    version: "V1",
+    autocompleteProps: {
+      classes: {
+        popper: _stylesModule.default.popper
+      }
+    },
+    className: _stylesModule.default.countryCodeSelect,
     classNames: {
       container: _stylesModule.default.countryCodeContainer
     },
+    clearable: false,
     dataTestId: prefixDataTestId,
     disabled: disabled || !editablePrefix,
-    options: _countries.default.map(_ref2 => {
+    icon: (_countries$find = _countries.default.find(_ref2 => {
       let {
-        code,
         prefix: prefixValue
       } = _ref2;
+      return prefixValue === prefixState;
+    })) === null || _countries$find === void 0 ? void 0 : _countries$find.code,
+    inputSize: inputSize,
+    onChange: setPrefixState,
+    options: _countries.default.map(_ref3 => {
+      let {
+        code,
+        prefix: prefixValue
+      } = _ref3;
       return {
         name: "".concat(prefixValue, " (").concat(code, ")"),
         value: prefixValue,
         icon: code
       };
     }),
-    clearable: false,
     value: prefixState,
-    onChange: setPrefixState,
-    icon: (_countries$find = _countries.default.find(_ref3 => {
-      let {
-        prefix: prefixValue
-      } = _ref3;
-      return prefixValue === prefixState;
-    })) === null || _countries$find === void 0 ? void 0 : _countries$find.code,
-    className: _stylesModule.default.countryCodeSelect,
-    autocompleteProps: {
-      classes: {
-        popper: _stylesModule.default.popper
-      }
-    }
+    version: "V1"
   }), !prefix && withAreaCode && /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: true,
     classNames: {
@@ -232,6 +233,7 @@ UTPhoneInput.propTypes = {
   areaCodePlaceholder: _propTypes.string,
   prefix: _propTypes.string,
   disabled: _propTypes.bool,
+  editablePrefix: _propTypes.bool,
   error: _propTypes.string,
   helpText: _propTypes.string,
   inputSize: _propTypes.string,
@@ -251,7 +253,6 @@ UTPhoneInput.propTypes = {
   validationDataTestId: _propTypes.string,
   validations: _UTValidation.validationDataProptypes,
   value: _propTypes.string,
-  withAreaCode: _propTypes.bool,
-  editablePrefix: _propTypes.bool
+  withAreaCode: _propTypes.bool
 };
 var _default = exports.default = UTPhoneInput;

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/components/UTValidation/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.validationDataProptypes = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _lodash = require("lodash");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _propTypes = require("prop-types");
 var _componentUtils = require("../../utils/componentUtils");
 var _UTIcon = _interopRequireDefault(require("../UTIcon"));
@@ -23,7 +23,7 @@ const UTValidation = _ref => {
     dataTestId,
     validationData = []
   } = _ref;
-  if ((0, _lodash.isEmpty)(validationData)) return null;
+  if ((0, _isEmpty.default)(validationData)) return null;
   const showIcon = status => _constants.STATUSES_WITH_ICON.includes(status);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(className, " ").concat(_stylesModule.default.container)

package/dist/components/UTWrapperObservation/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _lodash = require("lodash");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -20,7 +20,7 @@ const UTWrapperObservation = _ref => {
     dataTestId
   } = _ref;
   const matchingConfigs = (0, _utils.getMatchingConfigs)(observationWrapperConfiguration, field);
-  const hasObservation = !(0, _lodash.isEmpty)(matchingConfigs);
+  const hasObservation = !(0, _isEmpty.default)(matchingConfigs);
   if (!(observationWrapperConfiguration !== null && observationWrapperConfiguration !== void 0 && observationWrapperConfiguration.length)) {
     return children;
   }