primereact 10.3.0 → 10.3.2

package/datatable/datatable.d.ts

@@ -1082,8 +1082,9 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
     editingRows?: DataTableValueArray | DataTableEditingRows | undefined;
     /**
      * Text to display when there is no data.
+     * @defaultValue No results found
      */
-    emptyMessage?: React.ReactNode | ((frozen: boolean) => React.ReactNode);
+    emptyMessage?: string | React.ReactNode | ((frozen: boolean) => React.ReactNode) | undefined;
     /**
      * Makes row groups toggleable, default is false.
      * @defaultValue false
@@ -1221,7 +1222,7 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    paginatorDropdownAppendTo?: 'self' | HTMLElement | null | undefined;
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Content for the left side of the paginator.
      */
@@ -1537,7 +1538,7 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
      */
     onRowEditCancel?(event: DataTableRowEditEvent): void;
     /**
-     * Callback to invoke when the cancel icon is clicked on row editing mode.
+     * Callback to invoke when the editing icon is clicked on row editing mode. Use in conjuction with editingRows value from the Datatable to programmatically control editing rows.
      * @param {DataTableRowEditEvent} event - Custom row edit event.
      */
     onRowEditChange?(event: DataTableRowEditEvent): void;

package/datatable/datatable.esm.js

@@ -2,8 +2,8 @@
 import * as React from 'react';
 import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, PrimeReactContext, FilterOperator, FilterService } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
-import { ObjectUtils, classNames, mergeProps, IconUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
-import { useEventListener, useUpdateEffect, useUnmountEffect, useOverlayListener, usePrevious, useMountEffect } from 'primereact/hooks';
+import { ObjectUtils, classNames, IconUtils, DomHandler, ZIndexUtils, UniqueComponentId } from 'primereact/utils';
+import { useMergeProps, useEventListener, useUpdateEffect, useUnmountEffect, useOverlayListener, usePrevious, useMountEffect } from 'primereact/hooks';
 import { ArrowDownIcon } from 'primereact/icons/arrowdown';
 import { ArrowUpIcon } from 'primereact/icons/arrowup';
 import { SpinnerIcon } from 'primereact/icons/spinner';
@@ -687,6 +687,7 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
   };
@@ -778,6 +779,7 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
   var inputRef = React.useRef(null);
+  var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
   };
@@ -876,6 +878,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.memo(function (props) {
+  var mergeProps = useMergeProps();
   var _React$useState = React.useState(props.editing),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     editingState = _React$useState2[0],
@@ -901,11 +904,11 @@ var BodyCell = /*#__PURE__*/React.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,
@@ -931,7 +934,10 @@ var BodyCell = /*#__PURE__*/React.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;
       },
@@ -940,9 +946,6 @@ var BodyCell = /*#__PURE__*/React.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');
   };
@@ -1030,17 +1033,20 @@ var BodyCell = /*#__PURE__*/React.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) {
@@ -1071,7 +1077,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     clearTimeout(tabindexTimeout.current);
     tabindexTimeout.current = setTimeout(function () {
       if (editingState) {
-        var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not(.p-cell-editor-key-helper)') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
+        var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
         focusableEl && focusableEl.focus();
       }
       keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
@@ -1175,21 +1181,18 @@ var BodyCell = /*#__PURE__*/React.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);
@@ -1197,9 +1200,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //right arrow
-        case 39:
+        case 'ArrowRight':
           var nextCell = findNextSelectableCell(cell);
           if (nextCell) {
             changeTabIndex(cell, nextCell);
@@ -1207,9 +1208,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //up arrow
-        case 38:
+        case 'ArrowUp':
           var upCell = findUpSelectableCell(cell);
           if (upCell) {
             changeTabIndex(cell, upCell);
@@ -1217,9 +1216,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //down arrow
-        case 40:
+        case 'ArrowDown':
           var downCell = findDownSelectableCell(cell);
           if (downCell) {
             changeTabIndex(cell, downCell);
@@ -1227,17 +1224,14 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           }
           event.preventDefault();
           break;
-
-        //enter
-        case 13:
+        case 'Enter':
+        case 'NumpadEnter':
           if (event.shiftKey || event.ctrlKey) ; else if (!DomHandler.isClickable(target)) {
             _onClick(event);
             event.preventDefault();
           }
           break;
-
-        //space
-        case 32:
+        case 'Space':
           if (!DomHandler.isClickable(target) && !target.readOnly) {
             _onClick(event);
             event.preventDefault();
@@ -1314,6 +1308,11 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       focusOnElement();
     }
   });
+  React.useEffect(function () {
+    if (props.editMode === 'row' && props.editing !== editingState) {
+      setEditingState(props.editing);
+    }
+  }, [props.editMode, props.editing, editingState]);
   useUpdateEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       setEditingRowDataState(getEditingRowData());
@@ -1357,7 +1356,6 @@ var BodyCell = /*#__PURE__*/React.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');
@@ -1371,6 +1369,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       frozenRow: props.frozenRow,
       props: props.tableProps
     };
+    var rowEditor = ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
     var expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
     var cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
     var bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
@@ -1629,6 +1628,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.memo(function (props) {
+  var mergeProps = useMergeProps();
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     editingState = _React$useState2[0],
@@ -2086,6 +2086,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.memo(function (props) {
+  var mergeProps = useMergeProps();
   var _props$ptCallbacks = props.ptCallbacks,
     ptm = _props$ptCallbacks.ptm,
     ptmo = _props$ptCallbacks.ptmo,
@@ -2136,6 +2137,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.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var mergeProps = useMergeProps();
   var _props$ptCallbacks = props.ptCallbacks,
     ptm = _props$ptCallbacks.ptm,
     ptmo = _props$ptCallbacks.ptmo,
@@ -2569,10 +2571,10 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     var target = event.currentTarget;
     if (!allowCellSelection() && props.selectionAutoFocus) {
       if (isCheckboxSelectionModeInColumn) {
-        var checkbox = DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
+        var checkbox = DomHandler.findSingle(target, 'td[data-p-selection-column="true"] [data-pc-section="checkbox"]');
         checkbox && checkbox.focus();
       } else if (isRadioSelectionModeInColumn) {
-        var radio = DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]');
+        var radio = DomHandler.findSingle(target, 'td[data-p-selection-column="true"] input[type="radio"]');
         radio && radio.focus();
       }
     }
@@ -3187,6 +3189,7 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
     styleObjectState = _React$useState2[0],
     setStyleObjectState = _React$useState2[1];
   var elementRef = React.useRef(null);
+  var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
   };
@@ -3277,6 +3280,7 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
     ptm = _props$ptCallbacks.ptm,
     ptmo = _props$ptCallbacks.ptmo,
     cx = _props$ptCallbacks.cx;
+  var mergeProps = useMergeProps();
   var getRowProps = function getRowProps(row) {
     return ColumnGroupBase.getCProps(row);
   };
@@ -3374,6 +3378,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var iconRef = React.useRef(null);
   var selfClick = React.useRef(false);
   var overlayEventListener = React.useRef(null);
+  var mergeProps = useMergeProps();
   var getColumnProp = function getColumnProp(name) {
     return ColumnBase.getCProp(props.column, name);
   };
@@ -4186,6 +4191,7 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var mergeProps = useMergeProps();
   var getColumnProps = function getColumnProps() {
     return ColumnBase.getCProps(props.column);
   };
@@ -4278,6 +4284,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     setStyleObjectState = _React$useState2[1];
   var elementRef = React.useRef(null);
   var prevColumn = usePrevious(props.column);
+  var mergeProps = useMergeProps();
   var parentMetaData = props.metaData,
     ptCallbacks = props.ptCallbacks,
     index = props.index;
@@ -4660,6 +4667,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     allSortableDisabledState = _React$useState4[0],
     setAllSortableDisabledState = _React$useState4[1];
+  var mergeProps = useMergeProps();
   var isSingleSort = props.sortMode === 'single';
   var isMultipleSort = props.sortMode === 'multiple';
   var isAllSortableDisabled = isSingleSort && allSortableDisabledState;
@@ -4905,6 +4913,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.forwardRef(function (inProps, ref) {
   var context = React.useContext(PrimeReactContext);
+  var mergeProps = useMergeProps();
   var props = DataTableBase.getProps(inProps, context);
   var _React$useState = React.useState(props.first),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4990,6 +4999,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var dropPosition = React.useRef(null);
   var styleElement = React.useRef(null);
   var responsiveStyleElement = React.useRef(null);
+  var beforeResizeStyleElement = React.useRef(null);
   var columnWidthsState = React.useRef(null);
   var tableWidthState = React.useRef(null);
   var resizeColumn = React.useRef(null);
@@ -5241,7 +5251,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   var saveColumnWidths = function saveColumnWidths(state) {
     var widths = [];
-    var headers = DomHandler.find(elementRef.current, '.p-datatable-thead > tr > th');
+    var headers = DomHandler.find(elementRef.current, '[data-pc-section="thead"] > tr > th');
     headers.forEach(function (header) {
       return widths.push(DomHandler.getOuterWidth(header));
     });
@@ -5253,10 +5263,10 @@ var DataTable = /*#__PURE__*/React.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;
   };
@@ -5363,6 +5373,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   };
   var onColumnResizeStart = function onColumnResizeStart(e) {
+    createBeforeResizeStyleElement();
     var event = e.originalEvent,
       column = e.column;
     var containerLeft = DomHandler.getOffset(elementRef.current).left;
@@ -5375,7 +5386,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var onColumnResize = function onColumnResize(event) {
     var containerLeft = DomHandler.getOffset(elementRef.current).left;
     elementRef.current.setAttribute('data-p-unselectable-text', true);
-    !ptCallbacks.isUnstyled() && 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';
@@ -5406,7 +5416,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
           updateTableWidth(bodyRef.current);
           updateTableWidth(frozenBodyRef.current);
           if (wrapperRef.current) {
-            updateTableWidth(DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
+            updateTableWidth(DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"] > table > tbody'));
           }
         }
       }
@@ -5425,24 +5435,24 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     resizeColumn.current = null;
     resizeColumnElement.current = null;
     elementRef.current.setAttribute('data-p-unselectable-text', 'true');
-    !ptCallbacks.isUnstyled() && DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
+    destroyBeforeResizeStyleElement();
     unbindColumnResizeEvents();
   };
   var resizeTableCells = function resizeTableCells(newColumnWidth, nextColumnWidth) {
     var widths = [];
     var colIndex = DomHandler.index(resizeColumnElement.current);
-    var headers = DomHandler.find(tableRef.current, '.p-datatable-thead > tr > th');
+    var headers = DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
     headers.forEach(function (header) {
       return widths.push(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;
   };
@@ -5573,7 +5583,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
           return isSameColumn(child, column);
         });
         var widths = [];
-        var headers = DomHandler.find(tableRef.current, '.p-datatable-thead > tr > th');
+        var headers = DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
         headers.forEach(function (header) {
           return widths.push(DomHandler.getOuterWidth(header));
         });
@@ -5614,12 +5624,17 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       dropPosition.current = null;
     }
   };
+  var createBeforeResizeStyleElement = function createBeforeResizeStyleElement() {
+    beforeResizeStyleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.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 = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
+    styleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce, context && context.styleContainer);
   };
   var createResponsiveStyle = function createResponsiveStyle() {
     if (!responsiveStyleElement.current) {
-      responsiveStyleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
+      responsiveStyleElement.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.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);
@@ -5633,6 +5648,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var destroyStyleElement = function destroyStyleElement() {
     styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
   };
+  var destroyBeforeResizeStyleElement = function destroyBeforeResizeStyleElement() {
+    beforeResizeStyleElement.current = DomHandler.removeInlineStyle(beforeResizeStyleElement.current);
+  };
   var onPageChange = function onPageChange(e) {
     clearEditingMetaData();
     if (props.onPage) {
@@ -6023,7 +6041,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   var resetScroll = function resetScroll() {
     if (wrapperRef.current) {
-      var scrollableContainer = !isVirtualScrollerDisabled() ? DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller') : wrapperRef.current;
+      var scrollableContainer = !isVirtualScrollerDisabled() ? DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"]') : wrapperRef.current;
       scrollableContainer.scrollTo(0, 0);
     }
   };
@@ -6105,7 +6123,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   };
   var closeEditingRows = function closeEditingRows() {
-    DomHandler.find(document.body, '.p-row-editor-cancel').forEach(function (button, index) {
+    DomHandler.find(document.body, '[data-pc-section="roweditorcancelbuttonprops"]').forEach(function (button, index) {
       setTimeout(function () {
         button.click();
       }, index * 5);
@@ -6210,6 +6228,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     unbindColumnResizeEvents();
     destroyStyleElement();
     destroyResponsiveStyle();
+    destroyBeforeResizeStyleElement();
   });
   React.useImperativeHandle(ref, function () {
     return {
@@ -6681,7 +6700,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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.createElement("div", _extends({
     ref: elementRef