labsense-ui-kit 1.3.57 → 1.3.58

package/dist/Dropdown/MultiSelectDropdown.d.ts

@@ -56,6 +56,8 @@ interface MultiSelectDropdownProps {
     required?: boolean;
     searchBox?: boolean;
     NoOptionsText?: string;
+    selectAllOption?: boolean;
+    selectAllLabel?: string;
 }
 declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
 export default MultiSelectDropdown;

package/dist/index.js

@@ -7945,11 +7945,16 @@ var OptionComponent = function OptionComponent(_ref9) {
     }) : [].concat(selectedOptions, [currentOption]);
     onChange === null || onChange === void 0 ? void 0 : onChange(newOption);
   };
-  var SortedOptions = [].concat(options).sort(function (a, b) {
-    return a.labelText.localeCompare(b.labelText);
-  }).filter(function (option) {
+  var filteredOptions = options.filter(function (option) {
     return option.labelText.toLowerCase().includes(searchQuery.toLowerCase());
   });
+  var firstOption = filteredOptions[0],
+    restOptions = filteredOptions.slice(1);
+  var finalOptions = (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) === '__SELECT_ALL__' ? [firstOption].concat(restOptions.sort(function (a, b) {
+    return a.labelText.localeCompare(b.labelText);
+  })) : filteredOptions.sort(function (a, b) {
+    return a.labelText.localeCompare(b.labelText);
+  });
   return React__default.createElement(Container, {
     "$flexDirection": 'column',
     "$gap": '8px',
@@ -7970,18 +7975,22 @@ var OptionComponent = function OptionComponent(_ref9) {
     onChange: handleSearchChange,
     "$inputColor": searchbarTextColor,
     "$placeholderColor": placeholderColor
-  })), React__default.createElement(OptionContainer, null, SortedOptions.length > 0 ? SortedOptions.map(function (option, id) {
+  })), React__default.createElement(OptionContainer, null, finalOptions.length > 0 ? finalOptions.map(function (option, id) {
     return React__default.createElement(OptionItem, {
       key: option.value,
       "$optionBorder": optionBorder,
-      "$isborder": id !== SortedOptions.length - 1
+      "$isborder": id !== finalOptions.length - 1
     }, React__default.createElement(OptionLabel, {
       htmlFor: option.value,
       "$optionColor": optionColor
     }, React__default.createElement("input", {
       id: option.value,
       type: 'checkbox',
-      checked: selectedOptions.includes(option.value),
+      checked: option.value === '__SELECT_ALL__' ? options.filter(function (o) {
+        return o.value !== '__SELECT_ALL__';
+      }).every(function (o) {
+        return selectedOptions.includes(o.value);
+      }) : selectedOptions.includes(option.value),
       onChange: function onChange() {
         return handleOptionToggle(option.value);
       }
@@ -8252,7 +8261,11 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     _ref31$searchBox = _ref31.searchBox,
     searchBox = _ref31$searchBox === void 0 ? true : _ref31$searchBox,
     _ref31$NoOptionsText = _ref31.NoOptionsText,
-    NoOptionsText = _ref31$NoOptionsText === void 0 ? 'No Options Available' : _ref31$NoOptionsText;
+    NoOptionsText = _ref31$NoOptionsText === void 0 ? 'No Options Available' : _ref31$NoOptionsText,
+    _ref31$selectAllOptio = _ref31.selectAllOption,
+    selectAllOption = _ref31$selectAllOptio === void 0 ? false : _ref31$selectAllOptio,
+    _ref31$selectAllLabel = _ref31.selectAllLabel,
+    selectAllLabel = _ref31$selectAllLabel === void 0 ? 'Select All' : _ref31$selectAllLabel;
   var themeColors = useTheme();
   var _useState = React.useState(false),
     dropUp = _useState[0],
@@ -8303,6 +8316,29 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
       }));
     }
   };
+  var SELECT_ALL_VALUE = '__SELECT_ALL__';
+  var computedOptions = React__default.useMemo(function () {
+    if (!selectAllOption) return options;
+    return [{
+      value: SELECT_ALL_VALUE,
+      labelText: selectAllLabel
+    }].concat(options);
+  }, [options, selectAllOption, selectAllLabel]);
+  var allOptionValues = options.map(function (opt) {
+    return opt.value;
+  });
+  var handleOptionChange = function handleOptionChange(values) {
+    if (values.includes(SELECT_ALL_VALUE)) {
+      var isAllSelected = allOptionValues.every(function (v) {
+        return selectedOptions.includes(v);
+      });
+      handleSelectChange(isAllSelected ? [] : allOptionValues);
+      return;
+    }
+    handleSelectChange(values.filter(function (v) {
+      return v !== SELECT_ALL_VALUE;
+    }));
+  };
   return React__default.createElement(Container$2, null, title && React__default.createElement(TitleText, {
     "$titleColor": titleColor || themeColors.vms.text.dark,
     "$titleSize": titleSize,
@@ -8368,9 +8404,9 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
       bottom: dropUp ? 'calc(100% + 8px)' : 'auto'
     }
   }, React__default.createElement(OptionComponent, {
-    options: options,
+    options: computedOptions,
     selectedOptions: selectedOptions,
-    onChange: handleSelectChange,
+    onChange: handleOptionChange,
     placeholder: placeholder,
     placeholderColor: placeholderColor,
     optionBorder: optionBorder,