@widergy/energy-ui 2.8.1 → 2.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.9.0](https://github.com/widergy/energy-ui/compare/v2.8.1...v2.9.0) (2023-10-26)
+
+
+### Features
+
+* autocomplete - multiple ([#387](https://github.com/widergy/energy-ui/issues/387)) ([4f567e2](https://github.com/widergy/energy-ui/commit/4f567e2e23529cca996d41becde5b473f2c029ad))
+
 ## [2.8.1](https://github.com/widergy/energy-ui/compare/v2.8.0...v2.8.1) (2023-10-12)
 
 

package/dist/components/UTAutocomplete/index.js

@@ -45,10 +45,6 @@ var UTAutocomplete = function UTAutocomplete(_ref) {
     placeholder = _ref.placeholder,
     textFieldProps = _ref.textFieldProps,
     variant = _ref.variant;
-  var _useState = (0, _react.useState)(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    componentValue = _useState2[0],
-    setComponentValue = _useState2[1];
   var _ref2 = field.configuration || {},
     _ref2$field_options_v = _ref2.field_options_value_key,
     valueKey = _ref2$field_options_v === void 0 ? _constants.DEFAULT_VALUE_KEY : _ref2$field_options_v,
@@ -57,23 +53,58 @@ var UTAutocomplete = function UTAutocomplete(_ref) {
     _ref2$field_options_n = _ref2.field_options_no_results_message,
     noOptionsMessage = _ref2$field_options_n === void 0 ? _constants.INVALID_OPTION : _ref2$field_options_n,
     _ref2$field_options_e = _ref2.field_options_empty_message,
-    emptyOptionsLabel = _ref2$field_options_e === void 0 ? _constants.ERROR_EMPTY_OPTIONS : _ref2$field_options_e;
+    emptyOptionsLabel = _ref2$field_options_e === void 0 ? _constants.ERROR_EMPTY_OPTIONS : _ref2$field_options_e,
+    _ref2$multiple = _ref2.multiple,
+    multiple = _ref2$multiple === void 0 ? false : _ref2$multiple;
+  var initialValue = (0, _react.useMemo)(function () {
+    return multiple ? [] : '';
+  }, [multiple]);
+  var _useState = (0, _react.useState)(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    componentValue = _useState2[0],
+    setComponentValue = _useState2[1];
   var textInputLabel = (0, _array.isEmpty)(options) ? emptyOptionsLabel : label;
   var fieldDisabled = disabled || loading || (0, _array.isEmpty)(options);
   var onChange = function onChange(_, values) {
-    input.onChange(values === null || values === void 0 ? void 0 : values[valueKey]);
-    if (!values) setComponentValue(null);
+    input.onChange(multiple ? values === null || values === void 0 ? void 0 : values.map(function (val) {
+      return val[valueKey];
+    }) : values === null || values === void 0 ? void 0 : values[valueKey]);
+    if (!values) setComponentValue(initialValue);
     if (field.onChange) field.onChange(values);
   };
   (0, _react.useEffect)(function () {
-    setComponentValue(input.value && options ? options.find(function (option) {
+    setComponentValue(input.value && !(0, _array.isEmpty)(options) ? multiple ? options.filter(function (option) {
+      return input.value.some(function (inputValue) {
+        return inputValue === option[valueKey];
+      });
+    }) : options.find(function (option) {
       return option[valueKey] === input.value;
-    }) : null);
+    }) : multiple ? [] : '');
   }, [input.value]);
   (0, _react.useEffect)(function () {
-    if (options && input.value && !componentValue) setComponentValue(options.find(function (option) {
-      return option[valueKey] === input.value;
-    }));
+    if ((0, _array.isEmpty)(options) || (multiple ? (0, _array.isEmpty)(input.value) : !input.value)) {
+      if (multiple && !(0, _array.isEmpty)(componentValue) || componentValue) {
+        input.onChange(initialValue);
+        setComponentValue(initialValue);
+      }
+    } else {
+      var newInputValue = multiple ? input.value.filter(function (inputValue) {
+        return options.some(function (option) {
+          return inputValue === option[valueKey];
+        });
+      }) : options.some(function (option) {
+        return option[valueKey] === input.value;
+      }) ? input.value : '';
+      input.onChange(newInputValue);
+      var updatedValue = multiple ? options.filter(function (option) {
+        return newInputValue.some(function (inputValue) {
+          return inputValue === option[valueKey];
+        });
+      }) : options.find(function (option) {
+        return option[valueKey] === newInputValue;
+      });
+      setComponentValue(updatedValue);
+    }
   }, [options]);
   var textInputEndAdornment = loading ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
     className: classes.loadingIcon
@@ -82,23 +113,24 @@ var UTAutocomplete = function UTAutocomplete(_ref) {
   });
   var errorMessage = (0, _form.shouldShowErrors)(meta) && meta.error || '';
   return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, _extends({
-    id: field.key,
     clearText: _constants.CLEAR_TEXT,
     closeText: _constants.CLOSE_TEXT,
-    openText: _constants.OPEN_TEXT,
+    disabled: fieldDisabled,
+    getOptionLabel: function getOptionLabel(option) {
+      return option[labelKey] || '';
+    },
+    id: field.key,
     ListboxComponent: _ListBox.default,
     ListboxProps: {
       fixedSizeListProps: fixedSizeListProps
     },
-    getOptionLabel: function getOptionLabel(option) {
-      return option[labelKey] || '';
-    },
-    onChange: onChange,
-    disabled: fieldDisabled,
-    value: componentValue,
+    multiple: multiple,
     noOptionsText: noOptionsMessage,
+    onChange: onChange,
+    openText: _constants.OPEN_TEXT,
     options: options,
     popupIcon: textInputEndAdornment,
+    value: componentValue,
     renderInput: function renderInput(params) {
       return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({}, params, {
         label: textInputLabel,

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

@@ -3,6 +3,8 @@
 .drawer {
   align-items: center;
   display: flex;
+  margin: 0;
+  max-height: auto;
   overflow-x: hidden;
 
   @media #{$desktop-tablet} {

package/package.json

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