labsense-ui-kit 1.3.35 → 1.3.37

package/dist/Dropdown/SelectOption.d.ts

@@ -76,6 +76,8 @@ interface SelectOption {
     };
     dropDownPosition?: 'left' | 'center' | 'right';
     allowCustomValue?: boolean;
+    loading?: boolean;
+    loadingText?: string;
 }
 declare const SelectOption: React.FC<SelectOption>;
 export default SelectOption;

package/dist/index.js

@@ -8191,7 +8191,6 @@ var SearchBar$1 = styled__default.input(_templateObject10$3 || (_templateObject1
   return $placeholderColor || theme.vms.text.light;
 });
 var SelectOption = function SelectOption(_ref37) {
-  var _options$find;
   var title = _ref37.title,
     titlecolor = _ref37.titlecolor,
     titleWeight = _ref37.titleWeight,
@@ -8241,7 +8240,11 @@ var SelectOption = function SelectOption(_ref37) {
     _ref37$dropDownPositi = _ref37.dropDownPosition,
     dropDownPosition = _ref37$dropDownPositi === void 0 ? 'left' : _ref37$dropDownPositi,
     _ref37$allowCustomVal = _ref37.allowCustomValue,
-    allowCustomValue = _ref37$allowCustomVal === void 0 ? false : _ref37$allowCustomVal;
+    allowCustomValue = _ref37$allowCustomVal === void 0 ? false : _ref37$allowCustomVal,
+    _ref37$loading = _ref37.loading,
+    loading = _ref37$loading === void 0 ? false : _ref37$loading,
+    _ref37$loadingText = _ref37.loadingText,
+    loadingText = _ref37$loadingText === void 0 ? 'Loading...' : _ref37$loadingText;
   var themeColors = useTheme();
   var _useState = React.useState(false),
     dropUp = _useState[0],
@@ -8252,6 +8255,12 @@ var SelectOption = function SelectOption(_ref37) {
   var _useState3 = React.useState(''),
     searchTerm = _useState3[0],
     setSearchTerm = _useState3[1];
+  React.useEffect(function () {
+    if (loading) {
+      setIsOpen(false);
+      setSearchTerm('');
+    }
+  }, [loading]);
   var showSearchBox = searchBox && (options.length > 5 || allowCustomValue);
   var toggleDropdown = function toggleDropdown() {
     var refToUse = (positionRef === null || positionRef === void 0 ? void 0 : positionRef.current) || dropdownRef.current;
@@ -8327,9 +8336,10 @@ var SelectOption = function SelectOption(_ref37) {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  var label = options === null || options === void 0 ? void 0 : (_options$find = options.find(function (option) {
+  var selectedOption = options === null || options === void 0 ? void 0 : options.find(function (option) {
     return option.value === value;
-  })) === null || _options$find === void 0 ? void 0 : _options$find.label;
+  });
+  var displayLabel = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (allowCustomValue && value ? value : '');
   var handleSearchChange = function handleSearchChange(e) {
     setSearchTerm(e.target.value);
   };
@@ -8352,7 +8362,7 @@ var SelectOption = function SelectOption(_ref37) {
     "$width": width
   }, React__default.createElement(DropdownButton$1, {
     onClick: function onClick() {
-      if (!disabled) toggleDropdown();
+      if (!disabled && !loading) toggleDropdown();
     },
     "$width": width,
     "$border": border,
@@ -8360,19 +8370,23 @@ var SelectOption = function SelectOption(_ref37) {
     "$borderRadius": borderRadius,
     "$size": size,
     "$isOpen": isOpen,
-    "$disabled": disabled
+    "$disabled": disabled || loading
   }, icon && React__default.createElement(Icon, {
     icon: icon.name,
     size: icon.size || 14,
     weight: icon.weight || '1px',
     color: icon.color || themeColors.vms.text.medium,
     cursor: 'pointer'
-  }), label ? React__default.createElement(LabelText$1, {
+  }), loading ? React__default.createElement(LabelText$1, {
+    "$fontStyle": 'italic',
+    "$disabled": true,
+    "$size": size
+  }, loadingText) : displayLabel ? React__default.createElement(LabelText$1, {
     "$color": color,
     "$disabled": disabled,
     "$size": size
-  }, label) : React__default.createElement(LabelText$1, {
-    "$fontStyle": fontStyle ? fontStyle : 'italic',
+  }, displayLabel) : React__default.createElement(LabelText$1, {
+    "$fontStyle": fontStyle || 'italic',
     "$color": color || themeColors.vms.text.medium,
     "$size": size
   }, labelText), React__default.createElement(Icon, {
@@ -8417,7 +8431,7 @@ var SelectOption = function SelectOption(_ref37) {
       onClick: function onClick() {
         return handleOptionClick(option.value);
       },
-      "$optionSelected": option.value === value
+      "$optionSelected": option.value === value || allowCustomValue && option.value === displayLabel
     }, option.label);
   }) : !isCustomValue && React__default.createElement(NoOptions, null, NoOptionsText)))));
 };