@widergy/energy-ui 3.41.0 → 3.42.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.42.0](https://github.com/widergy/energy-ui/compare/v3.41.1...v3.42.0) (2024-11-14)
+
+
+### Features
+
+* uticon handle on icon-action celL ([4f373e4](https://github.com/widergy/energy-ui/commit/4f373e477c6358567a035116e6c67a1146c6d48d))
+
+## [3.41.1](https://github.com/widergy/energy-ui/compare/v3.41.0...v3.41.1) (2024-11-14)
+
+
+### Bug Fixes
+
+* add UTSelect and UTChecklist fixes ([#525](https://github.com/widergy/energy-ui/issues/525)) ([9547366](https://github.com/widergy/energy-ui/commit/954736685ca149c858d9cec88ed93ba522072f96))
+
 # [3.41.0](https://github.com/widergy/energy-ui/compare/v3.40.0...v3.41.0) (2024-11-14)
 
 

package/dist/components/UTBadge/index.js

@@ -25,7 +25,7 @@ const UTBadge = _ref => {
   const {
     Component,
     componentProps
-  } = (0, _componentUtils.childrenExists)(children) ? {
+  } = (0, _componentUtils.valueExists)(children) ? {
     Component: _UTLabel.default,
     componentProps: {
       colorTheme: textColorTheme,

package/dist/components/UTBadge/theme.js

@@ -39,7 +39,7 @@ const retrieveStyle = _ref => {
     children
   } = _ref;
   const baseTheme = baseButtonTheme();
-  const textTheme = (0, _componentUtils.childrenExists)(children) ? baseTheme.text : {};
+  const textTheme = (0, _componentUtils.valueExists)(children) ? baseTheme.text : {};
   const variantTheme = variantsColorTheme(theme, colorTheme);
   return {
     root: {

package/dist/components/UTBaseInputField/index.js

@@ -92,6 +92,7 @@ const UTBaseInputField = _ref => {
   }, [error, disabled, readOnly, focused]);
   return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
     autoComplete: "new-password",
+    className: classes.container,
     disabled: disabled || readOnly,
     error: error,
     id: id,

package/dist/components/UTBaseInputField/theme.js

@@ -91,7 +91,7 @@ const retrieveStyle = props => {
         paddingRight: 0
       }),
       '&:hover': {
-        backgroundColor: variant === 'transparent' && error ? theme.Palette.error['02'] : !readOnly && theme.Palette.light['03']
+        backgroundColor: variant === 'gray' ? theme.Palette.light['05'] : variant === 'transparent' && error ? theme.Palette.error['02'] : !readOnly && theme.Palette.light['03']
       }
     },
     inputContainer: {

package/dist/components/UTCheckList/versions/V1/README.MD

@@ -6,22 +6,24 @@
 
 ## Props
 
-| Name              | Type             | Default | Description                                                                                                                                       |
-| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| classNames        | objectOf(string) |         | Custom class names to apply to different elements of the checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`).                |
-| error             | string           |         | Error message to display.                                                                                                                         |
-| horizontalSpacing | string           | medium  | Spacing between the checkbox and the title horizontally.                                                                                          |
-| isSimple          | bool             | false   | Simplifies the selection process to only allow single checkbox selection.                                                                         |
-| onChange          | func.isRequired  |         | Function to call when the selection changes.                                                                                                      |
-| options           | arrayOf(shape)   |         | Array of options to be displayed as checkboxes. Each option is an object with `label`, `value`, `disabled`, `checked`, and optionally `category`. |
-| required          | bool             | false   | Indicates if the checklist is required.                                                                                                           |
-| reversed          | bool             | false   | If true, reverses the order of title and checkbox.                                                                                                |
-| selectAllLabel    | string           |         | Label for the "Select All" checkbox.                                                                                                              |
-| showSelectAll     | bool             | true    | Determines whether to show the "Select All" checkbox.                                                                                             |
-| title             | string           |         | Title for the checklist.                                                                                                                          |
-| value             | arrayOf(string)  | []      | Array of selected values.                                                                                                                         |
-| variant           | string           |         | Variant style for the checklist.                                                                                                                  |
-| verticalSpacing | string | medium | Spacing between the checkbox items vertically. |
+| Name              | Type             | Default | Description                                                                                                                                      |
+| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| classNames        | objectOf(string) |         | Custom class names to apply to different elements of the checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`).               |
+| disabled          | bool             | false   | Disables all checkboxes in the checklist when true.                                                                                              |
+|                   |
+| error             | string           |         | Error message to display.                                                                                                                        |
+| horizontalSpacing | string           | medium  | Spacing between the checkbox and the title horizontally.                                                                                         |
+| isSimple          | bool             | false   | Simplifies the selection process to only allow single checkbox selection.                                                                        |
+| onChange          | func.isRequired  |         | Function to call when the selection changes.                                                                                                     |
+| options           | arrayOf(shape)   |         | Array of options to be displayed as checkboxes. Each option is an object with `name`, `value`, `disabled`, `checked`, and optionally `category`. |
+| required          | bool             | false   | Indicates if the checklist is required.                                                                                                          |
+| reversed          | bool             | false   | If true, reverses the order of title and checkbox.                                                                                               |
+| selectAllLabel    | string           |         | Label for the "Select All" checkbox.                                                                                                             |
+| showSelectAll     | bool             | true    | Determines whether to show the "Select All" checkbox.                                                                                            |
+| title             | string           |         | Title for the checklist.                                                                                                                         |
+| value             | arrayOf(string)  | []      | Array of selected values.                                                                                                                        |
+| variant           | string           |         | Variant style for the checklist.                                                                                                                 |
+| verticalSpacing   | string           | medium  | Spacing between the checkbox items vertically.                                                                                                   |
 
 ### Option Object
 
@@ -44,9 +46,9 @@ import React from 'react';
 import UTCheckList from './UTCheckList';
 
 const options = [
-  { label: 'Option 1', value: '1' },
-  { label: 'Option 2', value: '2' },
-  { label: 'Option 3', value: '3', disabled: true, checked: true }
+  { name: 'Option 1', value: '1' },
+  { name: 'Option 2', value: '2' },
+  { name: 'Option 3', value: '3', disabled: true, checked: true }
 ];
 
 const Example = () => {
@@ -75,10 +77,10 @@ import React from 'react';
 import UTCheckList from './UTCheckList';
 
 const options = [
-  { label: 'Option 1', value: '1' },
-  { label: 'Option 2', value: '2', category: 'Group A' },
-  { label: 'Option 3', value: '3', category: 'Group B', disabled: true },
-  { label: 'Option 4', value: '4', category: 'Group A' }
+  { name: 'Option 1', value: '1' },
+  { name: 'Option 2', value: '2', category: 'Group A' },
+  { name: 'Option 3', value: '3', category: 'Group B', disabled: true },
+  { name: 'Option 4', value: '4', category: 'Group A' }
 ];
 
 const Example = () => {
@@ -113,8 +115,8 @@ const customStyles = {
 
 const Example = () => {
   const options = [
-    { label: 'Option 1', value: '1' },
-    { label: 'Option 2', value: '2' }
+    { name: 'Option 1', value: '1' },
+    { name: 'Option 2', value: '2' }
   ];
 
   const [selectedOptions, setSelectedOptions] = React.useState([]);

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

@@ -22,6 +22,7 @@ const UTCheckList = _ref => {
   let {
     classNames = {},
     dataTestId,
+    disabled,
     error,
     horizontalSpacing = 'medium',
     isSimple = false,
@@ -77,7 +78,8 @@ const UTCheckList = _ref => {
     if (isSimple) {
       onChange([receivedValue]);
     } else {
-      const newValues = !(value !== null && value !== void 0 && value.includes(receivedValue)) ? [...(value || []), receivedValue] : value.filter(elem => elem !== receivedValue);
+      var _value$some;
+      const newValues = value !== null && value !== void 0 && (_value$some = value.some) !== null && _value$some !== void 0 && _value$some.call(value, v => v === receivedValue) ? value.filter(elem => elem !== receivedValue) : [...(value || []), receivedValue];
       onChange(newValues);
     }
   }, [value, onChange, isSimple]);
@@ -96,11 +98,12 @@ const UTCheckList = _ref => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.checkboxesContainer, " ").concat(smallVerticalSpacingClass, " ").concat(variant === _constants.BUTTON_VARIANT && _stylesModule.default.buttonVariant, " ").concat(classNames.checkboxesContainer)
   }, showSelectAll && !isSimple && /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
+    className: classNames.selectAll,
+    disabled: disabled,
     indeterminate: isIndeterminate,
     onChange: handleCheckAll,
     reversed: reversedBasedOnVariant,
     spacing: horizontalSpacing,
-    className: classNames.selectAll,
     title: selectAllLabel,
     value: areAllSelected,
     variant: variant,
@@ -117,13 +120,13 @@ const UTCheckList = _ref => {
       weight: "medium"
     }, category.toUpperCase()), categoryOptions.map(item => /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
       classNames: classNames.item,
-      disabled: item.disabled,
+      disabled: item.disabled || disabled,
       isSimple: isSimple,
       key: item.value,
       onChange: () => handleChange(item.value),
       reversed: isSimple ? reversedBasedOnVariant : reversed,
       spacing: horizontalSpacing,
-      title: item.label,
+      title: item.name,
       value: (0, _utils2.isChecked)(item, value),
       variant: variant,
       version: "V1"
@@ -133,6 +136,7 @@ const UTCheckList = _ref => {
 UTCheckList.propTypes = {
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
   error: _propTypes.string,
   horizontalSpacing: _propTypes.string,
   isSimple: _propTypes.bool,
@@ -140,7 +144,7 @@ UTCheckList.propTypes = {
   options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     checked: _propTypes.bool,
     disabled: _propTypes.bool,
-    label: _propTypes.string,
+    name: _propTypes.string,
     value: _propTypes.string,
     category: _propTypes.string
   })),

package/dist/components/UTCheckList/versions/V1/utils.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.isChecked = exports.getPropValueBasedOnVariant = exports.convertIfIsString = void 0;
 var _lodash = require("lodash");
 var _constants = require("../../../UTCheckbox/versions/V1/constants");
-const isChecked = (item, inputValue) => inputValue && !!(inputValue !== null && inputValue !== void 0 && inputValue.find(elem => elem === item.value)) || item.disabled && item.checked;
+const isChecked = (item, inputValue) => {
+  var _inputValue$some;
+  return (inputValue === null || inputValue === void 0 || (_inputValue$some = inputValue.some) === null || _inputValue$some === void 0 ? void 0 : _inputValue$some.call(inputValue, elem => elem === item.value)) || item.disabled && item.checked;
+};
 exports.isChecked = isChecked;
 const convertIfIsString = value => (0, _lodash.isString)(value) ? value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"')) : value;
 exports.convertIfIsString = convertIfIsString;

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

@@ -34,11 +34,11 @@ const UTCheckbox = _ref => {
     withMarkdown
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
-  const iconName = (0, _react.useMemo)(() => indeterminate ? _constants.INDETERMINATE_ICON : value ? _constants.CHECKED_ICON : '', [indeterminate, value]);
+  const iconName = (0, _react.useMemo)(() => indeterminate ? _constants.INDETERMINATE_ICON : value === true ? _constants.CHECKED_ICON : '', [indeterminate, value]);
   const handlePress = (0, _react.useCallback)(() => {
-    if (!disabled && onChange) onChange(!value);
+    if (!disabled && onChange) onChange(value === false);
   }, [disabled, onChange, value]);
-  const shouldHighlightLabel = value && variant === _constants.BUTTON_VARIANT;
+  const shouldHighlightLabel = value === true && variant === _constants.BUTTON_VARIANT;
   const touchableProps = {
     onMouseDown: handlePress,
     disabled

package/dist/components/UTCheckbox/versions/V1/theme.js

@@ -9,7 +9,7 @@ const MEDIUM_SPACING = 16;
 const SMALL_SPACING = 8;
 const baseCheckBoxTheme = theme => ({
   container: {
-    alignItems: 'center',
+    alignItems: 'center !important',
     display: 'flex'
   },
   iconContainer: {
@@ -56,7 +56,7 @@ const conditionalStyles = _ref => {
       })
     },
     iconContainer: {
-      ...((value || indeterminate) && {
+      ...((value === true || indeterminate) && {
         backgroundColor: theme.Palette.accent['04'],
         borderColor: theme.Palette.accent['04']
       })

package/dist/components/UTLabel/index.js

@@ -9,8 +9,8 @@ var _propTypes = require("prop-types");
 var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
 var _remarkBreaks = _interopRequireDefault(require("remark-breaks"));
 var _rehypeRaw = _interopRequireDefault(require("rehype-raw"));
-var _componentUtils = require("../../utils/componentUtils");
 var _classesUtils = require("../../utils/classesUtils");
+var _componentUtils = require("../../utils/componentUtils");
 var _UTSkeleton = _interopRequireDefault(require("../UTSkeleton"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _constants = require("./constants");
@@ -31,7 +31,7 @@ const UTLabel = _ref => {
     variant,
     withMarkdown
   } = _ref;
-  if (!(0, _componentUtils.childrenExists)(children)) return null;
+  if (!(0, _componentUtils.valueExists)(children)) return null;
   const Component = _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant];
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, {
     className

package/dist/components/UTSearchField/index.js

@@ -10,6 +10,7 @@ var _constants = require("../UTBaseInputField/constants");
 var _UTBaseInputField = _interopRequireDefault(require("../UTBaseInputField"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const UTSearchField = _ref => {
   let {
@@ -51,6 +52,10 @@ const UTSearchField = _ref => {
   }] : [];
   return /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: true,
+    classNames: {
+      container: "".concat(_stylesModule.default.container, " ").concat(className),
+      input: classes.input
+    },
     dataTestId: dataTestId,
     disabled: disabled,
     id: id,
@@ -61,10 +66,6 @@ const UTSearchField = _ref => {
     onFocus: onFocus,
     placeholder: placeholder,
     rightAdornments: rightAdornments,
-    classNames: {
-      root: className,
-      input: classes.input
-    },
     type: type,
     value: value,
     variant: variant

package/dist/components/UTSearchField/styles.module.scss

@@ -0,0 +1,3 @@
+.container {
+  width: 100%;
+}

package/dist/components/UTSelect/versions/V1/README.md

@@ -17,7 +17,7 @@
 | noMatchesText         | string                     |          | Text to display when no matches are found in the search.                                                  |
 | onChange              | func                       |          | Function to call when the selected value(s) change.                                                       |
 | onChangeSearchTerm    | func                       |          | Function to call when the search term changes.                                                            |
-| options               | array                      |          | Array of options to be displayed in the dropdown. Each option is an object with `label` and `value`.      |
+| options               | array                      |          | Array of options to be displayed in the dropdown. Each option is an object with `name` and `value`.      |
 | placeholder           | string                     |          | Placeholder text for the select field.                                                                    |
 | prefix                | string                     |          | Text to display as a prefix inside the input field.                                                       |
 | readOnly              | bool                       | false    | Makes the select field read-only, preventing changes but allowing the dropdown to open.                   |
@@ -34,7 +34,7 @@ The `options` prop is an array of objects, each representing an option:
 
 | Name  | Type           | Description                      |
 | ----- | -------------- | -------------------------------- |
-| label | string         | Label to display for the option. |
+| name | string         | Label to display for the option. |
 | value | string, number | Value of the option.             |
 
 ### `withAutoReset`
@@ -60,10 +60,10 @@ import React, { useState } from 'react';
 import UTSelect from './UTSelect';
 
 const options = [
-  { label: 'Option 1', value: '1' },
-  { label: 'Option 2', value: '2' },
-  { label: 'Option 3', value: '3' },
-  { label: 'Option 4', value: '4' }
+  { name: 'Option 1', value: '1' },
+  { name: 'Option 2', value: '2' },
+  { name: 'Option 3', value: '3' },
+  { name: 'Option 4', value: '4' }
 ];
 
 const UTSelectExample = () => {

package/dist/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -40,7 +40,7 @@ const ListboxComponent = _ref => {
 };
 ListboxComponent.propTypes = {
   filteredOptions: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    label: _propTypes.string,
+    name: _propTypes.string,
     value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
   })),
   handleSelectionChange: _propTypes.func,

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

@@ -32,10 +32,11 @@ const UTSelect = _ref => {
     helpText,
     multiple = false,
     noMatchesText = 'No hay coincidencias con tu búsqueda',
+    noOptionsText = 'No hay opciones disponibles',
     onChange = () => {},
     onChangeSearchTerm = () => {},
-    options,
-    placeholder = 'Seleccione un elemento',
+    options = [],
+    placeholder,
     prefix,
     readOnly,
     required,
@@ -46,6 +47,7 @@ const UTSelect = _ref => {
     withAutoReset = true
   } = _ref;
   const optionsSortedByCategory = (0, _react.useMemo)(() => {
+    if (!options || options.length === 0) return [];
     const clonedOptions = (0, _clone.default)(options);
     const categoryOrder = new Map();
     clonedOptions.forEach(option => {
@@ -64,11 +66,14 @@ const UTSelect = _ref => {
       setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, null, multiple));
     }
   }, [multiple, onChange, optionsSortedByCategory, value, withAutoReset]);
+  (0, _react.useEffect)(() => {
+    setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
+  }, []);
   (0, _react.useEffect)(() => {
     if (isPopperOpen) setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
-  }, [isPopperOpen, optionsSortedByCategory, value, multiple]);
+  }, [isPopperOpen]);
   const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
-  const filteredOptions = (0, _react.useMemo)(() => disableFilterOptions ? sortedOptions : sortedOptions.filter(option => option.label.toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions]);
+  const filteredOptions = (0, _react.useMemo)(() => disableFilterOptions ? sortedOptions : sortedOptions.filter(option => option.name.toLowerCase().includes(searchTerm.toLowerCase())), [sortedOptions, searchTerm, disableFilterOptions]);
   const handleSearchChange = (0, _react.useCallback)(searchValue => {
     onChangeSearchTerm === null || onChangeSearchTerm === void 0 || onChangeSearchTerm(searchValue);
     setSearchTerm(searchValue);
@@ -77,10 +82,10 @@ const UTSelect = _ref => {
     setIsPopperOpen(false);
     const displayValue = (0, _utils2.getDisplayValue)(inputValue, optionsSortedByCategory, multiple);
     handleSearchChange(displayValue);
-    setShowClearButton(!!displayValue);
+    setShowClearButton(displayValue !== '');
   }, [_utils2.getDisplayValue, optionsSortedByCategory, multiple, handleSearchChange]);
   const handleSelectionChange = newValues => {
-    const selectedValue = multiple ? newValues : newValues[0] || '';
+    const selectedValue = multiple ? newValues : newValues.length > 0 ? newValues[0] : '';
     onChange(selectedValue);
     if (!multiple) {
       var _inputRef$current;
@@ -92,11 +97,9 @@ const UTSelect = _ref => {
     setShowClearButton(false);
     handleSearchChange('');
     setIsPopperOpen(true);
-    setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
   };
   const handleInputBlur = () => {
     clearSearchInputValue(value);
-    setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, value, multiple));
   };
   const handleClearSelection = () => {
     const clearedValue = multiple ? [] : null;
@@ -104,7 +107,6 @@ const UTSelect = _ref => {
     handleSearchChange('');
     setShowClearButton(false);
     setIsPopperOpen(false);
-    setSortedOptions((0, _utils2.sortOptions)(optionsSortedByCategory, clearedValue, multiple));
   };
   const leftAdornments = (0, _react.useMemo)(() => (0, _utils2.getLeftAdornments)({
     error,
@@ -145,6 +147,10 @@ const UTSelect = _ref => {
     noMatchesText,
     value
   }), [filteredOptions, handleSelectionChange, multiple, noMatchesText, value]);
+  const noOptionsTextComponent = /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: _stylesModule.default.noOptionsLabel
+  }, noOptionsText);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(className)
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
@@ -152,10 +158,11 @@ const UTSelect = _ref => {
     variant: "body"
   }, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, {
     disabled: disabled || readOnly,
-    getOptionLabel: option => option.label,
+    getOptionLabel: option => option.name,
     ListboxComponent: _ListboxComponent.default,
     ListboxProps: listBoxProps,
     multiple: multiple,
+    noOptionsText: noOptionsTextComponent,
     onClose: () => setIsPopperOpen(false),
     onOpen: () => setIsPopperOpen(true),
     open: isPopperOpen,
@@ -184,10 +191,11 @@ UTSelect.propTypes = {
   helpText: _propTypes.string,
   multiple: _propTypes.bool,
   noMatchesText: _propTypes.string,
+  noOptionsText: _propTypes.string,
   onChange: _propTypes.func,
   onChangeSearchTerm: _propTypes.func,
   options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    label: _propTypes.string,
+    name: _propTypes.string,
     value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number])
   })),
   placeholder: _propTypes.string,

package/dist/components/UTSelect/versions/V1/utils.js

@@ -9,22 +9,21 @@ var _clone = _interopRequireDefault(require("lodash/clone"));
 var _constants = require("../../../UTBaseInputField/constants");
 var _constants2 = require("../../../UTCheckList/versions/V1/constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const hasOption = (options, value) => options.some(opt => {
-  var _opt$subOptions;
-  return opt.value === value || ((_opt$subOptions = opt.subOptions) === null || _opt$subOptions === void 0 ? void 0 : _opt$subOptions.some(sub => sub.value === value));
-});
-const shouldReset = (value, options, multiple) => {
-  if ((0, _array.isEmpty)(options) || (0, _array.isEmpty)(value)) return false;
-  return multiple ? value.some(val => !hasOption(options, val)) : !hasOption(options, value);
+const shouldResetMultipleSelect = (value, options) => !(0, _array.isEmpty)(value) && ((0, _array.isEmpty)(options) || value.some(el => !options.some(opt => opt.value === el) && !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub.value === el))));
+const shouldResetSimpleSelect = (value, options) => value && ((0, _array.isEmpty)(options) || !options.some(el => el.value === value) && !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value)));
+const shouldReset = (value, options, isMultiple) => {
+  if (isMultiple) return shouldResetMultipleSelect(value, options);
+  return shouldResetSimpleSelect(value, options);
 };
 exports.shouldReset = shouldReset;
 const getDisplayValue = (inputValue, options, multiple) => {
-  if (!inputValue) return '';
+  if (inputValue === null || inputValue === undefined || inputValue === '') return '';
   const findLabel = optionValue => {
     var _options$find;
-    return ((_options$find = options.find(o => o.value === optionValue)) === null || _options$find === void 0 ? void 0 : _options$find.label) || '';
+    return ((_options$find = options.find(o => o.value === optionValue)) === null || _options$find === void 0 ? void 0 : _options$find.name) || '';
   };
-  return multiple ? inputValue.map(findLabel).join(', ') : findLabel(inputValue);
+  const displayValue = multiple ? inputValue.map(findLabel).join(', ') : findLabel(inputValue);
+  return displayValue;
 };
 exports.getDisplayValue = getDisplayValue;
 const getLeftAdornments = _ref => {

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

@@ -11,11 +11,13 @@ var _CircularProgress = _interopRequireDefault(require("@material-ui/core/Circul
 var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
 var _UTMenu = _interopRequireDefault(require("../../../UTMenu"));
 var _types = require("../../types");
+var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 ActionIcons = _ref => {
   let {
     classes,
@@ -24,21 +26,23 @@ const ActionIcons = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, column.actions.map(_ref2 => {
     let {
-      key,
-      Icon,
-      tooltip,
-      disabledTooltip,
-      onClick,
       buttonClassName,
-      iconClassName,
       disabledIconClassName,
-      loadingClassName,
-      loadingSize = _constants.DEAULT_LOADING_SIZE,
-      isVisible = () => true,
-      tooltipProps = {},
+      disabledTooltip,
+      Icon,
+      iconClassName,
+      iconName = '',
+      iconProps,
       isDisabled = () => false,
       isLoading = () => false,
+      isVisible = () => true,
+      key,
+      loadingClassName,
+      loadingSize = _constants.DEAULT_LOADING_SIZE,
       menuItems = [],
+      onClick,
+      tooltip,
+      tooltipProps = {},
       withMenuDivider
     } = _ref2;
     const [menuAnchor, setMenuAnchor] = (0, _react.useState)();
@@ -77,9 +81,11 @@ const ActionIcons = _ref => {
     }, isLoading(rowData) ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
       className: "".concat(classes.actionLoading, " ").concat(loadingClassName),
       size: loadingSize
-    }) : /*#__PURE__*/_react.default.createElement(Icon, {
+    }) : (0, _array.isEmpty)(iconName) ? /*#__PURE__*/_react.default.createElement(Icon, {
       className: "\n                        ".concat(_stylesModule.default.actionIcon, "\n                        ").concat(classes.actionIcon, "\n                        ").concat(iconClassName, "\n                        ").concat(isDisabled(rowData) && disabledIconClassName)
-    })), !!menuAnchor && !(0, _array.isEmpty)(menuItems) && /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
+    }) : /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+      name: iconName
+    }, iconProps))), !!menuAnchor && !(0, _array.isEmpty)(menuItems) && /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
       anchor: menuAnchor,
       contextData: menuRowContextData,
       onClose: closeMenu,

package/dist/utils/componentUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isUTIcon = exports.getDefaultColorShade = exports.default = exports.childrenExists = exports.capitalize = void 0;
+exports.valueExists = exports.isUTIcon = exports.getDefaultColorShade = exports.default = exports.capitalize = void 0;
 var _Palette = require("../constants/Palette");
 const A_CHAR_CODE = 65;
 const Z_CHAR_CODE = 90;
@@ -21,8 +21,8 @@ const isUTIcon = icon => typeof icon === 'string';
 exports.isUTIcon = isUTIcon;
 const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
 exports.getDefaultColorShade = getDefaultColorShade;
-const childrenExists = children => children !== undefined && children !== null;
-exports.childrenExists = childrenExists;
+const valueExists = value => value !== undefined && value !== null;
+exports.valueExists = valueExists;
 var _default = exports.default = {
   capitalize,
   getAvatarColors,

package/package.json

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