primevue 3.46.0 → 3.47.0

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primevue = this.primevue || {};
-this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, BaseComponent, DataTableStyle, ChevronDownIcon, ChevronRightIcon, vue, BarsIcon, CheckIcon, PencilIcon, TimesIcon, OverlayEventBus, Ripple, Button, Dropdown, FocusTrap, FilterIcon, FilterSlashIcon, PlusIcon, TrashIcon, Portal, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon) {
+this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, BaseComponent, DataTableStyle, ChevronDownIcon, ChevronRightIcon, vue, BarsIcon, CheckIcon, PencilIcon, TimesIcon, OverlayEventBus, Ripple, Checkbox, RadioButton, Button, Dropdown, FocusTrap, FilterIcon, FilterSlashIcon, PlusIcon, TrashIcon, Portal, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -19,6 +19,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     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);
@@ -279,6 +281,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           type: Boolean,
           "default": false
         },
+        highlightOnSelect: {
+          type: Boolean,
+          "default": false
+        },
         size: {
           type: String,
           "default": null
@@ -326,11 +332,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           "default": null
         }
       },
-      data: function data() {
-        return {
-          focused: false
-        };
-      },
       methods: {
         getColumnPT: function getColumnPT(key) {
           var columnMetaData = {
@@ -343,7 +344,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             context: {
               index: this.index,
               checked: this.checked,
-              focused: this.focused,
               disabled: this.$attrs.disabled
             }
           };
@@ -354,30 +354,12 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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;
-              }
           }
         }
       },
@@ -387,49 +369,35 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
       },
       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;
@@ -438,7 +406,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       name: 'RowRadioButton',
       hostName: 'DataTable',
       "extends": BaseComponent__default["default"],
-      inheritAttrs: false,
       emits: ['change'],
       props: {
         value: null,
@@ -450,11 +417,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           "default": null
         }
       },
-      data: function data() {
-        return {
-          focused: false
-        };
-      },
       methods: {
         getColumnPT: function getColumnPT(key) {
           var columnMetaData = {
@@ -467,7 +429,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             context: {
               index: this.index,
               checked: this.checked,
-              focused: this.focused,
               disabled: this.$attrs.disabled
             }
           };
@@ -478,59 +439,31 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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;
@@ -1007,7 +940,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     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"];
@@ -1059,8 +992,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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,
@@ -1184,7 +1118,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         "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;
@@ -1348,11 +1282,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         };
       },
       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: {
@@ -1662,7 +1599,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     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"];
@@ -1708,7 +1645,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       }, _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,
@@ -2236,7 +2173,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     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,
@@ -2249,7 +2186,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       }), [$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;
@@ -2797,6 +2734,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           };
           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();
         },
@@ -2976,7 +2917,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     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) {
@@ -3008,7 +2949,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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",
@@ -3020,6 +2961,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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')), {
@@ -3206,12 +3148,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                 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);
@@ -3233,11 +3173,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           "default": null
         }
       },
-      data: function data() {
-        return {
-          focused: false
-        };
-      },
       methods: {
         getColumnPT: function getColumnPT(key) {
           var columnMetaData = {
@@ -3249,7 +3184,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             },
             context: {
               checked: this.checked,
-              focused: this.focused,
               disabled: this.disabled
             }
           };
@@ -3260,20 +3194,11 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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: {
@@ -3282,49 +3207,34 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
       },
       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;
@@ -3434,7 +3344,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             },
             context: {
               index: this.index,
-              sortable: this.column.props.sortable === '' || this.column.props.sortable,
+              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,
@@ -3676,8 +3586,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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'),
@@ -4011,8 +3922,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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"
@@ -4031,8 +3943,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             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'),
@@ -4137,8 +4050,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             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);
     }
@@ -4632,8 +4546,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           }
           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';
           }
@@ -6297,4 +6212,4 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
 
     return script;
 
-})(primevue.api, primevue.icons.arrowdown, primevue.icons.arrowup, primevue.icons.spinner, primevue.paginator, primevue.utils, primevue.virtualscroller, primevue.basecomponent, primevue.datatable.style, primevue.icons.chevrondown, primevue.icons.chevronright, Vue, primevue.icons.bars, primevue.icons.check, primevue.icons.pencil, primevue.icons.times, primevue.overlayeventbus, primevue.ripple, primevue.button, primevue.dropdown, primevue.focustrap, primevue.icons.filter, primevue.icons.filterslash, primevue.icons.plus, primevue.icons.trash, primevue.portal, primevue.icons.sortalt, primevue.icons.sortamountdown, primevue.icons.sortamountupalt);
+})(primevue.api, primevue.icons.arrowdown, primevue.icons.arrowup, primevue.icons.spinner, primevue.paginator, primevue.utils, primevue.virtualscroller, primevue.basecomponent, primevue.datatable.style, primevue.icons.chevrondown, primevue.icons.chevronright, Vue, primevue.icons.bars, primevue.icons.check, primevue.icons.pencil, primevue.icons.times, primevue.overlayeventbus, primevue.ripple, primevue.checkbox, primevue.radiobutton, primevue.button, primevue.dropdown, primevue.focustrap, primevue.icons.filter, primevue.icons.filterslash, primevue.icons.plus, primevue.icons.trash, primevue.portal, primevue.icons.sortalt, primevue.icons.sortamountdown, primevue.icons.sortamountupalt);