primereact 8.7.3 → 9.0.0-beta.1

package/primereact.all.cjs.js

@@ -858,6 +858,11 @@ var DomHandler = /*#__PURE__*/function () {
     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() {
@@ -973,7 +978,7 @@ var DomHandler = /*#__PURE__*/function () {
   }, {
     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",
@@ -1027,6 +1032,22 @@ var DomHandler = /*#__PURE__*/function () {
         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) {
@@ -1480,11 +1501,10 @@ function mask(el, options) {
       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;
@@ -1534,7 +1554,7 @@ function mask(el, options) {
           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);
@@ -1704,8 +1724,7 @@ function mask(el, options) {
       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];
@@ -1874,13 +1893,10 @@ var ObjectUtils = /*#__PURE__*/function () {
   }, {
     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]);
       }
@@ -2178,7 +2194,7 @@ var FilterService = {
     },
     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;
@@ -2853,7 +2869,7 @@ var useOverlayListener = function useOverlayListener(_ref) {
     bindWindowResizeListener = _useResizeListener2[0],
     unbindWindowResizeListener = _useResizeListener2[1];
   var _useOverlayScrollList = useOverlayScrollListener({
-      target: targetRef,
+      target: target,
       listener: function listener(event) {
         _listener && _listener(event, {
           type: 'scroll',
@@ -2888,7 +2904,6 @@ var useOverlayListener = function useOverlayListener(_ref) {
   }, [target, overlay, when]);
   React__namespace.useEffect(function () {
     unbind();
-    // when && bind();
   }, [when]);
   useUnmountEffect(function () {
     unbind();
@@ -4872,11 +4887,14 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
       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);
@@ -4903,11 +4921,14 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
       }, 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);
@@ -4960,7 +4981,10 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
     }
   };
   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 || {});
@@ -5373,6 +5397,9 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     if (inputRef.current && !props.multiple) {
       updateInputField(props.value);
     }
+    if (overlayVisibleState) {
+      alignOverlay();
+    }
   });
   useUnmountEffect(function () {
     if (timeout.current) {
@@ -5386,6 +5413,9 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       search: search,
       show: show,
       hide: hide,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -8191,6 +8221,9 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       getCurrentDateTime: getCurrentDateTime,
       getViewDate: getViewDate,
       updateViewDate: updateViewDate,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -8302,7 +8335,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       disabled: switchViewButtonDisabled()
     }, monthNames[month]);
   };
-  var createTitleYearElement = function createTitleYearElement() {
+  var createTitleYearElement = function createTitleYearElement(metaYear) {
     if (props.yearNavigator) {
       var _yearOptions2 = [];
       var years = props.yearRange.split(':');
@@ -8349,11 +8382,12 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }
       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();
@@ -8514,7 +8548,11 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   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;
     }
@@ -8551,7 +8589,8 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   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"
@@ -8810,7 +8849,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           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);
       }));
@@ -8825,7 +8864,9 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     '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();
@@ -8871,6 +8912,7 @@ Calendar.defaultProps = {
   disabledDates: null,
   disabledDays: null,
   footerTemplate: null,
+  formatDateTime: null,
   headerTemplate: null,
   hideOnDateTimeSelect: false,
   hourFormat: '24',
@@ -8907,6 +8949,7 @@ Calendar.defaultProps = {
   onVisibleChange: null,
   panelClassName: null,
   panelStyle: null,
+  parseDateTime: null,
   placeholder: null,
   readOnlyInput: false,
   required: false,
@@ -8979,7 +9022,7 @@ var Captcha = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     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 () {
@@ -9030,14 +9073,15 @@ Captcha.displayName = 'Captcha';
 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) {
@@ -9815,7 +9859,10 @@ var CascadeSelectSub = /*#__PURE__*/React__namespace.memo(function (props) {
   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,
@@ -10015,6 +10062,9 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
       },
       getLabel: function getLabel() {
         return labelRef.current;
+      },
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
       }
     };
   });
@@ -10320,7 +10370,8 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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);
     }
   };
@@ -10330,6 +10381,9 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -10579,16 +10633,13 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     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);
         }
@@ -10599,8 +10650,11 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
         }
         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;
     }
@@ -10671,6 +10725,9 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -10790,7 +10847,9 @@ var ColorPickerPanel = /*#__PURE__*/React__namespace.forwardRef(function (props,
   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,
@@ -11208,6 +11267,9 @@ var ColorPicker = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       props: props,
       show: show,
       hide: hide,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -11437,10 +11499,11 @@ ColumnGroup.defaultProps = {
 };
 
 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],
@@ -11464,7 +11527,7 @@ var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   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',
@@ -11771,14 +11834,12 @@ var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     });
   };
   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) {
@@ -11787,13 +11848,6 @@ var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     }
   };
   useMountEffect(function () {
-    var unqiueId = UniqueComponentId();
-    if (!idState) {
-      setIdState(unqiueId);
-    }
-    if (!attributeSelector.current) {
-      attributeSelector.current = unqiueId;
-    }
     if (props.visible) {
       setMaskVisibleState(true);
     }
@@ -11935,7 +11989,9 @@ var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     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,
@@ -12286,7 +12342,7 @@ var ConfirmPopup = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
         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;
       },
@@ -12457,7 +12513,10 @@ var ConfirmPopup = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   };
   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, {
@@ -12843,7 +12902,10 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   });
   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",
@@ -13335,16 +13397,11 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
         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) {
@@ -13354,11 +13411,6 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       event.preventDefault();
     }
   };
-  var onUpButtonTouchEnd = function onUpButtonTouchEnd() {
-    if (!props.disabled && !props.readOnly) {
-      clearTimer();
-    }
-  };
   var onUpButtonMouseUp = function onUpButtonMouseUp() {
     if (!props.disabled && !props.readOnly) {
       clearTimer();
@@ -13379,17 +13431,6 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       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);
@@ -13963,6 +14004,9 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getFormatter: getFormatter,
       getElement: function getElement() {
         return elementRef.current;
@@ -14033,13 +14077,11 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     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", {
@@ -14054,13 +14096,11 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     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", {
@@ -14587,7 +14627,10 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
     }
   };
   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, {
@@ -14701,6 +14744,12 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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))) {
@@ -15127,6 +15176,9 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       props: props,
       show: show,
       hide: hide,
+      focus: function focus() {
+        return DomHandler.focus(focusInputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -15156,10 +15208,10 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
   }, [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('');
@@ -15246,15 +15298,20 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   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",
@@ -15262,9 +15319,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       "aria-haspopup": "listbox",
       "aria-expanded": overlayVisibleState,
       "aria-label": ariaLabel
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: iconClassName
-    }));
+    }, icon);
   };
   var visibleOptions = getVisibleOptions();
   var selectedOption = getSelectedOption();
@@ -15331,6 +15386,7 @@ Dropdown.defaultProps = {
   ariaLabelledBy: null,
   autoFocus: false,
   className: null,
+  clearIcon: 'pi pi-times',
   dataKey: null,
   disabled: false,
   dropdownIcon: 'pi pi-chevron-down',
@@ -15719,7 +15775,8 @@ var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   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();
     }
@@ -15773,7 +15830,8 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   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();
     }
@@ -15840,7 +15898,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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) {
@@ -15867,7 +15925,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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));
@@ -16002,14 +16060,14 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       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);
         }
@@ -16025,7 +16083,10 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -16992,7 +17053,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     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);
@@ -17469,14 +17530,14 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     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
         });
       }
     }
@@ -18602,7 +18663,8 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   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();
     }
@@ -19484,7 +19546,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       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) {
@@ -19645,7 +19707,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
         });
       }) : [];
       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,
@@ -19993,6 +20055,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       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;
@@ -20284,8 +20349,11 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   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();
@@ -20389,7 +20457,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       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",
@@ -22305,6 +22373,9 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       },
       getFiles: function getFiles() {
         return filesState;
+      },
+      setFiles: function setFiles(files) {
+        return setFilesState(files || []);
       }
     };
   });
@@ -22383,6 +22454,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
         removeElement: removeButton,
         formatSize: formatSize(file.size),
         element: content,
+        index: index,
         props: props
       };
       content = ObjectUtils.getJSXElement(props.itemTemplate, file, defaultContentOptions);
@@ -23215,7 +23287,9 @@ var Galleria = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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",
@@ -24011,11 +24085,10 @@ var InputMask = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       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;
@@ -24065,7 +24138,7 @@ var InputMask = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
           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);
@@ -24254,8 +24327,7 @@ var InputMask = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         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];
@@ -24287,6 +24359,9 @@ var InputMask = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }
@@ -24409,11 +24484,14 @@ var InputSwitch = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   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;
       }
     };
   });
@@ -25153,6 +25231,9 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focusFirstElement(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -25996,6 +26077,9 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       props: props,
       show: show,
       hide: hide,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -26347,7 +26431,9 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     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, {
@@ -27153,7 +27239,9 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
     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();
@@ -27703,6 +27791,9 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       props: props,
       show: show,
       hide: hide,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -27966,6 +28057,9 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React_
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focusFirstElement(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }
@@ -28954,7 +29048,10 @@ var OverlayPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref
   };
   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,
@@ -29719,6 +29816,9 @@ var Password = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -29768,7 +29868,10 @@ var Password = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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%'
@@ -30716,7 +30819,8 @@ var RadioButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     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);
     }
   };
@@ -30732,6 +30836,9 @@ var RadioButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     return {
       props: props,
       select: select,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -31378,6 +31485,9 @@ var SelectButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focusFirstElement(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }
@@ -31553,6 +31663,15 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       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);
@@ -31578,7 +31697,10 @@ var Sidebar = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   };
   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,
@@ -32634,8 +32756,9 @@ var SplitButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
       _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);
@@ -33715,7 +33838,7 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     updateScrollBar(index);
   };
   var _onKeyDown = function onKeyDown(event, tab, index) {
-    if (event.code === 'Enter') {
+    if (event.key === 'Enter') {
       onTabHeaderClick(event, tab, index);
     }
   };
@@ -34106,6 +34229,9 @@ var Terminal = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }
@@ -34530,7 +34656,9 @@ var TieredMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   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,
@@ -34623,25 +34751,21 @@ var Timeline = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   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) {
@@ -34847,7 +34971,10 @@ var Toast = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   });
   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,
@@ -34945,13 +35072,16 @@ var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   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,
@@ -35003,8 +35133,9 @@ var Toolbar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   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,
@@ -35020,10 +35151,12 @@ var Toolbar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     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 = {
@@ -35032,7 +35165,10 @@ Toolbar.defaultProps = {
   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; } } }; }
@@ -36163,7 +36299,10 @@ var TreeSelectPanel = /*#__PURE__*/React__namespace.forwardRef(function (props,
     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",
@@ -36509,6 +36648,9 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(focusInputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }
@@ -38006,6 +38148,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     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);
@@ -38278,7 +38421,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
           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';
         }
       }
@@ -38836,6 +38979,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     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));
@@ -39033,6 +39177,9 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focusFirstElement(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }