primevue 3.45.0 → 3.47.0

package/multiselect/multiselect.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var api = require('primevue/api');
+var Checkbox = require('primevue/checkbox');
 var CheckIcon = require('primevue/icons/check');
 var ChevronDownIcon = require('primevue/icons/chevrondown');
 var SearchIcon = require('primevue/icons/search');
@@ -18,6 +19,7 @@ var vue = require('vue');
 
 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);
@@ -89,7 +91,7 @@ var script$1 = {
       "default": null
     },
     appendTo: {
-      type: String,
+      type: [String, Object],
       "default": 'body'
     },
     display: {
@@ -154,12 +156,20 @@ var script$1 = {
     },
     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
@@ -227,13 +237,12 @@ var script = {
   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
     };
@@ -278,8 +287,7 @@ var script = {
     getHeaderCheckboxPTOptions: function getHeaderCheckboxPTOptions(key) {
       return this.ptm(key, {
         context: {
-          selected: this.allSelected,
-          focused: this.headerCheckboxFocused
+          selected: this.allSelected
         }
       });
     },
@@ -316,7 +324,7 @@ var script = {
     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) {
@@ -324,6 +332,7 @@ var script = {
       var _hide = function _hide() {
         _this2.$emit('before-hide');
         _this2.overlayVisible = false;
+        _this2.clicked = false;
         _this2.focusedOptionIndex = -1;
         _this2.searchValue = '';
         _this2.resetFilterOnHide && (_this2.filterValue = null);
@@ -339,11 +348,14 @@ var script = {
         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 = '';
@@ -408,6 +420,7 @@ var script = {
           }
           break;
       }
+      this.clicked = false;
     },
     onContainerClick: function onContainerClick(event) {
       if (this.disabled || this.loading) {
@@ -416,6 +429,7 @@ var script = {
       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;
@@ -428,12 +442,6 @@ var script = {
     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;
@@ -534,12 +542,15 @@ var script = {
       }
     },
     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) {
@@ -551,7 +562,7 @@ var script = {
         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);
         }
@@ -610,6 +621,7 @@ var script = {
     },
     onEnterKey: function onEnterKey(event) {
       if (!this.overlayVisible) {
+        this.focusedOptionIndex = -1; // reset
         this.onArrowDownKey(event);
       } else {
         if (this.focusedOptionIndex !== -1) {
@@ -758,7 +770,6 @@ var script = {
         });
         this.updateModel(event, value);
       }
-      this.headerCheckboxFocused = true;
     },
     removeOption: function removeOption(event, optionValue) {
       var _this11 = this;
@@ -774,7 +785,8 @@ var script = {
       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));
@@ -782,11 +794,14 @@ var script = {
     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() {
@@ -815,29 +830,49 @@ var script = {
       }) : -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;
     },
@@ -856,61 +891,69 @@ var script = {
       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) {
@@ -927,14 +970,14 @@ var script = {
       });
     },
     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);
         });
@@ -954,7 +997,7 @@ var script = {
   },
   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);
@@ -962,11 +1005,11 @@ var script = {
           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);
         }
@@ -998,9 +1041,9 @@ var script = {
       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() {
@@ -1040,9 +1083,9 @@ var script = {
       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() {
@@ -1059,6 +1102,7 @@ var script = {
     ripple: Ripple__default["default"]
   },
   components: {
+    Checkbox: Checkbox__default["default"],
     VirtualScroller: VirtualScroller__default["default"],
     Portal: Portal__default["default"],
     TimesIcon: TimesIcon__default["default"],
@@ -1078,22 +1122,22 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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'), {
@@ -1217,10 +1261,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             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({
@@ -1241,44 +1285,35 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), _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'),
@@ -1287,16 +1322,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             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({
@@ -1312,7 +1347,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 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"
@@ -1322,7 +1357,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             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 : ''
@@ -1370,7 +1405,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   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: {
@@ -1397,25 +1432,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "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'),
@@ -1428,7 +1468,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 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 ? {
@@ -1462,7 +1502,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "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'), {