primereact 10.3.0 → 10.3.2

package/datatable/datatable.js

@@ -681,6 +681,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
+    var mergeProps = hooks.useMergeProps();
     var getColumnProps = function getColumnProps() {
       return ColumnBase.getCProps(props.column);
     };
@@ -702,7 +703,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           disabled: props.disabled
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
     };
@@ -726,7 +727,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         event.preventDefault();
       }
     };
-    var checkboxIconProps = utils.mergeProps({
+    var checkboxIconProps = mergeProps({
       className: cx('checkboxIcon')
     }, getColumnPTOptions('checkboxIcon'));
     var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkboxIconProps) : null;
@@ -734,7 +735,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       props: props
     });
     var tabIndex = props.disabled ? null : '0';
-    var checkboxWrapperProps = utils.mergeProps({
+    var checkboxWrapperProps = mergeProps({
       className: cx('checkboxWrapper', {
         rowProps: props,
         focusedState: focusedState
@@ -743,7 +744,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         return _onClick(e);
       }
     }, getColumnPTOptions('checkboxWrapper'));
-    var checkboxProps = utils.mergeProps({
+    var checkboxProps = mergeProps({
       className: cx('checkbox', {
         rowProps: props,
         focusedState: focusedState
@@ -772,6 +773,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
     var inputRef = React__namespace.useRef(null);
+    var mergeProps = hooks.useMergeProps();
     var getColumnProps = function getColumnProps() {
       return ColumnBase.getCProps(props.column);
     };
@@ -793,7 +795,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           disabled: props.disabled
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
     };
@@ -820,16 +822,16 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       _onClick(event);
     };
     var name = "".concat(props.tableSelector, "_dt_radio");
-    var radiobuttonWrapperProps = utils.mergeProps({
+    var radiobuttonWrapperProps = mergeProps({
       className: cx('radiobuttonWrapper', {
         rowProps: props,
         focusedState: focusedState
       })
     }, getColumnPTOptions('radiobuttonWrapper'));
-    var hiddenInputWrapperProps = utils.mergeProps({
+    var hiddenInputWrapperProps = mergeProps({
       className: 'p-hidden-accessible'
     }, getColumnPTOptions('hiddenInputWrapper'));
-    var hiddenInputProps = utils.mergeProps({
+    var hiddenInputProps = mergeProps({
       name: name,
       type: 'radio',
       checked: props.checked,
@@ -847,7 +849,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       },
       'aria-label': props.ariaLabel
     }, getColumnPTOptions('hiddenInput'));
-    var radiobuttonProps = utils.mergeProps({
+    var radiobuttonProps = mergeProps({
       className: cx('radiobutton', {
         rowProps: props,
         focusedState: focusedState
@@ -858,7 +860,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       role: 'radio',
       'aria-checked': props.checked
     }, getColumnPTOptions('radiobutton'));
-    var radiobuttonIconProps = utils.mergeProps({
+    var radiobuttonIconProps = mergeProps({
       className: cx('radiobuttonIcon')
     }, getColumnPTOptions('radiobuttonIcon'));
     return /*#__PURE__*/React__namespace.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({
@@ -870,6 +872,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
   function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var _React$useState = React__namespace.useState(props.editing),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       editingState = _React$useState2[0],
@@ -895,11 +898,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var getColumnProp = function getColumnProp(name) {
       return ColumnBase.getCProp(props.column, name);
     };
-    var getColumnProps = function getColumnProps(column) {
-      return ColumnBase.getCProps(column);
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
     };
     var getColumnPTOptions = function getColumnPTOptions(key) {
-      var cProps = getColumnProps(props.column);
+      var cProps = getColumnProps();
       var columnMetaData = {
         props: cProps,
         parent: props.metaData,
@@ -915,7 +918,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           showGridlines: props.metaData.props.showGridlines
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
     };
@@ -925,7 +928,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         type: 'click',
         listener: function listener(e) {
           if (!selfClick.current && isOutsideClicked(e.target)) {
-            switchCellToViewMode(e, true);
+            // #2666 for overlay components and outside is clicked
+            setTimeout(function () {
+              switchCellToViewMode(e, true);
+            }, 0);
           }
           selfClick.current = false;
         },
@@ -934,9 +940,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindDocumentClickListener = _useEventListener2[0],
       unbindDocumentClickListener = _useEventListener2[1];
-    if (props.editMode === 'row' && props.editing !== editingState) {
-      setEditingState(props.editing);
-    }
     var isEditable = function isEditable() {
       return getColumnProp('editor');
     };
@@ -1024,17 +1027,20 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           onCellEditCancel(params);
         }
         var valid = true;
-        if (cellEditValidator) {
+        if (!submit && cellEditValidator) {
           valid = cellEditValidator(params);
         }
         if (valid) {
           if (submit && onCellEditComplete) {
-            onCellEditComplete(params);
+            setTimeout(function () {
+              return onCellEditComplete(params);
+            });
           }
           closeCell(event);
         } else {
           event.preventDefault();
         }
+        return newRowData;
       });
     };
     var findNextSelectableCell = function findNextSelectableCell(cell) {
@@ -1065,7 +1071,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       clearTimeout(tabindexTimeout.current);
       tabindexTimeout.current = setTimeout(function () {
         if (editingState) {
-          var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not(.p-cell-editor-key-helper)') : utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
+          var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
           focusableEl && focusableEl.focus();
         }
         keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
@@ -1169,21 +1175,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var _onKeyDown = function onKeyDown(event) {
       if (props.editMode !== 'row') {
-        if (event.which === 13 || event.which === 9) {
-          // tab || enter
+        if (event.code === 'Enter' || event.code === 'Tab') {
           switchCellToViewMode(event, true);
         }
-        if (event.which === 27) {
-          // escape
+        if (event.code === 'Escape') {
           switchCellToViewMode(event, false);
         }
       }
       if (props.allowCellSelection) {
         var target = event.target,
           cell = event.currentTarget;
-        switch (event.which) {
-          //left arrow
-          case 37:
+        switch (event.code) {
+          case 'ArrowLeft':
             var prevCell = findPrevSelectableCell(cell);
             if (prevCell) {
               changeTabIndex(cell, prevCell);
@@ -1191,9 +1194,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             }
             event.preventDefault();
             break;
-
-          //right arrow
-          case 39:
+          case 'ArrowRight':
             var nextCell = findNextSelectableCell(cell);
             if (nextCell) {
               changeTabIndex(cell, nextCell);
@@ -1201,9 +1202,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             }
             event.preventDefault();
             break;
-
-          //up arrow
-          case 38:
+          case 'ArrowUp':
             var upCell = findUpSelectableCell(cell);
             if (upCell) {
               changeTabIndex(cell, upCell);
@@ -1211,9 +1210,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             }
             event.preventDefault();
             break;
-
-          //down arrow
-          case 40:
+          case 'ArrowDown':
             var downCell = findDownSelectableCell(cell);
             if (downCell) {
               changeTabIndex(cell, downCell);
@@ -1221,17 +1218,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             }
             event.preventDefault();
             break;
-
-          //enter
-          case 13:
+          case 'Enter':
+          case 'NumpadEnter':
             if (event.shiftKey || event.ctrlKey) ; else if (!utils.DomHandler.isClickable(target)) {
               _onClick(event);
               event.preventDefault();
             }
             break;
-
-          //space
-          case 32:
+          case 'Space':
             if (!utils.DomHandler.isClickable(target) && !target.readOnly) {
               _onClick(event);
               event.preventDefault();
@@ -1308,6 +1302,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         focusOnElement();
       }
     });
+    React__namespace.useEffect(function () {
+      if (props.editMode === 'row' && props.editing !== editingState) {
+        setEditingState(props.editing);
+      }
+    }, [props.editMode, props.editing, editingState]);
     hooks.useUpdateEffect(function () {
       if (props.editMode === 'cell' || props.editMode === 'row') {
         setEditingRowDataState(getEditingRowData());
@@ -1341,7 +1340,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         field: field
       });
       var content = utils.ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
-      var bodyCellProps = utils.mergeProps(getColumnPTOptions('bodyCell'));
+      var bodyCellProps = mergeProps(getColumnPTOptions('bodyCell'));
       return /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, content);
     };
     var createElement = function createElement() {
@@ -1351,7 +1350,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var tabIndex = getTabIndex(cellSelected);
       var selectionMode = getColumnProp('selectionMode');
       var rowReorder = getColumnProp('rowReorder');
-      var rowEditor = getColumnProp('rowEditor');
       var header = getColumnProp('header');
       var body = getColumnProp('body');
       var editor = getColumnProp('editor');
@@ -1365,11 +1363,12 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         frozenRow: props.frozenRow,
         props: props.tableProps
       };
+      var rowEditor = utils.ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
       var expander = utils.ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
       var cellClassName = utils.ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
       var bodyClassName = utils.ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
       var style = getStyle();
-      var columnTitleProps = utils.mergeProps({
+      var columnTitleProps = mergeProps({
         className: cx('columnTitle')
       }, getColumnPTOptions('columnTitle'));
       var title = props.responsiveLayout === 'stack' && /*#__PURE__*/React__namespace.createElement("span", columnTitleProps, utils.ObjectUtils.getJSXElement(header, {
@@ -1420,7 +1419,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           rowIndex: props.rowIndex,
           props: props.tableProps
         }) : true;
-        var rowReorderIconProps = utils.mergeProps({
+        var rowReorderIconProps = mergeProps({
           className: cx('rowReorderIcon')
         }, getColumnPTOptions('rowReorderIcon'));
         var rowReorderIcon = getColumnProp('rowReorderIcon') || /*#__PURE__*/React__namespace.createElement(bars.BarsIcon, rowReorderIconProps);
@@ -1428,7 +1427,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           props: props
         }) : null;
       } else if (expander) {
-        var rowTogglerIconProps = utils.mergeProps({
+        var rowTogglerIconProps = mergeProps({
           className: cx('rowTogglerIcon'),
           'aria-hidden': true
         }, getColumnPTOptions('rowTogglerIcon'));
@@ -1444,7 +1443,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           onClick: onRowToggle,
           className: cx('rowToggler')
         };
-        var rowTogglerProps = utils.mergeProps(_objectSpread$9(_objectSpread$9({}, expanderProps), {}, {
+        var rowTogglerProps = mergeProps(_objectSpread$9(_objectSpread$9({}, expanderProps), {}, {
           type: 'button',
           'aria-expanded': props.expanded,
           'aria-controls': ariaControls,
@@ -1465,13 +1464,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         }
       } else if (isRowEditor && rowEditor) {
         var rowEditorProps = {};
-        var rowEditorSaveIconProps = utils.mergeProps({
+        var rowEditorSaveIconProps = mergeProps({
           className: cx('rowEditorSaveIcon')
         }, getColumnPTOptions('rowEditorSaveIcon'));
-        var rowEditorCancelIconProps = utils.mergeProps({
+        var rowEditorCancelIconProps = mergeProps({
           className: cx('rowEditorCancelIcon')
         }, getColumnPTOptions('rowEditorCancelIcon'));
-        var rowEditorInitIconProps = utils.mergeProps({
+        var rowEditorInitIconProps = mergeProps({
           className: cx('rowEditorInitIcon')
         }, getColumnPTOptions('rowEditorInitIcon'));
         var rowEditorSaveIcon = utils.IconUtils.getJSXIcon(props.rowEditorSaveIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, rowEditorSaveIconProps), _objectSpread$9({}, rowEditorSaveIconProps), {
@@ -1491,7 +1490,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             onCancelClick: onRowEditCancel,
             cancelClassName: cx('rowEditorCancelButton')
           };
-          var rowEditorSaveButtonProps = utils.mergeProps({
+          var rowEditorSaveButtonProps = mergeProps({
             type: 'button',
             name: 'row-save',
             onClick: rowEditorProps.onSaveClick,
@@ -1499,7 +1498,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             tabIndex: props.tabIndex,
             'data-p-row-editor-save': true
           }, getColumnPTOptions('rowEditorSaveButton'));
-          var rowEditorCancelButtonProps = utils.mergeProps({
+          var rowEditorCancelButtonProps = mergeProps({
             type: 'button',
             name: 'row-cancel',
             onClick: rowEditorProps.onCancelClick,
@@ -1513,7 +1512,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             onInitClick: onRowEditInit,
             initClassName: cx('rowEditorInitButton')
           };
-          var rowEditorInitButtonProps = utils.mergeProps({
+          var rowEditorInitButtonProps = mergeProps({
             type: 'button',
             name: 'row-edit',
             onClick: rowEditorProps.onInitClick,
@@ -1558,14 +1557,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       }
       content = typeof content == 'boolean' ? content.toString() : content;
       if (!isRowEditor && editor) {
-        var editorKeyHelperProps = utils.mergeProps({
+        var editorKeyHelperProps = mergeProps({
           tabIndex: '0',
           className: 'p-cell-editor-key-helper p-hidden-accessible',
           onFocus: function onFocus(e) {
             return onEditorFocus(e);
           }
         }, getColumnPTOptions('editorKeyHelperLabel'));
-        var editorKeyHelperLabelProps = utils.mergeProps(getColumnPTOptions('editorKeyHelper'));
+        var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
         /* eslint-disable */
         editorKeyHelper = /*#__PURE__*/React__namespace.createElement("a", _extends({
           ref: keyHelperRef
@@ -1573,7 +1572,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         /* eslint-enable */
       }
 
-      var bodyCellProps = utils.mergeProps({
+      var bodyCellProps = mergeProps({
         style: style,
         className: utils.classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', {
           selectionMode: selectionMode,
@@ -1623,6 +1622,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
   function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       editingState = _React$useState2[0],
@@ -2011,7 +2011,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var content = createContent();
     var tabIndex = getTabIndex();
-    var rowProps = utils.mergeProps({
+    var rowProps = mergeProps({
       role: 'row',
       tabIndex: tabIndex,
       className: utils.classNames(rowClassName, cx('bodyRow', {
@@ -2080,6 +2080,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
   function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var _props$ptCallbacks = props.ptCallbacks,
       ptm = _props$ptCallbacks.ptm,
       ptmo = _props$ptCallbacks.ptmo,
@@ -2100,11 +2101,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         parent: props.metaData,
         hostName: props.hostName
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
     };
-    var rowGroupTogglerIconProps = utils.mergeProps({
+    var rowGroupTogglerIconProps = mergeProps({
       className: cx('rowGroupTogglerIcon'),
       'aria-hidden': true
     }, getColumnPTOptions('rowGroupTogglerIcon'));
@@ -2113,7 +2114,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       props: props
     });
     var label = props.expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel');
-    var rowGroupTogglerProps = utils.mergeProps({
+    var rowGroupTogglerProps = mergeProps({
       type: 'button',
       onClick: function onClick(e) {
         return _onClick(e);
@@ -2130,6 +2131,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
   function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+    var mergeProps = hooks.useMergeProps();
     var _props$ptCallbacks = props.ptCallbacks,
       ptm = _props$ptCallbacks.ptm,
       ptmo = _props$ptCallbacks.ptmo,
@@ -2152,7 +2154,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           rowGroupHeaderStyleObject: rowGroupHeaderStyleObjectState
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
     };
@@ -2563,10 +2565,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var target = event.currentTarget;
       if (!allowCellSelection() && props.selectionAutoFocus) {
         if (isCheckboxSelectionModeInColumn) {
-          var checkbox = utils.DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
+          var checkbox = utils.DomHandler.findSingle(target, 'td[data-p-selection-column="true"] [data-pc-section="checkbox"]');
           checkbox && checkbox.focus();
         } else if (isRadioSelectionModeInColumn) {
-          var radio = utils.DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]');
+          var radio = utils.DomHandler.findSingle(target, 'td[data-p-selection-column="true"] input[type="radio"]');
           radio && radio.focus();
         }
       }
@@ -2944,11 +2946,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           props: props.tableProps,
           frozen: props.frozenRow
         }) || PrimeReact.localeOption('emptyMessage');
-        var emptyMessageProps = utils.mergeProps({
+        var emptyMessageProps = mergeProps({
           className: cx('emptyMessage'),
           role: 'row'
         }, getColumnPTOptions('emptyMessage'));
-        var bodyCellProps = utils.mergeProps({
+        var bodyCellProps = mergeProps({
           colSpan: colSpan,
           role: 'cell'
         }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
@@ -2978,15 +2980,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
 
         // check if the user wants complete control of the rendering
         if (!options.customRendering) {
-          var bodyCellProps = utils.mergeProps({
+          var bodyCellProps = mergeProps({
             colSpan: colSpan
           }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
-          var rowGroupHeaderNameProps = utils.mergeProps({
+          var rowGroupHeaderNameProps = mergeProps({
             className: cx('rowGroupHeaderName')
           }, getColumnPTOptions('rowGroupHeaderName'));
           _content2 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, toggler, /*#__PURE__*/React__namespace.createElement("span", rowGroupHeaderNameProps, _content2));
         }
-        var rowGroupHeaderProps = utils.mergeProps({
+        var rowGroupHeaderProps = mergeProps({
           className: cx('rowGroupHeader'),
           style: style,
           role: 'row'
@@ -3087,13 +3089,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
 
         // check if the user wants complete control of the rendering
         if (!options.customRendering) {
-          var bodyCellProps = utils.mergeProps({
+          var bodyCellProps = mergeProps({
             colSpan: colSpan,
             role: 'cell'
           }, getColumnPTOptions('root'), getColumnPTOptions('bodyCell'));
           _content3 = /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, _content3);
         }
-        var rowExpansionProps = utils.mergeProps({
+        var rowExpansionProps = mergeProps({
           id: id,
           className: cx('rowExpansion'),
           role: 'row'
@@ -3109,7 +3111,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           colSpan: colSpan,
           props: props.tableProps
         });
-        var rowGroupFooterProps = utils.mergeProps({
+        var rowGroupFooterProps = mergeProps({
           className: cx('rowGroupFooter'),
           role: 'row'
         }, getColumnPTOptions('rowGroupFooter'));
@@ -3134,7 +3136,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var content = props.empty ? createEmptyContent() : createContent();
     var ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody';
-    var tbodyProps = utils.mergeProps({
+    var tbodyProps = mergeProps({
       style: props.style,
       className: cx(ptKey, {
         className: props.className
@@ -3181,6 +3183,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       styleObjectState = _React$useState2[0],
       setStyleObjectState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
+    var mergeProps = hooks.useMergeProps();
     var getColumnProps = function getColumnProps() {
       return ColumnBase.getCProps(props.column);
     };
@@ -3203,7 +3206,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           showGridlines: props.metaData.props.showGridlines
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
     };
@@ -3250,7 +3253,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var content = utils.ObjectUtils.getJSXElement(getColumnProp('footer'), {
       props: props.tableProps
     });
-    var footerCellProps = utils.mergeProps({
+    var footerCellProps = mergeProps({
       style: style,
       className: utils.classNames(getColumnProp('footerClassName'), getColumnProp('className'), cx('footerCell', {
         getColumnProp: getColumnProp,
@@ -3271,6 +3274,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       ptm = _props$ptCallbacks.ptm,
       ptmo = _props$ptCallbacks.ptmo,
       cx = _props$ptCallbacks.cx;
+    var mergeProps = hooks.useMergeProps();
     var getRowProps = function getRowProps(row) {
       return ColumnGroupBase.getCProps(row);
     };
@@ -3284,7 +3288,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         parent: props.metaData,
         hostName: props.hostName
       };
-      return utils.mergeProps(ptm("row.".concat(key), {
+      return mergeProps(ptm("row.".concat(key), {
         row: rowMetaData
       }), ptm("row.".concat(key), rowMetaData), ptmo(rProps, key, rowMetaData));
     };
@@ -3295,7 +3299,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         parent: props.metaData,
         hostName: props.hostName
       };
-      return utils.mergeProps(ptm("columnGroup.".concat(key), {
+      return mergeProps(ptm("columnGroup.".concat(key), {
         columnGroup: columnGroupMetaData
       }), ptm("columnGroup.".concat(key), columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData));
     };
@@ -3329,7 +3333,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       if (props.footerColumnGroup) {
         var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children'));
         return rows.map(function (row, i) {
-          var rootProps = utils.mergeProps({
+          var rootProps = mergeProps({
             role: 'row'
           }, getRowPTOptions(row, 'root'));
           return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, rootProps, {
@@ -3337,7 +3341,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           }), createGroupFooterCells(row));
         });
       }
-      var footerRowProps = utils.mergeProps({
+      var footerRowProps = mergeProps({
         role: 'row'
       }, ptm('footerRow', {
         hostName: props.hostName
@@ -3346,7 +3350,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     if (hasFooter()) {
       var content = createContent();
-      var tfootProps = utils.mergeProps({
+      var tfootProps = mergeProps({
         className: cx('tfoot')
       }, getColumnGroupPTOptions('root'), ptm('tfoot', {
         hostName: props.hostName
@@ -3368,6 +3372,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var iconRef = React__namespace.useRef(null);
     var selfClick = React__namespace.useRef(false);
     var overlayEventListener = React__namespace.useRef(null);
+    var mergeProps = hooks.useMergeProps();
     var getColumnProp = function getColumnProp(name) {
       return ColumnBase.getCProp(props.column, name);
     };
@@ -3389,7 +3394,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           overlayVisible: overlayVisibleState
         }
       }, params);
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetadata
       }), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
     };
@@ -3819,7 +3824,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var createRowFilterElement = function createRowFilterElement() {
       if (props.display === 'row') {
         var content = createFilterElement(filterModel, 0);
-        var filterInputProps = utils.mergeProps({
+        var filterInputProps = mergeProps({
           className: cx('filterInput')
         }, getColumnPTOptions('filterInput'));
         return /*#__PURE__*/React__namespace.createElement("div", filterInputProps, content);
@@ -3833,7 +3838,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       if (!showMenuButton()) {
         return null;
       }
-      var filterIconProps = utils.mergeProps({
+      var filterIconProps = mergeProps({
         'aria-hidden': true
       }, getColumnPTOptions('filterIcon'));
       var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(filter.FilterIcon, filterIconProps);
@@ -3841,7 +3846,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         props: props
       });
       var label = filterLabel();
-      var filterMenuButtonProps = utils.mergeProps({
+      var filterMenuButtonProps = mergeProps({
         type: 'button',
         className: cx('filterMenuButton', {
           overlayVisibleState: overlayVisibleState,
@@ -3869,7 +3874,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       if (!showMenuButton()) {
         return null;
       }
-      var filterClearIconProps = utils.mergeProps({
+      var filterClearIconProps = mergeProps({
         'aria-hidden': true
       }, getColumnPTOptions('filterClearIcon'));
       var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(filterslash.FilterSlashIcon, filterClearIconProps);
@@ -3878,7 +3883,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       });
       if (getColumnProp('showClearButton') && props.display === 'row') {
         var clearLabel = clearButtonLabel();
-        var headerFilterClearButtonProps = utils.mergeProps({
+        var headerFilterClearButtonProps = mergeProps({
           className: cx('headerFilterClearButton', {
             hasRowFilter: hasRowFilter
           }),
@@ -3900,11 +3905,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       if (isShowMatchModes()) {
         var _matchModes = matchModes();
         var _noFilterLabel = noFilterLabel();
-        var filterSeparatorProps = utils.mergeProps({
+        var filterSeparatorProps = mergeProps({
           className: cx('filterSeparator'),
           'data-p-column-filter-separator': true
         }, getColumnPTOptions('filterSeparator'));
-        var filterRowItemProps = utils.mergeProps({
+        var filterRowItemProps = mergeProps({
           className: cx('filterRowItem', {
             isRowMatchModeSelected: isRowMatchModeSelected,
             isShowMatchModes: isShowMatchModes
@@ -3916,14 +3921,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             return onRowMatchModeKeyDown(e, null, true);
           }
         }, getColumnPTOptions('filterRowItem'));
-        var filterRowItemsProps = utils.mergeProps({
+        var filterRowItemsProps = mergeProps({
           className: cx('filterRowItems')
         }, getColumnPTOptions('filterRowItems'));
         return /*#__PURE__*/React__namespace.createElement("ul", filterRowItemsProps, _matchModes.map(function (matchMode, i) {
           var value = matchMode.value,
             label = matchMode.label;
           var tabIndex = i === 0 ? 0 : null;
-          var filterRowItemProps = utils.mergeProps({
+          var filterRowItemProps = mergeProps({
             className: cx('filterRowItem', {
               isRowMatchModeSelected: isRowMatchModeSelected,
               isShowMatchModes: isShowMatchModes,
@@ -3952,7 +3957,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       if (isShowOperator()) {
         var options = operatorOptions();
         var value = operator();
-        var filterOperatorProps = utils.mergeProps({
+        var filterOperatorProps = mergeProps({
           className: cx('filterOperator')
         }, getColumnPTOptions('filterOperator'));
         return /*#__PURE__*/React__namespace.createElement("div", filterOperatorProps, /*#__PURE__*/React__namespace.createElement(dropdown.Dropdown, {
@@ -4010,17 +4015,17 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var createConstraints = function createConstraints() {
       var _fieldConstraints = fieldConstraints();
-      var filterConstraintsProps = utils.mergeProps({
+      var filterConstraintsProps = mergeProps({
         className: cx('filterConstraints')
       }, getColumnPTOptions('filterConstraints'));
-      var filterConstraintProps = utils.mergeProps({
+      var filterConstraintProps = mergeProps({
         className: cx('filterConstraint')
       }, getColumnPTOptions('filterConstraint'));
       return /*#__PURE__*/React__namespace.createElement("div", filterConstraintsProps, _fieldConstraints.map(function (fieldConstraint, i) {
         var matchModeDropdown = createMatchModeDropdown(fieldConstraint, i);
         var menuFilterElement = createMenuFilterElement(fieldConstraint, i);
         var removeButton = createRemoveButton(i);
-        var filterRemoveProps = utils.mergeProps(getColumnPTOptions('filterRemove'));
+        var filterRemoveProps = mergeProps(getColumnPTOptions('filterRemove'));
         return /*#__PURE__*/React__namespace.createElement("div", _extends({}, filterConstraintProps, {
           key: i
         }), matchModeDropdown, menuFilterElement, /*#__PURE__*/React__namespace.createElement("div", filterRemoveProps, removeButton));
@@ -4029,7 +4034,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var createAddRule = function createAddRule() {
       if (isShowAddConstraint()) {
         var addRuleLabel = addRuleButtonLabel();
-        var filterAddRuleProps = utils.mergeProps({
+        var filterAddRuleProps = mergeProps({
           className: cx('filterAddRule')
         }, getColumnPTOptions('filterAddRule'));
         return /*#__PURE__*/React__namespace.createElement("div", filterAddRuleProps, /*#__PURE__*/React__namespace.createElement(button.Button, {
@@ -4099,7 +4104,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var createButtonBar = function createButtonBar() {
       var clearButton = createFilterClearButton();
       var applyButton = createFilterApplyButton();
-      var filterButtonbarProps = utils.mergeProps({
+      var filterButtonbarProps = mergeProps({
         className: cx('filterButtonBar')
       }, getColumnPTOptions('filterButtonBar'));
       return /*#__PURE__*/React__namespace.createElement("div", filterButtonbarProps, clearButton, applyButton);
@@ -4124,7 +4129,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         filterApplyCallback: filterApplyCallback
       });
       var items = props.display === 'row' ? createRowItems() : createItems();
-      var filterOverlayProps = utils.mergeProps({
+      var filterOverlayProps = mergeProps({
         style: style,
         className: cx('filterOverlay', {
           columnFilterProps: props,
@@ -4141,7 +4146,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           return onContentMouseDown();
         }
       }, getColumnPTOptions('filterOverlay'));
-      var transitionProps = utils.mergeProps({
+      var transitionProps = mergeProps({
         classNames: cx('transition'),
         "in": overlayVisibleState,
         timeout: {
@@ -4164,7 +4169,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var menuButton = createMenuButton();
     var clearButton = createClearButton();
     var overlay = createOverlay();
-    var columnFilter = utils.mergeProps({
+    var columnFilter = mergeProps({
       className: cx('columnFilter', {
         columnFilterProps: props
       })
@@ -4180,6 +4185,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
+    var mergeProps = hooks.useMergeProps();
     var getColumnProps = function getColumnProps() {
       return ColumnBase.getCProps(props.column);
     };
@@ -4201,7 +4207,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           disabled: props.disabled
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
     };
@@ -4227,7 +4233,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         event.preventDefault();
       }
     };
-    var headerCheckboxIconProps = utils.mergeProps({
+    var headerCheckboxIconProps = mergeProps({
       className: cx('headerCheckboxIcon')
     }, getColumnPTOptions('headerCheckboxIcon'));
     var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, headerCheckboxIconProps) : null;
@@ -4235,13 +4241,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       props: props
     });
     var tabIndex = props.disabled ? null : 0;
-    var headerCheckboxWrapperProps = utils.mergeProps({
+    var headerCheckboxWrapperProps = mergeProps({
       className: cx('headerCheckboxWrapper'),
       onClick: function onClick(e) {
         return _onClick(e);
       }
     }, getColumnPTOptions('headerCheckboxWrapper'));
-    var headerCheckboxProps = utils.mergeProps({
+    var headerCheckboxProps = mergeProps({
       className: cx('headerCheckbox', {
         headerProps: props,
         focusedState: focusedState
@@ -4272,6 +4278,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       setStyleObjectState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
     var prevColumn = hooks.usePrevious(props.column);
+    var mergeProps = hooks.useMergeProps();
     var parentMetaData = props.metaData,
       ptCallbacks = props.ptCallbacks,
       index = props.index;
@@ -4303,7 +4310,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           showGridlines: props.metaData.props.showGridlines
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
     };
@@ -4471,7 +4478,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     });
     var createResizer = function createResizer() {
       if (props.resizableColumns && !getColumnProp('frozen')) {
-        var columnResizerProps = utils.mergeProps({
+        var columnResizerProps = mergeProps({
           className: cx('columnResizer'),
           onMouseDown: function onMouseDown(e) {
             return onResizerMouseDown(e);
@@ -4491,7 +4498,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var title = utils.ObjectUtils.getJSXElement(getColumnProp('header'), {
         props: props.tableProps
       });
-      var headerTitleProps = utils.mergeProps({
+      var headerTitleProps = mergeProps({
         className: cx('headerTitle')
       }, getColumnPTOptions('headerTitle'));
       return /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, title);
@@ -4500,10 +4507,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var sorted = _ref2.sorted,
         sortOrder = _ref2.sortOrder;
       if (getColumnProp('sortable')) {
-        var sortIconProps = utils.mergeProps({
+        var sortIconProps = mergeProps({
           className: cx('sortIcon')
         }, getColumnPTOptions('sortIcon'));
-        var sortProps = utils.mergeProps(getColumnPTOptions('sort'));
+        var sortProps = mergeProps(getColumnPTOptions('sort'));
         var icon = sorted ? sortOrder < 0 ? /*#__PURE__*/React__namespace.createElement(sortamountdown.SortAmountDownIcon, sortIconProps) : /*#__PURE__*/React__namespace.createElement(sortamountupalt.SortAmountUpAltIcon, sortIconProps) : /*#__PURE__*/React__namespace.createElement(sortalt.SortAltIcon, sortIconProps);
         var sortIcon = utils.IconUtils.getJSXIcon(props.sortIcon || icon, _objectSpread$2({}, sortIconProps), {
           props: props,
@@ -4518,7 +4525,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var metaIndex = _ref3.metaIndex;
       if (metaIndex !== -1 && isBadgeVisible()) {
         var value = props.groupRowsBy && props.groupRowsBy === props.groupRowSortField ? metaIndex : metaIndex + 1;
-        var sortBadgeProps = utils.mergeProps({
+        var sortBadgeProps = mergeProps({
           className: cx('sortBadge')
         }, getColumnPTOptions('root'), getColumnPTOptions('sortBadge'));
         return /*#__PURE__*/React__namespace.createElement("span", sortBadgeProps, value);
@@ -4564,7 +4571,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var badge = createBadge(sortMeta);
       var checkbox = createCheckbox();
       var filter = createFilter();
-      var headerContentProps = utils.mergeProps({
+      var headerContentProps = mergeProps({
         className: cx('headerContent')
       }, getColumnPTOptions('headerContent'));
       return /*#__PURE__*/React__namespace.createElement("div", headerContentProps, title, sortIcon, badge, checkbox, filter);
@@ -4585,7 +4592,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var headerTooltipOptions = getColumnProp('headerTooltipOptions');
       var resizer = createResizer();
       var header = createHeader(sortMeta);
-      var headerCellProps = utils.mergeProps({
+      var headerCellProps = mergeProps({
         className: utils.classNames(headerClassName, cx('headerCell', {
           headerProps: props,
           frozen: frozen,
@@ -4654,6 +4661,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       allSortableDisabledState = _React$useState4[0],
       setAllSortableDisabledState = _React$useState4[1];
+    var mergeProps = hooks.useMergeProps();
     var isSingleSort = props.sortMode === 'single';
     var isMultipleSort = props.sortMode === 'multiple';
     var isAllSortableDisabled = isSingleSort && allSortableDisabledState;
@@ -4684,7 +4692,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           allSortableDisabled: allSortableDisabledState
         }
       };
-      return utils.mergeProps(ptm("columnGroup.".concat(key), {
+      return mergeProps(ptm("columnGroup.".concat(key), {
         columnGroup: columnGroupMetaData
       }), ptm("columnGroup.".concat(key), columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData));
     };
@@ -4699,7 +4707,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           allSortableDisabled: allSortableDisabledState
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetaData
       }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
     };
@@ -4710,7 +4718,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         parent: props.metaData,
         hostName: props.hostName
       };
-      return utils.mergeProps(ptm("row.".concat(key), {
+      return mergeProps(ptm("row.".concat(key), {
         row: rowMetaData
       }), ptm("row.".concat(key), rowMetaData), ptmo(rProps, key, rowMetaData));
     };
@@ -4847,7 +4855,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           var colKey = columnKey || field || i;
           var checkbox = createCheckbox(selectionMode);
           var filterRow = createFilter(col, filter);
-          var headerCellProps = utils.mergeProps({
+          var headerCellProps = mergeProps({
             style: colStyle,
             className: utils.classNames(filterHeaderClassName, className, cx('headerCell', {
               frozen: frozen,
@@ -4864,7 +4872,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       if (props.headerColumnGroup) {
         var rows = React__namespace.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children'));
         return rows.map(function (row, i) {
-          var headerRowProps = utils.mergeProps({
+          var headerRowProps = mergeProps({
             role: 'row'
           }, getRowPTOptions(row, 'root'));
           return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, headerRowProps, {
@@ -4872,7 +4880,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           }), createGroupHeaderCells(row));
         });
       } else {
-        var headerRowProps = utils.mergeProps({
+        var headerRowProps = mergeProps({
           role: 'row'
         }, ptm('headerRow', {
           hostName: props.hostName
@@ -4883,7 +4891,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       }
     };
     var content = createContent();
-    var theadProps = utils.mergeProps({
+    var theadProps = mergeProps({
       className: cx('thead')
     }, getColumnGroupPTOptions('root'), ptm('thead', {
       hostName: props.hostName
@@ -4899,6 +4907,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
   function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var mergeProps = hooks.useMergeProps();
     var props = DataTableBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(props.first),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4984,6 +4993,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var dropPosition = React__namespace.useRef(null);
     var styleElement = React__namespace.useRef(null);
     var responsiveStyleElement = React__namespace.useRef(null);
+    var beforeResizeStyleElement = React__namespace.useRef(null);
     var columnWidthsState = React__namespace.useRef(null);
     var tableWidthState = React__namespace.useRef(null);
     var resizeColumn = React__namespace.useRef(null);
@@ -5235,7 +5245,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var saveColumnWidths = function saveColumnWidths(state) {
       var widths = [];
-      var headers = utils.DomHandler.find(elementRef.current, '.p-datatable-thead > tr > th');
+      var headers = utils.DomHandler.find(elementRef.current, '[data-pc-section="thead"] > tr > th');
       headers.forEach(function (header) {
         return widths.push(utils.DomHandler.getOuterWidth(header));
       });
@@ -5247,10 +5257,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var addColumnWidthStyles = function addColumnWidthStyles(widths) {
       createStyleElement();
       var innerHTML = '';
-      var selector = ".p-datatable[".concat(attributeSelector.current, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
+      var selector = "[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] > [data-pc-section=\"wrapper\"] ").concat(isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]', " > [data-pc-section=\"table\"]");
       widths.forEach(function (width, index) {
         var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
-        innerHTML += "\n                ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+        innerHTML += "\n                ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
       });
       styleElement.current.innerHTML = innerHTML;
     };
@@ -5357,6 +5367,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       }
     };
     var onColumnResizeStart = function onColumnResizeStart(e) {
+      createBeforeResizeStyleElement();
       var event = e.originalEvent,
         column = e.column;
       var containerLeft = utils.DomHandler.getOffset(elementRef.current).left;
@@ -5369,7 +5380,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var onColumnResize = function onColumnResize(event) {
       var containerLeft = utils.DomHandler.getOffset(elementRef.current).left;
       elementRef.current.setAttribute('data-p-unselectable-text', true);
-      !ptCallbacks.isUnstyled() && utils.DomHandler.addClass(elementRef.current, 'p-unselectable-text');
       resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
       resizeHelperRef.current.style.top = 0 + 'px';
       resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
@@ -5400,7 +5410,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             updateTableWidth(bodyRef.current);
             updateTableWidth(frozenBodyRef.current);
             if (wrapperRef.current) {
-              updateTableWidth(utils.DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
+              updateTableWidth(utils.DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"] > table > tbody'));
             }
           }
         }
@@ -5419,24 +5429,24 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       resizeColumn.current = null;
       resizeColumnElement.current = null;
       elementRef.current.setAttribute('data-p-unselectable-text', 'true');
-      !ptCallbacks.isUnstyled() && utils.DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
+      destroyBeforeResizeStyleElement();
       unbindColumnResizeEvents();
     };
     var resizeTableCells = function resizeTableCells(newColumnWidth, nextColumnWidth) {
       var widths = [];
       var colIndex = utils.DomHandler.index(resizeColumnElement.current);
-      var headers = utils.DomHandler.find(tableRef.current, '.p-datatable-thead > tr > th');
+      var headers = utils.DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
       headers.forEach(function (header) {
         return widths.push(utils.DomHandler.getOuterWidth(header));
       });
       destroyStyleElement();
       createStyleElement();
       var innerHTML = '';
-      var selector = ".p-datatable[".concat(attributeSelector.current, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
+      var selector = "[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] > [data-pc-section=\"wrapper\"] ").concat(isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]', " > [data-pc-section=\"table\"]");
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
         var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
-        innerHTML += "\n                ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+        innerHTML += "\n                 ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
       });
       styleElement.current.innerHTML = innerHTML;
     };
@@ -5567,7 +5577,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             return isSameColumn(child, column);
           });
           var widths = [];
-          var headers = utils.DomHandler.find(tableRef.current, '.p-datatable-thead > tr > th');
+          var headers = utils.DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
           headers.forEach(function (header) {
             return widths.push(utils.DomHandler.getOuterWidth(header));
           });
@@ -5608,12 +5618,17 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         dropPosition.current = null;
       }
     };
+    var createBeforeResizeStyleElement = function createBeforeResizeStyleElement() {
+      beforeResizeStyleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
+      var innerHTML = "\n[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] {\n    user-select:none;\n}\n        ");
+      beforeResizeStyleElement.current.innerHTML = innerHTML;
+    };
     var createStyleElement = function createStyleElement() {
-      styleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
+      styleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
     };
     var createResponsiveStyle = function createResponsiveStyle() {
       if (!responsiveStyleElement.current) {
-        responsiveStyleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
+        responsiveStyleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
         var tableSelector = ".p-datatable-wrapper ".concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
         var selector = ".p-datatable[".concat(attributeSelector.current, "] > ").concat(tableSelector);
         var gridLinesSelector = ".p-datatable[".concat(attributeSelector.current, "].p-datatable-gridlines > ").concat(tableSelector);
@@ -5627,6 +5642,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var destroyStyleElement = function destroyStyleElement() {
       styleElement.current = utils.DomHandler.removeInlineStyle(styleElement.current);
     };
+    var destroyBeforeResizeStyleElement = function destroyBeforeResizeStyleElement() {
+      beforeResizeStyleElement.current = utils.DomHandler.removeInlineStyle(beforeResizeStyleElement.current);
+    };
     var onPageChange = function onPageChange(e) {
       clearEditingMetaData();
       if (props.onPage) {
@@ -6017,7 +6035,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var resetScroll = function resetScroll() {
       if (wrapperRef.current) {
-        var scrollableContainer = !isVirtualScrollerDisabled() ? utils.DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller') : wrapperRef.current;
+        var scrollableContainer = !isVirtualScrollerDisabled() ? utils.DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"]') : wrapperRef.current;
         scrollableContainer.scrollTo(0, 0);
       }
     };
@@ -6099,7 +6117,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       }
     };
     var closeEditingRows = function closeEditingRows() {
-      utils.DomHandler.find(document.body, '.p-row-editor-cancel').forEach(function (button, index) {
+      utils.DomHandler.find(document.body, '[data-pc-section="roweditorcancelbuttonprops"]').forEach(function (button, index) {
         setTimeout(function () {
           button.click();
         }, index * 5);
@@ -6204,6 +6222,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       unbindColumnResizeEvents();
       destroyStyleElement();
       destroyResponsiveStyle();
+      destroyBeforeResizeStyleElement();
     });
     React__namespace.useImperativeHandle(ref, function () {
       return {
@@ -6234,7 +6253,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     });
     var createLoader = function createLoader() {
       if (props.loading) {
-        var loadingIconProps = utils.mergeProps({
+        var loadingIconProps = mergeProps({
           className: ptCallbacks.cx('loadingIcon')
         }, ptCallbacks.ptm('loadingIcon'));
         var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
@@ -6243,7 +6262,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
           props: props
         });
-        var loadingOverlayProps = utils.mergeProps({
+        var loadingOverlayProps = mergeProps({
           className: ptCallbacks.cx('loadingOverlay')
         }, ptCallbacks.ptm('loadingOverlay'));
         return /*#__PURE__*/React__namespace.createElement("div", loadingOverlayProps, loadingIcon);
@@ -6255,7 +6274,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         var _content = utils.ObjectUtils.getJSXElement(props.header, {
           props: props
         });
-        var headerProps = utils.mergeProps({
+        var headerProps = mergeProps({
           className: ptCallbacks.cx('header')
         }, ptCallbacks.ptm('header'));
         return /*#__PURE__*/React__namespace.createElement("div", headerProps, _content);
@@ -6516,7 +6535,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       if (!columns) return;
       var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
       var virtualScrollerOptions = props.virtualScrollerOptions || {};
-      var wrapperProps = utils.mergeProps({
+      var wrapperProps = mergeProps({
         className: ptCallbacks.cx('wrapper'),
         style: _objectSpread(_objectSpread({}, ptCallbacks.sx('wrapper')), {}, {
           maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
@@ -6550,7 +6569,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           var tableHeader = createTableHeader(options, empty, _isVirtualScrollerDisabled);
           var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
           var tableFooter = createTableFooter(options);
-          var tableProps = utils.mergeProps({
+          var tableProps = mergeProps({
             className: utils.classNames(props.tableClassName, ptCallbacks.cx('table')),
             style: props.tableStyle,
             role: 'table'
@@ -6566,7 +6585,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         var _content2 = utils.ObjectUtils.getJSXElement(props.footer, {
           props: props
         });
-        var footerProps = utils.mergeProps({
+        var footerProps = mergeProps({
           className: ptCallbacks.cx('footer')
         }, ptCallbacks.ptm('footer'));
         return /*#__PURE__*/React__namespace.createElement("div", footerProps, _content2);
@@ -6611,7 +6630,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var createResizeHelper = function createResizeHelper() {
       if (props.resizableColumns) {
-        var resizeHelperProps = utils.mergeProps({
+        var resizeHelperProps = mergeProps({
           className: ptCallbacks.cx('resizeHelper'),
           style: ptCallbacks.sx('resizeHelper')
         }, ptCallbacks.ptm('resizeHelper'));
@@ -6627,23 +6646,23 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           position: 'absolute',
           display: 'none'
         };
-        var reorderIndicatorUpProps = utils.mergeProps({
+        var reorderIndicatorUpProps = mergeProps({
           className: ptCallbacks.cx('reorderIndicatorUp'),
           style: ptCallbacks.sx('reorderIndicatorUp', {
             style: style
           })
         }, ptCallbacks.ptm('reorderIndicatorUp'));
-        var reorderIndicatorUpIconProps = utils.mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
+        var reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
         var reorderIndicatorUpIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React__namespace.createElement(arrowdown.ArrowDownIcon, reorderIndicatorUpIconProps), _objectSpread({}, reorderIndicatorUpIconProps), {
           props: props
         });
-        var reorderIndicatorDownProps = utils.mergeProps({
+        var reorderIndicatorDownProps = mergeProps({
           className: ptCallbacks.cx('reorderIndicatorDown'),
           style: ptCallbacks.sx('reorderIndicatorDown', {
             style: style
           })
         }, ptCallbacks.ptm('reorderIndicatorDown'));
-        var reorderIndicatorDownIconProps = utils.mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
+        var reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
         var reorderIndicatorDownIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React__namespace.createElement(arrowup.ArrowUpIcon, reorderIndicatorDownIconProps), _objectSpread({}, reorderIndicatorDownIconProps), {
           props: props
         });
@@ -6669,13 +6688,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var footer = createFooter();
     var resizeHelper = createResizeHelper();
     var reorderIndicators = createReorderIndicators();
-    var rootProps = utils.mergeProps({
+    var rootProps = mergeProps({
       id: props.id,
       className: utils.classNames(props.className, ptCallbacks.cx('root', {
         selectable: selectable
       })),
       style: props.style,
-      'data-scrollselectors': '.p-datatable-wrapper'
+      'data-scrollselectors': '.p-datatable-wrapper',
+      'data-showgridlines': props.showGridlines
     }, DataTableBase.getOtherProps(props), ptCallbacks.ptm('root'));
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef