primereact 10.3.1 → 10.3.3

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],
@@ -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));
     };
@@ -1024,12 +1027,14 @@ 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 {
@@ -1170,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);
@@ -1192,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);
@@ -1202,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);
@@ -1212,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);
@@ -1222,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();
@@ -1347,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() {
@@ -1375,7 +1368,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       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, {
@@ -1426,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);
@@ -1434,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'));
@@ -1450,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,
@@ -1471,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), {
@@ -1497,17 +1490,19 @@ 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',
+            'aria-label': PrimeReact.ariaLabel('saveEdit'),
             onClick: rowEditorProps.onSaveClick,
             className: rowEditorProps.saveClassName,
             tabIndex: props.tabIndex,
             'data-p-row-editor-save': true
           }, getColumnPTOptions('rowEditorSaveButton'));
-          var rowEditorCancelButtonProps = utils.mergeProps({
+          var rowEditorCancelButtonProps = mergeProps({
             type: 'button',
             name: 'row-cancel',
+            'aria-label': PrimeReact.ariaLabel('cancelEdit'),
             onClick: rowEditorProps.onCancelClick,
             className: rowEditorProps.cancelClassName,
             tabIndex: props.tabIndex
@@ -1519,9 +1514,10 @@ 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',
+            'aria-label': PrimeReact.ariaLabel('editRow'),
             onClick: rowEditorProps.onInitClick,
             className: rowEditorProps.initClassName,
             tabIndex: props.tabIndex,
@@ -1564,14 +1560,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
@@ -1579,7 +1575,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,
@@ -1629,6 +1625,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],
@@ -2017,7 +2014,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', {
@@ -2086,6 +2083,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,
@@ -2106,11 +2104,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'));
@@ -2119,7 +2117,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);
@@ -2136,6 +2134,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,
@@ -2158,7 +2157,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));
     };
@@ -2950,11 +2949,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'));
@@ -2984,15 +2983,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'
@@ -3093,13 +3092,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'
@@ -3115,7 +3114,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'));
@@ -3140,7 +3139,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
@@ -3187,6 +3186,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);
     };
@@ -3209,7 +3209,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));
     };
@@ -3256,7 +3256,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,
@@ -3277,6 +3277,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);
     };
@@ -3290,7 +3291,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));
     };
@@ -3301,7 +3302,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));
     };
@@ -3335,7 +3336,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, {
@@ -3343,7 +3344,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
@@ -3352,7 +3353,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
@@ -3374,6 +3375,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);
     };
@@ -3395,7 +3397,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));
     };
@@ -3825,7 +3827,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);
@@ -3839,7 +3841,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);
@@ -3847,7 +3849,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,
@@ -3875,7 +3877,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);
@@ -3884,7 +3886,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
           }),
@@ -3906,11 +3908,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
@@ -3922,14 +3924,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,
@@ -3958,7 +3960,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, {
@@ -4016,17 +4018,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));
@@ -4035,7 +4037,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, {
@@ -4105,7 +4107,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);
@@ -4130,7 +4132,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,
@@ -4147,7 +4149,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: {
@@ -4170,7 +4172,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
       })
@@ -4186,6 +4188,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);
     };
@@ -4207,7 +4210,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));
     };
@@ -4233,7 +4236,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;
@@ -4241,13 +4244,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
@@ -4278,6 +4281,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;
@@ -4309,7 +4313,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));
     };
@@ -4477,7 +4481,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);
@@ -4497,7 +4501,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);
@@ -4506,10 +4510,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,
@@ -4524,7 +4528,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);
@@ -4570,7 +4574,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);
@@ -4591,7 +4595,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,
@@ -4660,6 +4664,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;
@@ -4690,7 +4695,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));
     };
@@ -4705,7 +4710,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));
     };
@@ -4716,7 +4721,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));
     };
@@ -4853,7 +4858,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,
@@ -4870,7 +4875,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, {
@@ -4878,7 +4883,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
@@ -4889,7 +4894,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
@@ -4905,6 +4910,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),
@@ -4990,6 +4996,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);
@@ -5363,6 +5370,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;
@@ -5375,7 +5383,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';
@@ -5425,7 +5432,7 @@ 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) {
@@ -5614,6 +5621,11 @@ 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, context && context.styleContainer);
     };
@@ -5633,6 +5645,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) {
@@ -6210,6 +6225,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       unbindColumnResizeEvents();
       destroyStyleElement();
       destroyResponsiveStyle();
+      destroyBeforeResizeStyleElement();
     });
     React__namespace.useImperativeHandle(ref, function () {
       return {
@@ -6240,7 +6256,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, {
@@ -6249,7 +6265,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);
@@ -6261,7 +6277,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);
@@ -6522,7 +6538,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
@@ -6556,7 +6572,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'
@@ -6572,7 +6588,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);
@@ -6617,7 +6633,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'));
@@ -6633,23 +6649,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
         });
@@ -6675,7 +6691,7 @@ 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