primereact 10.3.0 → 10.3.2

package/datatable/datatable.cjs.js

@@ -714,6 +714,7 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     _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);
   };
@@ -735,7 +736,7 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -759,7 +760,7 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
       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;
@@ -767,7 +768,7 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     props: props
   });
   var tabIndex = props.disabled ? null : '0';
-  var checkboxWrapperProps = utils.mergeProps({
+  var checkboxWrapperProps = mergeProps({
     className: cx('checkboxWrapper', {
       rowProps: props,
       focusedState: focusedState
@@ -776,7 +777,7 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
       return _onClick(e);
     }
   }, getColumnPTOptions('checkboxWrapper'));
-  var checkboxProps = utils.mergeProps({
+  var checkboxProps = mergeProps({
     className: cx('checkbox', {
       rowProps: props,
       focusedState: focusedState
@@ -805,6 +806,7 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
   };
@@ -826,7 +828,7 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -853,16 +855,16 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
     _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,
@@ -880,7 +882,7 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
     },
     'aria-label': props.ariaLabel
   }, getColumnPTOptions('hiddenInput'));
-  var radiobuttonProps = utils.mergeProps({
+  var radiobuttonProps = mergeProps({
     className: cx('radiobutton', {
       rowProps: props,
       focusedState: focusedState
@@ -891,7 +893,7 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
     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({
@@ -903,6 +905,7 @@ RowRadioButton.displayName = 'RowRadioButton';
 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],
@@ -928,11 +931,11 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   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,
@@ -948,7 +951,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -958,7 +961,10 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       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;
       },
@@ -967,9 +973,6 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     _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');
   };
@@ -1057,17 +1060,20 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         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) {
@@ -1098,7 +1104,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -1202,21 +1208,18 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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);
@@ -1224,9 +1227,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //right arrow
-        case 39:
+        case 'ArrowRight':
           var nextCell = findNextSelectableCell(cell);
           if (nextCell) {
             changeTabIndex(cell, nextCell);
@@ -1234,9 +1235,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //up arrow
-        case 38:
+        case 'ArrowUp':
           var upCell = findUpSelectableCell(cell);
           if (upCell) {
             changeTabIndex(cell, upCell);
@@ -1244,9 +1243,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //down arrow
-        case 40:
+        case 'ArrowDown':
           var downCell = findDownSelectableCell(cell);
           if (downCell) {
             changeTabIndex(cell, downCell);
@@ -1254,17 +1251,14 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           }
           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();
@@ -1341,6 +1335,11 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       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());
@@ -1374,7 +1373,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       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() {
@@ -1384,7 +1383,6 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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');
@@ -1398,11 +1396,12 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       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, {
@@ -1453,7 +1452,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         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);
@@ -1461,7 +1460,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         props: props
       }) : null;
     } else if (expander) {
-      var rowTogglerIconProps = utils.mergeProps({
+      var rowTogglerIconProps = mergeProps({
         className: cx('rowTogglerIcon'),
         'aria-hidden': true
       }, getColumnPTOptions('rowTogglerIcon'));
@@ -1477,7 +1476,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         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,
@@ -1498,13 +1497,13 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     } 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), {
@@ -1524,7 +1523,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           onCancelClick: onRowEditCancel,
           cancelClassName: cx('rowEditorCancelButton')
         };
-        var rowEditorSaveButtonProps = utils.mergeProps({
+        var rowEditorSaveButtonProps = mergeProps({
           type: 'button',
           name: 'row-save',
           onClick: rowEditorProps.onSaveClick,
@@ -1532,7 +1531,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           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,
@@ -1546,7 +1545,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           onInitClick: onRowEditInit,
           initClassName: cx('rowEditorInitButton')
         };
-        var rowEditorInitButtonProps = utils.mergeProps({
+        var rowEditorInitButtonProps = mergeProps({
           type: 'button',
           name: 'row-edit',
           onClick: rowEditorProps.onInitClick,
@@ -1591,14 +1590,14 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     }
     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
@@ -1606,7 +1605,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       /* eslint-enable */
     }
 
-    var bodyCellProps = utils.mergeProps({
+    var bodyCellProps = mergeProps({
       style: style,
       className: utils.classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', {
         selectionMode: selectionMode,
@@ -1656,6 +1655,7 @@ BodyCell.displayName = 'BodyCell';
 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],
@@ -2044,7 +2044,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var content = createContent();
   var tabIndex = getTabIndex();
-  var rowProps = utils.mergeProps({
+  var rowProps = mergeProps({
     role: 'row',
     tabIndex: tabIndex,
     className: utils.classNames(rowClassName, cx('bodyRow', {
@@ -2113,6 +2113,7 @@ BodyRow.displayName = 'BodyRow';
 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,
@@ -2133,11 +2134,11 @@ var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
       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'));
@@ -2146,7 +2147,7 @@ var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -2163,6 +2164,7 @@ var _excluded = ["originalEvent"];
 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,
@@ -2185,7 +2187,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         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));
   };
@@ -2596,10 +2598,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     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();
       }
     }
@@ -2977,11 +2979,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         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'));
@@ -3011,15 +3013,15 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
 
       // 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'
@@ -3120,13 +3122,13 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
 
       // 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'
@@ -3142,7 +3144,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         colSpan: colSpan,
         props: props.tableProps
       });
-      var rowGroupFooterProps = utils.mergeProps({
+      var rowGroupFooterProps = mergeProps({
         className: cx('rowGroupFooter'),
         role: 'row'
       }, getColumnPTOptions('rowGroupFooter'));
@@ -3167,7 +3169,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   };
   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
@@ -3214,6 +3216,7 @@ var FooterCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
   };
@@ -3236,7 +3239,7 @@ var FooterCell = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -3283,7 +3286,7 @@ var FooterCell = /*#__PURE__*/React__namespace.memo(function (props) {
   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,
@@ -3304,6 +3307,7 @@ var TableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
   };
@@ -3317,7 +3321,7 @@ var TableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
       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));
   };
@@ -3328,7 +3332,7 @@ var TableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
       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));
   };
@@ -3362,7 +3366,7 @@ var TableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
     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, {
@@ -3370,7 +3374,7 @@ var TableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
         }), createGroupFooterCells(row));
       });
     }
-    var footerRowProps = utils.mergeProps({
+    var footerRowProps = mergeProps({
       role: 'row'
     }, ptm('footerRow', {
       hostName: props.hostName
@@ -3379,7 +3383,7 @@ var TableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   if (hasFooter()) {
     var content = createContent();
-    var tfootProps = utils.mergeProps({
+    var tfootProps = mergeProps({
       className: cx('tfoot')
     }, getColumnGroupPTOptions('root'), ptm('tfoot', {
       hostName: props.hostName
@@ -3401,6 +3405,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
   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);
   };
@@ -3422,7 +3427,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -3852,7 +3857,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
   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);
@@ -3866,7 +3871,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -3874,7 +3879,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
       props: props
     });
     var label = filterLabel();
-    var filterMenuButtonProps = utils.mergeProps({
+    var filterMenuButtonProps = mergeProps({
       type: 'button',
       className: cx('filterMenuButton', {
         overlayVisibleState: overlayVisibleState,
@@ -3902,7 +3907,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -3911,7 +3916,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     });
     if (getColumnProp('showClearButton') && props.display === 'row') {
       var clearLabel = clearButtonLabel();
-      var headerFilterClearButtonProps = utils.mergeProps({
+      var headerFilterClearButtonProps = mergeProps({
         className: cx('headerFilterClearButton', {
           hasRowFilter: hasRowFilter
         }),
@@ -3933,11 +3938,11 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     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
@@ -3949,14 +3954,14 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
           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,
@@ -3985,7 +3990,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     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, {
@@ -4043,17 +4048,17 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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));
@@ -4062,7 +4067,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
   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, {
@@ -4132,7 +4137,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
   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);
@@ -4157,7 +4162,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
       filterApplyCallback: filterApplyCallback
     });
     var items = props.display === 'row' ? createRowItems() : createItems();
-    var filterOverlayProps = utils.mergeProps({
+    var filterOverlayProps = mergeProps({
       style: style,
       className: cx('filterOverlay', {
         columnFilterProps: props,
@@ -4174,7 +4179,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
         return onContentMouseDown();
       }
     }, getColumnPTOptions('filterOverlay'));
-    var transitionProps = utils.mergeProps({
+    var transitionProps = mergeProps({
       classNames: cx('transition'),
       "in": overlayVisibleState,
       timeout: {
@@ -4197,7 +4202,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
   var menuButton = createMenuButton();
   var clearButton = createClearButton();
   var overlay = createOverlay();
-  var columnFilter = utils.mergeProps({
+  var columnFilter = mergeProps({
     className: cx('columnFilter', {
       columnFilterProps: props
     })
@@ -4213,6 +4218,7 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     _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);
   };
@@ -4234,7 +4240,7 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -4260,7 +4266,7 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
       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;
@@ -4268,13 +4274,13 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     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
@@ -4305,6 +4311,7 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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;
@@ -4336,7 +4343,7 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -4504,7 +4511,7 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
   });
   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);
@@ -4524,7 +4531,7 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -4533,10 +4540,10 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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,
@@ -4551,7 +4558,7 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -4597,7 +4604,7 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -4618,7 +4625,7 @@ var HeaderCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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,
@@ -4687,6 +4694,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     _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;
@@ -4717,7 +4725,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -4732,7 +4740,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -4743,7 +4751,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       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));
   };
@@ -4880,7 +4888,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
         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,
@@ -4897,7 +4905,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     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, {
@@ -4905,7 +4913,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
         }), createGroupHeaderCells(row));
       });
     } else {
-      var headerRowProps = utils.mergeProps({
+      var headerRowProps = mergeProps({
         role: 'row'
       }, ptm('headerRow', {
         hostName: props.hostName
@@ -4916,7 +4924,7 @@ var TableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var content = createContent();
-  var theadProps = utils.mergeProps({
+  var theadProps = mergeProps({
     className: cx('thead')
   }, getColumnGroupPTOptions('root'), ptm('thead', {
     hostName: props.hostName
@@ -4932,6 +4940,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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),
@@ -5017,6 +5026,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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);
@@ -5268,7 +5278,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   };
   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));
     });
@@ -5280,10 +5290,10 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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;
   };
@@ -5390,6 +5400,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
   };
   var onColumnResizeStart = function onColumnResizeStart(e) {
+    createBeforeResizeStyleElement();
     var event = e.originalEvent,
       column = e.column;
     var containerLeft = utils.DomHandler.getOffset(elementRef.current).left;
@@ -5402,7 +5413,6 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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';
@@ -5433,7 +5443,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
           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'));
           }
         }
       }
@@ -5452,24 +5462,24 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     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;
   };
@@ -5600,7 +5610,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
           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));
         });
@@ -5641,12 +5651,17 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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);
@@ -5660,6 +5675,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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) {
@@ -6050,7 +6068,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   };
   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);
     }
   };
@@ -6132,7 +6150,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
   };
   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);
@@ -6237,6 +6255,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     unbindColumnResizeEvents();
     destroyStyleElement();
     destroyResponsiveStyle();
+    destroyBeforeResizeStyleElement();
   });
   React__namespace.useImperativeHandle(ref, function () {
     return {
@@ -6267,7 +6286,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   });
   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, {
@@ -6276,7 +6295,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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);
@@ -6288,7 +6307,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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);
@@ -6549,7 +6568,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     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
@@ -6583,7 +6602,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
         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'
@@ -6599,7 +6618,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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);
@@ -6644,7 +6663,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   };
   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'));
@@ -6660,23 +6679,23 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
         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
       });
@@ -6702,13 +6721,14 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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