primevue 3.45.0 → 3.47.0

package/multiselect/multiselect.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIcon, SpinnerIcon, TimesIcon, TimesCircleIcon, OverlayEventBus, Portal, Ripple, utils, VirtualScroller, BaseComponent, MultiSelectStyle, vue) {
+this.primevue.multiselect = (function (api, Checkbox, CheckIcon, ChevronDownIcon, SearchIcon, SpinnerIcon, TimesIcon, TimesCircleIcon, OverlayEventBus, Portal, Ripple, utils, VirtualScroller, BaseComponent, MultiSelectStyle, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
     var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
     var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
     var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
@@ -75,7 +76,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           "default": null
         },
         appendTo: {
-          type: String,
+          type: [String, Object],
           "default": 'body'
         },
         display: {
@@ -140,12 +141,20 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
         },
         autoOptionFocus: {
           type: Boolean,
-          "default": true
+          "default": false
         },
         autoFilterFocus: {
           type: Boolean,
           "default": false
         },
+        focusOnHover: {
+          type: Boolean,
+          "default": true
+        },
+        highlightOnSelect: {
+          type: Boolean,
+          "default": false
+        },
         filterMessage: {
           type: String,
           "default": null
@@ -213,13 +222,12 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
       searchTimeout: null,
       searchValue: '',
       selectOnFocus: false,
-      focusOnHover: false,
       data: function data() {
         return {
           id: this.$attrs.id,
+          clicked: false,
           focused: false,
           focusedOptionIndex: -1,
-          headerCheckboxFocused: false,
           filterValue: null,
           overlayVisible: false
         };
@@ -264,8 +272,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
         getHeaderCheckboxPTOptions: function getHeaderCheckboxPTOptions(key) {
           return this.ptm(key, {
             context: {
-              selected: this.allSelected,
-              focused: this.headerCheckboxFocused
+              selected: this.allSelected
             }
           });
         },
@@ -302,7 +309,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
         show: function show(isFocus) {
           this.$emit('before-show');
           this.overlayVisible = true;
-          this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+          this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();
           isFocus && utils.DomHandler.focus(this.$refs.focusInput);
         },
         hide: function hide(isFocus) {
@@ -310,6 +317,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           var _hide = function _hide() {
             _this2.$emit('before-hide');
             _this2.overlayVisible = false;
+            _this2.clicked = false;
             _this2.focusedOptionIndex = -1;
             _this2.searchValue = '';
             _this2.resetFilterOnHide && (_this2.filterValue = null);
@@ -325,11 +333,14 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
             return;
           }
           this.focused = true;
-          this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
-          this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
+          if (this.overlayVisible) {
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();
+            this.scrollInView(this.focusedOptionIndex);
+          }
           this.$emit('focus', event);
         },
         onBlur: function onBlur(event) {
+          this.clicked = false;
           this.focused = false;
           this.focusedOptionIndex = -1;
           this.searchValue = '';
@@ -394,6 +405,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
               }
               break;
           }
+          this.clicked = false;
         },
         onContainerClick: function onContainerClick(event) {
           if (this.disabled || this.loading) {
@@ -402,6 +414,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           if (!this.overlay || !this.overlay.contains(event.target)) {
             this.overlayVisible ? this.hide(true) : this.show(true);
           }
+          this.clicked = true;
         },
         onFirstHiddenFocus: function onFirstHiddenFocus(event) {
           var focusableEl = event.relatedTarget === this.$refs.focusInput ? utils.DomHandler.getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
@@ -414,12 +427,6 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
         onCloseClick: function onCloseClick() {
           this.hide(true);
         },
-        onHeaderCheckboxFocus: function onHeaderCheckboxFocus() {
-          this.headerCheckboxFocused = true;
-        },
-        onHeaderCheckboxBlur: function onHeaderCheckboxBlur() {
-          this.headerCheckboxFocused = false;
-        },
         onOptionSelect: function onOptionSelect(event, option) {
           var _this4 = this;
           var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
@@ -520,12 +527,15 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           }
         },
         onArrowDownKey: function onArrowDownKey(event) {
-          var optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();
-          if (event.shiftKey) {
-            this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);
+          if (!this.overlayVisible) {
+            this.show();
+          } else {
+            var optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
+            if (event.shiftKey) {
+              this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);
+            }
+            this.changeFocusedOptionIndex(event, optionIndex);
           }
-          this.changeFocusedOptionIndex(event, optionIndex);
-          !this.overlayVisible && this.show();
           event.preventDefault();
         },
         onArrowUpKey: function onArrowUpKey(event) {
@@ -537,7 +547,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
             this.overlayVisible && this.hide();
             event.preventDefault();
           } else {
-            var optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
+            var optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
             if (event.shiftKey) {
               this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);
             }
@@ -596,6 +606,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
         },
         onEnterKey: function onEnterKey(event) {
           if (!this.overlayVisible) {
+            this.focusedOptionIndex = -1; // reset
             this.onArrowDownKey(event);
           } else {
             if (this.focusedOptionIndex !== -1) {
@@ -744,7 +755,6 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
             });
             this.updateModel(event, value);
           }
-          this.headerCheckboxFocused = true;
         },
         removeOption: function removeOption(event, optionValue) {
           var _this11 = this;
@@ -760,7 +770,8 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           return utils.DomHandler.getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
         },
         isOptionMatched: function isOptionMatched(option) {
-          return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
+          var _this$getOptionLabel;
+          return this.isValidOption(option) && ((_this$getOptionLabel = this.getOptionLabel(option)) === null || _this$getOptionLabel === void 0 ? void 0 : _this$getOptionLabel.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)));
         },
         isValidOption: function isValidOption(option) {
           return utils.ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
@@ -768,11 +779,14 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
         isValidSelectedOption: function isValidSelectedOption(option) {
           return this.isValidOption(option) && this.isSelected(option);
         },
+        isEquals: function isEquals(value1, value2) {
+          return utils.ObjectUtils.equals(value1, value2, this.equalityKey);
+        },
         isSelected: function isSelected(option) {
           var _this12 = this;
           var optionValue = this.getOptionValue(option);
           return (this.modelValue || []).some(function (value) {
-            return utils.ObjectUtils.equals(value, optionValue, _this12.equalityKey);
+            return _this12.isEquals(value, optionValue);
           });
         },
         findFirstOptionIndex: function findFirstOptionIndex() {
@@ -801,29 +815,49 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           }) : -1;
           return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
-        findFirstSelectedOptionIndex: function findFirstSelectedOptionIndex() {
+        findSelectedOptionIndex: function findSelectedOptionIndex() {
           var _this17 = this;
+          if (this.hasSelectedOption) {
+            var _loop = function _loop() {
+                var value = _this17.modelValue[index];
+                var matchedOptionIndex = _this17.visibleOptions.findIndex(function (option) {
+                  return _this17.isValidSelectedOption(option) && _this17.isEquals(value, _this17.getOptionValue(option));
+                });
+                if (matchedOptionIndex > -1) return {
+                  v: matchedOptionIndex
+                };
+              },
+              _ret;
+            for (var index = this.modelValue.length - 1; index >= 0; index--) {
+              _ret = _loop();
+              if (_ret) return _ret.v;
+            }
+          }
+          return -1;
+        },
+        findFirstSelectedOptionIndex: function findFirstSelectedOptionIndex() {
+          var _this18 = this;
           return this.hasSelectedOption ? this.visibleOptions.findIndex(function (option) {
-            return _this17.isValidSelectedOption(option);
+            return _this18.isValidSelectedOption(option);
           }) : -1;
         },
         findLastSelectedOptionIndex: function findLastSelectedOptionIndex() {
-          var _this18 = this;
+          var _this19 = this;
           return this.hasSelectedOption ? utils.ObjectUtils.findLastIndex(this.visibleOptions, function (option) {
-            return _this18.isValidSelectedOption(option);
+            return _this19.isValidSelectedOption(option);
           }) : -1;
         },
         findNextSelectedOptionIndex: function findNextSelectedOptionIndex(index) {
-          var _this19 = this;
+          var _this20 = this;
           var matchedOptionIndex = this.hasSelectedOption && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex(function (option) {
-            return _this19.isValidSelectedOption(option);
+            return _this20.isValidSelectedOption(option);
           }) : -1;
           return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
         },
         findPrevSelectedOptionIndex: function findPrevSelectedOptionIndex(index) {
-          var _this20 = this;
+          var _this21 = this;
           var matchedOptionIndex = this.hasSelectedOption && index > 0 ? utils.ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), function (option) {
-            return _this20.isValidSelectedOption(option);
+            return _this21.isValidSelectedOption(option);
           }) : -1;
           return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
         },
@@ -842,61 +876,69 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findFirstFocusedOptionIndex: function findFirstFocusedOptionIndex() {
-          var selectedIndex = this.findFirstSelectedOptionIndex();
+          var selectedIndex = this.findSelectedOptionIndex();
           return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
         },
         findLastFocusedOptionIndex: function findLastFocusedOptionIndex() {
-          var selectedIndex = this.findLastSelectedOptionIndex();
+          var selectedIndex = this.findSelectedOptionIndex();
           return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
         searchOptions: function searchOptions(event) {
-          var _this21 = this;
+          var _this22 = this;
           this.searchValue = (this.searchValue || '') + event.key;
           var optionIndex = -1;
-          if (this.focusedOptionIndex !== -1) {
-            optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex(function (option) {
-              return _this21.isOptionMatched(option);
-            });
-            optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex(function (option) {
-              return _this21.isOptionMatched(option);
-            }) : optionIndex + this.focusedOptionIndex;
-          } else {
-            optionIndex = this.visibleOptions.findIndex(function (option) {
-              return _this21.isOptionMatched(option);
-            });
-          }
-          if (optionIndex === -1 && this.focusedOptionIndex === -1) {
-            optionIndex = this.findFirstFocusedOptionIndex();
-          }
-          if (optionIndex !== -1) {
-            this.changeFocusedOptionIndex(event, optionIndex);
+          if (utils.ObjectUtils.isNotEmpty(this.searchValue)) {
+            if (this.focusedOptionIndex !== -1) {
+              optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex(function (option) {
+                return _this22.isOptionMatched(option);
+              });
+              optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex(function (option) {
+                return _this22.isOptionMatched(option);
+              }) : optionIndex + this.focusedOptionIndex;
+            } else {
+              optionIndex = this.visibleOptions.findIndex(function (option) {
+                return _this22.isOptionMatched(option);
+              });
+            }
+            if (optionIndex === -1 && this.focusedOptionIndex === -1) {
+              optionIndex = this.findFirstFocusedOptionIndex();
+            }
+            if (optionIndex !== -1) {
+              this.changeFocusedOptionIndex(event, optionIndex);
+            }
           }
           if (this.searchTimeout) {
             clearTimeout(this.searchTimeout);
           }
           this.searchTimeout = setTimeout(function () {
-            _this21.searchValue = '';
-            _this21.searchTimeout = null;
+            _this22.searchValue = '';
+            _this22.searchTimeout = null;
           }, 500);
         },
         changeFocusedOptionIndex: function changeFocusedOptionIndex(event, index) {
           if (this.focusedOptionIndex !== index) {
             this.focusedOptionIndex = index;
             this.scrollInView();
+            if (this.selectOnFocus) {
+              this.onOptionSelect(event, this.visibleOptions[index]);
+            }
           }
         },
         scrollInView: function scrollInView() {
+          var _this23 = this;
           var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-          var id = index !== -1 ? "".concat(this.id, "_").concat(index) : this.focusedOptionId;
-          var element = utils.DomHandler.findSingle(this.list, "li[id=\"".concat(id, "\"]"));
-          if (element) {
-            element.scrollIntoView && element.scrollIntoView({
-              block: 'nearest',
-              inline: 'nearest'
-            });
-          } else if (!this.virtualScrollerDisabled) {
-            this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
-          }
+          this.$nextTick(function () {
+            var id = index !== -1 ? "".concat(_this23.id, "_").concat(index) : _this23.focusedOptionId;
+            var element = utils.DomHandler.findSingle(_this23.list, "li[id=\"".concat(id, "\"]"));
+            if (element) {
+              element.scrollIntoView && element.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest'
+              });
+            } else if (!_this23.virtualScrollerDisabled) {
+              _this23.virtualScroller && _this23.virtualScroller.scrollToIndex(index !== -1 ? index : _this23.focusedOptionIndex);
+            }
+          });
         },
         autoUpdateModel: function autoUpdateModel() {
           if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
@@ -913,14 +955,14 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           });
         },
         flatOptions: function flatOptions(options) {
-          var _this22 = this;
+          var _this24 = this;
           return (options || []).reduce(function (result, option, index) {
             result.push({
               optionGroup: option,
               group: true,
               index: index
             });
-            var optionGroupChildren = _this22.getOptionGroupChildren(option);
+            var optionGroupChildren = _this24.getOptionGroupChildren(option);
             optionGroupChildren && optionGroupChildren.forEach(function (o) {
               return result.push(o);
             });
@@ -940,7 +982,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
       },
       computed: {
         visibleOptions: function visibleOptions() {
-          var _this23 = this;
+          var _this25 = this;
           var options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
           if (this.filterValue) {
             var filteredOptions = api.FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
@@ -948,11 +990,11 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
               var optionGroups = this.options || [];
               var filtered = [];
               optionGroups.forEach(function (group) {
-                var groupChildren = _this23.getOptionGroupChildren(group);
+                var groupChildren = _this25.getOptionGroupChildren(group);
                 var filteredItems = groupChildren.filter(function (item) {
                   return filteredOptions.includes(item);
                 });
-                if (filteredItems.length > 0) filtered.push(_objectSpread$1(_objectSpread$1({}, group), {}, _defineProperty$1({}, typeof _this23.optionGroupChildren === 'string' ? _this23.optionGroupChildren : 'items', _toConsumableArray(filteredItems))));
+                if (filteredItems.length > 0) filtered.push(_objectSpread$1(_objectSpread$1({}, group), {}, _defineProperty$1({}, typeof _this25.optionGroupChildren === 'string' ? _this25.optionGroupChildren : 'items', _toConsumableArray(filteredItems))));
               });
               return this.flatOptions(filtered);
             }
@@ -984,9 +1026,9 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           return utils.ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue && this.modelValue.length > this.maxSelectedLabels ? this.modelValue.slice(0, this.maxSelectedLabels) : this.modelValue;
         },
         allSelected: function allSelected() {
-          var _this24 = this;
+          var _this26 = this;
           return this.selectAll !== null ? this.selectAll : utils.ObjectUtils.isNotEmpty(this.visibleOptions) && this.visibleOptions.every(function (option) {
-            return _this24.isOptionGroup(option) || _this24.isOptionDisabled(option) || _this24.isSelected(option);
+            return _this26.isOptionGroup(option) || _this26.isOptionDisabled(option) || _this26.isSelected(option);
           });
         },
         hasSelectedOption: function hasSelectedOption() {
@@ -1026,9 +1068,9 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
           return this.focusedOptionIndex !== -1 ? "".concat(this.id, "_").concat(this.focusedOptionIndex) : null;
         },
         ariaSetSize: function ariaSetSize() {
-          var _this25 = this;
+          var _this27 = this;
           return this.visibleOptions.filter(function (option) {
-            return !_this25.isOptionGroup(option);
+            return !_this27.isOptionGroup(option);
           }).length;
         },
         toggleAllAriaLabel: function toggleAllAriaLabel() {
@@ -1045,6 +1087,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
         ripple: Ripple__default["default"]
       },
       components: {
+        Checkbox: Checkbox__default["default"],
         VirtualScroller: VirtualScroller__default["default"],
         Portal: Portal__default["default"],
         TimesIcon: TimesIcon__default["default"],
@@ -1064,22 +1107,22 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
     function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
     var _hoisted_1 = ["id", "disabled", "placeholder", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant"];
     var _hoisted_2 = ["onClick"];
-    var _hoisted_3 = ["checked", "aria-label"];
-    var _hoisted_4 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
-    var _hoisted_5 = ["aria-label"];
+    var _hoisted_3 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
+    var _hoisted_4 = ["aria-label"];
+    var _hoisted_5 = ["id"];
     var _hoisted_6 = ["id"];
-    var _hoisted_7 = ["id"];
-    var _hoisted_8 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-highlight", "data-p-focused", "data-p-disabled"];
+    var _hoisted_7 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove", "data-p-highlight", "data-p-focused", "data-p-disabled"];
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       var _component_TimesCircleIcon = vue.resolveComponent("TimesCircleIcon");
       var _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
+      var _component_Checkbox = vue.resolveComponent("Checkbox");
       var _component_VirtualScroller = vue.resolveComponent("VirtualScroller");
       var _component_Portal = vue.resolveComponent("Portal");
       var _directive_ripple = vue.resolveDirective("ripple");
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         ref: "container",
         "class": _ctx.cx('root'),
-        onClick: _cache[15] || (_cache[15] = function () {
+        onClick: _cache[12] || (_cache[12] = function () {
           return $options.onContainerClick && $options.onContainerClick.apply($options, arguments);
         })
       }, _ctx.ptm('root'), {
@@ -1203,10 +1246,10 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
                 ref: $options.overlayRef,
                 style: _ctx.panelStyle,
                 "class": [_ctx.cx('panel'), _ctx.panelClass],
-                onClick: _cache[13] || (_cache[13] = function () {
+                onClick: _cache[10] || (_cache[10] = function () {
                   return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
                 }),
-                onKeydown: _cache[14] || (_cache[14] = function () {
+                onKeydown: _cache[11] || (_cache[11] = function () {
                   return $options.onOverlayKeyDown && $options.onOverlayKeyDown.apply($options, arguments);
                 })
               }, _objectSpread(_objectSpread({}, _ctx.panelProps), _ctx.ptm('panel'))), [vue.createElementVNode("span", vue.mergeProps({
@@ -1227,44 +1270,35 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
               }), _ctx.showToggleAll && _ctx.selectionLimit == null || _ctx.filter ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: 0,
                 "class": _ctx.cx('header')
-              }, _ctx.ptm('header')), [_ctx.showToggleAll && _ctx.selectionLimit == null ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              }, _ctx.ptm('header')), [_ctx.showToggleAll && _ctx.selectionLimit == null ? (vue.openBlock(), vue.createBlock(_component_Checkbox, {
                 key: 0,
-                "class": _ctx.cx('headerCheckboxContainer'),
-                onClick: _cache[6] || (_cache[6] = function () {
-                  return $options.onToggleAll && $options.onToggleAll.apply($options, arguments);
-                })
-              }, _ctx.ptm('headerCheckboxContainer')), [vue.createElementVNode("div", vue.mergeProps({
-                "class": "p-hidden-accessible"
-              }, _ctx.ptm('hiddenInputWrapper'), {
-                "data-p-hidden-accessible": true
-              }), [vue.createElementVNode("input", vue.mergeProps({
-                type: "checkbox",
-                readonly: "",
-                checked: $options.allSelected,
+                modelValue: $options.allSelected,
+                binary: true,
+                disabled: _ctx.disabled,
                 "aria-label": $options.toggleAllAriaLabel,
-                onFocus: _cache[4] || (_cache[4] = function () {
-                  return $options.onHeaderCheckboxFocus && $options.onHeaderCheckboxFocus.apply($options, arguments);
+                onChange: $options.onToggleAll,
+                unstyled: _ctx.unstyled,
+                pt: $options.getHeaderCheckboxPTOptions('headerCheckbox')
+              }, {
+                icon: vue.withCtx(function (slotProps) {
+                  return [_ctx.$slots.headercheckboxicon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.headercheckboxicon), {
+                    key: 0,
+                    checked: slotProps.checked,
+                    "class": vue.normalizeClass(slotProps["class"])
+                  }, null, 8, ["checked", "class"])) : slotProps.checked ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.checkboxIcon ? 'span' : 'CheckIcon'), vue.mergeProps({
+                    key: 1,
+                    "class": [slotProps["class"], _defineProperty({}, _ctx.checkboxIcon, slotProps.checked)]
+                  }, $options.getHeaderCheckboxPTOptions('headerCheckbox.icon')), null, 16, ["class"])) : vue.createCommentVNode("", true)];
                 }),
-                onBlur: _cache[5] || (_cache[5] = function () {
-                  return $options.onHeaderCheckboxBlur && $options.onHeaderCheckboxBlur.apply($options, arguments);
-                })
-              }, _ctx.ptm('headerCheckbox')), null, 16, _hoisted_3)], 16), vue.createElementVNode("div", vue.mergeProps({
-                "class": _ctx.cx('headerCheckbox')
-              }, $options.getHeaderCheckboxPTOptions('headerCheckbox')), [vue.renderSlot(_ctx.$slots, "headercheckboxicon", {
-                allSelected: $options.allSelected,
-                "class": vue.normalizeClass(_ctx.cx('headerCheckboxIcon'))
-              }, function () {
-                return [vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.checkboxIcon ? 'span' : 'CheckIcon'), vue.mergeProps({
-                  "class": [_ctx.cx('headerCheckboxIcon'), _defineProperty({}, _ctx.checkboxIcon, $options.allSelected)]
-                }, $options.getHeaderCheckboxPTOptions('headerCheckboxIcon')), null, 16, ["class"])), [[vue.vShow, $options.allSelected]])];
-              })], 16)], 16)) : vue.createCommentVNode("", true), _ctx.filter ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                _: 1
+              }, 8, ["modelValue", "disabled", "aria-label", "onChange", "unstyled", "pt"])) : vue.createCommentVNode("", true), _ctx.filter ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: 1,
                 "class": _ctx.cx('filterContainer')
               }, _ctx.ptm('filterContainer')), [vue.createElementVNode("input", vue.mergeProps({
                 ref: "filterInput",
                 type: "text",
                 value: $data.filterValue,
-                onVnodeMounted: _cache[7] || (_cache[7] = function () {
+                onVnodeMounted: _cache[4] || (_cache[4] = function () {
                   return $options.onFilterUpdated && $options.onFilterUpdated.apply($options, arguments);
                 }),
                 "class": _ctx.cx('filterInput'),
@@ -1273,16 +1307,16 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
                 autocomplete: "off",
                 "aria-owns": $data.id + '_list',
                 "aria-activedescendant": $options.focusedOptionId,
-                onKeydown: _cache[8] || (_cache[8] = function () {
+                onKeydown: _cache[5] || (_cache[5] = function () {
                   return $options.onFilterKeyDown && $options.onFilterKeyDown.apply($options, arguments);
                 }),
-                onBlur: _cache[9] || (_cache[9] = function () {
+                onBlur: _cache[6] || (_cache[6] = function () {
                   return $options.onFilterBlur && $options.onFilterBlur.apply($options, arguments);
                 }),
-                onInput: _cache[10] || (_cache[10] = function () {
+                onInput: _cache[7] || (_cache[7] = function () {
                   return $options.onFilterChange && $options.onFilterChange.apply($options, arguments);
                 })
-              }, _objectSpread(_objectSpread({}, _ctx.filterInputProps), _ctx.ptm('filterInput'))), null, 16, _hoisted_4), vue.renderSlot(_ctx.$slots, "filtericon", {
+              }, _objectSpread(_objectSpread({}, _ctx.filterInputProps), _ctx.ptm('filterInput'))), null, 16, _hoisted_3), vue.renderSlot(_ctx.$slots, "filtericon", {
                 "class": vue.normalizeClass(_ctx.cx('filterIcon'))
               }, function () {
                 return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.filterIcon ? 'span' : 'SearchIcon'), vue.mergeProps({
@@ -1298,7 +1332,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
               }), vue.toDisplayString($options.filterResultMessageText), 17)) : vue.createCommentVNode("", true), vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                 "class": _ctx.cx('closeButton'),
                 "aria-label": $options.closeAriaLabel,
-                onClick: _cache[11] || (_cache[11] = function () {
+                onClick: _cache[8] || (_cache[8] = function () {
                   return $options.onCloseClick && $options.onCloseClick.apply($options, arguments);
                 }),
                 type: "button"
@@ -1308,7 +1342,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
                 return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
                   "class": [_ctx.cx('closeIcon'), _ctx.closeIcon]
                 }, _ctx.ptm('closeIcon')), null, 16, ["class"]))];
-              })], 16, _hoisted_5)), [[_directive_ripple]])], 16)) : vue.createCommentVNode("", true), vue.createElementVNode("div", vue.mergeProps({
+              })], 16, _hoisted_4)), [[_directive_ripple]])], 16)) : vue.createCommentVNode("", true), vue.createElementVNode("div", vue.mergeProps({
                 "class": _ctx.cx('wrapper'),
                 style: {
                   'max-height': $options.virtualScrollerDisabled ? _ctx.scrollHeight : ''
@@ -1356,7 +1390,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
                       index: $options.getOptionIndex(i, getItemOptions)
                     }, function () {
                       return [vue.createTextVNode(vue.toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 1)];
-                    })], 16, _hoisted_7)) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                    })], 16, _hoisted_6)) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                       key: 1,
                       id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
                       style: {
@@ -1383,25 +1417,30 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
                       "data-p-highlight": $options.isSelected(option),
                       "data-p-focused": $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions),
                       "data-p-disabled": $options.isOptionDisabled(option)
-                    }), [vue.createElementVNode("div", vue.mergeProps({
-                      "class": _ctx.cx('checkboxContainer')
-                    }, _ctx.ptm('checkboxContainer')), [vue.createElementVNode("div", vue.mergeProps({
-                      "class": _ctx.cx('checkbox', {
-                        option: option
-                      })
-                    }, $options.getCheckboxPTOptions(option, getItemOptions, i, 'checkbox')), [vue.renderSlot(_ctx.$slots, "itemcheckboxicon", {
-                      selected: $options.isSelected(option),
-                      "class": vue.normalizeClass(_ctx.cx('checkboxIcon'))
-                    }, function () {
-                      return [vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.checkboxIcon ? 'span' : 'CheckIcon'), vue.mergeProps({
-                        "class": [_ctx.cx('checkboxIcon'), _defineProperty({}, _ctx.checkboxIcon, $options.isSelected(option))]
-                      }, $options.getCheckboxPTOptions(option, getItemOptions, i, 'checkboxIcon')), null, 16, ["class"])), [[vue.vShow, $options.isSelected(option)]])];
-                    })], 16)], 16), vue.renderSlot(_ctx.$slots, "option", {
+                    }), [vue.createVNode(_component_Checkbox, {
+                      modelValue: $options.isSelected(option),
+                      binary: true,
+                      tabindex: -1,
+                      unstyled: _ctx.unstyled,
+                      pt: $options.getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox')
+                    }, {
+                      icon: vue.withCtx(function (slotProps) {
+                        return [_ctx.$slots.itemcheckboxicon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemcheckboxicon), {
+                          key: 0,
+                          checked: slotProps.checked,
+                          "class": vue.normalizeClass(slotProps["class"])
+                        }, null, 8, ["checked", "class"])) : slotProps.checked ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.checkboxIcon ? 'span' : 'CheckIcon'), vue.mergeProps({
+                          key: 1,
+                          "class": [slotProps["class"], _defineProperty({}, _ctx.checkboxIcon, slotProps.checked)]
+                        }, $options.getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox.icon')), null, 16, ["class"])) : vue.createCommentVNode("", true)];
+                      }),
+                      _: 2
+                    }, 1032, ["modelValue", "unstyled", "pt"]), vue.renderSlot(_ctx.$slots, "option", {
                       option: option,
                       index: $options.getOptionIndex(i, getItemOptions)
                     }, function () {
                       return [vue.createElementVNode("span", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('option'))), vue.toDisplayString($options.getOptionLabel(option)), 17)];
-                    })], 16, _hoisted_8)), [[_directive_ripple]])], 64);
+                    })], 16, _hoisted_7)), [[_directive_ripple]])], 64);
                   }), 128)), $data.filterValue && (!items || items && items.length === 0) ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                     key: 0,
                     "class": _ctx.cx('emptyMessage'),
@@ -1414,7 +1453,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
                     role: "option"
                   }, _ctx.ptm('emptyMessage')), [vue.renderSlot(_ctx.$slots, "empty", {}, function () {
                     return [vue.createTextVNode(vue.toDisplayString($options.emptyMessageText), 1)];
-                  })], 16)) : vue.createCommentVNode("", true)], 16, _hoisted_6)];
+                  })], 16)) : vue.createCommentVNode("", true)], 16, _hoisted_5)];
                 }),
                 _: 2
               }, [_ctx.$slots.loader ? {
@@ -1448,7 +1487,7 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
                 "aria-hidden": "true",
                 "class": "p-hidden-accessible p-hidden-focusable",
                 tabindex: 0,
-                onFocus: _cache[12] || (_cache[12] = function () {
+                onFocus: _cache[9] || (_cache[9] = function () {
                   return $options.onLastHiddenFocus && $options.onLastHiddenFocus.apply($options, arguments);
                 })
               }, _ctx.ptm('hiddenLastFocusableEl'), {
@@ -1467,4 +1506,4 @@ this.primevue.multiselect = (function (api, CheckIcon, ChevronDownIcon, SearchIc
 
     return script;
 
-})(primevue.api, primevue.icons.check, primevue.icons.chevrondown, primevue.icons.search, primevue.icons.spinner, primevue.icons.times, primevue.icons.timescircle, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, primevue.virtualscroller, primevue.basecomponent, primevue.multiselect.style, Vue);
+})(primevue.api, primevue.checkbox, primevue.icons.check, primevue.icons.chevrondown, primevue.icons.search, primevue.icons.spinner, primevue.icons.times, primevue.icons.timescircle, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, primevue.virtualscroller, primevue.basecomponent, primevue.multiselect.style, Vue);