primereact 10.3.0 → 10.3.1

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

@@ -901,11 +901,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 +931,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 +943,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');
   };
@@ -1041,6 +1041,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       } else {
         event.preventDefault();
       }
+      return newRowData;
     });
   };
   var findNextSelectableCell = function findNextSelectableCell(cell) {
@@ -1071,7 +1072,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);
@@ -1314,6 +1315,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 +1363,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 +1376,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);
@@ -2569,10 +2575,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();
       }
     }
@@ -5241,7 +5247,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 +5259,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;
   };
@@ -5406,7 +5412,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'));
           }
         }
       }
@@ -5431,18 +5437,18 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   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 +5579,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));
         });
@@ -5615,11 +5621,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   };
   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);
@@ -6023,7 +6029,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 +6111,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);
@@ -6681,7 +6687,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