primereact 8.7.3 → 9.0.0-beta.1

package/primereact.all.js

@@ -853,6 +853,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       value: function isAndroid() {
         return /(android)/i.test(navigator.userAgent);
       }
+    }, {
+      key: "isChrome",
+      value: function isChrome() {
+        return /(chrome)/i.test(navigator.userAgent);
+      }
     }, {
       key: "isTouchDevice",
       value: function isTouchDevice() {
@@ -968,7 +973,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, {
       key: "isExist",
       value: function isExist(element) {
-        return element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode;
+        return !!(element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode);
       }
     }, {
       key: "hasDOM",
@@ -1022,6 +1027,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           preventScroll: preventScroll
         });
       }
+
+      /**
+       * Focus the first focusable element if it does not already have focus.
+       *
+       * @param {HTMLElement} el a HTML element
+       * @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
+       * @return {HTMLElement | undefined} the first focusable HTML element found
+       */
+    }, {
+      key: "focusFirstElement",
+      value: function focusFirstElement(el, scrollTo) {
+        if (!el) return;
+        var firstFocusableElement = DomHandler.getFirstFocusableElement(el);
+        firstFocusableElement && DomHandler.focus(firstFocusableElement, scrollTo);
+        return firstFocusableElement;
+      }
     }, {
       key: "getCursorOffset",
       value: function getCursorOffset(el, prevText, nextText, currentText) {
@@ -1475,11 +1496,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         pos,
         begin,
         end;
-      var iPhone = /iphone/i.test(DomHandler.getUserAgent());
       oldVal = el.value;
 
       //backspace, delete, and escape get special treatment
-      if (k === 8 || k === 46 || iPhone && k === 127) {
+      if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
         pos = caret();
         begin = pos.begin;
         end = pos.end;
@@ -1529,7 +1549,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             buffer[p] = c;
             writeBuffer();
             next = seekNext(p);
-            if (/android/i.test(DomHandler.getUserAgent())) {
+            if (DomHandler.isAndroid()) {
               //Path for CSP Violation on FireFox OS 1.1
               var proxy = function proxy() {
                 caret(next);
@@ -1699,8 +1719,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         a: '[A-Za-z]',
         '*': '[A-Za-z0-9]'
       };
-      var ua = DomHandler.getUserAgent();
-      androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
+      androidChrome = DomHandler.isChrome() && DomHandler.isAndroid();
       var maskTokens = options.mask.split('');
       for (var i = 0; i < maskTokens.length; i++) {
         var c = maskTokens[i];
@@ -1869,13 +1888,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, {
       key: "reorderArray",
       value: function reorderArray(value, from, to) {
-        var target;
         if (value && from !== to) {
           if (to >= value.length) {
-            target = to - value.length;
-            while (target-- + 1) {
-              value.push(undefined);
-            }
+            to %= value.length;
+            from %= value.length;
           }
           value.splice(to, 0, value.splice(from, 1)[0]);
         }
@@ -2173,7 +2189,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       },
       notEquals: function notEquals(value, filter, filterLocale) {
         if (filter === undefined || filter === null || typeof filter === 'string' && filter.trim() === '') {
-          return false;
+          return true;
         }
         if (value === undefined || value === null) {
           return true;
@@ -2848,7 +2864,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       bindWindowResizeListener = _useResizeListener2[0],
       unbindWindowResizeListener = _useResizeListener2[1];
     var _useOverlayScrollList = useOverlayScrollListener({
-        target: targetRef,
+        target: target,
         listener: function listener(event) {
           _listener && _listener(event, {
             type: 'scroll',
@@ -2883,7 +2899,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, [target, overlay, when]);
     React__namespace.useEffect(function () {
       unbind();
-      // when && bind();
     }, [when]);
     useUnmountEffect(function () {
       unbind();
@@ -4867,11 +4882,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var key = i + '_' + j;
         var selected = props.selectedItem === item;
         var content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, item, j) : props.field ? ObjectUtils.resolveFieldData(item, props.field) : item;
+        var className = classNames('p-autocomplete-item', {
+          'p-disabled': item.disabled
+        });
         return /*#__PURE__*/React__namespace.createElement("li", {
           key: key,
           role: "option",
           "aria-selected": selected,
-          className: "p-autocomplete-item",
+          className: className,
           style: style,
           onClick: function onClick(e) {
             return props.onItemClick(e, item);
@@ -4898,11 +4916,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }, content), childrenContent);
       } else {
         var _content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion;
+        var className = classNames('p-autocomplete-item', {
+          'p-disabled': suggestion.disabled
+        });
         return /*#__PURE__*/React__namespace.createElement("li", {
           key: index,
           role: "option",
           "aria-selected": props.selectedItem === suggestion,
-          className: "p-autocomplete-item",
+          className: className,
           style: style,
           onClick: function onClick(e) {
             return props.onItemClick(e, suggestion);
@@ -4955,7 +4976,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     var createElement = function createElement() {
-      var className = classNames('p-autocomplete-panel p-component', props.panelClassName);
+      var className = classNames('p-autocomplete-panel p-component', props.panelClassName, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       var style = _objectSpread$u({
         maxHeight: props.scrollHeight
       }, props.panelStyle || {});
@@ -5368,6 +5392,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (inputRef.current && !props.multiple) {
         updateInputField(props.value);
       }
+      if (overlayVisibleState) {
+        alignOverlay();
+      }
     });
     useUnmountEffect(function () {
       if (timeout.current) {
@@ -5381,6 +5408,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         search: search,
         show: show,
         hide: hide,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -8186,6 +8216,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         getCurrentDateTime: getCurrentDateTime,
         getViewDate: getViewDate,
         updateViewDate: updateViewDate,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -8297,7 +8330,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         disabled: switchViewButtonDisabled()
       }, monthNames[month]);
     };
-    var createTitleYearElement = function createTitleYearElement() {
+    var createTitleYearElement = function createTitleYearElement(metaYear) {
       if (props.yearNavigator) {
         var _yearOptions2 = [];
         var years = props.yearRange.split(':');
@@ -8344,11 +8377,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
         return _content2;
       }
+      var displayYear = props.inline ? metaYear : currentYear;
       return currentView !== 'year' && /*#__PURE__*/React__namespace.createElement("button", {
         className: "p-datepicker-year p-link",
         onClick: switchToYearView,
         disabled: switchViewButtonDisabled()
-      }, currentYear);
+      }, displayYear);
     };
     var createTitleDecadeElement = function createTitleDecadeElement() {
       var years = yearPickerValues();
@@ -8509,7 +8543,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createHourPicker = function createHourPicker() {
       var currentTime = getCurrentDateTime();
+      var minute = doStepMinute(currentTime.getMinutes());
       var hour = currentTime.getHours();
+
+      // #3770 account for step minutes rolling to next hour
+      hour = minute > 59 ? hour + 1 : hour;
       if (props.hourFormat === '12') {
         if (hour === 0) hour = 12;else if (hour > 11 && hour !== 12) hour = hour - 12;
       }
@@ -8546,7 +8584,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createMinutePicker = function createMinutePicker() {
       var currentTime = getCurrentDateTime();
-      var minute = currentTime.getMinutes();
+      var minute = doStepMinute(currentTime.getMinutes());
+      minute = minute > 59 ? minute - 60 : minute;
       var minuteDisplay = minute < 10 ? '0' + minute : minute;
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-minute-picker"
@@ -8805,7 +8844,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             key: "year".concat(i + 1),
             className: classNames('p-yearpicker-year', {
               'p-highlight': isYearSelected(y),
-              'p-disabled': !isSelectable(0, 0, y)
+              'p-disabled': !(isSelectable(0, 0, y) || isSelectable(30, 11, y))
             })
           }, y);
         }));
@@ -8820,7 +8859,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       'p-datepicker-timeonly': props.timeOnly,
       'p-datepicker-multiple-month': props.numberOfMonths > 1,
       'p-datepicker-monthpicker': currentView === 'month',
-      'p-datepicker-touch-ui': props.touchUI
+      'p-datepicker-touch-ui': props.touchUI,
+      'p-input-filled': PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact.ripple === false
     });
     var content = createContent();
     var datePicker = createDatePicker();
@@ -8866,6 +8907,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     disabledDates: null,
     disabledDays: null,
     footerTemplate: null,
+    formatDateTime: null,
     headerTemplate: null,
     hideOnDateTimeSelect: false,
     hourFormat: '24',
@@ -8902,6 +8944,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     onVisibleChange: null,
     panelClassName: null,
     panelStyle: null,
+    parseDateTime: null,
     placeholder: null,
     readOnlyInput: false,
     required: false,
@@ -8974,7 +9017,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (!window.grecaptcha) {
         var head = document.head || document.getElementsByTagName('head')[0];
         var script = document.createElement('script');
-        script.src = 'https://www.google.com/recaptcha/api.js?render=explicit';
+        script.src = props.sourceUrl;
         script.async = true;
         script.defer = true;
         script.onload = function () {
@@ -9025,14 +9068,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   Captcha.defaultProps = {
     __TYPE: 'Captcha',
     id: null,
+    language: 'en',
+    onExpire: null,
+    onResponse: null,
     siteKey: null,
-    theme: 'light',
-    type: 'image',
     size: 'normal',
+    sourceUrl: 'https://www.google.com/recaptcha/api.js?render=explicit',
     tabIndex: 0,
-    language: 'en',
-    onResponse: null,
-    onExpire: null
+    theme: 'light',
+    type: 'image'
   };
 
   var Card = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
@@ -9810,7 +9854,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createMenu = function createMenu() {
       return props.options ? props.options.map(createOption) : null;
     };
-    var className = classNames('p-cascadeselect-panel p-cascadeselect-items', props.className);
+    var className = classNames('p-cascadeselect-panel p-cascadeselect-items', props.className, {
+      'p-input-filled': PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact.ripple === false
+    });
     var submenu = createMenu();
     return /*#__PURE__*/React__namespace.createElement("ul", {
       ref: elementRef,
@@ -10010,6 +10057,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         },
         getLabel: function getLabel() {
           return labelRef.current;
+        },
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
         }
       };
     });
@@ -10315,7 +10365,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setFocusedState(false);
     };
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
       }
     };
@@ -10325,6 +10376,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -10574,16 +10628,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (event.defaultPrevented) {
         return;
       }
-      switch (event.which) {
-        //backspace
-        case 8:
+      switch (event.key) {
+        case 'Backspace':
           if (inputRef.current.value.length === 0 && values.length > 0) {
             removeItem(event, values.length - 1);
           }
           break;
-
-        //enter
-        case 13:
+        case 'Enter':
           if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
             addItem(event, inputValue, true);
           }
@@ -10594,8 +10645,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
           if (isMaxedOut()) {
             event.preventDefault();
-          } else if (props.separator === ',' && event.which === 188) {
-            addItem(event, inputValue, true);
+          } else if (props.separator === ',') {
+            // GitHub #3885 Android Opera gives strange code 229 for comma
+            if (event.key === props.separator || DomHandler.isAndroid() && event.which === 229) {
+              addItem(event, inputValue, true);
+            }
           }
           break;
       }
@@ -10666,6 +10720,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -10785,7 +10842,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createElement = function createElement() {
       var className = classNames('p-colorpicker-panel', props.panelClassName, {
         'p-colorpicker-overlay-panel': !props.inline,
-        'p-disabled': props.disabled
+        'p-disabled': props.disabled,
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
       });
       return /*#__PURE__*/React__namespace.createElement(CSSTransition, {
         nodeRef: ref,
@@ -11203,6 +11262,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         props: props,
         show: show,
         hide: hide,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -11432,10 +11494,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   };
 
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
-    var _React$useState = React__namespace.useState(props.id),
+    var uniqueId = props.id ? props.id : UniqueComponentId();
+    var _React$useState = React__namespace.useState(uniqueId),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      idState = _React$useState2[0],
-      setIdState = _React$useState2[1];
+      idState = _React$useState2[0];
+      _React$useState2[1];
     var _React$useState3 = React__namespace.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       maskVisibleState = _React$useState4[0],
@@ -11459,7 +11522,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var lastPageX = React__namespace.useRef(null);
     var lastPageY = React__namespace.useRef(null);
     var styleElement = React__namespace.useRef(null);
-    var attributeSelector = React__namespace.useRef('');
+    var attributeSelector = React__namespace.useRef(uniqueId);
     var maximized = props.onMaximize ? props.maximized : maximizedState;
     var _useEventListener = useEventListener({
         type: 'keydown',
@@ -11766,14 +11829,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     };
     var createStyle = function createStyle() {
-      if (!styleElement.current) {
-        styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
-        var innerHTML = '';
-        for (var breakpoint in props.breakpoints) {
-          innerHTML += "\n                    @media screen and (max-width: ".concat(breakpoint, ") {\n                        .p-dialog[").concat(attributeSelector.current, "] {\n                            width: ").concat(props.breakpoints[breakpoint], " !important;\n                        }\n                    }\n                ");
-        }
-        styleElement.current.innerHTML = innerHTML;
+      styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      var innerHTML = '';
+      for (var breakpoint in props.breakpoints) {
+        innerHTML += "\n                @media screen and (max-width: ".concat(breakpoint, ") {\n                    .p-dialog[").concat(attributeSelector.current, "] {\n                        width: ").concat(props.breakpoints[breakpoint], " !important;\n                    }\n                }\n            ");
       }
+      styleElement.current.innerHTML = innerHTML;
     };
     var changeScrollOnMaximizable = function changeScrollOnMaximizable() {
       if (!props.blockScroll) {
@@ -11782,13 +11843,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     useMountEffect(function () {
-      var unqiueId = UniqueComponentId();
-      if (!idState) {
-        setIdState(unqiueId);
-      }
-      if (!attributeSelector.current) {
-        attributeSelector.current = unqiueId;
-      }
       if (props.visible) {
         setMaskVisibleState(true);
       }
@@ -11930,7 +11984,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var className = classNames('p-dialog p-component', props.className, {
         'p-dialog-rtl': props.rtl,
         'p-dialog-maximized': maximized,
-        'p-dialog-default': !maximized
+        'p-dialog-default': !maximized,
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
       });
       var maskClassName = classNames('p-dialog-mask', getPositionClass(), {
         'p-component-overlay p-component-overlay-enter': props.modal,
@@ -12281,7 +12337,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var type = _ref.type,
             valid = _ref.valid;
           if (valid) {
-            type === 'outside' ? props.dismissable && !isPanelClicked.current && hide() : hide();
+            type === 'outside' ? props.dismissable && !isPanelClicked.current && hide('hide') : hide('hide');
           }
           isPanelClicked.current = false;
         },
@@ -12452,7 +12508,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createElement = function createElement() {
       var otherProps = ObjectUtils.findDiffKeys(props, ConfirmPopup.defaultProps);
-      var className = classNames('p-confirm-popup p-component', getPropValue('className'));
+      var className = classNames('p-confirm-popup p-component', getPropValue('className'), {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       var content = createContent();
       var footer = createFooter();
       return /*#__PURE__*/React__namespace.createElement(CSSTransition, {
@@ -12838,7 +12897,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     });
     var createContextMenu = function createContextMenu() {
       var otherProps = ObjectUtils.findDiffKeys(props, ContextMenu.defaultProps);
-      var className = classNames('p-contextmenu p-component', props.className);
+      var className = classNames('p-contextmenu p-component', props.className, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       return /*#__PURE__*/React__namespace.createElement(CSSTransition, {
         nodeRef: menuRef,
         classNames: "p-contextmenu",
@@ -13330,16 +13392,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           return;
         }
 
+        // #3913 onChange should be called before onValueChange
+        handleOnChange(event, currentValue, newValue);
         // touch devices trigger the keyboard to display because of setSelectionRange
         !DomHandler.isTouchDevice() && updateInput(newValue, null, 'spin');
         updateModel(event, newValue);
-        handleOnChange(event, currentValue, newValue);
-      }
-    };
-    var onUpButtonTouchStart = function onUpButtonTouchStart(event) {
-      if (!props.disabled && !props.readOnly) {
-        repeat(event, null, 1);
-        event.preventDefault();
       }
     };
     var onUpButtonMouseDown = function onUpButtonMouseDown(event) {
@@ -13349,11 +13406,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         event.preventDefault();
       }
     };
-    var onUpButtonTouchEnd = function onUpButtonTouchEnd() {
-      if (!props.disabled && !props.readOnly) {
-        clearTimer();
-      }
-    };
     var onUpButtonMouseUp = function onUpButtonMouseUp() {
       if (!props.disabled && !props.readOnly) {
         clearTimer();
@@ -13374,17 +13426,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         repeat(event, null, 1);
       }
     };
-    var onDownButtonTouchStart = function onDownButtonTouchStart(event) {
-      if (!props.disabled && !props.readOnly) {
-        repeat(event, null, -1);
-        event.preventDefault();
-      }
-    };
-    var onDownButtonTouchEnd = function onDownButtonTouchEnd() {
-      if (!props.disabled && !props.readOnly) {
-        clearTimer();
-      }
-    };
     var onDownButtonMouseDown = function onDownButtonMouseDown(event) {
       if (!props.disabled && !props.readOnly) {
         props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
@@ -13958,6 +13999,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getFormatter: getFormatter,
         getElement: function getElement() {
           return elementRef.current;
@@ -14028,13 +14072,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return /*#__PURE__*/React__namespace.createElement("button", {
         type: "button",
         className: className,
-        onMouseLeave: onUpButtonMouseLeave,
-        onMouseDown: onUpButtonMouseDown,
-        onMouseUp: onUpButtonMouseUp,
+        onPointerLeave: onUpButtonMouseLeave,
+        onPointerDown: onUpButtonMouseDown,
+        onPointerUp: onUpButtonMouseUp,
         onKeyDown: onUpButtonKeyDown,
         onKeyUp: onUpButtonKeyUp,
-        onTouchStart: onUpButtonTouchStart,
-        onTouchEnd: onUpButtonTouchEnd,
         disabled: props.disabled,
         tabIndex: -1
       }, /*#__PURE__*/React__namespace.createElement("span", {
@@ -14049,13 +14091,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return /*#__PURE__*/React__namespace.createElement("button", {
         type: "button",
         className: className,
-        onMouseLeave: onDownButtonMouseLeave,
-        onMouseDown: onDownButtonMouseDown,
-        onMouseUp: onDownButtonMouseUp,
+        onPointerLeave: onDownButtonMouseLeave,
+        onPointerDown: onDownButtonMouseDown,
+        onPointerUp: onDownButtonMouseUp,
         onKeyDown: onDownButtonKeyDown,
         onKeyUp: onDownButtonKeyUp,
-        onTouchStart: onDownButtonTouchStart,
-        onTouchEnd: onDownButtonTouchEnd,
         disabled: props.disabled,
         tabIndex: -1
       }, /*#__PURE__*/React__namespace.createElement("span", {
@@ -14582,7 +14622,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     var createElement = function createElement() {
-      var className = classNames('p-dropdown-panel p-component', props.panelClassName);
+      var className = classNames('p-dropdown-panel p-component', props.panelClassName, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       var filter = createFilter();
       var content = createContent();
       return /*#__PURE__*/React__namespace.createElement(CSSTransition, {
@@ -14696,6 +14739,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (props.disabled) {
         return;
       }
+      props.onClick && props.onClick(event);
+
+      // do not continue if the user defined click wants to prevent it
+      if (event.defaultPrevented) {
+        return;
+      }
       if (DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
         return;
       } else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
@@ -15122,6 +15171,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         props: props,
         show: show,
         hide: hide,
+        focus: function focus() {
+          return DomHandler.focus(focusInputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -15151,10 +15203,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     }, [overlayVisibleState, props.value]);
     useUpdateEffect(function () {
-      if (overlayVisibleState && props.filter) {
+      if (overlayVisibleState && filterState && props.filter) {
         alignOverlay();
       }
-    }, [overlayVisibleState, props.filter]);
+    }, [overlayVisibleState, filterState, props.filter]);
     useUpdateEffect(function () {
       if (filterState && (!props.options || props.options.length === 0)) {
         setFilterState('');
@@ -15241,15 +15293,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createClearIcon = function createClearIcon() {
       if (props.value != null && props.showClear && !props.disabled) {
-        return /*#__PURE__*/React__namespace.createElement("i", {
-          className: "p-dropdown-clear-icon pi pi-times",
-          onClick: clear
-        });
+        var iconClassName = classNames('p-dropdown-clear-icon p-clickable');
+        var iconProps = {
+          className: iconClassName,
+          onPointerUp: clear
+        };
+        return IconUtils.getJSXIcon(props.clearIcon, iconProps);
       }
       return null;
     };
     var createDropdownIcon = function createDropdownIcon() {
-      var iconClassName = classNames('p-dropdown-trigger-icon p-clickable', props.dropdownIcon);
+      var iconClassName = classNames('p-dropdown-trigger-icon p-clickable');
+      var icon = IconUtils.getJSXIcon(props.dropdownIcon, {
+        className: iconClassName
+      });
       var ariaLabel = props.placeholder || props.ariaLabel;
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-dropdown-trigger",
@@ -15257,9 +15314,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         "aria-haspopup": "listbox",
         "aria-expanded": overlayVisibleState,
         "aria-label": ariaLabel
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
-      }));
+      }, icon);
     };
     var visibleOptions = getVisibleOptions();
     var selectedOption = getSelectedOption();
@@ -15326,6 +15381,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     ariaLabelledBy: null,
     autoFocus: false,
     className: null,
+    clearIcon: 'pi pi-times',
     dataKey: null,
     disabled: false,
     dropdownIcon: 'pi pi-chevron-down',
@@ -15714,7 +15770,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
         event.preventDefault();
       }
@@ -15768,7 +15825,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
         event.preventDefault();
       }
@@ -15835,7 +15893,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return props.column ? props.column.props[prop] : null;
     };
     var field = getColumnProp('field') || "field_".concat(props.index);
-    var editingKey = props.dataKey ? props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
+    var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
     var _useEventListener = useEventListener({
         type: 'click',
         listener: function listener(e) {
@@ -15862,7 +15920,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return props.compareSelectionBy === 'equals' ? data === props.rowData : ObjectUtils.equals(data, props.rowData, props.dataKey);
     };
     var equals = function equals(selectedCell) {
-      return (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
+      return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
     };
     var isOutsideClicked = function isOutsideClicked(target) {
       return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
@@ -15997,14 +16055,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var align = getColumnProp('alignFrozen');
         if (align === 'right') {
           var right = 0;
-          var next = elementRef.current.nextElementSibling;
+          var next = elementRef.current && elementRef.current.nextElementSibling;
           if (next) {
             right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
           }
           styleObject['right'] = right + 'px';
         } else {
           var left = 0;
-          var prev = elementRef.current.previousElementSibling;
+          var prev = elementRef.current && elementRef.current.previousElementSibling;
           if (prev) {
             left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
           }
@@ -16020,7 +16078,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setEditingRowDataState(editingRowData);
 
       // update editing meta for complete methods on row mode
-      props.editingMeta[editingKey].data[field] = val;
+      var currentData = getEditingRowData();
+      if (currentData) {
+        currentData[field] = val;
+      }
     };
     var onClick = function onClick(event) {
       var params = getCellCallbackParams(event);
@@ -16987,7 +17048,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return null;
     };
     var getRowKey = function getRowKey(rowData, index) {
-      return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) + '_' + index : index;
+      return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) : index;
     };
     var shouldRenderRowGroupHeader = function shouldRenderRowGroupHeader(value, rowData, i) {
       var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
@@ -17464,14 +17525,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var event = e.originalEvent;
       if (droppedRowIndex.current != null) {
         var dropIndex = draggedRowIndex.current > droppedRowIndex.current ? droppedRowIndex.current : droppedRowIndex.current === 0 ? 0 : droppedRowIndex.current - 1;
-        var val = _toConsumableArray(props.value);
+        var val = _toConsumableArray(props.tableProps.value);
         ObjectUtils.reorderArray(val, draggedRowIndex.current, dropIndex);
         if (props.onRowReorder) {
           props.onRowReorder({
             originalEvent: event,
             value: val,
             dragIndex: draggedRowIndex.current,
-            dropIndex: droppedRowIndex.current
+            dropIndex: dropIndex
           });
         }
       }
@@ -18597,7 +18658,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
         event.preventDefault();
       }
@@ -19479,7 +19541,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         return props.selectAll;
       } else {
         var _data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
-        var val = props.frozenValue ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
+        var val = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(props.frozenValue), _toConsumableArray(_data)) : _data;
         var selectableVal = getSelectableData(val);
         return selectableVal && props.selection && selectableVal.every(function (sv) {
           return props.selection.some(function (s) {
@@ -19640,7 +19702,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           });
         }) : [];
         if (checked) {
-          selection = props.frozenValue ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
+          selection = ObjectUtils.isNotEmpty(props.frozenValue) ? [].concat(_toConsumableArray(selection), _toConsumableArray(props.frozenValue), _toConsumableArray(_data2)) : [].concat(_toConsumableArray(selection), _toConsumableArray(_data2));
           selection = getSelectableData(selection);
           props.onAllRowsSelect && props.onAllRowsSelect({
             originalEvent: originalEvent,
@@ -19988,6 +20050,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var globalMatch = false;
         var localFiltered = false;
         for (var prop in filters) {
+          if (prop === 'null') {
+            continue;
+          }
           if (Object.prototype.hasOwnProperty.call(filters, prop) && prop !== 'global') {
             localFiltered = true;
             var filterField = prop;
@@ -20279,8 +20344,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     useUpdateEffect(function () {
       if (props.globalFilter) {
         filter(props.globalFilter, 'global', props.globalFilterMatchMode);
+      } else {
+        // #3819 was filtering but now reset filter state
+        setFiltersState(props.filters);
       }
-    }, [props.globalFilter]);
+    }, [props.globalFilter, props.globalFilterMatchMode]);
     useUnmountEffect(function () {
       unbindColumnResizeEvents();
       destroyStyleElement();
@@ -20384,7 +20452,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         contentRef = options.contentRef,
         className = options.className;
         options.itemSize;
-      var frozenBody = props.frozenValue && /*#__PURE__*/React__namespace.createElement(TableBody, {
+      var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
         ref: frozenBodyRef,
         value: props.frozenValue,
         className: "p-datatable-frozen-tbody",
@@ -22300,6 +22368,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         },
         getFiles: function getFiles() {
           return filesState;
+        },
+        setFiles: function setFiles(files) {
+          return setFilesState(files || []);
         }
       };
     });
@@ -22378,6 +22449,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           removeElement: removeButton,
           formatSize: formatSize(file.size),
           element: content,
+          index: index,
           props: props
         };
         content = ObjectUtils.getJSXElement(props.itemTemplate, file, defaultContentOptions);
@@ -23210,7 +23282,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var galleriaClassName = classNames('p-galleria p-component', props.className, {
         'p-galleria-fullscreen': props.fullScreen,
         'p-galleria-indicator-onitem': props.showIndicatorsOnItem,
-        'p-galleria-item-nav-onhover': props.showItemNavigatorsOnHover && !props.fullScreen
+        'p-galleria-item-nav-onhover': props.showItemNavigatorsOnHover && !props.fullScreen,
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
       }, thumbnailsPosClassName, indicatorPosClassName);
       var closeIcon = props.fullScreen && /*#__PURE__*/React__namespace.createElement("button", {
         type: "button",
@@ -24006,11 +24080,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         pos,
         begin,
         end;
-      var iPhone = /iphone/i.test(DomHandler.getUserAgent());
       oldVal.current = elementRef.current.value;
 
       //backspace, delete, and escape get special treatment
-      if (k === 8 || k === 46 || iPhone && k === 127) {
+      if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
         pos = caret();
         begin = pos.begin;
         end = pos.end;
@@ -24060,7 +24133,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             buffer.current[p] = c;
             writeBuffer();
             next = seekNext(p);
-            if (/android/i.test(DomHandler.getUserAgent())) {
+            if (DomHandler.isAndroid()) {
               //Path for CSP Violation on FireFox OS 1.1
               var proxy = function proxy() {
                 caret(next);
@@ -24249,8 +24322,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           a: '[A-Za-z]',
           '*': '[A-Za-z0-9]'
         };
-        var ua = DomHandler.getUserAgent();
-        androidChrome.current = /chrome/i.test(ua) && /android/i.test(ua);
+        androidChrome.current = DomHandler.isChrome() && DomHandler.isAndroid();
         var maskTokens = props.mask.split('');
         for (var i = 0; i < maskTokens.length; i++) {
           var c = maskTokens[i];
@@ -24282,6 +24354,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focus(elementRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         }
@@ -24404,11 +24479,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
         getInput: function getInput() {
-          return elementRef.current;
+          return inputRef.current;
         }
       };
     });
@@ -25148,6 +25226,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focusFirstElement(elementRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -25991,6 +26072,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         props: props,
         show: show,
         hide: hide,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -26342,7 +26426,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (props.model) {
         var otherProps = ObjectUtils.findDiffKeys(props, Menu.defaultProps);
         var className = classNames('p-menu p-component', {
-          'p-menu-overlay': props.popup
+          'p-menu-overlay': props.popup,
+          'p-input-filled': PrimeReact.inputStyle === 'filled',
+          'p-ripple-disabled': PrimeReact.ripple === false
         }, props.className);
         var menuitems = createMenu();
         return /*#__PURE__*/React__namespace.createElement(CSSTransition, {
@@ -27148,7 +27234,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var panelClassName = classNames('p-multiselect-panel p-component', {
         'p-multiselect-inline': props.inline,
         'p-multiselect-flex': props.flex,
-        'p-multiselect-limited': !allowOptionSelect
+        'p-multiselect-limited': !allowOptionSelect,
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
       }, props.panelClassName);
       var header = createHeader();
       var content = createContent();
@@ -27698,6 +27786,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         props: props,
         show: show,
         hide: hide,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -27961,6 +28052,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focusFirstElement(elementRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         }
@@ -28949,7 +29043,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createElement = function createElement() {
       var otherProps = ObjectUtils.findDiffKeys(props, OverlayPanel.defaultProps);
-      var className = classNames('p-overlaypanel p-component', props.className);
+      var className = classNames('p-overlaypanel p-component', props.className, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       var closeIcon = createCloseIcon();
       return /*#__PURE__*/React__namespace.createElement(CSSTransition, {
         nodeRef: overlayRef,
@@ -29714,6 +29811,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -29763,7 +29863,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return null;
     };
     var createPanel = function createPanel() {
-      var panelClassName = classNames('p-password-panel p-component', props.panelClassName);
+      var panelClassName = classNames('p-password-panel p-component', props.panelClassName, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       var _ref2 = meterState || {
           strength: '',
           width: '0%'
@@ -30711,7 +30814,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setFocusedState(false);
     };
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
       }
     };
@@ -30727,6 +30831,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return {
         props: props,
         select: select,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -31373,6 +31480,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focusFirstElement(elementRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         }
@@ -31548,6 +31658,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         setVisibleState(true);
       }
     }, [maskVisibleState]);
+    useUpdateEffect(function () {
+      // #3811 if dismissible state is toggled while open we must unregister and re-regisetr
+      if (visibleState) {
+        unbindDocumentClickListener();
+        if (props.dismissable && !props.modal) {
+          bindDocumentClickListener();
+        }
+      }
+    }, [props.dismissable, props.modal, visibleState]);
     useUnmountEffect(function () {
       disableDocumentSettings();
       maskRef.current && ZIndexUtils.clear(maskRef.current);
@@ -31573,7 +31692,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createElement = function createElement() {
       var otherProps = ObjectUtils.findDiffKeys(props, Sidebar.defaultProps);
-      var className = classNames('p-sidebar p-component', props.className);
+      var className = classNames('p-sidebar p-component', props.className, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       var maskClassName = classNames('p-sidebar-mask', {
         'p-component-overlay p-component-overlay-enter': props.modal,
         'p-sidebar-mask-scrollblocker': props.blockScroll,
@@ -32629,8 +32751,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         _label = _props$menuitem.label,
         template = _props$menuitem.template,
         url = _props$menuitem.url,
-        target = _props$menuitem.target;
-      var className = classNames('p-menuitem-link', {
+        target = _props$menuitem.target,
+        _className = _props$menuitem.className;
+      var className = classNames('p-menuitem-link', _className, {
         'p-disabled': disabled
       });
       var iconClassName = classNames('p-menuitem-icon', _icon);
@@ -33710,7 +33833,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       updateScrollBar(index);
     };
     var _onKeyDown = function onKeyDown(event, tab, index) {
-      if (event.code === 'Enter') {
+      if (event.key === 'Enter') {
         onTabHeaderClick(event, tab, index);
       }
     };
@@ -34101,6 +34224,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         }
@@ -34525,7 +34651,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createElement = function createElement() {
       var otherProps = ObjectUtils.findDiffKeys(props, TieredMenu.defaultProps);
       var className = classNames('p-tieredmenu p-component', {
-        'p-tieredmenu-overlay': props.popup
+        'p-tieredmenu-overlay': props.popup,
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
       }, props.className);
       return /*#__PURE__*/React__namespace.createElement(CSSTransition, {
         nodeRef: menuRef,
@@ -34618,25 +34746,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var className = classNames('p-timeline p-component', (_classNames = {}, _defineProperty(_classNames, "p-timeline-".concat(props.align), true), _defineProperty(_classNames, "p-timeline-".concat(props.layout), true), _classNames), props.className);
     var events = createEvents();
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      id: props.id,
       ref: elementRef,
-      className: className,
-      style: props.style
+      className: className
     }, otherProps), events);
   }));
   Timeline.displayName = 'Timeline';
   Timeline.defaultProps = {
     __TYPE: 'Timeline',
-    id: null,
-    value: null,
     align: 'left',
-    layout: 'vertical',
-    dataKey: null,
     className: null,
-    style: null,
-    opposite: null,
+    content: null,
+    dataKey: null,
+    layout: 'vertical',
     marker: null,
-    content: null
+    opposite: null,
+    value: null
   };
 
   var ToastMessage = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
@@ -34842,7 +34966,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     });
     var createElement = function createElement() {
       var otherProps = ObjectUtils.findDiffKeys(props, Toast.defaultProps);
-      var className = classNames('p-toast p-component p-toast-' + props.position, props.className);
+      var className = classNames('p-toast p-component p-toast-' + props.position, props.className, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       return /*#__PURE__*/React__namespace.createElement("div", _extends({
         ref: containerRef,
         id: props.id,
@@ -34940,13 +35067,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focusFirstElement(elementRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         }
       };
     });
     var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
-    var tabIndex = !props.disabled && props.tabIndex;
+    var tabIndex = props.disabled ? -1 : props.tabIndex;
     var otherProps = ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps);
     var className = classNames('p-button p-togglebutton p-component', {
       'p-button-icon-only': hasIcon && !hasLabel,
@@ -34998,8 +35128,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var elementRef = React__namespace.useRef(null);
     var otherProps = ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
     var toolbarClass = classNames('p-toolbar p-component', props.className);
-    var left = ObjectUtils.getJSXElement(props.left, props);
-    var right = ObjectUtils.getJSXElement(props.right, props);
+    var start = ObjectUtils.getJSXElement(props.left || props.start, props);
+    var center = ObjectUtils.getJSXElement(props.center, props);
+    var end = ObjectUtils.getJSXElement(props.right || props.end, props);
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
@@ -35015,10 +35146,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       style: props.style,
       role: "toolbar"
     }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-toolbar-group-left"
-    }, left), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-toolbar-group-right"
-    }, right));
+      className: "p-toolbar-group-start p-toolbar-group-left"
+    }, start), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "p-toolbar-group-center"
+    }, center), /*#__PURE__*/React__namespace.createElement("div", {
+      className: "p-toolbar-group-end p-toolbar-group-right"
+    }, end));
   }));
   Toolbar.displayName = 'Toolbar';
   Toolbar.defaultProps = {
@@ -35027,7 +35160,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     style: null,
     className: null,
     left: null,
-    right: null
+    right: null,
+    start: null,
+    center: null,
+    end: null
   };
 
   function _createForOfIteratorHelper$6(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$6(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -36158,7 +36294,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var wrapperStyle = {
         maxHeight: props.scrollHeight || 'auto'
       };
-      var className = classNames('p-treeselect-panel p-component', props.panelClassName);
+      var className = classNames('p-treeselect-panel p-component', props.panelClassName, {
+        'p-input-filled': PrimeReact.inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact.ripple === false
+      });
       return /*#__PURE__*/React__namespace.createElement(CSSTransition, {
         nodeRef: ref,
         classNames: "p-connected-overlay",
@@ -36504,6 +36643,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focus(focusInputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         }
@@ -38001,6 +38143,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       columnOrderState = _React$useState16[0],
       setColumnOrderState = _React$useState16[1];
     var elementRef = React__namespace.useRef(null);
+    var tableRef = React__namespace.useRef(null);
     var resizerHelperRef = React__namespace.useRef(null);
     var reorderIndicatorUpRef = React__namespace.useRef(null);
     var reorderIndicatorDownRef = React__namespace.useRef(null);
@@ -38273,7 +38416,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             resizeColGroup(_scrollableBodyTable, _resizeColumnIndex, newColumnWidth, null);
             resizeColGroup(_scrollableFooterTable, _resizeColumnIndex, newColumnWidth, null);
           } else {
-            table.style.width = table.offsetWidth + delta + 'px';
+            tableRef.current.style.width = tableRef.current.offsetWidth + delta + 'px';
             resizeColumn.current.style.width = newColumnWidth + 'px';
           }
         }
@@ -38831,6 +38974,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-treetable-wrapper"
       }, /*#__PURE__*/React__namespace.createElement("table", {
+        ref: tableRef,
         style: props.tableStyle,
         className: props.tableClassName
       }, header, footer, body));
@@ -39028,6 +39172,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return DomHandler.focusFirstElement(elementRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         }