labsense-ui-kit 1.3.57 → 1.3.59

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);
       }
@@ -7994,7 +8003,7 @@ var OptionComponent = function OptionComponent(_ref9) {
 };
 
 var _templateObject$b, _templateObject2$8, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2;
-var DropdownContainer = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  max-width: 100%;\n  position: relative;\n  max-height: ", ";\n"])), function (_ref) {
+var DropdownContainer = styled__default.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  max-width: 100%;\n  position: relative;\n  // max-height: ", ";\n  max-height: ", ";\n"])), function (_ref) {
   var $width = _ref.$width;
   return $width || '100%';
 }, function (_ref2) {
@@ -8003,12 +8012,15 @@ var DropdownContainer = styled__default.div(_templateObject$b || (_templateObjec
 }, function (_ref3) {
   var $replaceLabel = _ref3.$replaceLabel;
   return $replaceLabel ? 'calc(100% - 22px)' : '';
+}, function (_ref4) {
+  var $hasTitle = _ref4.$hasTitle;
+  return $hasTitle ? 'calc(100% - 22px)' : '100%';
 });
-var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  overflow: ", ";\n  padding: ", ";\n  gap: 8px;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  background: ", ";\n  color: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref4) {
-  var $replaceLabel = _ref4.$replaceLabel;
+var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  overflow: ", ";\n  padding: ", ";\n  gap: 8px;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  background: ", ";\n  color: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
+  var $replaceLabel = _ref5.$replaceLabel;
   return $replaceLabel ? 'auto' : '';
-}, function (_ref5) {
-  var $size = _ref5.$size;
+}, function (_ref6) {
+  var $size = _ref6.$size;
   switch ($size) {
     case 'small':
       return '9px 12px';
@@ -8017,27 +8029,27 @@ var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2
     default:
       return '14px 12px';
   }
-}, function (_ref6) {
-  var $width = _ref6.$width;
-  return $width ? $width : '100%';
 }, function (_ref7) {
-  var $height = _ref7.$height;
-  return $height || '100%';
+  var $width = _ref7.$width;
+  return $width ? $width : '100%';
 }, function (_ref8) {
-  var $border = _ref8.$border,
-    $isOpen = _ref8.$isOpen,
-    theme = _ref8.theme;
-  return $isOpen ? "1px solid " + theme.vms.text.dark : $border || "1px solid " + theme.vms.border.light;
+  var $height = _ref8.$height;
+  return $height || '100%';
 }, function (_ref9) {
-  var $borderRadius = _ref9.$borderRadius;
-  return $borderRadius || '8px';
+  var $border = _ref9.$border,
+    $isOpen = _ref9.$isOpen,
+    theme = _ref9.theme;
+  return $isOpen ? "1px solid " + theme.vms.text.dark : $border || "1px solid " + theme.vms.border.light;
 }, function (_ref10) {
-  var $disabled = _ref10.$disabled;
-  return $disabled ? 'not-allowed' : 'pointer';
+  var $borderRadius = _ref10.$borderRadius;
+  return $borderRadius || '8px';
 }, function (_ref11) {
-  var $background = _ref11.$background,
-    $disabled = _ref11.$disabled,
-    theme = _ref11.theme;
+  var $disabled = _ref11.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref12) {
+  var $background = _ref12.$background,
+    $disabled = _ref12.$disabled,
+    theme = _ref12.theme;
   switch ($background) {
     case 'dark':
       return $disabled ? theme.vms.disabled.secondary : theme.vms.text.dark;
@@ -8058,12 +8070,12 @@ var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2
     default:
       return $disabled ? theme.vms.disabled.secondary : $background;
   }
-}, function (_ref12) {
-  var $color = _ref12.$color,
-    theme = _ref12.theme;
-  return $color || theme.vms.text.medium;
 }, function (_ref13) {
-  var $size = _ref13.$size;
+  var $color = _ref13.$color,
+    theme = _ref13.theme;
+  return $color || theme.vms.text.medium;
+}, function (_ref14) {
+  var $size = _ref14.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -8072,8 +8084,8 @@ var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2
     default:
       return '14px';
   }
-}, function (_ref14) {
-  var $size = _ref14.$size;
+}, function (_ref15) {
+  var $size = _ref15.$size;
   switch ($size) {
     case 'small':
       return '12px';
@@ -8083,20 +8095,20 @@ var DropdownButton = styled__default.div(_templateObject2$8 || (_templateObject2
       return '14px';
   }
 });
-var TitleText = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  position: relative;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref15) {
-  var $titleWeight = _ref15.$titleWeight;
+var TitleText = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  position: relative;\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref16) {
+  var $titleWeight = _ref16.$titleWeight;
   return $titleWeight != null ? $titleWeight : '500';
-}, function (_ref16) {
-  var $titleSize = _ref16.$titleSize,
-    $size = _ref16.$size;
-  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
 }, function (_ref17) {
   var $titleSize = _ref17.$titleSize,
     $size = _ref17.$size;
   return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
 }, function (_ref18) {
-  var $titleColor = _ref18.$titleColor,
-    theme = _ref18.theme;
+  var $titleSize = _ref18.$titleSize,
+    $size = _ref18.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref19) {
+  var $titleColor = _ref19.$titleColor,
+    theme = _ref19.theme;
   switch ($titleColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -8119,33 +8131,33 @@ var TitleText = styled__default.div(_templateObject3$5 || (_templateObject3$5 =
   }
 });
 var Container$2 = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n"])));
-var LabelText = styled__default.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref19) {
-  var $labelStyle = _ref19.$labelStyle;
+var LabelText = styled__default.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref20) {
+  var $labelStyle = _ref20.$labelStyle;
   return $labelStyle;
-}, function (_ref20) {
-  var $labelColor = _ref20.$labelColor,
-    theme = _ref20.theme;
+}, function (_ref21) {
+  var $labelColor = _ref21.$labelColor,
+    theme = _ref21.theme;
   return $labelColor || theme.vms.text.medium;
 });
-var DropdownMenu = styled__default.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), function (_ref21) {
-  var theme = _ref21.theme;
+var DropdownMenu = styled__default.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), function (_ref22) {
+  var theme = _ref22.theme;
   return "1px solid " + theme.vms.border.light;
-}, function (_ref22) {
-  var $optionsBorderRadius = _ref22.$optionsBorderRadius;
-  return $optionsBorderRadius || '8px';
 }, function (_ref23) {
-  var $width = _ref23.$width;
-  return $width ? $width : 'max-content';
+  var $optionsBorderRadius = _ref23.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
 }, function (_ref24) {
-  var $menuBackground = _ref24.$menuBackground,
-    theme = _ref24.theme;
+  var $width = _ref24.$width;
+  return $width ? $width : 'max-content';
+}, function (_ref25) {
+  var $menuBackground = _ref25.$menuBackground,
+    theme = _ref25.theme;
   return $menuBackground || theme.vms.accent.light_2;
 });
 var SelectedOptionsWrapper = styled__default.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
-var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref25) {
-  var $selectedOptionBackground = _ref25.$selectedOptionBackground,
-    $disabled = _ref25.$disabled,
-    theme = _ref25.theme;
+var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref26) {
+  var $selectedOptionBackground = _ref26.$selectedOptionBackground,
+    $disabled = _ref26.$disabled,
+    theme = _ref26.theme;
   switch ($selectedOptionBackground) {
     case 'dark':
       return theme.vms.text.dark;
@@ -8166,9 +8178,9 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObje
     default:
       return $selectedOptionBackground || theme.vms.accent.light_2;
   }
-}, function (_ref26) {
-  var $selectedOptionColor = _ref26.$selectedOptionColor,
-    theme = _ref26.theme;
+}, function (_ref27) {
+  var $selectedOptionColor = _ref27.$selectedOptionColor,
+    theme = _ref27.theme;
   switch ($selectedOptionColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -8190,69 +8202,73 @@ var SelectedOptionDiv = styled__default.div(_templateObject8$2 || (_templateObje
       return $selectedOptionColor;
   }
 });
-var RemoveIcon = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref27) {
-  var $disabled = _ref27.$disabled;
+var RemoveIcon = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref28) {
+  var $disabled = _ref28.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref28) {
-  var removeIconBackground = _ref28.removeIconBackground,
-    $type = _ref28.$type,
-    theme = _ref28.theme;
-  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
 }, function (_ref29) {
-  var $disabled = _ref29.$disabled;
+  var removeIconBackground = _ref29.removeIconBackground,
+    $type = _ref29.$type,
+    theme = _ref29.theme;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
+}, function (_ref30) {
+  var $disabled = _ref30.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
 var TextWrapper = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
-var Asterisk = styled__default.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref30) {
-  var theme = _ref30.theme;
+var Asterisk = styled__default.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref31) {
+  var theme = _ref31.theme;
   return theme.vms["default"].error;
 });
-var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
-  var title = _ref31.title,
-    titleWeight = _ref31.titleWeight,
-    titleSize = _ref31.titleSize,
-    titleColor = _ref31.titleColor,
-    _ref31$labelText = _ref31.labelText,
-    labelText = _ref31$labelText === void 0 ? 'Select Cameras' : _ref31$labelText,
-    labelStyle = _ref31.labelStyle,
-    labelColor = _ref31.labelColor,
-    _ref31$replaceLabel = _ref31.replaceLabel,
-    replaceLabel = _ref31$replaceLabel === void 0 ? true : _ref31$replaceLabel,
-    options = _ref31.options,
-    width = _ref31.width,
-    optionWidth = _ref31.optionWidth,
-    height = _ref31.height,
-    placeholder = _ref31.placeholder,
-    border = _ref31.border,
-    background = _ref31.background,
-    selectedOptionBackground = _ref31.selectedOptionBackground,
-    selectedOptionColor = _ref31.selectedOptionColor,
-    menuBackground = _ref31.menuBackground,
-    optionsBorderRadius = _ref31.optionsBorderRadius,
-    borderRadius = _ref31.borderRadius,
-    removeIconBackground = _ref31.removeIconBackground,
-    handleSelectChange = _ref31.handleSelectChange,
-    selectedOptions = _ref31.selectedOptions,
-    placeholderColor = _ref31.placeholderColor,
-    optionBorder = _ref31.optionBorder,
-    optionColor = _ref31.optionColor,
-    searchIcon = _ref31.searchIcon,
-    searchbarTextColor = _ref31.searchbarTextColor,
-    searchBoxBackground = _ref31.searchBoxBackground,
-    searchBoxBorder = _ref31.searchBoxBorder,
-    searchBoxBorderRadius = _ref31.searchBoxBorderRadius,
-    size = _ref31.size,
-    removeIcon = _ref31.removeIcon,
-    type = _ref31.type,
-    icon = _ref31.icon,
-    _ref31$disabled = _ref31.disabled,
-    disabled = _ref31$disabled === void 0 ? false : _ref31$disabled,
-    _ref31$required = _ref31.required,
-    required = _ref31$required === void 0 ? false : _ref31$required,
-    _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;
+var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
+  var title = _ref32.title,
+    titleWeight = _ref32.titleWeight,
+    titleSize = _ref32.titleSize,
+    titleColor = _ref32.titleColor,
+    _ref32$labelText = _ref32.labelText,
+    labelText = _ref32$labelText === void 0 ? 'Select Cameras' : _ref32$labelText,
+    labelStyle = _ref32.labelStyle,
+    labelColor = _ref32.labelColor,
+    _ref32$replaceLabel = _ref32.replaceLabel,
+    replaceLabel = _ref32$replaceLabel === void 0 ? true : _ref32$replaceLabel,
+    options = _ref32.options,
+    width = _ref32.width,
+    optionWidth = _ref32.optionWidth,
+    height = _ref32.height,
+    placeholder = _ref32.placeholder,
+    border = _ref32.border,
+    background = _ref32.background,
+    selectedOptionBackground = _ref32.selectedOptionBackground,
+    selectedOptionColor = _ref32.selectedOptionColor,
+    menuBackground = _ref32.menuBackground,
+    optionsBorderRadius = _ref32.optionsBorderRadius,
+    borderRadius = _ref32.borderRadius,
+    removeIconBackground = _ref32.removeIconBackground,
+    handleSelectChange = _ref32.handleSelectChange,
+    selectedOptions = _ref32.selectedOptions,
+    placeholderColor = _ref32.placeholderColor,
+    optionBorder = _ref32.optionBorder,
+    optionColor = _ref32.optionColor,
+    searchIcon = _ref32.searchIcon,
+    searchbarTextColor = _ref32.searchbarTextColor,
+    searchBoxBackground = _ref32.searchBoxBackground,
+    searchBoxBorder = _ref32.searchBoxBorder,
+    searchBoxBorderRadius = _ref32.searchBoxBorderRadius,
+    size = _ref32.size,
+    removeIcon = _ref32.removeIcon,
+    type = _ref32.type,
+    icon = _ref32.icon,
+    _ref32$disabled = _ref32.disabled,
+    disabled = _ref32$disabled === void 0 ? false : _ref32$disabled,
+    _ref32$required = _ref32.required,
+    required = _ref32$required === void 0 ? false : _ref32$required,
+    _ref32$searchBox = _ref32.searchBox,
+    searchBox = _ref32$searchBox === void 0 ? true : _ref32$searchBox,
+    _ref32$NoOptionsText = _ref32.NoOptionsText,
+    NoOptionsText = _ref32$NoOptionsText === void 0 ? 'No Options Available' : _ref32$NoOptionsText,
+    _ref32$selectAllOptio = _ref32.selectAllOption,
+    selectAllOption = _ref32$selectAllOptio === void 0 ? false : _ref32$selectAllOptio,
+    _ref32$selectAllLabel = _ref32.selectAllLabel,
+    selectAllLabel = _ref32$selectAllLabel === void 0 ? 'Select All' : _ref32$selectAllLabel;
   var themeColors = useTheme();
   var _useState = React.useState(false),
     dropUp = _useState[0],
@@ -8303,6 +8319,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,
@@ -8312,7 +8351,7 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref31) {
     ref: dropdownRef,
     "$width": width,
     "$height": height,
-    "$replaceLabel": replaceLabel
+    "$hasTitle": !!title
   }, React__default.createElement(DropdownButton, {
     onClick: toggleDropdown,
     "$height": height,
@@ -8368,9 +8407,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,