@widergy/energy-ui 3.40.0 → 3.41.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [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)
+
+
+### Features
+
+* minor adjustments ([163b21e](https://github.com/widergy/energy-ui/commit/163b21ec4d27c7e6185e7ca1fdcc8aac1ee454e3))
+* utbutton props on panel ([1356c81](https://github.com/widergy/energy-ui/commit/1356c81fab15a0252d80b76c2f9d108a61d2bdd7))
+
 # [3.40.0](https://github.com/widergy/energy-ui/compare/v3.39.1...v3.40.0) (2024-11-13)
 
 

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/UTPanel/versions/V1/README.md

@@ -4,33 +4,33 @@ Component used for displaying a side panel.
 
 ## Props
 
-| Name                        | Type   | Default  | Description                                                                                                                                                                      |
-| :-------------------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| children                    | node   |          | Component content                                                                                                                                                                |
-| classes                     | object |          | Classes returned by UTPanel own[theme](./theme.js#L40) `retrieveStyle` and classes received from props.                                                                          |
-| classNames                  | object |          | Overrides the default panel theme.                                                                                                                                               |
-| collapsableHeader           | bool   | false    | Indicates if "header items" section is collapsible.                                                                                                                              |
-| currentStep                 | number | 1        | Workflow step number used to show the current progress in the UTProgressBar                                                                                                      |
-| disableScrollbar            | bool   | false    | Render the children without scrollbar                                                                                                                                            |
-| HeaderComponent             | node   |          | Custom header to render.                                                                                                                                                         |
-| headerItems                 | array  |          | Array of items (object) to show in "header items" section. Each item should have: "title" - String, "icon" - String, "value" - String                                            |
-| headerMainActionButton      | object |          | Object with header main button details: "callBack" - func // "colorTheme" - string - deafult: 'primary' // "text" - string // "variant" - string - default: 'semitransparent'    |
-| headerSecondaryActionButton | object |          | Object with header secondary button details:<br /> "callBack" - func // "colorTheme" - string - default: "success" // "text" - string // "variant" - string - ddefault: "filled" |
-| hideCloseButton             | bool   | false    | Indicates whether the close button is hide or not                                                                                                                                |
-| hideHeader                  | bool   | false    | Indicates whether the entire header is hide or not                                                                                                                               |
-| hideMainButton              | bool   | false    | Indicates whether the main (bottom) button is hide or not                                                                                                                        |
-| isWorkflow                  | bool   | false    | Indicates if the panel children's content a workflow. This prop activates the progress bar.                                                                                      |
-| mainButton                  | object |          | [UTButton props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTButton)                                                                                   |
-| modalProps                  | object |          | Material UI[modal props](https://v4.mui.com/api/modal/)                                                                                                                          |
-| onClose                     | func   |          | Callback to execute when closing panel.                                                                                                                                          |
-| onEndReachedCallback        | func   |          | Callback to execute when reaching the end of the vertical scroll                                                                                                                 |
-| onOpen                      | func   | () => {} | Callback to execute when opening panel.                                                                                                                                          |
-| open                        | bool   |          | Indicates whether the panel is open or not                                                                                                                                       |
-| panelSide                   | string |          | Indicates panel side.                                                                                                                                                            |
-| perfectScrollbarOptions     | object |          | [Perfect scrollbar](https://www.npmjs.com/package/react-perfect-scrollbar) props                                                                                                 |
-| singleHeaderItemsColumn     | bool   | false    | Indicates whether the header items are shown in a single column or not                                                                                                           |
-| size                        | string | 'M'      | Indicates the size of panel. Currently we have two options:<br /> L -> 800px<br /> M -> 450px                                                                                    |
-| stepsCount                  | Number |          | Indicates the total steps in case of workflow                                                                                                                                    |
-| subtitle                    | string |          | Subtitle to show                                                                                                                                                                 |
-| title                       | string |          | Title to show                                                                                                                                                                    |
-| titleProps                  | object | {}       | UTLabel props for title. Default props: variant="title2" weight="medium"                                                                                                         |
+| Name                        | Type   | Default  | Description                                                                                                                                                                                                    |
+| :-------------------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children                    | node   |          | Component content                                                                                                                                                                                              |
+| classes                     | object |          | Classes returned by UTPanel own[theme](./theme.js#L40) `retrieveStyle` and classes received from props.                                                                                                        |
+| classNames                  | object |          | Overrides the default panel theme. headerMainActionButton                                                                                                                                                      |
+| collapsableHeader           | bool   | false    | Indicates if "header items" section is collapsible.                                                                                                                                                            |
+| currentStep                 | number | 1        | Workflow step number used to show the current progress in the UTProgressBar                                                                                                                                    |
+| disableScrollbar            | bool   | false    | Render the children without scrollbar                                                                                                                                                                          |
+| HeaderComponent             | node   |          | Custom header to render.                                                                                                                                                                                       |
+| headerItems                 | array  |          | Array of items (object) to show in "header items" section. Each item should have: "title" - String, "icon" - String, "value" - String                                                                          |
+| headerMainActionButton      | object |          | Object with header main button details: "colorTheme" - string - deafult: 'primary' // "variant" - string - default: 'semitransparent'<br />// This prop will be spread so that it supports any UTButton props. |
+| headerSecondaryActionButton | object |          | Object with header secondary button details: "colorTheme" - string - default: "success" // "variant" - string - default: "filled" // This prop will be spread so that it supports any UTButton props.          |
+| hideCloseButton             | bool   | false    | Indicates whether the close button is hide or not                                                                                                                                                              |
+| hideHeader                  | bool   | false    | Indicates whether the entire header is hide or not                                                                                                                                                             |
+| hideMainButton              | bool   | false    | Indicates whether the main (bottom) button is hide or not                                                                                                                                                      |
+| isWorkflow                  | bool   | false    | Indicates if the panel children's content a workflow. This prop activates the progress bar.                                                                                                                    |
+| mainButton                  | object |          | [UTButton props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTButton)                                                                                                                 |
+| modalProps                  | object |          | Material UI[modal props](https://v4.mui.com/api/modal/)                                                                                                                                                        |
+| onClose                     | func   |          | Callback to execute when closing panel.                                                                                                                                                                        |
+| onEndReachedCallback        | func   |          | Callback to execute when reaching the end of the vertical scroll                                                                                                                                               |
+| onOpen                      | func   | () => {} | Callback to execute when opening panel.                                                                                                                                                                        |
+| open                        | bool   |          | Indicates whether the panel is open or not                                                                                                                                                                     |
+| panelSide                   | string |          | Indicates panel side.                                                                                                                                                                                          |
+| perfectScrollbarOptions     | object |          | [Perfect scrollbar](https://www.npmjs.com/package/react-perfect-scrollbar) props                                                                                                                               |
+| singleHeaderItemsColumn     | bool   | false    | Indicates whether the header items are shown in a single column or not                                                                                                                                         |
+| size                        | string | 'M'      | Indicates the size of panel. Currently we have two options:<br /> L -> 800px<br /> M -> 450px                                                                                                                  |
+| stepsCount                  | Number |          | Indicates the total steps in case of workflow                                                                                                                                                                  |
+| subtitle                    | string |          | Subtitle to show                                                                                                                                                                                               |
+| title                       | string |          | Title to show                                                                                                                                                                                                  |
+| titleProps                  | object | {}       | UTLabel props for title. Default props: variant="title2" weight="medium"                                                                                                                                       |

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

@@ -122,15 +122,13 @@ const UTPanel = _ref => {
     colorTheme: "gray"
   }, subtitle))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerRightArea
-  }, !(0, _isEmpty.default)(headerSecondaryActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    colorTheme: headerSecondaryActionButton.colorTheme || 'primary',
-    onClick: headerSecondaryActionButton.callBack,
-    variant: headerSecondaryActionButton.variant || 'semitransparent'
-  }, headerSecondaryActionButton.text), !(0, _isEmpty.default)(headerMainActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    colorTheme: headerMainActionButton.colorTheme || 'success',
-    onClick: headerMainActionButton.callBack,
-    variant: headerMainActionButton.variant || 'filled'
-  }, headerMainActionButton.text)))), !(0, _isEmpty.default)(headerItems) && /*#__PURE__*/_react.default.createElement("div", {
+  }, !(0, _isEmpty.default)(headerSecondaryActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    colorTheme: "primary",
+    variant: "semitransparent"
+  }, headerSecondaryActionButton), headerSecondaryActionButton.text), !(0, _isEmpty.default)(headerMainActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    colorTheme: "success",
+    variant: "filled"
+  }, headerMainActionButton), headerMainActionButton.text)))), !(0, _isEmpty.default)(headerItems) && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerItemsContainer, " \n          ").concat(collapseHeader ? _stylesModule.default.expandedContainer : _stylesModule.default.collapsedContainer, " \n          ").concat(singleHeaderItemsColumn && _stylesModule.default.singleHeaderItemsColumn || '')
   }, headerItems.map(_DataItem.default)), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.bodyContainer, " ").concat(classes.bodyContainer)

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/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.40.0",
+  "version": "3.41.1",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",