primereact 10.3.0 → 10.3.1

package/datatable/datatable.js

@@ -895,11 +895,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var getColumnProp = function getColumnProp(name) {
       return ColumnBase.getCProp(props.column, name);
     };
-    var getColumnProps = function getColumnProps(column) {
-      return ColumnBase.getCProps(column);
+    var getColumnProps = function getColumnProps() {
+      return ColumnBase.getCProps(props.column);
     };
     var getColumnPTOptions = function getColumnPTOptions(key) {
-      var cProps = getColumnProps(props.column);
+      var cProps = getColumnProps();
       var columnMetaData = {
         props: cProps,
         parent: props.metaData,
@@ -925,7 +925,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         type: 'click',
         listener: function listener(e) {
           if (!selfClick.current && isOutsideClicked(e.target)) {
-            switchCellToViewMode(e, true);
+            // #2666 for overlay components and outside is clicked
+            setTimeout(function () {
+              switchCellToViewMode(e, true);
+            }, 0);
           }
           selfClick.current = false;
         },
@@ -934,9 +937,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindDocumentClickListener = _useEventListener2[0],
       unbindDocumentClickListener = _useEventListener2[1];
-    if (props.editMode === 'row' && props.editing !== editingState) {
-      setEditingState(props.editing);
-    }
     var isEditable = function isEditable() {
       return getColumnProp('editor');
     };
@@ -1035,6 +1035,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         } else {
           event.preventDefault();
         }
+        return newRowData;
       });
     };
     var findNextSelectableCell = function findNextSelectableCell(cell) {
@@ -1065,7 +1066,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       clearTimeout(tabindexTimeout.current);
       tabindexTimeout.current = setTimeout(function () {
         if (editingState) {
-          var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not(.p-cell-editor-key-helper)') : utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
+          var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
           focusableEl && focusableEl.focus();
         }
         keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
@@ -1308,6 +1309,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         focusOnElement();
       }
     });
+    React__namespace.useEffect(function () {
+      if (props.editMode === 'row' && props.editing !== editingState) {
+        setEditingState(props.editing);
+      }
+    }, [props.editMode, props.editing, editingState]);
     hooks.useUpdateEffect(function () {
       if (props.editMode === 'cell' || props.editMode === 'row') {
         setEditingRowDataState(getEditingRowData());
@@ -1351,7 +1357,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var tabIndex = getTabIndex(cellSelected);
       var selectionMode = getColumnProp('selectionMode');
       var rowReorder = getColumnProp('rowReorder');
-      var rowEditor = getColumnProp('rowEditor');
       var header = getColumnProp('header');
       var body = getColumnProp('body');
       var editor = getColumnProp('editor');
@@ -1365,6 +1370,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         frozenRow: props.frozenRow,
         props: props.tableProps
       };
+      var rowEditor = utils.ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
       var expander = utils.ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
       var cellClassName = utils.ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
       var bodyClassName = utils.ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
@@ -2563,10 +2569,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var target = event.currentTarget;
       if (!allowCellSelection() && props.selectionAutoFocus) {
         if (isCheckboxSelectionModeInColumn) {
-          var checkbox = utils.DomHandler.findSingle(target, 'td.p-selection-column .p-checkbox-box');
+          var checkbox = utils.DomHandler.findSingle(target, 'td[data-p-selection-column="true"] [data-pc-section="checkbox"]');
           checkbox && checkbox.focus();
         } else if (isRadioSelectionModeInColumn) {
-          var radio = utils.DomHandler.findSingle(target, 'td.p-selection-column input[type="radio"]');
+          var radio = utils.DomHandler.findSingle(target, 'td[data-p-selection-column="true"] input[type="radio"]');
           radio && radio.focus();
         }
       }
@@ -5235,7 +5241,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var saveColumnWidths = function saveColumnWidths(state) {
       var widths = [];
-      var headers = utils.DomHandler.find(elementRef.current, '.p-datatable-thead > tr > th');
+      var headers = utils.DomHandler.find(elementRef.current, '[data-pc-section="thead"] > tr > th');
       headers.forEach(function (header) {
         return widths.push(utils.DomHandler.getOuterWidth(header));
       });
@@ -5247,10 +5253,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var addColumnWidthStyles = function addColumnWidthStyles(widths) {
       createStyleElement();
       var innerHTML = '';
-      var selector = ".p-datatable[".concat(attributeSelector.current, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
+      var selector = "[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] > [data-pc-section=\"wrapper\"] ").concat(isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]', " > [data-pc-section=\"table\"]");
       widths.forEach(function (width, index) {
         var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
-        innerHTML += "\n                ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+        innerHTML += "\n                ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
       });
       styleElement.current.innerHTML = innerHTML;
     };
@@ -5400,7 +5406,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             updateTableWidth(bodyRef.current);
             updateTableWidth(frozenBodyRef.current);
             if (wrapperRef.current) {
-              updateTableWidth(utils.DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
+              updateTableWidth(utils.DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"] > table > tbody'));
             }
           }
         }
@@ -5425,18 +5431,18 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var resizeTableCells = function resizeTableCells(newColumnWidth, nextColumnWidth) {
       var widths = [];
       var colIndex = utils.DomHandler.index(resizeColumnElement.current);
-      var headers = utils.DomHandler.find(tableRef.current, '.p-datatable-thead > tr > th');
+      var headers = utils.DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
       headers.forEach(function (header) {
         return widths.push(utils.DomHandler.getOuterWidth(header));
       });
       destroyStyleElement();
       createStyleElement();
       var innerHTML = '';
-      var selector = ".p-datatable[".concat(attributeSelector.current, "] > .p-datatable-wrapper ").concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
+      var selector = "[data-pc-name=\"datatable\"][".concat(attributeSelector.current, "] > [data-pc-section=\"wrapper\"] ").concat(isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]', " > [data-pc-section=\"table\"]");
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
         var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
-        innerHTML += "\n                ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+        innerHTML += "\n                 ".concat(selector, " > [data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > [data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
       });
       styleElement.current.innerHTML = innerHTML;
     };
@@ -5567,7 +5573,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
             return isSameColumn(child, column);
           });
           var widths = [];
-          var headers = utils.DomHandler.find(tableRef.current, '.p-datatable-thead > tr > th');
+          var headers = utils.DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
           headers.forEach(function (header) {
             return widths.push(utils.DomHandler.getOuterWidth(header));
           });
@@ -5609,11 +5615,11 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       }
     };
     var createStyleElement = function createStyleElement() {
-      styleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
+      styleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
     };
     var createResponsiveStyle = function createResponsiveStyle() {
       if (!responsiveStyleElement.current) {
-        responsiveStyleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
+        responsiveStyleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
         var tableSelector = ".p-datatable-wrapper ".concat(isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller', " > .p-datatable-table");
         var selector = ".p-datatable[".concat(attributeSelector.current, "] > ").concat(tableSelector);
         var gridLinesSelector = ".p-datatable[".concat(attributeSelector.current, "].p-datatable-gridlines > ").concat(tableSelector);
@@ -6017,7 +6023,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     };
     var resetScroll = function resetScroll() {
       if (wrapperRef.current) {
-        var scrollableContainer = !isVirtualScrollerDisabled() ? utils.DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller') : wrapperRef.current;
+        var scrollableContainer = !isVirtualScrollerDisabled() ? utils.DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"]') : wrapperRef.current;
         scrollableContainer.scrollTo(0, 0);
       }
     };
@@ -6099,7 +6105,7 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       }
     };
     var closeEditingRows = function closeEditingRows() {
-      utils.DomHandler.find(document.body, '.p-row-editor-cancel').forEach(function (button, index) {
+      utils.DomHandler.find(document.body, '[data-pc-section="roweditorcancelbuttonprops"]').forEach(function (button, index) {
         setTimeout(function () {
           button.click();
         }, index * 5);
@@ -6675,7 +6681,8 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         selectable: selectable
       })),
       style: props.style,
-      'data-scrollselectors': '.p-datatable-wrapper'
+      'data-scrollselectors': '.p-datatable-wrapper',
+      'data-showgridlines': props.showGridlines
     }, DataTableBase.getOtherProps(props), ptCallbacks.ptm('root'));
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef