primereact 9.6.0 → 9.6.2

package/datatable/datatable.js

@@ -565,7 +565,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     }, getColumnPTOptions('hiddenInputWrapper'));
     var hiddenInputProps = utils.mergeProps({
       name: name,
-      ref: inputRef,
       type: 'radio',
       checked: props.checked,
       onFocus: function onFocus(e) {
@@ -593,7 +592,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var radiobuttonIconProps = utils.mergeProps({
       className: 'p-radiobutton-icon'
     }, getColumnPTOptions('radiobuttonIcon'));
-    return /*#__PURE__*/React__namespace.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", hiddenInputProps)), /*#__PURE__*/React__namespace.createElement("div", radiobuttonProps, /*#__PURE__*/React__namespace.createElement("div", radiobuttonIconProps)));
+    return /*#__PURE__*/React__namespace.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({
+      ref: inputRef
+    }, hiddenInputProps))), /*#__PURE__*/React__namespace.createElement("div", radiobuttonProps, /*#__PURE__*/React__namespace.createElement("div", radiobuttonIconProps)));
   });
   RowRadioButton.displayName = 'RowRadioButton';
 
@@ -1286,7 +1287,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       if (!isRowEditor && editor) {
         var editorKeyHelperProps = utils.mergeProps({
           tabIndex: '0',
-          ref: keyHelperRef,
           className: 'p-cell-editor-key-helper p-hidden-accessible',
           onFocus: function onFocus(e) {
             return onEditorFocus(e);
@@ -1294,12 +1294,13 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         }, getColumnPTOptions('editorKeyHelperLabel'));
         var editorKeyHelperLabelProps = utils.mergeProps(getColumnPTOptions('editorKeyHelper'));
         /* eslint-disable */
-        editorKeyHelper = /*#__PURE__*/React__namespace.createElement("a", editorKeyHelperProps, /*#__PURE__*/React__namespace.createElement("span", editorKeyHelperLabelProps));
+        editorKeyHelper = /*#__PURE__*/React__namespace.createElement("a", _extends({
+          ref: keyHelperRef
+        }, editorKeyHelperProps), /*#__PURE__*/React__namespace.createElement("span", editorKeyHelperLabelProps));
         /* eslint-enable */
       }
 
       var bodyCellProps = utils.mergeProps({
-        ref: elementRef,
         style: style,
         className: className,
         rowSpan: props.rowSpan,
@@ -1321,7 +1322,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           return _onMouseUp(e);
         }
       }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
-      return /*#__PURE__*/React__namespace.createElement("td", bodyCellProps, editorKeyHelper, title, content);
+      return /*#__PURE__*/React__namespace.createElement("td", _extends({
+        ref: elementRef
+      }, bodyCellProps), editorKeyHelper, title, content);
     };
     return getVirtualScrollerOption('loading') ? createLoading() : createElement();
   });
@@ -2753,11 +2756,12 @@ 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({
-      ref: refCallback,
       style: props.style,
       className: props.className
     }, getColumnPTOptions(ptKey));
-    return /*#__PURE__*/React__namespace.createElement("tbody", tbodyProps, content);
+    return /*#__PURE__*/React__namespace.createElement("tbody", _extends({
+      ref: refCallback
+    }, tbodyProps), content);
   }));
   TableBody.displayName = 'TableBody';
 
@@ -2853,14 +2857,15 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       props: props.tableProps
     });
     var footerCellProps = utils.mergeProps({
-      ref: elementRef,
       style: style,
       className: className,
       role: 'cell',
       colSpan: colSpan,
       rowSpan: rowSpan
     }, getColumnPTOptions('footerCell'), getColumnPTOptions('root'));
-    return /*#__PURE__*/React__namespace.createElement("td", footerCellProps, content);
+    return /*#__PURE__*/React__namespace.createElement("td", _extends({
+      ref: elementRef
+    }, footerCellProps), content);
   });
   FooterCell.displayName = 'FooterCell';
 
@@ -3399,7 +3404,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         });
         var label = filterLabel();
         var filterMenuButtonProps = utils.mergeProps({
-          ref: iconRef,
           type: 'button',
           className: _className,
           'aria-haspopup': true,
@@ -3412,7 +3416,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
           },
           'aria-label': label
         }, getColumnPTOptions('filterMenuButton'));
-        return /*#__PURE__*/React__namespace.createElement("button", filterMenuButtonProps, columnFilterIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        return /*#__PURE__*/React__namespace.createElement("button", _extends({
+          ref: iconRef
+        }, filterMenuButtonProps), columnFilterIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
@@ -3641,7 +3647,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       });
       var items = props.display === 'row' ? createRowItems() : createItems();
       var filterOverlayProps = utils.mergeProps({
-        ref: overlayRef,
         style: style,
         className: className,
         onKeyDown: function onKeyDown(e) {
@@ -3667,7 +3672,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         onEntered: onOverlayEntered,
         onExit: onOverlayExit,
         onExited: onOverlayExited
-      }, /*#__PURE__*/React__namespace.createElement("div", filterOverlayProps, filterHeader, items, filterFooter)));
+      }, /*#__PURE__*/React__namespace.createElement("div", _extends({
+        ref: overlayRef
+      }, filterOverlayProps), filterHeader, items, filterFooter)));
     };
     var className = utils.classNames('p-column-filter p-fluid', {
       'p-column-filter-row': props.display === 'row',
@@ -4081,7 +4088,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var resizer = createResizer();
       var header = createHeader(sortMeta);
       var headerCellProps = utils.mergeProps({
-        ref: elementRef,
         className: className,
         style: style,
         role: 'columnheader',
@@ -4111,7 +4117,9 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
         rowSpan: rowSpan,
         'aria-sort': ariaSort
       }, getColumnPTOptions('headerCell'), getColumnPTOptions('root'));
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("th", headerCellProps, resizer, header), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("th", _extends({
+        ref: elementRef
+      }, headerCellProps), resizer, header), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
         target: elementRef,
         content: headerTooltip
       }, headerTooltipOptions, {
@@ -5522,7 +5530,10 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       return data;
     };
     hooks.useMountEffect(function () {
-      attributeSelector.current = utils.UniqueComponentId();
+      if (elementRef.current) {
+        attributeSelector.current = utils.UniqueComponentId();
+        elementRef.current.setAttribute(attributeSelector.current, '');
+      }
 
       //setFiltersState(cloneFilters(props.filters)); // Github #4248
       setD_filtersState(cloneFilters(props.filters));
@@ -5534,7 +5545,6 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       }
     });
     hooks.useUpdateEffect(function () {
-      elementRef.current.setAttribute(attributeSelector.current, '');
       if (props.responsiveLayout === 'stack' && !props.scrollable) {
         createResponsiveStyle();
       }
@@ -5874,13 +5884,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
       var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
       var virtualScrollerOptions = props.virtualScrollerOptions || {};
       var wrapperProps = utils.mergeProps({
-        ref: wrapperRef,
         className: 'p-datatable-wrapper',
         style: {
           maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
         }
       }, ptCallbacks.ptm('wrapper'));
-      return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
+      return /*#__PURE__*/React__namespace.createElement("div", _extends({
+        ref: wrapperRef
+      }, wrapperProps), /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
         ref: virtualScrollerRef
       }, virtualScrollerOptions, {
         items: processedData,
@@ -5964,13 +5975,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var createResizeHelper = function createResizeHelper() {
       if (props.resizableColumns) {
         var resizeHelperProps = utils.mergeProps({
-          ref: resizeHelperRef,
           className: 'p-column-resizer-helper',
           style: {
             display: 'none'
           }
         }, ptCallbacks.ptm('resizeHelper'));
-        return /*#__PURE__*/React__namespace.createElement("div", resizeHelperProps);
+        return /*#__PURE__*/React__namespace.createElement("div", _extends({
+          ref: resizeHelperRef
+        }, resizeHelperProps));
       }
       return null;
     };
@@ -6036,13 +6048,14 @@ this.primereact.datatable = (function (exports, React, PrimeReact, componentbase
     var resizeHelper = createResizeHelper();
     var reorderIndicators = createReorderIndicators();
     var rootProps = utils.mergeProps({
-      ref: elementRef,
       id: props.id,
       className: className,
       style: props.style,
       'data-scrollselectors': '.p-datatable-wrapper'
     }, DataTableBase.getOtherProps(props), ptCallbacks.ptm('root'));
-    return /*#__PURE__*/React__namespace.createElement("div", rootProps, loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
+    return /*#__PURE__*/React__namespace.createElement("div", _extends({
+      ref: elementRef
+    }, rootProps), loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
   });
   DataTable.displayName = 'DataTable';