primereact 9.6.0 → 9.6.2

package/primereact.all.esm.js

@@ -202,16 +202,7 @@ var DomHandler = /*#__PURE__*/function () {
   }
   _createClass(DomHandler, null, [{
     key: "innerWidth",
-    value:
-    /**
-     * All data- properties like data-test-id
-     */
-
-    /**
-     * All ARIA properties like aria-label and focus-target for https://www.npmjs.com/package/@q42/floating-focus-a11y
-     */
-
-    function innerWidth(el) {
+    value: function innerWidth(el) {
       if (el) {
         var width = el.offsetWidth;
         var style = getComputedStyle(el);
@@ -1257,7 +1248,13 @@ var DomHandler = /*#__PURE__*/function () {
   }]);
   return DomHandler;
 }();
+/**
+ * All data- properties like data-test-id
+ */
 _defineProperty(DomHandler, "DATA_PROPS", ['data-']);
+/**
+ * All ARIA properties like aria-label and focus-target for https://www.npmjs.com/package/@q42/floating-focus-a11y
+ */
 _defineProperty(DomHandler, "ARIA_PROPS", ['aria', 'focus-target']);
 
 var ConnectedOverlayScrollHandler = /*#__PURE__*/function () {
@@ -6059,7 +6056,7 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
         return _onMouseEnter();
       },
       onMouseLeave: function onMouseLeave(e) {
-        return _onMouseLeave;
+        return _onMouseLeave(e);
       }
     }, TooltipBase.getOtherProps(props), ptm('root'));
     var arrowProps = mergeProps({
@@ -8787,7 +8784,6 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
   var onInputBlur = function onInputBlur(event) {
-    setFocusedState(false);
     !props.keepInvalid && updateInputfield(props.value);
     props.onBlur && props.onBlur(event);
   };
@@ -9878,6 +9874,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
   var show = function show(type) {
+    setFocusedState(false);
     if (props.onVisibleChange) {
       props.onVisibleChange({
         visible: true,
@@ -10770,7 +10767,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }, 200);
     }
   });
-  useUpdateEffect(function () {
+  React.useEffect(function () {
     var unbindMaskEvents = null;
     if (props.mask) {
       unbindMaskEvents = mask(inputRef.current, {
@@ -10788,7 +10785,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     return function () {
       props.mask && unbindMaskEvents && unbindMaskEvents();
     };
-  }, [props.mask]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.disabled, props.mask, props.readOnlyInput]);
   useUpdateEffect(function () {
     setCurrentView(props.view);
   }, [props.view]);
@@ -11584,12 +11582,13 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var monthPicker = createMonthPicker();
   var yearPicker = createYearPicker();
   var rootProps = mergeProps({
-    ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
   }, CalendarBase.getOtherProps(props), ptm('root'));
-  return /*#__PURE__*/React.createElement("span", rootProps, content, /*#__PURE__*/React.createElement(CalendarPanel, {
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: elementRef
+  }, rootProps), content, /*#__PURE__*/React.createElement(CalendarPanel, {
     ref: overlayRef,
     className: panelClassName,
     style: props.panelStyle,
@@ -11898,7 +11897,7 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
   var changePageOnTouch = function changePageOnTouch(e, diff) {
-    if (Math.abs(diff) > swipeThreshold) {
+    if (Math.abs(diff) > swipeThreshold.current) {
       if (diff < 0) {
         // left
         navForward(e);
@@ -11972,7 +11971,6 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       attributeSelector.current = UniqueComponentId();
       elementRef.current.setAttribute(attributeSelector.current, '');
     }
-    createStyle();
     calculatePosition();
     changePosition(totalShiftedItemsState);
     bindWindowResizeListener();
@@ -11980,6 +11978,7 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   useUpdateEffect(function () {
     var stateChanged = false;
     var totalShiftedItems = totalShiftedItemsState;
+    createStyle();
     if (props.autoplayInterval) {
       stopAutoplay();
     }
@@ -12031,12 +12030,12 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     if (!stateChanged && isAutoplay) {
       startAutoplay();
     }
-  });
-  useUnmountEffect(function () {
-    if (props.autoplayInterval) {
-      stopAutoplay();
-    }
-    destroyStyle();
+    return function () {
+      if (props.autoplayInterval) {
+        stopAutoplay();
+      }
+      destroyStyle();
+    };
   });
   var createItems = function createItems() {
     if (props.value && props.value.length) {
@@ -17833,6 +17832,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
     var style = {
       height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
     };
+    style = _objectSpread$13(_objectSpread$13({}, style), option.style);
     if (props.optionGroupLabel) {
       var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
       var groupChildrenContent = createGroupChildren(option, style);
@@ -19389,7 +19389,6 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
   }, getColumnPTOptions('hiddenInputWrapper'));
   var hiddenInputProps = mergeProps({
     name: name,
-    ref: inputRef,
     type: 'radio',
     checked: props.checked,
     onFocus: function onFocus(e) {
@@ -19417,7 +19416,9 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
   var radiobuttonIconProps = mergeProps({
     className: 'p-radiobutton-icon'
   }, getColumnPTOptions('radiobuttonIcon'));
-  return /*#__PURE__*/React.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", hiddenInputProps)), /*#__PURE__*/React.createElement("div", radiobuttonProps, /*#__PURE__*/React.createElement("div", radiobuttonIconProps)));
+  return /*#__PURE__*/React.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef
+  }, hiddenInputProps))), /*#__PURE__*/React.createElement("div", radiobuttonProps, /*#__PURE__*/React.createElement("div", radiobuttonIconProps)));
 });
 RowRadioButton.displayName = 'RowRadioButton';
 
@@ -20110,7 +20111,6 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     if (!isRowEditor && editor) {
       var editorKeyHelperProps = mergeProps({
         tabIndex: '0',
-        ref: keyHelperRef,
         className: 'p-cell-editor-key-helper p-hidden-accessible',
         onFocus: function onFocus(e) {
           return onEditorFocus(e);
@@ -20118,12 +20118,13 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
       }, getColumnPTOptions('editorKeyHelperLabel'));
       var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
       /* eslint-disable */
-      editorKeyHelper = /*#__PURE__*/React.createElement("a", editorKeyHelperProps, /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
+      editorKeyHelper = /*#__PURE__*/React.createElement("a", _extends({
+        ref: keyHelperRef
+      }, editorKeyHelperProps), /*#__PURE__*/React.createElement("span", editorKeyHelperLabelProps));
       /* eslint-enable */
     }
 
     var bodyCellProps = mergeProps({
-      ref: elementRef,
       style: style,
       className: className,
       rowSpan: props.rowSpan,
@@ -20145,7 +20146,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         return _onMouseUp(e);
       }
     }, getColumnPTOptions('bodyCell'), getColumnPTOptions('root'));
-    return /*#__PURE__*/React.createElement("td", bodyCellProps, editorKeyHelper, title, content);
+    return /*#__PURE__*/React.createElement("td", _extends({
+      ref: elementRef
+    }, bodyCellProps), editorKeyHelper, title, content);
   };
   return getVirtualScrollerOption('loading') ? createLoading() : createElement();
 });
@@ -21577,11 +21580,12 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var content = props.empty ? createEmptyContent() : createContent();
   var ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody';
   var tbodyProps = mergeProps({
-    ref: refCallback,
     style: props.style,
     className: props.className
   }, getColumnPTOptions(ptKey));
-  return /*#__PURE__*/React.createElement("tbody", tbodyProps, content);
+  return /*#__PURE__*/React.createElement("tbody", _extends({
+    ref: refCallback
+  }, tbodyProps), content);
 }));
 TableBody.displayName = 'TableBody';
 
@@ -21677,14 +21681,15 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
     props: props.tableProps
   });
   var footerCellProps = mergeProps({
-    ref: elementRef,
     style: style,
     className: className,
     role: 'cell',
     colSpan: colSpan,
     rowSpan: rowSpan
   }, getColumnPTOptions('footerCell'), getColumnPTOptions('root'));
-  return /*#__PURE__*/React.createElement("td", footerCellProps, content);
+  return /*#__PURE__*/React.createElement("td", _extends({
+    ref: elementRef
+  }, footerCellProps), content);
 });
 FooterCell.displayName = 'FooterCell';
 
@@ -22223,7 +22228,6 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       });
       var label = filterLabel();
       var filterMenuButtonProps = mergeProps({
-        ref: iconRef,
         type: 'button',
         className: _className,
         'aria-haspopup': true,
@@ -22236,7 +22240,9 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         },
         'aria-label': label
       }, getColumnPTOptions('filterMenuButton'));
-      return /*#__PURE__*/React.createElement("button", filterMenuButtonProps, columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      return /*#__PURE__*/React.createElement("button", _extends({
+        ref: iconRef
+      }, filterMenuButtonProps), columnFilterIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
@@ -22465,7 +22471,6 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     });
     var items = props.display === 'row' ? createRowItems() : createItems();
     var filterOverlayProps = mergeProps({
-      ref: overlayRef,
       style: style,
       className: className,
       onKeyDown: function onKeyDown(e) {
@@ -22491,7 +22496,9 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       onEntered: onOverlayEntered,
       onExit: onOverlayExit,
       onExited: onOverlayExited
-    }, /*#__PURE__*/React.createElement("div", filterOverlayProps, filterHeader, items, filterFooter)));
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      ref: overlayRef
+    }, filterOverlayProps), filterHeader, items, filterFooter)));
   };
   var className = classNames('p-column-filter p-fluid', {
     'p-column-filter-row': props.display === 'row',
@@ -22905,7 +22912,6 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var resizer = createResizer();
     var header = createHeader(sortMeta);
     var headerCellProps = mergeProps({
-      ref: elementRef,
       className: className,
       style: style,
       role: 'columnheader',
@@ -22935,7 +22941,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
       rowSpan: rowSpan,
       'aria-sort': ariaSort
     }, getColumnPTOptions('headerCell'), getColumnPTOptions('root'));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", headerCellProps, resizer, header), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("th", _extends({
+      ref: elementRef
+    }, headerCellProps), resizer, header), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
       target: elementRef,
       content: headerTooltip
     }, headerTooltipOptions, {
@@ -24346,7 +24354,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return data;
   };
   useMountEffect(function () {
-    attributeSelector.current = UniqueComponentId();
+    if (elementRef.current) {
+      attributeSelector.current = UniqueComponentId();
+      elementRef.current.setAttribute(attributeSelector.current, '');
+    }
 
     //setFiltersState(cloneFilters(props.filters)); // Github #4248
     setD_filtersState(cloneFilters(props.filters));
@@ -24358,7 +24369,6 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
   });
   useUpdateEffect(function () {
-    elementRef.current.setAttribute(attributeSelector.current, '');
     if (props.responsiveLayout === 'stack' && !props.scrollable) {
       createResponsiveStyle();
     }
@@ -24698,13 +24708,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
     var virtualScrollerOptions = props.virtualScrollerOptions || {};
     var wrapperProps = mergeProps({
-      ref: wrapperRef,
       className: 'p-datatable-wrapper',
       style: {
         maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
       }
     }, ptCallbacks.ptm('wrapper'));
-    return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement(VirtualScroller, _extends({
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: wrapperRef
+    }, wrapperProps), /*#__PURE__*/React.createElement(VirtualScroller, _extends({
       ref: virtualScrollerRef
     }, virtualScrollerOptions, {
       items: processedData,
@@ -24788,13 +24799,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var createResizeHelper = function createResizeHelper() {
     if (props.resizableColumns) {
       var resizeHelperProps = mergeProps({
-        ref: resizeHelperRef,
         className: 'p-column-resizer-helper',
         style: {
           display: 'none'
         }
       }, ptCallbacks.ptm('resizeHelper'));
-      return /*#__PURE__*/React.createElement("div", resizeHelperProps);
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: resizeHelperRef
+      }, resizeHelperProps));
     }
     return null;
   };
@@ -24860,13 +24872,14 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var resizeHelper = createResizeHelper();
   var reorderIndicators = createReorderIndicators();
   var rootProps = 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.createElement("div", rootProps, loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: elementRef
+  }, rootProps), loader, header, paginatorTop, content, paginatorBottom, footer, resizeHelper, reorderIndicators);
 });
 DataTable.displayName = 'DataTable';
 
@@ -26414,14 +26427,11 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       duplicateIEEvent.current = false;
       return;
     }
-    var currentFiles = [];
-    if (props.multiple) {
-      currentFiles = filesState ? _toConsumableArray(filesState) : [];
-    }
+    var currentFiles = filesState && props.multiple ? _toConsumableArray(filesState) : [];
     var selectedFiles = event.dataTransfer ? event.dataTransfer.files : event.target.files;
     for (var i = 0; i < selectedFiles.length; i++) {
       var file = selectedFiles[i];
-      if (!isFileSelected(file) && validate(file)) {
+      if ((!props.multiple || !isFileSelected(file)) && validate(file)) {
         if (isImage(file)) {
           file.objectURL = window.URL.createObjectURL(file);
         }
@@ -37828,9 +37838,10 @@ var Slider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
   var onDragEnd = function onDragEnd(event) {
     if (dragging.current) {
       dragging.current = false;
+      var newValue = setValue(event);
       props.onSlideEnd && props.onSlideEnd({
         originalEvent: event,
-        value: props.value
+        value: newValue
       });
       unbindDocumentMouseMoveListener();
       unbindDocumentMouseUpListener();