primevue 3.45.0 → 3.47.0

package/datatable/datatable.cjs.js

@@ -18,6 +18,8 @@ var PencilIcon = require('primevue/icons/pencil');
 var TimesIcon = require('primevue/icons/times');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Ripple = require('primevue/ripple');
+var Checkbox = require('primevue/checkbox');
+var RadioButton = require('primevue/radiobutton');
 var Button = require('primevue/button');
 var Dropdown = require('primevue/dropdown');
 var FocusTrap = require('primevue/focustrap');
@@ -47,6 +49,8 @@ var PencilIcon__default = /*#__PURE__*/_interopDefaultLegacy(PencilIcon);
 var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
+var RadioButton__default = /*#__PURE__*/_interopDefaultLegacy(RadioButton);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
 var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
@@ -307,6 +311,10 @@ var script$c = {
       type: Boolean,
       "default": false
     },
+    highlightOnSelect: {
+      type: Boolean,
+      "default": false
+    },
     size: {
       type: String,
       "default": null
@@ -354,11 +362,6 @@ var script$b = {
       "default": null
     }
   },
-  data: function data() {
-    return {
-      focused: false
-    };
-  },
   methods: {
     getColumnPT: function getColumnPT(key) {
       var columnMetaData = {
@@ -371,7 +374,6 @@ var script$b = {
         context: {
           index: this.index,
           checked: this.checked,
-          focused: this.focused,
           disabled: this.$attrs.disabled
         }
       };
@@ -382,30 +384,12 @@ var script$b = {
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
     },
-    onClick: function onClick(event) {
+    onChange: function onChange(event) {
       if (!this.$attrs.disabled) {
         this.$emit('change', {
           originalEvent: event,
           data: this.value
         });
-        utils.DomHandler.focus(this.$refs.input);
-      }
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    onFocus: function onFocus() {
-      this.focused = true;
-    },
-    onBlur: function onBlur() {
-      this.focused = false;
-    },
-    onKeydown: function onKeydown(event) {
-      switch (event.code) {
-        case 'Space':
-          {
-            this.onClick(event);
-            break;
-          }
       }
     }
   },
@@ -415,49 +399,35 @@ var script$b = {
     }
   },
   components: {
-    CheckIcon: CheckIcon__default["default"]
+    CheckIcon: CheckIcon__default["default"],
+    Checkbox: Checkbox__default["default"]
   }
 };
 
-var _hoisted_1$7 = ["checked", "disabled", "tabindex", "aria-label"];
 function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CheckIcon = vue.resolveComponent("CheckIcon");
-  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-    "class": _ctx.cx('checkboxWrapper'),
-    onClick: _cache[3] || (_cache[3] = function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    })
-  }, $options.getColumnPT('checkboxWrapper')), [vue.createElementVNode("div", vue.mergeProps({
-    "class": "p-hidden-accessible"
-  }, $options.getColumnPT('hiddenInputWrapper'), {
-    "data-p-hidden-accessible": true
-  }), [vue.createElementVNode("input", vue.mergeProps({
-    ref: "input",
-    type: "checkbox",
-    checked: $props.checked,
+  var _component_Checkbox = vue.resolveComponent("Checkbox");
+  return vue.openBlock(), vue.createBlock(_component_Checkbox, {
+    modelValue: $props.checked,
+    binary: true,
     disabled: _ctx.$attrs.disabled,
-    tabindex: _ctx.$attrs.disabled ? null : '0',
     "aria-label": $options.checkboxAriaLabel,
-    onFocus: _cache[0] || (_cache[0] = function ($event) {
-      return $options.onFocus($event);
-    }),
-    onBlur: _cache[1] || (_cache[1] = function ($event) {
-      return $options.onBlur($event);
+    onChange: $options.onChange,
+    unstyled: _ctx.unstyled,
+    pt: $options.getColumnPT('rowCheckbox')
+  }, {
+    icon: vue.withCtx(function (slotProps) {
+      return [$props.rowCheckboxIconTemplate ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.rowCheckboxIconTemplate), {
+        key: 0,
+        checked: slotProps.checked,
+        "class": vue.normalizeClass(slotProps["class"])
+      }, null, 8, ["checked", "class"])) : !$props.rowCheckboxIconTemplate && slotProps.checked ? (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
+        key: 1,
+        "class": slotProps["class"]
+      }, $options.getColumnPT('rowCheckbox.icon')), null, 16, ["class"])) : vue.createCommentVNode("", true)];
     }),
-    onKeydown: _cache[2] || (_cache[2] = function () {
-      return $options.onKeydown && $options.onKeydown.apply($options, arguments);
-    })
-  }, $options.getColumnPT('hiddenInput')), null, 16, _hoisted_1$7)], 16), vue.createElementVNode("div", vue.mergeProps({
-    ref: "box",
-    "class": _ctx.cx('checkbox')
-  }, $options.getColumnPT('checkbox')), [$props.rowCheckboxIconTemplate ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.rowCheckboxIconTemplate), {
-    key: 0,
-    checked: $props.checked,
-    "class": vue.normalizeClass(_ctx.cx('checkboxIcon'))
-  }, null, 8, ["checked", "class"])) : !$props.rowCheckboxIconTemplate && !!$props.checked ? (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
-    key: 1,
-    "class": _ctx.cx('checkboxIcon')
-  }, $options.getColumnPT('checkboxIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 16)], 16);
+    _: 1
+  }, 8, ["modelValue", "disabled", "aria-label", "onChange", "unstyled", "pt"]);
 }
 
 script$b.render = render$b;
@@ -466,7 +436,6 @@ var script$a = {
   name: 'RowRadioButton',
   hostName: 'DataTable',
   "extends": BaseComponent__default["default"],
-  inheritAttrs: false,
   emits: ['change'],
   props: {
     value: null,
@@ -478,11 +447,6 @@ var script$a = {
       "default": null
     }
   },
-  data: function data() {
-    return {
-      focused: false
-    };
-  },
   methods: {
     getColumnPT: function getColumnPT(key) {
       var columnMetaData = {
@@ -495,7 +459,6 @@ var script$a = {
         context: {
           index: this.index,
           checked: this.checked,
-          focused: this.focused,
           disabled: this.$attrs.disabled
         }
       };
@@ -506,59 +469,31 @@ var script$a = {
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
     },
-    onClick: function onClick(event) {
-      if (!this.disabled) {
-        if (!this.checked) {
-          this.$emit('change', {
-            originalEvent: event,
-            data: this.value
-          });
-          utils.DomHandler.focus(this.$refs.input);
-        }
+    onChange: function onChange(event) {
+      if (!this.$attrs.disabled) {
+        this.$emit('change', {
+          originalEvent: event,
+          data: this.value
+        });
       }
-    },
-    onFocus: function onFocus() {
-      this.focused = true;
-    },
-    onBlur: function onBlur() {
-      this.focused = false;
     }
+  },
+  components: {
+    RadioButton: RadioButton__default["default"]
   }
 };
 
-var _hoisted_1$6 = ["checked", "disabled", "name"];
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-    "class": _ctx.cx('radiobuttonWrapper'),
-    onClick: _cache[3] || (_cache[3] = function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    })
-  }, $options.getColumnPT('radiobuttonWrapper')), [vue.createElementVNode("div", vue.mergeProps({
-    "class": "p-hidden-accessible"
-  }, $options.getColumnPT('hiddenInputWrapper'), {
-    "data-p-hidden-accessible": true
-  }), [vue.createElementVNode("input", vue.mergeProps({
-    ref: "input",
-    type: "radio",
-    checked: $props.checked,
+  var _component_RadioButton = vue.resolveComponent("RadioButton");
+  return vue.openBlock(), vue.createBlock(_component_RadioButton, {
+    modelValue: $props.checked,
+    binary: true,
     disabled: _ctx.$attrs.disabled,
     name: $props.name,
-    tabindex: "0",
-    onFocus: _cache[0] || (_cache[0] = function ($event) {
-      return $options.onFocus($event);
-    }),
-    onBlur: _cache[1] || (_cache[1] = function ($event) {
-      return $options.onBlur($event);
-    }),
-    onKeydown: _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    }, ["prevent"]), ["space"]))
-  }, $options.getColumnPT('hiddenInput')), null, 16, _hoisted_1$6)], 16), vue.createElementVNode("div", vue.mergeProps({
-    ref: "box",
-    "class": _ctx.cx('radiobutton')
-  }, $options.getColumnPT('radiobutton')), [vue.createElementVNode("div", vue.mergeProps({
-    "class": _ctx.cx('radiobuttonIcon')
-  }, $options.getColumnPT('radiobuttonIcon')), null, 16)], 16)], 16);
+    onChange: $options.onChange,
+    unstyled: _ctx.unstyled,
+    pt: $options.getColumnPT('rowRadiobutton')
+  }, null, 8, ["modelValue", "disabled", "name", "onChange", "unstyled", "pt"]);
 }
 
 script$a.render = render$a;
@@ -1035,7 +970,7 @@ function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t
 function _defineProperty$a(obj, key, value) { key = _toPropertyKey$a(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey$a(t) { var i = _toPrimitive$a(t, "string"); return "symbol" == _typeof$a(i) ? i : String(i); }
 function _toPrimitive$a(t, r) { if ("object" != _typeof$a(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$a(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1$5 = ["colspan", "rowspan", "data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"];
+var _hoisted_1$4 = ["colspan", "rowspan", "data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"];
 var _hoisted_2$2 = ["aria-expanded", "aria-controls", "aria-label"];
 var _hoisted_3$2 = ["aria-label"];
 var _hoisted_4$1 = ["aria-label"];
@@ -1087,8 +1022,9 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
     field: $options.field,
     index: $props.rowIndex,
     frozenRow: $props.frozenRow,
-    editorInitCallback: $options.editorInitCallback
-  }, null, 8, ["data", "column", "field", "index", "frozenRow", "editorInitCallback"])) : $props.column.children && $props.column.children.editor && $data.d_editing ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.editor), {
+    editorInitCallback: $options.editorInitCallback,
+    rowTogglerCallback: $options.toggleRow
+  }, null, 8, ["data", "column", "field", "index", "frozenRow", "editorInitCallback", "rowTogglerCallback"])) : $props.column.children && $props.column.children.editor && $data.d_editing ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.editor), {
     key: 2,
     data: $options.editingRowData,
     column: $props.column,
@@ -1212,7 +1148,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('rowEditorCancelIcon')
   }, $options.getColumnPT('rowEditorCancelIcon')), null, 16, ["class"]))], 16, _hoisted_5$1)), [[_directive_ripple]]) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 8
-  }, [vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$5));
+  }, [vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$4));
 }
 
 script$9.render = render$9;
@@ -1376,11 +1312,14 @@ var script$8 = {
     };
   },
   watch: {
-    expandedRows: function expandedRows(newValue) {
-      var _this = this;
-      this.d_rowExpanded = this.dataKey ? (newValue === null || newValue === void 0 ? void 0 : newValue[utils.ObjectUtils.resolveFieldData(this.rowData, this.dataKey)]) !== undefined : newValue === null || newValue === void 0 ? void 0 : newValue.some(function (d) {
-        return _this.equals(_this.rowData, d);
-      });
+    expandedRows: {
+      immediate: true,
+      handler: function handler(newValue) {
+        var _this = this;
+        this.d_rowExpanded = this.dataKey ? (newValue === null || newValue === void 0 ? void 0 : newValue[utils.ObjectUtils.resolveFieldData(this.rowData, this.dataKey)]) !== undefined : newValue === null || newValue === void 0 ? void 0 : newValue.some(function (d) {
+          return _this.equals(_this.rowData, d);
+        });
+      }
     }
   },
   methods: {
@@ -1403,7 +1342,7 @@ var script$8 = {
     //@todo - update this method
     getBodyRowPTOptions: function getBodyRowPTOptions(key) {
       var _this$$parentInstance;
-      var datatable = (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.$parentInstance;
+      var datatable = (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.$parentInstance;
       return this.ptm(key, {
         context: {
           index: this.rowIndex,
@@ -1666,12 +1605,15 @@ var script$8 = {
     },
     columnsLength: function columnsLength() {
       var _this2 = this;
-      var hiddenColLength = 0;
-      this.columns.forEach(function (column) {
-        if (_this2.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
-        if (_this2.columnProp(column, 'hidden')) hiddenColLength++;
-      });
-      return this.columns ? this.columns.length - hiddenColLength : 0;
+      if (this.columns) {
+        var hiddenColLength = 0;
+        this.columns.forEach(function (column) {
+          if (_this2.columnProp(column, 'selectionMode') === 'single') hiddenColLength--;
+          if (_this2.columnProp(column, 'hidden')) hiddenColLength++;
+        });
+        return this.columns.length - hiddenColLength;
+      }
+      return 0;
     }
   },
   components: {
@@ -1687,7 +1629,7 @@ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t
 function _defineProperty$8(obj, key, value) { key = _toPropertyKey$8(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey$8(t) { var i = _toPrimitive$8(t, "string"); return "symbol" == _typeof$8(i) ? i : String(i); }
 function _toPrimitive$8(t, r) { if ("object" != _typeof$8(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$8(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1$4 = ["colspan"];
+var _hoisted_1$3 = ["colspan"];
 var _hoisted_2$1 = ["tabindex", "aria-selected", "data-p-index", "data-p-selectable-row", "data-p-highlight", "data-p-highlight-contextmenu"];
 var _hoisted_3$1 = ["id"];
 var _hoisted_4 = ["colspan"];
@@ -1733,7 +1675,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 64))], 16)) : vue.createCommentVNode("", true), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupheader']), {
     data: $props.rowData,
     index: $options.rowIndex
-  }, null, 8, ["data", "index"]))], 16, _hoisted_1$4)], 16)) : vue.createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded : true) ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+  }, null, 8, ["data", "index"]))], 16, _hoisted_1$3)], 16)) : vue.createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded : true) ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
     key: 1,
     "class": $options.rowClasses,
     style: $options.rowStyles,
@@ -2261,7 +2203,7 @@ function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t
 function _defineProperty$7(obj, key, value) { key = _toPropertyKey$7(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey$7(t) { var i = _toPrimitive$7(t, "string"); return "symbol" == _typeof$7(i) ? i : String(i); }
 function _toPrimitive$7(t, r) { if ("object" != _typeof$7(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$7(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1$3 = ["colspan", "rowspan", "data-p-frozen-column"];
+var _hoisted_1$2 = ["colspan", "rowspan", "data-p-frozen-column"];
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
     style: $options.containerStyle,
@@ -2274,7 +2216,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   }), [$props.column.children && $props.column.children.footer ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.footer), {
     key: 0,
     column: $props.column
-  }, null, 8, ["column"])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString($options.columnProp('footer')), 1)], 16, _hoisted_1$3);
+  }, null, 8, ["column"])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString($options.columnProp('footer')), 1)], 16, _hoisted_1$2);
 }
 
 script$6.render = render$6;
@@ -2822,6 +2764,10 @@ var script$4 = {
       };
       OverlayEventBus__default["default"].on('overlay-click', this.overlayEventListener);
     },
+    onOverlayAfterEnter: function onOverlayAfterEnter() {
+      var _this$overlay;
+      (_this$overlay = this.overlay) === null || _this$overlay === void 0 || (_this$overlay = _this$overlay.$focustrap) === null || _this$overlay === void 0 || _this$overlay.autoFocus();
+    },
     onOverlayLeave: function onOverlayLeave() {
       this.onOverlayHide();
     },
@@ -3001,7 +2947,7 @@ function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t
 function _defineProperty$4(obj, key, value) { key = _toPropertyKey$4(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey$4(t) { var i = _toPrimitive$4(t, "string"); return "symbol" == _typeof$4(i) ? i : String(i); }
 function _toPrimitive$4(t, r) { if ("object" != _typeof$4(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof$4(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1$2 = ["aria-label", "aria-expanded", "aria-controls"];
+var _hoisted_1$1 = ["aria-label", "aria-expanded", "aria-controls"];
 var _hoisted_2 = ["id", "aria-modal"];
 var _hoisted_3 = ["onClick", "onKeydown", "tabindex"];
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
@@ -3033,7 +2979,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[1] || (_cache[1] = function ($event) {
       return $options.onToggleButtonKeyDown($event);
     })
-  }, $options.getColumnPT('filterMenuButton', $options.ptmFilterMenuParams)), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon'), vue.normalizeProps(vue.guardReactiveProps($options.getColumnPT('filterMenuIcon'))), null, 16))], 16, _hoisted_1$2)) : vue.createCommentVNode("", true), $props.showClearButton && $props.display === 'row' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+  }, $options.getColumnPT('filterMenuButton', $options.ptmFilterMenuParams)), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon'), vue.normalizeProps(vue.guardReactiveProps($options.getColumnPT('filterMenuIcon'))), null, 16))], 16, _hoisted_1$1)) : vue.createCommentVNode("", true), $props.showClearButton && $props.display === 'row' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
     key: 2,
     "class": _ctx.cx('headerFilterClearButton'),
     type: "button",
@@ -3045,6 +2991,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       return [vue.createVNode(vue.Transition, vue.mergeProps({
         name: "p-connected-overlay",
         onEnter: $options.onOverlayEnter,
+        onAfterEnter: $options.onOverlayAfterEnter,
         onLeave: $options.onOverlayLeave,
         onAfterLeave: $options.onOverlayAfterLeave
       }, $options.getColumnPT('transition')), {
@@ -3231,12 +3178,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             field: $props.field,
             filterModel: $props.filters[$props.field],
             filterCallback: $options.filterCallback
-          }, null, 8, ["field", "filterModel", "filterCallback"]))], 16, _hoisted_2)), [[_directive_focustrap, {
-            autoFocus: true
-          }]]) : vue.createCommentVNode("", true)];
+          }, null, 8, ["field", "filterModel", "filterCallback"]))], 16, _hoisted_2)), [[_directive_focustrap]]) : vue.createCommentVNode("", true)];
         }),
         _: 1
-      }, 16, ["onEnter", "onLeave", "onAfterLeave"])];
+      }, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
     }),
     _: 1
   })], 16);
@@ -3258,11 +3203,6 @@ var script$3 = {
       "default": null
     }
   },
-  data: function data() {
-    return {
-      focused: false
-    };
-  },
   methods: {
     getColumnPT: function getColumnPT(key) {
       var columnMetaData = {
@@ -3274,7 +3214,6 @@ var script$3 = {
         },
         context: {
           checked: this.checked,
-          focused: this.focused,
           disabled: this.disabled
         }
       };
@@ -3285,20 +3224,11 @@ var script$3 = {
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
     },
-    onClick: function onClick(event) {
-      if (!this.disabled) {
-        this.$emit('change', {
-          originalEvent: event,
-          checked: !this.checked
-        });
-        utils.DomHandler.focus(this.$refs.input);
-      }
-    },
-    onFocus: function onFocus() {
-      this.focused = true;
-    },
-    onBlur: function onBlur() {
-      this.focused = false;
+    onChange: function onChange(event) {
+      this.$emit('change', {
+        originalEvent: event,
+        checked: !this.checked
+      });
     }
   },
   computed: {
@@ -3307,49 +3237,34 @@ var script$3 = {
     }
   },
   components: {
-    CheckIcon: CheckIcon__default["default"]
+    CheckIcon: CheckIcon__default["default"],
+    Checkbox: Checkbox__default["default"]
   }
 };
 
-var _hoisted_1$1 = ["checked", "disabled", "tabindex", "aria-label"];
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CheckIcon = vue.resolveComponent("CheckIcon");
-  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-    "class": _ctx.cx('headerCheckboxWrapper'),
-    onClick: _cache[2] || (_cache[2] = function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    }),
-    onKeydown: _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    }, ["prevent"]), ["space"]))
-  }, $options.getColumnPT('headerCheckboxWrapper')), [vue.createElementVNode("div", vue.mergeProps({
-    "class": "p-hidden-accessible"
-  }, $options.getColumnPT('hiddenHeaderInputWrapper'), {
-    "data-p-hidden-accessible": true
-  }), [vue.createElementVNode("input", vue.mergeProps({
-    ref: "input",
-    type: "checkbox",
-    checked: $props.checked,
+  var _component_Checkbox = vue.resolveComponent("Checkbox");
+  return vue.openBlock(), vue.createBlock(_component_Checkbox, {
+    modelValue: $props.checked,
+    binary: true,
     disabled: $props.disabled,
-    tabindex: $props.disabled ? null : '0',
     "aria-label": $options.headerCheckboxAriaLabel,
-    onFocus: _cache[0] || (_cache[0] = function ($event) {
-      return $options.onFocus($event);
+    onChange: $options.onChange,
+    pt: $options.getColumnPT('headerCheckbox')
+  }, {
+    icon: vue.withCtx(function (slotProps) {
+      return [$props.headerCheckboxIconTemplate ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.headerCheckboxIconTemplate), {
+        key: 0,
+        checked: slotProps.checked,
+        "class": vue.normalizeClass(slotProps["class"])
+      }, null, 8, ["checked", "class"])) : !$props.headerCheckboxIconTemplate && slotProps.checked ? (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
+        key: 1,
+        "class": slotProps["class"]
+      }, $options.getColumnPT('headerCheckbox.icon')), null, 16, ["class"])) : vue.createCommentVNode("", true)];
     }),
-    onBlur: _cache[1] || (_cache[1] = function ($event) {
-      return $options.onBlur($event);
-    })
-  }, $options.getColumnPT('hiddenHeaderInput')), null, 16, _hoisted_1$1)], 16), vue.createElementVNode("div", vue.mergeProps({
-    ref: "box",
-    "class": _ctx.cx('headerCheckbox')
-  }, $options.getColumnPT('headerCheckbox')), [$props.headerCheckboxIconTemplate ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.headerCheckboxIconTemplate), {
-    key: 0,
-    checked: $props.checked,
-    "class": vue.normalizeClass(_ctx.cx('headerCheckboxIcon'))
-  }, null, 8, ["checked", "class"])) : !$props.headerCheckboxIconTemplate && !!$props.checked ? (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
-    key: 1,
-    "class": _ctx.cx('headerCheckboxIcon')
-  }, $options.getColumnPT('headerCheckboxIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 16)], 16);
+    _: 1
+  }, 8, ["modelValue", "disabled", "aria-label", "onChange", "pt"]);
 }
 
 script$3.render = render$3;
@@ -3459,6 +3374,7 @@ var script$2 = {
         },
         context: {
           index: this.index,
+          sortable: this.columnProp('sortable') === '' || this.columnProp('sortable'),
           sorted: this.isColumnSorted(),
           resizable: this.resizableColumns,
           size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size,
@@ -3700,8 +3616,9 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $props.empty,
     headerCheckboxIconTemplate: $props.column.children && $props.column.children.headercheckboxicon,
     column: $props.column,
+    unstyled: _ctx.unstyled,
     pt: _ctx.pt
-  }, null, 8, ["checked", "onChange", "disabled", "headerCheckboxIconTemplate", "column", "pt"])) : vue.createCommentVNode("", true), $props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter ? (vue.openBlock(), vue.createBlock(_component_DTColumnFilter, {
+  }, null, 8, ["checked", "onChange", "disabled", "headerCheckboxIconTemplate", "column", "unstyled", "pt"])) : vue.createCommentVNode("", true), $props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter ? (vue.openBlock(), vue.createBlock(_component_DTColumnFilter, {
     key: 5,
     field: $options.columnProp('filterField') || $options.columnProp('field'),
     type: $options.columnProp('dataType'),
@@ -4035,8 +3952,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       onApplyClick: _cache[14] || (_cache[14] = function ($event) {
         return _ctx.$emit('apply-click', $event);
       }),
+      unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["column", "index", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps", "pt"])) : vue.createCommentVNode("", true)], 64);
+    }, null, 8, ["column", "index", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps", "unstyled", "pt"])) : vue.createCommentVNode("", true)], 64);
   }), 128))], 16), $props.filterDisplay === 'row' ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
     key: 0,
     role: "row"
@@ -4055,8 +3973,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
         return _ctx.$emit('checkbox-change', $event);
       }),
       column: col,
+      unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["checked", "disabled", "column", "pt"])) : vue.createCommentVNode("", true), col.children && col.children.filter ? (vue.openBlock(), vue.createBlock(_component_DTColumnFilter, {
+    }, null, 8, ["checked", "disabled", "column", "unstyled", "pt"])) : vue.createCommentVNode("", true), col.children && col.children.filter ? (vue.openBlock(), vue.createBlock(_component_DTColumnFilter, {
       key: 1,
       field: $options.columnProp(col, 'filterField') || $options.columnProp(col, 'field'),
       type: $options.columnProp(col, 'dataType'),
@@ -4161,8 +4080,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
         onApplyClick: _cache[32] || (_cache[32] = function ($event) {
           return _ctx.$emit('apply-click', $event);
         }),
+        unstyled: _ctx.unstyled,
         pt: _ctx.pt
-      }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "pt"])) : vue.createCommentVNode("", true)], 64);
+      }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "unstyled", "pt"])) : vue.createCommentVNode("", true)], 64);
     }), 128))], 16);
   }), 128))], 16);
 }
@@ -4656,8 +4576,9 @@ var script = {
       }
       this.rowTouched = false;
       if (focusedItem) {
-        if (e.originalEvent.target.getAttribute('data-pc-section') === 'rowtogglericon' || e.originalEvent.target.parentElement.getAttribute('data-pc-section') === 'rowtogglericon') return;
-        var targetRow = e.originalEvent.target.closest('tr[data-p-selectable-row="true"]');
+        var _event$target, _event$target2, _event$target3;
+        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getAttribute('data-pc-section')) === 'rowtogglericon' || ((_event$target2 = event.target) === null || _event$target2 === void 0 || (_event$target2 = _event$target2.parentElement) === null || _event$target2 === void 0 ? void 0 : _event$target2.getAttribute('data-pc-section')) === 'rowtogglericon') return;
+        var targetRow = (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.closest('tr[data-p-selectable-row="true"]');
         focusedItem.tabIndex = '-1';
         targetRow.tabIndex = '0';
       }