primevue 3.45.0 → 3.47.0

package/datatable/datatable.esm.js

@@ -9,13 +9,15 @@ import BaseComponent from 'primevue/basecomponent';
 import DataTableStyle from 'primevue/datatable/style';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
-import { mergeProps, resolveComponent, openBlock, createElementBlock, createElementVNode, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, withKeys, withModifiers, resolveDirective, toDisplayString, Fragment, withDirectives, createTextVNode, renderList, normalizeProps, guardReactiveProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
+import { mergeProps, resolveComponent, openBlock, createBlock, withCtx, resolveDynamicComponent, normalizeClass, createCommentVNode, resolveDirective, createElementBlock, toDisplayString, Fragment, withDirectives, createTextVNode, createElementVNode, withModifiers, renderList, normalizeProps, guardReactiveProps, createVNode, Transition, withKeys, renderSlot, createSlots } from 'vue';
 import BarsIcon from 'primevue/icons/bars';
 import CheckIcon from 'primevue/icons/check';
 import PencilIcon from 'primevue/icons/pencil';
 import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
+import Checkbox from 'primevue/checkbox';
+import RadioButton from 'primevue/radiobutton';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import FocusTrap from 'primevue/focustrap';
@@ -276,6 +278,10 @@ var script$c = {
       type: Boolean,
       "default": false
     },
+    highlightOnSelect: {
+      type: Boolean,
+      "default": false
+    },
     size: {
       type: String,
       "default": null
@@ -323,11 +329,6 @@ var script$b = {
       "default": null
     }
   },
-  data: function data() {
-    return {
-      focused: false
-    };
-  },
   methods: {
     getColumnPT: function getColumnPT(key) {
       var columnMetaData = {
@@ -340,7 +341,6 @@ var script$b = {
         context: {
           index: this.index,
           checked: this.checked,
-          focused: this.focused,
           disabled: this.$attrs.disabled
         }
       };
@@ -351,30 +351,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
         });
-        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;
-          }
       }
     }
   },
@@ -384,49 +366,35 @@ var script$b = {
     }
   },
   components: {
-    CheckIcon: CheckIcon
+    CheckIcon: CheckIcon,
+    Checkbox: Checkbox
   }
 };
 
-var _hoisted_1$7 = ["checked", "disabled", "tabindex", "aria-label"];
 function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CheckIcon = resolveComponent("CheckIcon");
-  return openBlock(), createElementBlock("div", mergeProps({
-    "class": _ctx.cx('checkboxWrapper'),
-    onClick: _cache[3] || (_cache[3] = function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    })
-  }, $options.getColumnPT('checkboxWrapper')), [createElementVNode("div", mergeProps({
-    "class": "p-hidden-accessible"
-  }, $options.getColumnPT('hiddenInputWrapper'), {
-    "data-p-hidden-accessible": true
-  }), [createElementVNode("input", mergeProps({
-    ref: "input",
-    type: "checkbox",
-    checked: $props.checked,
+  var _component_Checkbox = resolveComponent("Checkbox");
+  return openBlock(), 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: withCtx(function (slotProps) {
+      return [$props.rowCheckboxIconTemplate ? (openBlock(), createBlock(resolveDynamicComponent($props.rowCheckboxIconTemplate), {
+        key: 0,
+        checked: slotProps.checked,
+        "class": normalizeClass(slotProps["class"])
+      }, null, 8, ["checked", "class"])) : !$props.rowCheckboxIconTemplate && slotProps.checked ? (openBlock(), createBlock(_component_CheckIcon, mergeProps({
+        key: 1,
+        "class": slotProps["class"]
+      }, $options.getColumnPT('rowCheckbox.icon')), null, 16, ["class"])) : 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), createElementVNode("div", mergeProps({
-    ref: "box",
-    "class": _ctx.cx('checkbox')
-  }, $options.getColumnPT('checkbox')), [$props.rowCheckboxIconTemplate ? (openBlock(), createBlock(resolveDynamicComponent($props.rowCheckboxIconTemplate), {
-    key: 0,
-    checked: $props.checked,
-    "class": normalizeClass(_ctx.cx('checkboxIcon'))
-  }, null, 8, ["checked", "class"])) : !$props.rowCheckboxIconTemplate && !!$props.checked ? (openBlock(), createBlock(_component_CheckIcon, mergeProps({
-    key: 1,
-    "class": _ctx.cx('checkboxIcon')
-  }, $options.getColumnPT('checkboxIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 16)], 16);
+    _: 1
+  }, 8, ["modelValue", "disabled", "aria-label", "onChange", "unstyled", "pt"]);
 }
 
 script$b.render = render$b;
@@ -435,7 +403,6 @@ var script$a = {
   name: 'RowRadioButton',
   hostName: 'DataTable',
   "extends": BaseComponent,
-  inheritAttrs: false,
   emits: ['change'],
   props: {
     value: null,
@@ -447,11 +414,6 @@ var script$a = {
       "default": null
     }
   },
-  data: function data() {
-    return {
-      focused: false
-    };
-  },
   methods: {
     getColumnPT: function getColumnPT(key) {
       var columnMetaData = {
@@ -464,7 +426,6 @@ var script$a = {
         context: {
           index: this.index,
           checked: this.checked,
-          focused: this.focused,
           disabled: this.$attrs.disabled
         }
       };
@@ -475,59 +436,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
-          });
-          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
   }
 };
 
-var _hoisted_1$6 = ["checked", "disabled", "name"];
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", mergeProps({
-    "class": _ctx.cx('radiobuttonWrapper'),
-    onClick: _cache[3] || (_cache[3] = function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    })
-  }, $options.getColumnPT('radiobuttonWrapper')), [createElementVNode("div", mergeProps({
-    "class": "p-hidden-accessible"
-  }, $options.getColumnPT('hiddenInputWrapper'), {
-    "data-p-hidden-accessible": true
-  }), [createElementVNode("input", mergeProps({
-    ref: "input",
-    type: "radio",
-    checked: $props.checked,
+  var _component_RadioButton = resolveComponent("RadioButton");
+  return openBlock(), 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] = withKeys(withModifiers(function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    }, ["prevent"]), ["space"]))
-  }, $options.getColumnPT('hiddenInput')), null, 16, _hoisted_1$6)], 16), createElementVNode("div", mergeProps({
-    ref: "box",
-    "class": _ctx.cx('radiobutton')
-  }, $options.getColumnPT('radiobutton')), [createElementVNode("div", 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;
@@ -1004,7 +937,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"];
@@ -1056,8 +989,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 ? (openBlock(), createBlock(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 ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.editor), {
     key: 2,
     data: $options.editingRowData,
     column: $props.column,
@@ -1181,7 +1115,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]]) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, {
     key: 8
-  }, [createTextVNode(toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$5));
+  }, [createTextVNode(toDisplayString($options.resolveFieldData()), 1)], 64))], 16, _hoisted_1$4));
 }
 
 script$9.render = render$9;
@@ -1345,11 +1279,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[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[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: {
@@ -1372,7 +1309,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,
@@ -1635,12 +1572,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: {
@@ -1656,7 +1596,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"];
@@ -1702,7 +1642,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 64))], 16)) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
     data: $props.rowData,
     index: $options.rowIndex
-  }, null, 8, ["data", "index"]))], 16, _hoisted_1$4)], 16)) : createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded : true) ? (openBlock(), createElementBlock("tr", mergeProps({
+  }, null, 8, ["data", "index"]))], 16, _hoisted_1$3)], 16)) : createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded : true) ? (openBlock(), createElementBlock("tr", mergeProps({
     key: 1,
     "class": $options.rowClasses,
     style: $options.rowStyles,
@@ -2230,7 +2170,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 openBlock(), createElementBlock("td", mergeProps({
     style: $options.containerStyle,
@@ -2243,7 +2183,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   }), [$props.column.children && $props.column.children.footer ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.footer), {
     key: 0,
     column: $props.column
-  }, null, 8, ["column"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString($options.columnProp('footer')), 1)], 16, _hoisted_1$3);
+  }, null, 8, ["column"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString($options.columnProp('footer')), 1)], 16, _hoisted_1$2);
 }
 
 script$6.render = render$6;
@@ -2791,6 +2731,10 @@ var script$4 = {
       };
       OverlayEventBus.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();
     },
@@ -2970,7 +2914,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) {
@@ -3002,7 +2946,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)), [(openBlock(), createBlock(resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon'), normalizeProps(guardReactiveProps($options.getColumnPT('filterMenuIcon'))), null, 16))], 16, _hoisted_1$2)) : createCommentVNode("", true), $props.showClearButton && $props.display === 'row' ? (openBlock(), createElementBlock("button", mergeProps({
+  }, $options.getColumnPT('filterMenuButton', $options.ptmFilterMenuParams)), [(openBlock(), createBlock(resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon'), normalizeProps(guardReactiveProps($options.getColumnPT('filterMenuIcon'))), null, 16))], 16, _hoisted_1$1)) : createCommentVNode("", true), $props.showClearButton && $props.display === 'row' ? (openBlock(), createElementBlock("button", mergeProps({
     key: 2,
     "class": _ctx.cx('headerFilterClearButton'),
     type: "button",
@@ -3014,6 +2958,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       return [createVNode(Transition, mergeProps({
         name: "p-connected-overlay",
         onEnter: $options.onOverlayEnter,
+        onAfterEnter: $options.onOverlayAfterEnter,
         onLeave: $options.onOverlayLeave,
         onAfterLeave: $options.onOverlayAfterLeave
       }, $options.getColumnPT('transition')), {
@@ -3200,12 +3145,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
-          }]]) : createCommentVNode("", true)];
+          }, null, 8, ["field", "filterModel", "filterCallback"]))], 16, _hoisted_2)), [[_directive_focustrap]]) : createCommentVNode("", true)];
         }),
         _: 1
-      }, 16, ["onEnter", "onLeave", "onAfterLeave"])];
+      }, 16, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
     }),
     _: 1
   })], 16);
@@ -3227,11 +3170,6 @@ var script$3 = {
       "default": null
     }
   },
-  data: function data() {
-    return {
-      focused: false
-    };
-  },
   methods: {
     getColumnPT: function getColumnPT(key) {
       var columnMetaData = {
@@ -3243,7 +3181,6 @@ var script$3 = {
         },
         context: {
           checked: this.checked,
-          focused: this.focused,
           disabled: this.disabled
         }
       };
@@ -3254,20 +3191,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
-        });
-        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: {
@@ -3276,49 +3204,34 @@ var script$3 = {
     }
   },
   components: {
-    CheckIcon: CheckIcon
+    CheckIcon: CheckIcon,
+    Checkbox: Checkbox
   }
 };
 
-var _hoisted_1$1 = ["checked", "disabled", "tabindex", "aria-label"];
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_CheckIcon = resolveComponent("CheckIcon");
-  return openBlock(), createElementBlock("div", mergeProps({
-    "class": _ctx.cx('headerCheckboxWrapper'),
-    onClick: _cache[2] || (_cache[2] = function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    }),
-    onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers(function () {
-      return $options.onClick && $options.onClick.apply($options, arguments);
-    }, ["prevent"]), ["space"]))
-  }, $options.getColumnPT('headerCheckboxWrapper')), [createElementVNode("div", mergeProps({
-    "class": "p-hidden-accessible"
-  }, $options.getColumnPT('hiddenHeaderInputWrapper'), {
-    "data-p-hidden-accessible": true
-  }), [createElementVNode("input", mergeProps({
-    ref: "input",
-    type: "checkbox",
-    checked: $props.checked,
+  var _component_Checkbox = resolveComponent("Checkbox");
+  return openBlock(), 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: withCtx(function (slotProps) {
+      return [$props.headerCheckboxIconTemplate ? (openBlock(), createBlock(resolveDynamicComponent($props.headerCheckboxIconTemplate), {
+        key: 0,
+        checked: slotProps.checked,
+        "class": normalizeClass(slotProps["class"])
+      }, null, 8, ["checked", "class"])) : !$props.headerCheckboxIconTemplate && slotProps.checked ? (openBlock(), createBlock(_component_CheckIcon, mergeProps({
+        key: 1,
+        "class": slotProps["class"]
+      }, $options.getColumnPT('headerCheckbox.icon')), null, 16, ["class"])) : createCommentVNode("", true)];
     }),
-    onBlur: _cache[1] || (_cache[1] = function ($event) {
-      return $options.onBlur($event);
-    })
-  }, $options.getColumnPT('hiddenHeaderInput')), null, 16, _hoisted_1$1)], 16), createElementVNode("div", mergeProps({
-    ref: "box",
-    "class": _ctx.cx('headerCheckbox')
-  }, $options.getColumnPT('headerCheckbox')), [$props.headerCheckboxIconTemplate ? (openBlock(), createBlock(resolveDynamicComponent($props.headerCheckboxIconTemplate), {
-    key: 0,
-    checked: $props.checked,
-    "class": normalizeClass(_ctx.cx('headerCheckboxIcon'))
-  }, null, 8, ["checked", "class"])) : !$props.headerCheckboxIconTemplate && !!$props.checked ? (openBlock(), createBlock(_component_CheckIcon, mergeProps({
-    key: 1,
-    "class": _ctx.cx('headerCheckboxIcon')
-  }, $options.getColumnPT('headerCheckboxIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 16)], 16);
+    _: 1
+  }, 8, ["modelValue", "disabled", "aria-label", "onChange", "pt"]);
 }
 
 script$3.render = render$3;
@@ -3428,6 +3341,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,
@@ -3669,8 +3583,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"])) : createCommentVNode("", true), $props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter ? (openBlock(), createBlock(_component_DTColumnFilter, {
+  }, null, 8, ["checked", "onChange", "disabled", "headerCheckboxIconTemplate", "column", "unstyled", "pt"])) : createCommentVNode("", true), $props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter ? (openBlock(), createBlock(_component_DTColumnFilter, {
     key: 5,
     field: $options.columnProp('filterField') || $options.columnProp('field'),
     type: $options.columnProp('dataType'),
@@ -4004,8 +3919,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"])) : createCommentVNode("", true)], 64);
+    }, null, 8, ["column", "index", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps", "unstyled", "pt"])) : createCommentVNode("", true)], 64);
   }), 128))], 16), $props.filterDisplay === 'row' ? (openBlock(), createElementBlock("tr", mergeProps({
     key: 0,
     role: "row"
@@ -4024,8 +3940,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"])) : createCommentVNode("", true), col.children && col.children.filter ? (openBlock(), createBlock(_component_DTColumnFilter, {
+    }, null, 8, ["checked", "disabled", "column", "unstyled", "pt"])) : createCommentVNode("", true), col.children && col.children.filter ? (openBlock(), createBlock(_component_DTColumnFilter, {
       key: 1,
       field: $options.columnProp(col, 'filterField') || $options.columnProp(col, 'field'),
       type: $options.columnProp(col, 'dataType'),
@@ -4130,8 +4047,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"])) : createCommentVNode("", true)], 64);
+      }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "unstyled", "pt"])) : createCommentVNode("", true)], 64);
     }), 128))], 16);
   }), 128))], 16);
 }
@@ -4625,8 +4543,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';
       }