primereact 8.0.0-rc.2 → 8.1.0

package/primereact.all.esm.js

@@ -186,9 +186,9 @@ _defineProperty(PrimeReact, "filterMatchModeOptions", {
   date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
 });
 
-function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$A(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var locales = {
   'en': {
     startsWith: 'Starts with',
@@ -232,7 +232,17 @@ var locales = {
     strong: 'Strong',
     passwordPrompt: 'Enter a password',
     emptyFilterMessage: 'No available options',
-    emptyMessage: 'No results found'
+    emptyMessage: 'No results found',
+    aria: {
+      trueLabel: 'True',
+      falseLabel: 'False',
+      nullLabel: 'Not Selected',
+      pageLabel: 'Page',
+      firstPageLabel: 'First Page',
+      lastPageLabel: 'Last Page',
+      nextPageLabel: 'Next Page',
+      previousPageLabel: 'Previous Page'
+    }
   }
 };
 
@@ -245,7 +255,7 @@ function locale(locale) {
 }
 
 function addLocale(locale, options) {
-  locales[locale] = _objectSpread$z(_objectSpread$z({}, locales['en']), options);
+  locales[locale] = _objectSpread$A(_objectSpread$A({}, locales['en']), options);
 }
 
 function updateLocaleOption(key, value, locale) {
@@ -255,7 +265,7 @@ function updateLocaleOption(key, value, locale) {
 function updateLocaleOptions(options, locale) {
   var _locale = locale || PrimeReact.locale;
 
-  locales[_locale] = _objectSpread$z(_objectSpread$z({}, locales[_locale]), options);
+  locales[_locale] = _objectSpread$A(_objectSpread$A({}, locales[_locale]), options);
 }
 
 function localeOption(key, locale) {
@@ -268,6 +278,16 @@ function localeOption(key, locale) {
   }
 }
 
+function ariaLabel(key) {
+  var _locale = PrimeReact.locale;
+
+  try {
+    return localeOptions(_locale)['aria'][key];
+  } catch (error) {
+    throw new Error("The ".concat(key, " option is not found in the current locale('").concat(_locale, "')."));
+  }
+}
+
 function localeOptions(locale) {
   var _locale = locale || PrimeReact.locale;
 
@@ -1640,9 +1660,9 @@ function EventBus() {
   };
 }
 
-function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function mask(el, options) {
   var defaultOptions = {
     mask: null,
@@ -1655,7 +1675,7 @@ function mask(el, options) {
     onFocus: null,
     onBlur: null
   };
-  options = _objectSpread$y(_objectSpread$y({}, defaultOptions), options);
+  options = _objectSpread$z(_objectSpread$z({}, defaultOptions), options);
   var tests, partialPosition, len, firstNonMaskPos, defs, androidChrome, lastRequiredNonMaskPos, oldVal, focusText, caretTimeoutId, buffer, defaultBuffer;
 
   var caret = function caret(first, last) {
@@ -2363,9 +2383,9 @@ var ObjectUtils = /*#__PURE__*/function () {
   return ObjectUtils;
 }();
 
-function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var IconUtils = /*#__PURE__*/function () {
   function IconUtils() {
@@ -2388,7 +2408,7 @@ var IconUtils = /*#__PURE__*/function () {
         }));
 
         if (iconType !== 'string') {
-          var defaultContentOptions = _objectSpread$x({
+          var defaultContentOptions = _objectSpread$y({
             iconProps: iconProps,
             element: content
           }, options);
@@ -2994,6 +3014,57 @@ var useInterval = function useInterval(fn) {
 };
 /* eslint-enable */
 
+/**
+ * Hook to wrap around useState that stores the value in the browser local/session storage.
+ *
+ * @param {any} initialValue the initial value to store
+ * @param {string} key the key to store the value in local/session storage
+ * @param {string} storage either 'local' or 'session' for what type of storage
+ * @returns a stateful value, and a function to update it.
+ */
+
+var useStorage = function useStorage(initialValue, key) {
+  var storage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'local';
+  // Since the local storage API isn't available in server-rendering environments, 
+  // we check that typeof window !== 'undefined' to make SSR and SSG work properly.
+  var storageAvailable = typeof window !== 'undefined';
+
+  var _React$useState = React.useState(function () {
+    if (!storageAvailable) {
+      return initialValue;
+    }
+
+    try {
+      var item = storage === 'local' ? window.localStorage.getItem(key) : window.sessionStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      return initialValue;
+    }
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      storedValue = _React$useState2[0],
+      setStoredValue = _React$useState2[1];
+
+  var setValue = function setValue(value) {
+    try {
+      // Allow value to be a function so we have same API as useState
+      var valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+
+      if (storageAvailable) {
+        var serializedValue = JSON.stringify(valueToStore);
+        storage === 'local' ? window.localStorage.setItem(key, serializedValue) : window.sessionStorage.setItem(key, serializedValue);
+      }
+    } catch (error) {
+      throw new Error("PrimeReact useStorage: Failed to serialize the value at key: ".concat(key));
+    }
+  };
+
+  return [storedValue, setValue];
+};
+/* eslint-enable */
+
 /* eslint-disable */
 var useTimeout = function useTimeout(fn) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -3025,9 +3096,9 @@ var useTimeout = function useTimeout(fn) {
 };
 /* eslint-enable */
 
-function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CSSTransition = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var disabled = props.disabled || props.options && props.options.disabled || !PrimeReact.cssTransition;
 
@@ -3103,7 +3174,7 @@ var CSSTransition = /*#__PURE__*/React.forwardRef(function (props, ref) {
       unmountOnExit: props.unmountOnExit
     };
 
-    var mergedProps = _objectSpread$w(_objectSpread$w(_objectSpread$w({}, mutableProps), props.options || {}), immutableProps);
+    var mergedProps = _objectSpread$x(_objectSpread$x(_objectSpread$x({}, mutableProps), props.options || {}), immutableProps);
 
     return /*#__PURE__*/React.createElement(CSSTransition$1, mergedProps, props.children);
   }
@@ -3113,9 +3184,9 @@ CSSTransition.defaultProps = {
   __TYPE: 'CSSTransition'
 };
 
-function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AccordionTab = function AccordionTab() {};
 var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(props.id),
@@ -3180,7 +3251,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
 
   var createTabHeader = function createTabHeader(tab, selected, index) {
-    var style = _objectSpread$v(_objectSpread$v({}, tab.props.style || {}), tab.props.headerStyle || {});
+    var style = _objectSpread$w(_objectSpread$w({}, tab.props.style || {}), tab.props.headerStyle || {});
 
     var className = classNames('p-accordion-header', {
       'p-highlight': selected,
@@ -3216,7 +3287,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var createTabContent = function createTabContent(tab, selected, index) {
-    var style = _objectSpread$v(_objectSpread$v({}, tab.props.style || {}), tab.props.contentStyle || {});
+    var style = _objectSpread$w(_objectSpread$w({}, tab.props.style || {}), tab.props.contentStyle || {});
 
     var className = classNames('p-toggleable-content', tab.props.contentClassName, tab.props.className);
     var contentId = idState + '_content_' + index;
@@ -4009,7 +4080,7 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pr
   var icon = createIcon();
   var label = createLabel();
   var badge = createBadge();
-  var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : '';
+  var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", _extends({
     ref: elementRef,
     "aria-label": defaultAriaLabel
@@ -4225,9 +4296,9 @@ InputText.defaultProps = {
 
 var OverlayService = EventBus();
 
-function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var vertical = props.orientation === 'vertical';
   var horizontal = props.orientation === 'horizontal';
@@ -4769,7 +4840,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
 
   var loaderOptions = function loaderOptions(index, extOptions) {
     var count = loaderArrState.length;
-    return _objectSpread$u({
+    return _objectSpread$v({
       index: index,
       count: count,
       first: index === 0,
@@ -4989,9 +5060,9 @@ VirtualScroller.defaultProps = {
   onLazyLoad: null
 };
 
-function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
@@ -5048,8 +5119,8 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
 
   var createContent = function createContent() {
     if (props.virtualScrollerOptions) {
-      var virtualScrollerProps = _objectSpread$t(_objectSpread$t({}, props.virtualScrollerOptions), {
-        style: _objectSpread$t(_objectSpread$t({}, props.virtualScrollerOptions.style), {
+      var virtualScrollerProps = _objectSpread$u(_objectSpread$u({}, props.virtualScrollerOptions), {
+        style: _objectSpread$u(_objectSpread$u({}, props.virtualScrollerOptions.style), {
           height: props.scrollHeight
         }),
         items: props.suggestions,
@@ -5083,7 +5154,7 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
   var createElement = function createElement() {
     var className = classNames('p-autocomplete-panel p-component', props.panelClassName);
 
-    var style = _objectSpread$t({
+    var style = _objectSpread$u({
       maxHeight: props.scrollHeight
     }, props.panelStyle || {});
 
@@ -5578,7 +5649,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 
   var createSimpleAutoComplete = function createSimpleAutoComplete() {
     var value = formatValue(props.value);
-    var ariaControls = idState + '_list';
+    var ariaControls = overlayVisibleState ? idState + '_list' : null;
     var className = classNames('p-autocomplete-input', props.inputClassName, {
       'p-autocomplete-dd-input': props.dropdown
     });
@@ -5588,10 +5659,13 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       type: props.type,
       name: props.name,
       defaultValue: value,
-      role: "searchbox",
+      role: "combobox",
       "aria-autocomplete": "list",
       "aria-controls": ariaControls,
-      "aria-labelledby": props.ariaLabelledBy,
+      "aria-haspopup": "listbox",
+      "aria-expanded": overlayVisibleState,
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label'],
       className: className,
       style: props.inputStyle,
       autoComplete: "off",
@@ -5638,7 +5712,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   };
 
   var createMultiInput = function createMultiInput() {
-    var ariaControls = idState + '_list';
+    var ariaControls = overlayVisibleState ? idState + '_list' : null;
     return /*#__PURE__*/React.createElement("li", {
       className: "p-autocomplete-input-token"
     }, /*#__PURE__*/React.createElement("input", {
@@ -5646,10 +5720,13 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       type: props.type,
       disabled: props.disabled,
       placeholder: props.placeholder,
-      role: "searchbox",
+      role: "combobox",
       "aria-autocomplete": "list",
       "aria-controls": ariaControls,
-      "aria-labelledby": props.ariaLabelledBy,
+      "aria-haspopup": "listbox",
+      "aria-expanded": overlayVisibleState,
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label'],
       autoComplete: "off",
       tabIndex: props.tabIndex,
       onChange: onInputChange,
@@ -5726,10 +5803,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     ref: elementRef,
     id: idState,
     style: props.style,
-    className: className,
-    "aria-haspopup": "listbox",
-    "aria-expanded": overlayVisibleState,
-    "aria-owns": listId
+    className: className
   }, otherProps), input, loader, dropdown, /*#__PURE__*/React.createElement(AutoCompletePanel, _extends({
     ref: overlayRef,
     virtualScrollerRef: virtualScrollerRef
@@ -5791,13 +5865,14 @@ AutoComplete.defaultProps = {
   autoFocus: false,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   completeMethod: null,
   itemTemplate: null,
   selectedItemTemplate: null,
   transitionOptions: null,
   dropdownIcon: 'pi pi-chevron-down',
   removeIcon: 'pi pi-times-circle',
+  'aria-label': null,
+  'aria-labelledby': null,
   onChange: null,
   onFocus: null,
   onBlur: null,
@@ -6043,7 +6118,8 @@ var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
           url = home.url,
           disabled = home.disabled,
           style = home.style,
-          _className = home.className;
+          _className = home.className,
+          template = home.template;
 
       var _className2 = classNames('p-breadcrumb-home', {
         'p-disabled': disabled
@@ -6054,10 +6130,7 @@ var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       }, {
         props: props
       });
-      return /*#__PURE__*/React.createElement("li", {
-        className: _className2,
-        style: style
-      }, /*#__PURE__*/React.createElement("a", {
+      var content = /*#__PURE__*/React.createElement("a", {
         href: url || '#',
         className: "p-menuitem-link",
         "aria-disabled": disabled,
@@ -6065,7 +6138,25 @@ var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         onClick: function onClick(event) {
           return itemClick(event, home);
         }
-      }, icon));
+      }, icon);
+
+      if (template) {
+        var defaultContentOptions = {
+          onClick: function onClick(event) {
+            return itemClick(event, home);
+          },
+          className: 'p-menuitem-link',
+          labelClassName: 'p-menuitem-text',
+          element: content,
+          props: props
+        };
+        content = ObjectUtils.getJSXElement(template, home, defaultContentOptions);
+      }
+
+      return /*#__PURE__*/React.createElement("li", {
+        className: _className2,
+        style: style
+      }, content);
     }
 
     return null;
@@ -8648,7 +8739,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }), /*#__PURE__*/React.createElement(Ripple, null));
   };
 
-  var createTitleMonthElement = function createTitleMonthElement() {
+  var createTitleMonthElement = function createTitleMonthElement(month) {
     var monthNames = localeOption('monthNames', props.locale);
 
     if (props.monthNavigator && props.view !== 'month') {
@@ -8700,7 +8791,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       className: "p-datepicker-month p-link",
       onClick: switchToMonthView,
       disabled: switchViewButtonDisabled()
-    }, monthNames[currentMonth]);
+    }, monthNames[month]);
   };
 
   var createTitleYearElement = function createTitleYearElement() {
@@ -9454,6 +9545,7 @@ var Captcha = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
 
       script.onload = function () {
         if (!window.grecaptcha) {
+          // eslint-disable-next-line no-console
           console.warn('Recaptcha is not loaded');
           return;
         }
@@ -9603,7 +9695,6 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var itemsContainerRef = React.useRef(null);
   var remainingItems = React.useRef(0);
   var allowAutoplay = React.useRef(!!props.autoplayInterval);
-  var circular = React.useRef(props.circular || !!props.autoplayInterval);
   var attributeSelector = React.useRef('');
   var swipeThreshold = React.useRef(20);
   var startPos = React.useRef(null);
@@ -9616,10 +9707,11 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var prevValue = usePrevious(props.value);
   var prevPage = usePrevious(props.page);
   var isVertical = props.orientation === 'vertical';
-  var isCircular = circular && props.value.length >= numVisibleState;
-  var isAutoplay = props.autoplayInterval && allowAutoplay.current;
+  var circular = props.circular || !!props.autoplayInterval;
+  var isCircular = circular && props.value && props.value.length >= numVisibleState;
   var currentPage = props.onPageChange ? props.page : pageState;
-  var totalIndicators = props.value ? Math.ceil((props.value.length - numVisibleState) / numScrollState) + 1 : 0;
+  var totalIndicators = props.value ? Math.max(Math.ceil((props.value.length - numVisibleState) / numScrollState) + 1, 0) : 0;
+  var isAutoplay = totalIndicators && props.autoplayInterval && allowAutoplay.current;
 
   var _useResizeListener = useResizeListener({
     listener: function listener() {
@@ -9658,7 +9750,7 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       page = 0;
     } else if (isCircular && pageState === 0 && dir === 1) {
       totalShiftedItems = 0;
-      page = totalShiftedItems - 1;
+      page = totalIndicators - 1;
     } else if (page === totalIndicators - 1 && remainingItems.current > 0) {
       totalShiftedItems += remainingItems.current * -1 - numScrollState * dir;
       isRemainingItemsAdded.current = true;
@@ -9871,7 +9963,7 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       remainingItems.current = (props.value.length - numVisibleState) % numScrollState;
       var page = currentPage;
 
-      if (totalIndicators !== 0 && pageState >= totalIndicators) {
+      if (totalIndicators !== 0 && page >= totalIndicators) {
         page = totalIndicators - 1;
 
         if (props.onPageChange) {
@@ -10053,14 +10145,14 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       'pi-chevron-left': !isVertical,
       'pi-chevron-up': isVertical
     });
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement(Button, {
       type: "button",
       className: className,
+      icon: iconClassName,
       onClick: navBackward,
-      disabled: isDisabled
-    }, /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
-    }), /*#__PURE__*/React.createElement(Ripple, null));
+      disabled: isDisabled,
+      "aria-label": ariaLabel('previousPageLabel')
+    });
   };
 
   var createForwardNavigator = function createForwardNavigator() {
@@ -10072,32 +10164,33 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       'pi-chevron-right': !isVertical,
       'pi-chevron-down': isVertical
     });
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement(Button, {
       type: "button",
       className: className,
+      icon: iconClassName,
       onClick: navForward,
-      disabled: isDisabled
-    }, /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
-    }), /*#__PURE__*/React.createElement(Ripple, null));
+      disabled: isDisabled,
+      "aria-label": ariaLabel('nextPageLabel')
+    });
   };
 
   var createIndicator = function createIndicator(index) {
     var isActive = currentPage === index;
-    var key = 'p-carousel-indicator-' + index;
+    var key = 'carousel-indicator-' + index;
     var className = classNames('p-carousel-indicator', {
       'p-highlight': isActive
     });
     return /*#__PURE__*/React.createElement("li", {
       key: key,
       className: className
-    }, /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement(Button, {
       type: "button",
       className: "p-link",
       onClick: function onClick(e) {
         return onDotClick(e, index);
-      }
-    }, /*#__PURE__*/React.createElement(Ripple, null)));
+      },
+      "aria-label": "".concat(ariaLabel('pageLabel'), " ").concat(index + 1)
+    }));
   };
 
   var createIndicators = function createIndicators() {
@@ -10446,7 +10539,8 @@ var CascadeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
   };
 
   var getOptionLabel = function getOptionLabel(option) {
-    return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
+    var label = props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
+    return label || option;
   };
 
   var getOptionValue = function getOptionValue(option) {
@@ -10869,7 +10963,6 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       });
       inputRef.current.checked = !_checked;
       inputRef.current.focus();
-      event.preventDefault();
     }
   };
 
@@ -11111,14 +11204,18 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
       var values = props.value ? _toConsumableArray(props.value) : [];
 
       if (props.allowDuplicate || values.indexOf(item) === -1) {
-        values.push(item);
+        var allowAddition = true;
 
         if (props.onAdd) {
-          props.onAdd({
+          allowAddition = props.onAdd({
             originalEvent: event,
             value: item
           });
         }
+
+        if (allowAddition !== false) {
+          values.push(item);
+        }
       }
 
       updateInput(event, values, preventDefault);
@@ -12019,7 +12116,8 @@ Column.defaultProps = {
   rowReorderIcon: 'pi pi-bars',
   rowEditor: false,
   exportable: true,
-  reorderable: true
+  reorderable: true,
+  resizeable: true
 };
 
 var ColumnGroup = function ColumnGroup() {};
@@ -12680,19 +12778,19 @@ Dialog.defaultProps = {
   onMaskClick: null
 };
 
-function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var confirmDialog = function confirmDialog() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  props = _objectSpread$s(_objectSpread$s({}, props), {
+  props = _objectSpread$t(_objectSpread$t({}, props), {
     visible: props.visible === undefined ? true : props.visible
   });
   props.visible && OverlayService.emit('confirm-dialog', props);
 
   var show = function show() {
     var updatedProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    OverlayService.emit('confirm-dialog', _objectSpread$s(_objectSpread$s(_objectSpread$s({}, props), updatedProps), {
+    OverlayService.emit('confirm-dialog', _objectSpread$t(_objectSpread$t(_objectSpread$t({}, props), updatedProps), {
       visible: true
     }));
   };
@@ -12882,19 +12980,19 @@ ConfirmDialog.defaultProps = {
   reject: null
 };
 
-function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var confirmPopup = function confirmPopup() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  props = _objectSpread$r(_objectSpread$r({}, props), {
+  props = _objectSpread$s(_objectSpread$s({}, props), {
     visible: props.visible === undefined ? true : props.visible
   });
   props.visible && OverlayService.emit('confirm-popup', props);
 
   var show = function show() {
     var updatedProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    OverlayService.emit('confirm-popup', _objectSpread$r(_objectSpread$r(_objectSpread$r({}, props), updatedProps), {
+    OverlayService.emit('confirm-popup', _objectSpread$s(_objectSpread$s(_objectSpread$s({}, props), updatedProps), {
       visible: true
     }));
   };
@@ -13830,9 +13928,9 @@ DataScroller.defaultProps = {
   lazy: false
 };
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CurrentPageReport = /*#__PURE__*/React.memo(function (props) {
   var report = {
     currentPage: props.page + 1,
@@ -13848,7 +13946,7 @@ var CurrentPageReport = /*#__PURE__*/React.memo(function (props) {
   }, text);
 
   if (props.template) {
-    var defaultOptions = _objectSpread$q(_objectSpread$q({}, report), {
+    var defaultOptions = _objectSpread$r(_objectSpread$r({}, report), {
       className: 'p-paginator-current',
       element: element,
       props: props
@@ -13876,14 +13974,14 @@ var FirstPageLink = /*#__PURE__*/React.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-double-left';
-  var element = /*#__PURE__*/React.createElement("button", {
+  var element = /*#__PURE__*/React.createElement(Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React.createElement(Ripple, null));
+    disabled: props.disabled,
+    "aria-label": ariaLabel('firstPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -13907,9 +14005,9 @@ FirstPageLink.defaultProps = {
   template: null
 };
 
-function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -13987,7 +14085,7 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
 
   var getDecimalExpression = function getDecimalExpression() {
-    var formatter = new Intl.NumberFormat(props.locale, _objectSpread$p(_objectSpread$p({}, getOptions()), {}, {
+    var formatter = new Intl.NumberFormat(props.locale, _objectSpread$q(_objectSpread$q({}, getOptions()), {}, {
       useGrouping: false
     }));
     return new RegExp("[".concat(formatter.format(1.1).replace(_currency.current, '').trim().replace(_numeral.current, ''), "]"), 'g');
@@ -14110,21 +14208,36 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     if (inputRef.current) {
       var step = props.step * dir;
       var currentValue = parseValue(inputRef.current.value) || 0;
-      var newValue = validateValue(currentValue + step);
-      updateInput(newValue, null, 'spin');
+      var newValue = validateValue(currentValue + step); // 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) {
     if (!props.disabled && !props.readOnly) {
-      inputRef.current.focus();
+      props.autoFocus && inputRef.current.focus();
       repeat(event, null, 1);
       event.preventDefault();
     }
   };
 
+  var onUpButtonTouchEnd = function onUpButtonTouchEnd() {
+    if (!props.disabled && !props.readOnly) {
+      clearTimer();
+      event.preventDefault();
+    }
+  };
+
   var onUpButtonMouseUp = function onUpButtonMouseUp() {
     if (!props.disabled && !props.readOnly) {
       clearTimer();
@@ -14149,9 +14262,23 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     }
   };
 
+  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();
+      event.preventDefault();
+    }
+  };
+
   var onDownButtonMouseDown = function onDownButtonMouseDown(event) {
     if (!props.disabled && !props.readOnly) {
-      inputRef.current.focus();
+      props.autoFocus && inputRef.current.focus();
       repeat(event, null, -1);
       event.preventDefault();
     }
@@ -14895,6 +15022,8 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       onMouseUp: onUpButtonMouseUp,
       onKeyDown: onUpButtonKeyDown,
       onKeyUp: onUpButtonKeyUp,
+      onTouchStart: onUpButtonTouchStart,
+      onTouchEnd: onUpButtonTouchEnd,
       disabled: props.disabled,
       tabIndex: -1
     }, /*#__PURE__*/React.createElement("span", {
@@ -14915,6 +15044,8 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       onMouseUp: onDownButtonMouseUp,
       onKeyDown: onDownButtonKeyDown,
       onKeyUp: onDownButtonKeyUp,
+      onTouchStart: onDownButtonTouchStart,
+      onTouchEnd: onDownButtonTouchEnd,
       disabled: props.disabled,
       tabIndex: -1
     }, /*#__PURE__*/React.createElement("span", {
@@ -15054,14 +15185,14 @@ var LastPageLink = /*#__PURE__*/React.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-double-right';
-  var element = /*#__PURE__*/React.createElement("button", {
+  var element = /*#__PURE__*/React.createElement(Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React.createElement(Ripple, null));
+    disabled: props.disabled,
+    "aria-label": ariaLabel('lastPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -15090,14 +15221,14 @@ var NextPageLink = /*#__PURE__*/React.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-right';
-  var element = /*#__PURE__*/React.createElement("button", {
+  var element = /*#__PURE__*/React.createElement(Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React.createElement(Ripple, null));
+    disabled: props.disabled,
+    "aria-label": ariaLabel('nextPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -15144,13 +15275,14 @@ var PageLinks = /*#__PURE__*/React.memo(function (props) {
         'p-paginator-page-end': pageLink === endPageInView,
         'p-highlight': pageLink - 1 === props.page
       });
-      var element = /*#__PURE__*/React.createElement("button", {
+      var element = /*#__PURE__*/React.createElement(Button, {
         type: "button",
         className: className,
         onClick: function onClick(e) {
           return onPageLinkClick(e, pageLink);
-        }
-      }, pageLink, /*#__PURE__*/React.createElement(Ripple, null));
+        },
+        "aria-label": "".concat(ariaLabel('pageLabel'), " ").concat(pageLink + 1)
+      }, pageLink);
 
       if (props.template) {
         var defaultOptions = {
@@ -15197,14 +15329,14 @@ var PrevPageLink = /*#__PURE__*/React.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-left';
-  var element = /*#__PURE__*/React.createElement("button", {
+  var element = /*#__PURE__*/React.createElement(Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React.createElement(Ripple, null));
+    disabled: props.disabled,
+    "aria-label": ariaLabel('previousPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -15255,9 +15387,9 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
 });
 DropdownItem.displayName = 'DropdownItem';
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var virtualScrollerRef = React.useRef(null);
   var filterInputRef = React.useRef(null);
@@ -15395,14 +15527,14 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
 
   var createContent = function createContent() {
     if (props.virtualScrollerOptions) {
-      var virtualScrollerProps = _objectSpread$o(_objectSpread$o({}, props.virtualScrollerOptions), {
-        style: _objectSpread$o(_objectSpread$o({}, props.virtualScrollerOptions.style), {
+      var virtualScrollerProps = _objectSpread$p(_objectSpread$p({}, props.virtualScrollerOptions), {
+        style: _objectSpread$p(_objectSpread$p({}, props.virtualScrollerOptions.style), {
           height: props.scrollHeight
         }),
         className: classNames('p-dropdown-items-wrapper', props.virtualScrollerOptions.className),
         items: props.visibleOptions,
         onLazyLoad: function onLazyLoad(event) {
-          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$o(_objectSpread$o({}, event), {
+          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$p(_objectSpread$p({}, event), {
             filter: props.filterValue
           }));
         },
@@ -15472,9 +15604,9 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
 }));
 DropdownPanel.displayName = 'DropdownPanel';
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createForOfIteratorHelper$b(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$b(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; } } }; }
 
@@ -15542,7 +15674,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
             var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
 
             if (filteredSubOptions && filteredSubOptions.length) {
-              filteredGroups.push(_objectSpread$n(_objectSpread$n({}, optgroup), {
+              filteredGroups.push(_objectSpread$o(_objectSpread$o({}, optgroup), {
                 items: filteredSubOptions
               }));
             }
@@ -15611,16 +15743,11 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       case 38:
         onUpKey(event);
         break;
-      //space
+      //space and enter
 
       case 32:
-        overlayVisibleState ? hide() : show();
-        event.preventDefault();
-        break;
-      //enter
-
       case 13:
-        hide();
+        overlayVisibleState ? hide() : show();
         event.preventDefault();
         break;
       //escape and tab
@@ -16762,9 +16889,9 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
 });
 RowRadioButton.displayName = 'RowRadioButton';
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(props.editing),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -16859,7 +16986,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
 
   var getCellCallbackParams = function getCellCallbackParams(event) {
     var params = getCellParams();
-    return _objectSpread$m({
+    return _objectSpread$n({
       originalEvent: event
     }, params);
   };
@@ -16906,7 +17033,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     var newRowData = editingRowDataState;
     var newValue = resolveFieldData(newRowData);
 
-    var params = _objectSpread$m(_objectSpread$m({}, callbackParams), {}, {
+    var params = _objectSpread$n(_objectSpread$n({}, callbackParams), {}, {
       newRowData: newRowData,
       newValue: newValue
     });
@@ -16987,7 +17114,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
 
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$m({}, styleObjectState);
+      var styleObject = _objectSpread$n({}, styleObjectState);
 
       var align = getColumnProp('alignFrozen');
 
@@ -17017,7 +17144,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
 
   var editorCallback = function editorCallback(val) {
-    var editingRowData = _objectSpread$m({}, editingRowDataState);
+    var editingRowData = _objectSpread$n({}, editingRowDataState);
 
     editingRowData[field] = val;
     setEditingRowDataState(editingRowData); // update editing meta for complete methods on row mode
@@ -17249,7 +17376,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       var callbackParams = getCellCallbackParams();
 
-      var params = _objectSpread$m(_objectSpread$m({}, callbackParams), {}, {
+      var params = _objectSpread$n(_objectSpread$n({}, callbackParams), {}, {
         editing: editingState,
         editingKey: editingKey
       });
@@ -17384,6 +17511,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         };
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
           type: "button",
+          name: "row-save",
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex
@@ -17391,6 +17519,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
           className: rowEditorProps.saveIconClassName
         }), /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", {
           type: "button",
+          name: "row-cancel",
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
@@ -17406,6 +17535,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
         };
         content = /*#__PURE__*/React.createElement("button", {
           type: "button",
+          name: "row-edit",
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex
@@ -17478,9 +17608,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
 });
 BodyCell.displayName = 'BodyCell';
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BodyRow = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -17722,7 +17852,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
 
       if (dataKey) {
         var dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
-        editingRows = props.editingRows ? _objectSpread$l({}, props.editingRows) : {};
+        editingRows = props.editingRows ? _objectSpread$m({}, props.editingRows) : {};
 
         if (!isEditing) {
           delete editingRows[dataKeyValue]; // if the key value was changed, stop editing for the new key value too
@@ -17915,9 +18045,9 @@ RowTogglerButton.displayName = 'RowTogglerButton';
 
 var _excluded = ["originalEvent"];
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TableBody = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18359,7 +18489,7 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   };
 
   var onSelect = function onSelect(event) {
-    if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$k(_objectSpread$k({
+    if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$l(_objectSpread$l({
       originalEvent: event.originalEvent
     }, event.data), {}, {
       type: event.type
@@ -18367,7 +18497,7 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   };
 
   var onUnselect = function onUnselect(event) {
-    if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$k(_objectSpread$k({
+    if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$l(_objectSpread$l({
       originalEvent: event.originalEvent
     }, event.data), {}, {
       type: event.type
@@ -18436,12 +18566,12 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
         anchorRowFirst.current = props.first;
 
         if (isSingleSelection()) {
-          onSingleSelection(_objectSpread$k(_objectSpread$k({}, event), {}, {
+          onSingleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
             toggleable: toggleable,
             type: 'row'
           }));
         } else {
-          onMultipleSelection(_objectSpread$k(_objectSpread$k({}, event), {}, {
+          onMultipleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
             toggleable: toggleable,
             type: 'row'
           }));
@@ -18521,7 +18651,7 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
 
     if (hasDataKey) {
       var dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
-      expandedRows = props.expandedRows ? _objectSpread$k({}, props.expandedRows) : {};
+      expandedRows = props.expandedRows ? _objectSpread$l({}, props.expandedRows) : {};
 
       if (expandedRows[dataKeyValue] != null) {
         delete expandedRows[dataKeyValue];
@@ -18657,14 +18787,14 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   };
 
   var onRadioChange = function onRadioChange(event) {
-    onSingleSelection(_objectSpread$k(_objectSpread$k({}, event), {}, {
+    onSingleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
       toggleable: true,
       type: 'radio'
     }));
   };
 
   var onCheckboxChange = function onCheckboxChange(event) {
-    onMultipleSelection(_objectSpread$k(_objectSpread$k({}, event), {}, {
+    onMultipleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
       toggleable: true,
       type: 'checkbox'
     }));
@@ -18983,9 +19113,9 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
 });
 TableBody.displayName = 'TableBody';
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19006,7 +19136,7 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
 
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$j({}, styleObjectState);
+      var styleObject = _objectSpread$k({}, styleObjectState);
 
       var _align = getColumnProp('alignFrozen');
 
@@ -19111,9 +19241,9 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
 });
 TableFooter.displayName = 'TableFooter';
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19246,7 +19376,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var filterClearCallback = getColumnProp('onFilterClear');
     var defaultConstraint = getDefaultConstraint();
 
-    var filters = _objectSpread$i({}, props.filters);
+    var filters = _objectSpread$j({}, props.filters);
 
     if (filters[field].operator) {
       filters[field].constraints.splice(1);
@@ -19311,7 +19441,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   };
 
   var onInputChange = function onInputChange(event, index) {
-    var filters = _objectSpread$i({}, props.filters);
+    var filters = _objectSpread$j({}, props.filters);
 
     var value = event.target.value;
 
@@ -19331,7 +19461,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
 
-    var filters = _objectSpread$i({}, props.filters);
+    var filters = _objectSpread$j({}, props.filters);
 
     filters[field].matchMode = matchMode;
     filterMatchModeChangeCallback && filterMatchModeChangeCallback({
@@ -19382,7 +19512,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var filterOperationChangeCallback = getColumnProp('onFilterOperatorChange');
     var value = e.value;
 
-    var filters = _objectSpread$i({}, props.filters);
+    var filters = _objectSpread$j({}, props.filters);
 
     filters[field].operator = value;
     props.onFilterChange(filters);
@@ -19399,7 +19529,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var onMenuMatchModeChange = function onMenuMatchModeChange(value, index) {
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
 
-    var filters = _objectSpread$i({}, props.filters);
+    var filters = _objectSpread$j({}, props.filters);
 
     filters[field].constraints[index].matchMode = value;
     props.onFilterChange(filters);
@@ -19418,7 +19548,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var filterConstraintAddCallback = getColumnProp('onFilterConstraintAdd');
     var defaultConstraint = getDefaultConstraint();
 
-    var filters = _objectSpread$i({}, props.filters);
+    var filters = _objectSpread$j({}, props.filters);
 
     var newConstraint = {
       value: null,
@@ -19439,7 +19569,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var removeConstraint = function removeConstraint(index) {
     var filterConstraintRemoveCallback = getColumnProp('onFilterConstraintRemove');
 
-    var filters = _objectSpread$i({}, props.filters);
+    var filters = _objectSpread$j({}, props.filters);
 
     var removedConstraint = filters[field].constraints.splice(index, 1);
     filterConstraintRemoveCallback && filterConstraintRemoveCallback({
@@ -19552,7 +19682,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var filterCallback = function filterCallback(value) {
     var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
-    var filters = _objectSpread$i({}, props.filters);
+    var filters = _objectSpread$j({}, props.filters);
 
     var meta = filters[field];
     props.display === 'menu' && meta && meta.operator ? filters[field].constraints[index].value = value : filters[field].value = value;
@@ -19957,9 +20087,9 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
 });
 HeaderCheckbox.displayName = 'HeaderCheckbox';
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -20035,7 +20165,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
 
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$h({}, styleObjectState);
+      var styleObject = _objectSpread$i({}, styleObjectState);
 
       var align = getColumnProp('alignFrozen');
 
@@ -20269,7 +20399,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var align = getColumnProp('alignHeader') || getColumnProp('align');
     var className = classNames(getColumnProp('headerClassName'), getColumnProp('className'), _defineProperty({
       'p-sortable-column': getColumnProp('sortable'),
-      'p-resizable-column': props.resizableColumns,
+      'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
       'p-highlight': sortMeta.sorted,
       'p-frozen-column': getColumnProp('frozen'),
       'p-selection-column': getColumnProp('selectionMode'),
@@ -20306,9 +20436,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
 });
 HeaderCell.displayName = 'HeaderCell';
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TableHeader = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -20450,7 +20580,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
             selectionMode = _col$props.selectionMode,
             filter = _col$props.filter;
 
-        var colStyle = _objectSpread$g(_objectSpread$g({}, filterHeaderStyle || {}), style || {});
+        var colStyle = _objectSpread$h(_objectSpread$h({}, filterHeaderStyle || {}), style || {});
 
         var colClassName = classNames('p-filter-column', filterHeaderClassName, className, {
           'p-frozen-column': frozen
@@ -20496,9 +20626,9 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
 });
 TableHeader.displayName = 'TableHeader';
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(props.first),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -20565,6 +20695,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var wrapperRef = React.useRef(null);
   var reorderIndicatorUpRef = React.useRef(null);
   var reorderIndicatorDownRef = React.useRef(null);
+  var colReorderIconWidth = React.useRef(null);
+  var colReorderIconHeight = React.useRef(null);
   var resizeHelperRef = React.useRef(null);
   var draggedColumnElement = React.useRef(null);
   var draggedColumn = React.useRef(null);
@@ -20994,13 +21126,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         e.rowIndex;
         var editing = e.editing;
 
-    var editingMeta = _objectSpread$f({}, editingMetaState);
+    var editingMeta = _objectSpread$g({}, editingMetaState);
 
     var meta = editingMeta[editingKey];
 
     if (editing) {
       !meta && (meta = editingMeta[editingKey] = {
-        data: _objectSpread$f({}, rowData),
+        data: _objectSpread$g({}, rowData),
         fields: []
       });
       meta['fields'].push(field);
@@ -21169,8 +21301,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return;
     }
 
-    colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
-    colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
+    colReorderIconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
+    colReorderIconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
     draggedColumn.current = column;
     draggedColumnElement.current = findParentHeader(event.currentTarget);
     event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
@@ -21188,16 +21320,16 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         var dropHeaderOffset = DomHandler.getOffset(dropHeader);
         var targetLeft = dropHeaderOffset.left - containerOffset.left;
         var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
-        reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight - 1) + 'px';
+        reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight.current - 1) + 'px';
         reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
 
         if (event.pageX > columnCenter) {
-          reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth / 2) + 'px';
-          reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth / 2) + 'px';
+          reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
+          reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
           dropPosition.current = 1;
         } else {
-          reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth / 2) + 'px';
-          reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth / 2) + 'px';
+          reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
+          reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
           dropPosition.current = -1;
         }
 
@@ -21430,7 +21562,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var value = _toConsumableArray(data);
 
     if (columnSortable.current && columnSortFunction.current) {
-      value = columnSortFunction({
+      value = columnSortFunction.current({
         field: field,
         order: order
       });
@@ -21623,9 +21755,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         cloned[prop] = value.operator ? {
           operator: value.operator,
           constraints: value.constraints.map(function (constraint) {
-            return _objectSpread$f({}, constraint);
+            return _objectSpread$g({}, constraint);
           })
-        } : _objectSpread$f({}, value);
+        } : _objectSpread$g({}, value);
       });
     } else {
       var _columns2 = getColumns();
@@ -21666,7 +21798,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var filter = function filter(value, field, matchMode) {
     var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
-    var filters = _objectSpread$f({}, d_filtersState);
+    var filters = _objectSpread$g({}, d_filtersState);
 
     var meta = filters[field];
     var constraint = meta && meta.operator ? meta.constraints[index] : meta;
@@ -21793,7 +21925,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var createEvent = function createEvent(event) {
-    return _objectSpread$f({
+    return _objectSpread$g({
       first: getFirst(),
       rows: getRows(),
       sortField: getSortField(),
@@ -22939,9 +23071,9 @@ Dock.defaultProps = {
   footer: null
 };
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Editor = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var contentRef = React.useRef(null);
   var toolbarRef = React.useRef(null);
@@ -22957,7 +23089,7 @@ var Editor = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pr
       import('quill').then(function (module) {
         if (module && module["default"] && DomHandler.isExist(contentRef.current)) {
           quill.current = new module["default"](contentRef.current, {
-            modules: _objectSpread$e({
+            modules: _objectSpread$f({
               toolbar: props.showHeader ? toolbarRef.current : false
             }, props.modules),
             placeholder: props.placeholder,
@@ -23482,8 +23614,7 @@ var ProgressBar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       style: props.style,
       "aria-valuemin": "0",
       "aria-valuenow": props.value,
-      "aria-valuemax": "100",
-      "aria-label": props.value
+      "aria-valuemax": "100"
     }, otherProps), /*#__PURE__*/React.createElement("div", {
       className: "p-progressbar-value p-progressbar-value-animate",
       style: {
@@ -23549,18 +23680,24 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       focusedState = _React$useState6[0],
       setFocusedState = _React$useState6[1];
 
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      uploadingState = _React$useState8[0],
+      setUploadingState = _React$useState8[1];
+
   var fileInputRef = React.useRef(null);
   var messagesRef = React.useRef(null);
   var contentRef = React.useRef(null);
   var duplicateIEEvent = React.useRef(false);
   var uploadedFileCount = React.useRef(0);
   var hasFiles = ObjectUtils.isNotEmpty(filesState);
+  var disabled = props.disabled || uploadingState;
   var chooseButtonLabel = props.chooseLabel || props.chooseOptions.label || localeOption('choose');
   var uploadButtonLabel = props.uploadLabel || props.uploadOptions.label || localeOption('upload');
   var cancelButtonLabel = props.cancelLabel || props.cancelOptions.label || localeOption('cancel');
-  var chooseDisabled = props.disabled || props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount;
-  var uploadDisabled = props.disabled || !hasFiles;
-  var cancelDisabled = props.disabled || !hasFiles;
+  var chooseDisabled = disabled || props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount;
+  var uploadDisabled = disabled || !hasFiles;
+  var cancelDisabled = disabled || !hasFiles;
 
   var isImage = function isImage(file) {
     return /^image\//.test(file.type);
@@ -23615,7 +23752,12 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       return;
     }
 
-    var currentFiles = filesState ? _toConsumableArray(filesState) : [];
+    var currentFiles = [];
+
+    if (props.multiple) {
+      currentFiles = filesState ? _toConsumableArray(filesState) : [];
+    }
+
     var selectedFiles = event.dataTransfer ? event.dataTransfer.files : event.target.files;
 
     for (var i = 0; i < selectedFiles.length; i++) {
@@ -23687,6 +23829,10 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var upload = function upload(files) {
     files = files || filesState;
 
+    if (files && files.nativeEvent) {
+      files = filesState;
+    }
+
     if (props.customUpload) {
       if (props.fileLimit) {
         uploadedFileCount + files.length, _readOnlyError("uploadedFileCount");
@@ -23702,6 +23848,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         });
       }
     } else {
+      setUploadingState(true);
       var xhr = new XMLHttpRequest();
       var formData = new FormData();
 
@@ -23743,6 +23890,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
           setProgressState(0);
+          setUploadingState(false);
 
           if (xhr.status >= 200 && xhr.status < 300) {
             if (props.fileLimit) {
@@ -23784,6 +23932,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 
   var clear = function clear() {
     setFilesState([]);
+    setUploadingState(false);
     props.onClear && props.onClear();
     clearInput();
   };
@@ -23808,7 +23957,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
 
   var onDragEnter = function onDragEnter(event) {
-    if (!props.disabled) {
+    if (!disabled) {
       event.dataTransfer.dropEffect = 'copy';
       event.stopPropagation();
       event.preventDefault();
@@ -23816,7 +23965,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
 
   var onDragOver = function onDragOver(event) {
-    if (!props.disabled) {
+    if (!disabled) {
       event.dataTransfer.dropEffect = 'copy';
       DomHandler.addClass(contentRef.current, 'p-fileupload-highlight');
       event.stopPropagation();
@@ -23825,25 +23974,32 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
 
   var onDragLeave = function onDragLeave(event) {
-    if (!props.disabled) {
+    if (!disabled) {
       event.dataTransfer.dropEffect = 'copy';
       DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
     }
   };
 
   var onDrop = function onDrop(event) {
-    if (!props.disabled) {
-      DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
-      event.stopPropagation();
-      event.preventDefault();
-      var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
-      var allowDrop = props.multiple || files && files.length === 0;
-      allowDrop && onFileSelect(event);
+    if (props.disabled) {
+      return;
     }
+
+    DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
+    event.stopPropagation();
+    event.preventDefault(); // give caller a chance to stop the drop
+
+    if (props.onBeforeDrop && props.onBeforeDrop(event) === false) {
+      return;
+    }
+
+    var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+    var allowDrop = props.multiple || ObjectUtils.isEmpty(filesState) && files && files.length === 1;
+    allowDrop && onFileSelect(event);
   };
 
   var onSimpleUploaderClick = function onSimpleUploaderClick() {
-    hasFiles ? upload() : fileInputRef.current.click();
+    !disabled && hasFiles ? upload() : fileInputRef.current.click();
   };
 
   React.useImperativeHandle(ref, function () {
@@ -23861,7 +24017,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         _icon = _props$chooseOptions.icon,
         iconOnly = _props$chooseOptions.iconOnly;
     var chooseClassName = classNames('p-button p-fileupload-choose p-component', {
-      'p-disabled': props.disabled,
+      'p-disabled': disabled,
       'p-focus': focusedState,
       'p-button-icon-only': iconOnly
     }, className);
@@ -23915,7 +24071,8 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       icon: "pi pi-times",
       onClick: function onClick(e) {
         return remove(e, index);
-      }
+      },
+      disabled: disabled
     }));
     var content = /*#__PURE__*/React.createElement(React.Fragment, null, preview, fileName, size, removeButton);
 
@@ -24042,7 +24199,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     var className = classNames('p-fileupload p-fileupload-basic p-component', props.className);
     var buttonClassName = classNames('p-button p-component p-fileupload-choose', {
       'p-fileupload-choose-selected': hasFiles,
-      'p-disabled': props.disabled,
+      'p-disabled': disabled,
       'p-focus': focusedState
     }, chooseOptions.className);
     var chooseIcon = chooseOptions.icon || classNames({
@@ -24072,7 +24229,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       type: "file",
       accept: props.accept,
       multiple: props.multiple,
-      disabled: props.disabled,
+      disabled: disabled,
       onChange: onFileSelect
     });
     return /*#__PURE__*/React.createElement("div", _extends({
@@ -24146,6 +24303,7 @@ FileUpload.defaultProps = {
   progressBarTemplate: null,
   onBeforeUpload: null,
   onBeforeSend: null,
+  onBeforeDrop: null,
   onUpload: null,
   onError: null,
   onClear: null,
@@ -24178,6 +24336,7 @@ var FullCalendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   };
 
   useMountEffect(function () {
+    // eslint-disable-next-line no-console
     console.warn("FullCalendar component is deprecated. Use FullCalendar component of '@fullcalendar/react' package.");
     config.current = {
       theme: true
@@ -26167,7 +26326,6 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onInput: onInput,
     onPaste: handleInputChange,
     required: props.required,
-    "aria-labelledby": props.ariaLabelledBy,
     tooltip: props.tooltip,
     tooltipOptions: props.tooltipOptions
   }));
@@ -26195,7 +26353,6 @@ InputMask.defaultProps = {
   required: false,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   onComplete: null,
   onChange: null,
   onFocus: null,
@@ -26666,14 +26823,14 @@ var ListBoxHeader = /*#__PURE__*/React.memo(function (props) {
     className: "p-listbox-header"
   }, /*#__PURE__*/React.createElement("div", {
     className: "p-listbox-filter-container"
-  }, /*#__PURE__*/React.createElement(InputText, {
+  }, /*#__PURE__*/React.createElement(InputText, _extends({
     type: "text",
     value: props.filter,
     onChange: onFilter,
     className: "p-listbox-filter",
     disabled: props.disabled,
     placeholder: props.filterPlaceholder
-  }), /*#__PURE__*/React.createElement("span", {
+  }, props.filterInputProps)), /*#__PURE__*/React.createElement("span", {
     className: "p-listbox-filter-icon pi pi-search"
   })));
 });
@@ -26746,18 +26903,19 @@ var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
     onClick: onClick,
     onTouchEnd: onTouchEnd,
     onKeyDown: onKeyDown,
-    tabIndex: props.tabIndex,
+    tabIndex: "-1",
     "aria-label": props.label,
     key: props.label,
     role: "option",
-    "aria-selected": props.selected
+    "aria-selected": props.selected,
+    "aria-disabled": props.disabled
   }, content, /*#__PURE__*/React.createElement(Ripple, null));
 });
 ListBoxItem.displayName = 'ListBoxItem';
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createForOfIteratorHelper$8(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$8(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; } } }; }
 
@@ -26952,7 +27110,7 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
             var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
 
             if (filteredSubOptions && filteredSubOptions.length) {
-              filteredGroups.push(_objectSpread$d(_objectSpread$d({}, optgroup), {
+              filteredGroups.push(_objectSpread$e(_objectSpread$e({}, optgroup), {
                 items: filteredSubOptions
               }));
             }
@@ -26977,7 +27135,8 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
       filter: filteredValue,
       onFilter: onFilter,
       disabled: props.disabled,
-      filterPlaceholder: props.filterPlaceholder
+      filterPlaceholder: props.filterPlaceholder,
+      filterInputProps: props.filterInputProps
     }) : null;
   };
 
@@ -27010,7 +27169,8 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
       }, /*#__PURE__*/React.createElement("li", {
-        className: "p-listbox-item-group"
+        className: "p-listbox-item-group",
+        role: "group"
       }, groupContent), groupChildrenContent);
     } else {
       var optionLabel = getOptionLabel(option);
@@ -27037,10 +27197,10 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
 
   var createList = function createList() {
     if (props.virtualScrollerOptions) {
-      var virtualScrollerProps = _objectSpread$d(_objectSpread$d({}, props.virtualScrollerOptions), {
+      var virtualScrollerProps = _objectSpread$e(_objectSpread$e({}, props.virtualScrollerOptions), {
         items: visibleOptions,
         onLazyLoad: function onLazyLoad(event) {
-          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$d(_objectSpread$d({}, event), {
+          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$e(_objectSpread$e({}, event), {
             filter: visibleOptions
           }));
         },
@@ -27053,7 +27213,9 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
             ref: option.contentRef,
             className: className,
             role: "listbox",
-            "aria-multiselectable": props.multiple
+            "aria-multiselectable": props.multiple,
+            "aria-labelledby": props['aria-labelledby'],
+            "aria-label": props['aria-label']
           }, option.children);
         }
       });
@@ -27066,7 +27228,9 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
       return /*#__PURE__*/React.createElement("ul", {
         className: "p-listbox-list",
         role: "listbox",
-        "aria-multiselectable": props.multiple
+        "aria-multiselectable": props.multiple,
+        "aria-labelledby": props['aria-labelledby'],
+        "aria-label": props['aria-label']
       }, items);
     }
   };
@@ -27121,10 +27285,12 @@ ListBox.defaultProps = {
   filterMatchMode: 'contains',
   filterPlaceholder: null,
   filterLocale: undefined,
+  filterInputProps: null,
   tabIndex: 0,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
+  'aria-label': null,
+  'aria-labelledby': null,
   onChange: null,
   onFilterValueChange: null
 };
@@ -27531,9 +27697,9 @@ MegaMenu.defaultProps = {
   orientation: 'horizontal'
 };
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -27907,7 +28073,7 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
   var createPanel = function createPanel() {
     var panelClassName = classNames('p-mention-panel p-component', props.panelClassName);
 
-    var panelStyle = _objectSpread$c({
+    var panelStyle = _objectSpread$d({
       maxHeight: props.scrollHeight
     }, props.panelStyle);
 
@@ -27955,10 +28121,12 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
     style: props.style
   }, /*#__PURE__*/React.createElement(InputTextarea, _extends({
     ref: inputRef,
-    id: props.inputId
-  }, inputProps, {
+    id: props.inputId,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label'],
     className: inputClassName,
-    style: props.inputStyle,
+    style: props.inputStyle
+  }, inputProps, {
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
@@ -27988,6 +28156,8 @@ Mention.defaultProps = {
   headerTemplate: null,
   footerTemplate: null,
   itemTemplate: null,
+  'aria-label': null,
+  'aria-labelledby': null,
   transitionOptions: null,
   onChange: null,
   onInput: null,
@@ -28845,9 +29015,9 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
 });
 MultiSelectItem.displayName = 'MultiSelectItem';
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var virtualScrollerRef = React.useRef(null);
 
@@ -28973,14 +29143,14 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
 
   var createContent = function createContent() {
     if (props.virtualScrollerOptions) {
-      var virtualScrollerProps = _objectSpread$b(_objectSpread$b({}, props.virtualScrollerOptions), {
-        style: _objectSpread$b(_objectSpread$b({}, props.virtualScrollerOptions.style), {
+      var virtualScrollerProps = _objectSpread$c(_objectSpread$c({}, props.virtualScrollerOptions), {
+        style: _objectSpread$c(_objectSpread$c({}, props.virtualScrollerOptions.style), {
           height: props.scrollHeight
         }),
         className: classNames('p-multiselect-items-wrapper', props.virtualScrollerOptions.className),
         items: props.visibleOptions,
         onLazyLoad: function onLazyLoad(event) {
-          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$b(_objectSpread$b({}, event), {
+          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$c(_objectSpread$c({}, event), {
             filter: props.filterValue
           }));
         },
@@ -29055,9 +29225,9 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
 }));
 MultiSelectPanel.displayName = 'MultiSelectPanel';
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createForOfIteratorHelper$7(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$7(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; } } }; }
 
@@ -29305,7 +29475,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     if (highlightItem && highlightItem.scrollIntoView) {
       highlightItem.scrollIntoView({
         block: 'nearest',
-        inline: 'start'
+        inline: 'nearest'
       });
     }
   };
@@ -29621,9 +29791,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
             var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
 
             if (filteredSubOptions && filteredSubOptions.length) {
-              filteredGroups.push(_objectSpread$a(_objectSpread$a({}, optgroup), {
-                items: filteredSubOptions
-              }));
+              filteredGroups.push(_objectSpread$b(_objectSpread$b({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
             }
           }
         } catch (err) {
@@ -29823,13 +29991,11 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
       setFocusedState = _React$useState2[1];
 
   var elementRef = React.useRef(null);
-  var inputRef = React.useRef(props.inputRef);
   var equalityKey = props.optionValue ? null : props.dataKey;
 
   var onClick = function onClick(event) {
     if (!props.disabled && !props.readOnly) {
       toggle(event);
-      inputRef.current.focus();
     }
   };
 
@@ -29837,6 +30003,11 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
   };
 
+  var getOptionAriaLabel = function getOptionAriaLabel(option) {
+    var ariaField = props.optionLabel || props.optionValue;
+    return ariaField ? ObjectUtils.resolveFieldData(option, ariaField) : option;
+  };
+
   var findNextOption = function findNextOption() {
     if (props.options) {
       return selectedOptionIndex === props.options.length - 1 ? props.empty ? null : props.options[0] : props.options[selectedOptionIndex + 1];
@@ -29870,6 +30041,13 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     setFocusedState(false);
   };
 
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 32) {
+      toggle(e);
+      e.preventDefault();
+    }
+  };
+
   var getSelectedOptionMap = function getSelectedOptionMap() {
     var option, index;
 
@@ -29886,9 +30064,6 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     };
   };
 
-  React.useEffect(function () {
-    ObjectUtils.combinedRefs(inputRef, props.inputRef);
-  }, [inputRef, props.inputRef]);
   useMountEffect(function () {
     if (!props.empty && props.value === null) {
       toggle();
@@ -29928,6 +30103,8 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
     'p-focus': focusedState
   }, selectedOption && selectedOption.className);
   var icon = createIcon();
+  var ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
+  var ariaChecked = !!selectedOption ? 'true' : 'false';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
@@ -29936,24 +30113,20 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
   }, otherProps, {
     onClick: onClick
   }), /*#__PURE__*/React.createElement("div", {
-    className: "p-hidden-accessible"
-  }, /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    type: "checkbox",
-    "aria-labelledby": props.ariaLabelledBy,
-    id: props.inputId,
-    name: props.name,
+    className: boxClassName,
+    style: selectedOption && selectedOption.style,
+    tabIndex: props.tabIndex,
     onFocus: onFocus,
     onBlur: onBlur,
-    disabled: props.disabled,
-    readOnly: props.readOnly,
-    defaultChecked: !!selectedOption
-  })), /*#__PURE__*/React.createElement("div", {
-    className: boxClassName,
+    onKeyDown: onKeyDown,
     role: "checkbox",
-    "aria-checked": !!selectedOption,
-    style: selectedOption && selectedOption.style
-  }, icon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    "aria-checked": ariaChecked,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label']
+  }, icon), focusedState && /*#__PURE__*/React.createElement("span", {
+    className: "p-sr-only",
+    "aria-live": "polite"
+  }, ariaValueLabel)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions)));
@@ -29962,22 +30135,22 @@ MultiStateCheckbox.displayName = 'MultiStateCheckbox';
 MultiStateCheckbox.defaultProps = {
   __TYPE: 'MultiStateCheckbox',
   id: null,
-  inputRef: null,
-  inputId: null,
   value: null,
   options: null,
   optionValue: null,
+  optionLabel: null,
   iconTemplate: null,
   dataKey: null,
-  name: null,
   style: null,
   className: null,
   disabled: false,
   readOnly: false,
   empty: true,
+  tabIndex: "0",
+  'aria-label': null,
+  'aria-labelledby': null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   onChange: null
 };
 
@@ -30812,7 +30985,7 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
         innerHTML += "\n                    @media screen and (max-width: ".concat(breakpoint, ") {\n                        .p-overlaypanel[").concat(attributeSelector.current, "] {\n                            width: ").concat(props.breakpoints[breakpoint], " !important;\n                        }\n                    }\n                ");
       }
 
-      styleElement.innerHTML = innerHTML;
+      styleElement.current.innerHTML = innerHTML;
     }
   };
 
@@ -31274,6 +31447,11 @@ var PanelMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       activeItemState = _React$useState4[0],
       setActiveItemState = _React$useState4[1];
 
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      animationDisabled = _React$useState6[0],
+      setAnimationDisabled = _React$useState6[1];
+
   var headerId = idState + '_header';
   var contentId = idState + '_content';
 
@@ -31343,6 +31521,14 @@ var PanelMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 
     setActiveItemState(findActiveItem());
   });
+  useUpdateEffect(function () {
+    setAnimationDisabled(true);
+    setActiveItemState(findActiveItem());
+  }, [props.model]);
+
+  var onEnter = function onEnter() {
+    setAnimationDisabled(false);
+  };
 
   var createPanel = function createPanel(item, index) {
     var key = item.label + '_' + index;
@@ -31415,6 +31601,8 @@ var PanelMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         enter: 1000,
         exit: 450
       },
+      onEnter: onEnter,
+      disabled: animationDisabled,
       "in": active,
       unmountOnExit: true,
       options: props.transitionOptions
@@ -32421,6 +32609,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   });
   var otherProps = ObjectUtils.findDiffKeys(props, PickList.defaultProps);
   var className = classNames('p-picklist p-component', props.className);
+  var sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
+  var targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
   return /*#__PURE__*/React.createElement("div", _extends({
     id: props.id,
     className: className,
@@ -32438,7 +32628,7 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange);
     },
-    itemTemplate: props.itemTemplate,
+    itemTemplate: sourceItemTemplate,
     header: props.sourceHeader,
     style: props.sourceStyle,
     className: "p-picklist-source-wrapper",
@@ -32460,7 +32650,7 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange);
     },
-    itemTemplate: props.itemTemplate,
+    itemTemplate: targetItemTemplate,
     header: props.targetHeader,
     style: props.targetStyle,
     className: "p-picklist-target-wrapper",
@@ -32496,6 +32686,8 @@ PickList.defaultProps = {
   tabIndex: 0,
   dataKey: null,
   itemTemplate: null,
+  sourceItemTemplate: null,
+  targetItemTemplate: null,
   onChange: null,
   onMoveToSource: null,
   onMoveAllToSource: null,
@@ -32621,18 +32813,17 @@ var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     ref: inputRef,
     id: props.inputId,
     type: "radio",
-    "aria-labelledby": props.ariaLabelledBy,
     name: props.name,
     defaultChecked: props.checked,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label'],
     onFocus: onFocus,
     onBlur: onBlur,
     disabled: props.disabled,
     required: props.required,
     tabIndex: props.tabIndex
   })), /*#__PURE__*/React.createElement("div", {
-    className: boxClassName,
-    role: "radio",
-    "aria-checked": props.checked
+    className: boxClassName
   }, /*#__PURE__*/React.createElement("div", {
     className: "p-radiobutton-icon"
   }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
@@ -32656,7 +32847,8 @@ RadioButton.defaultProps = {
   tabIndex: null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
+  'aria-label': null,
+  'aria-labelledby': null,
   onChange: null
 };
 
@@ -33103,8 +33295,7 @@ var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
   var onKeyDown = function onKeyDown(event) {
     var keyCode = event.which;
 
-    if (keyCode === 32 || keyCode === 13) {
-      //space and enter
+    if (keyCode === 32) {
       onClick(event);
       event.preventDefault();
     }
@@ -33127,7 +33318,6 @@ var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
     role: "button",
     "aria-label": props.label,
     "aria-pressed": props.selected,
-    "aria-labelledby": props.ariaLabelledBy,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: props.tabIndex,
@@ -33227,8 +33417,7 @@ var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
           template: props.itemTemplate,
           selected: selected,
           tabIndex: tabIndex,
-          disabled: isDisabled,
-          ariaLabelledBy: props.ariaLabelledBy
+          disabled: isDisabled
         });
       });
     }
@@ -33270,7 +33459,6 @@ SelectButton.defaultProps = {
   dataKey: null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   itemTemplate: null,
   onChange: null
 };
@@ -33526,13 +33714,21 @@ Skeleton.defaultProps = {
   className: null
 };
 
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       activeItemState = _React$useState2[0],
       setActiveItemState = _React$useState2[1];
 
-  var onItemClick = function onItemClick(event, item) {
+  var _React$useState3 = React.useState({}),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      renderSubMenu = _React$useState4[0],
+      setRenderSubMenu = _React$useState4[1];
+
+  var onItemClick = function onItemClick(event, item, index) {
     if (item.disabled) {
       event.preventDefault();
       return;
@@ -33550,6 +33746,8 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
     }
 
     if (item.items) {
+      var key = createKey(item, index);
+      setRenderSubMenu(_objectSpread$a(_objectSpread$a({}, renderSubMenu), {}, _defineProperty({}, key, true)));
       setActiveItemState(item);
       props.onForward();
     }
@@ -33563,8 +33761,10 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
     });
   };
 
-  var createSubmenu = function createSubmenu(item) {
-    if (item.items) {
+  var createSubmenu = function createSubmenu(item, index) {
+    var shouldRender = renderSubMenu[createKey(item, index)];
+
+    if (item.items && shouldRender) {
       return /*#__PURE__*/React.createElement(SlideMenuSub, {
         menuProps: props.menuProps,
         model: item.items,
@@ -33579,8 +33779,12 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
     return null;
   };
 
+  var createKey = function createKey(item, index) {
+    return item.label + '_' + index;
+  };
+
   var createMenuitem = function createMenuitem(item, index) {
-    var key = item.label + '_' + index;
+    var key = createKey(item, index);
     var active = activeItemState === item;
     var className = classNames('p-menuitem', {
       'p-menuitem-active': active,
@@ -33599,13 +33803,13 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
     var submenuIcon = item.items && /*#__PURE__*/React.createElement("span", {
       className: submenuIconClassName
     });
-    var submenu = createSubmenu(item);
+    var submenu = createSubmenu(item, index);
     var content = /*#__PURE__*/React.createElement("a", {
       href: item.url || '#',
       className: "p-menuitem-link",
       target: item.target,
       onClick: function onClick(event) {
-        return onItemClick(event, item);
+        return onItemClick(event, item, index);
       },
       "aria-disabled": item.disabled
     }, icon, label, submenuIcon);
@@ -33613,7 +33817,7 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
-          return onItemClick(event, item);
+          return onItemClick(event, item, index);
         },
         className: 'p-menuitem-link',
         labelClassName: 'p-menuitem-text',
@@ -34081,7 +34285,9 @@ var Slider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pr
       "aria-valuemin": props.min,
       "aria-valuemax": props.max,
       "aria-valuenow": leftValue || bottomValue,
-      "aria-labelledby": props.ariaLabelledBy
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label'],
+      "aria-orientation": props.orientation
     });
   };
 
@@ -34148,9 +34354,10 @@ Slider.defaultProps = {
   className: null,
   disabled: false,
   tabIndex: 0,
-  ariaLabelledBy: null,
   onChange: null,
-  onSlideEnd: null
+  onSlideEnd: null,
+  'aria-label': null,
+  'aria-labelledby': null
 };
 
 function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -34540,7 +34747,8 @@ var SplitButtonItem = /*#__PURE__*/React.memo(function (props) {
       role: "menuitem",
       className: className,
       target: target,
-      onClick: onClick
+      onClick: onClick,
+      "aria-label": _label
     }, icon, label);
 
     if (template) {
@@ -34591,9 +34799,9 @@ var SplitButtonPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: ref,
       className: className,
       style: props.menuStyle,
-      id: props.id,
       onClick: props.onClick
     }, /*#__PURE__*/React.createElement("ul", {
+      id: props.menuId,
       className: "p-menu-list p-reset",
       role: "menu"
     }, props.children)));
@@ -34720,13 +34928,13 @@ var SplitButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var menuButtonClassName = classNames('p-splitbutton-menubutton', props.menuButtonClassName);
   var buttonContent = props.buttonTemplate ? ObjectUtils.getJSXElement(props.buttonTemplate, props) : null;
   var items = createItems();
-  var panelId = idState + '_overlay';
+  var menuId = idState + '_menu';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef,
     id: idState,
     className: className,
     style: props.style
-  }, otherProps), /*#__PURE__*/React.createElement(Button, {
+  }, otherProps), /*#__PURE__*/React.createElement(Button, _extends({
     ref: defaultButtonRef,
     type: "button",
     className: buttonClassName,
@@ -34735,19 +34943,19 @@ var SplitButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     onClick: props.onClick,
     disabled: props.disabled,
     tabIndex: props.tabIndex
-  }, buttonContent), /*#__PURE__*/React.createElement(Button, {
+  }, props.buttonProps), buttonContent), /*#__PURE__*/React.createElement(Button, _extends({
     type: "button",
     className: menuButtonClassName,
     icon: props.dropdownIcon,
     onClick: onDropdownButtonClick,
     disabled: props.disabled,
     "aria-expanded": overlayVisibleState,
-    "aria-haspopup": true,
-    "aria-owns": panelId
-  }), /*#__PURE__*/React.createElement(SplitButtonPanel, {
+    "aria-haspopup": "true",
+    "aria-controls": overlayVisibleState ? menuId : null
+  }, props.menuButtonProps)), /*#__PURE__*/React.createElement(SplitButtonPanel, {
     ref: overlayRef,
     appendTo: props.appendTo,
-    id: panelId,
+    menuId: menuId,
     menuStyle: props.menuStyle,
     menuClassName: props.menuClassName,
     onClick: onPanelClick,
@@ -34776,6 +34984,8 @@ SplitButton.defaultProps = {
   menuStyle: null,
   menuClassName: null,
   menuButtonClassName: null,
+  buttonProps: null,
+  menuButtonProps: null,
   tabIndex: null,
   appendTo: null,
   tooltip: null,
@@ -34791,7 +35001,8 @@ SplitButton.defaultProps = {
 var SplitterPanel = function SplitterPanel() {};
 var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var elementRef = React.useRef(null);
-  var gutterRef = React.useRef(null);
+  var gutterRef = React.useRef();
+  var gutterRefs = React.useRef({});
   var size = React.useRef(null);
   var dragging = React.useRef(null);
   var startPos = React.useRef(null);
@@ -34895,6 +35106,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
 
   var onResizeStart = function onResizeStart(event, index) {
+    gutterRef.current = gutterRefs.current[index];
     var pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
     var pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
     size.current = props.layout === 'horizontal' ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
@@ -35007,7 +35219,9 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       height: props.gutterSize + 'px'
     };
     var gutter = index !== props.children.length - 1 && /*#__PURE__*/React.createElement("div", {
-      ref: gutterRef,
+      ref: function ref(el) {
+        return gutterRefs.current[index] = el;
+      },
       className: "p-splitter-gutter",
       style: gutterStyle,
       onMouseDown: function onMouseDown(event) {
@@ -35236,11 +35450,11 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
       unbindTargetLeaveListener = _useEventListener4[1];
 
   var _useEventListener5 = useEventListener({
-    type: 'animationend',
+    type: 'click',
     listener: function listener(event) {
-      if (getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
+      if (!isVisible(targetRef.current) || getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
         unbindDocumentClickListener();
-      } else if (!elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target)) {
+      } else if (isOutsideClick(event)) {
         leave();
       }
     },
@@ -35332,7 +35546,9 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
 
-    unbindDocumentClickListener();
+    if (props.hideOnOutsideClick) {
+      unbindDocumentClickListener();
+    }
   };
 
   var resolveTarget = function resolveTarget() {
@@ -35372,6 +35588,14 @@ var StyleClass = /*#__PURE__*/React.forwardRef(function (props, ref) {
     targetRef.current = null;
   };
 
+  var isVisible = function isVisible(target) {
+    return target.offsetParent !== null;
+  };
+
+  var isOutsideClick = function isOutsideClick(event) {
+    return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target);
+  };
+
   useMountEffect(function () {
     init();
   });
@@ -36856,7 +37080,7 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   };
 
   var onKeyDown = function onKeyDown(event) {
-    if (event.key === 'Enter') {
+    if (event.keyCode === 32) {
       toggle(event);
       event.preventDefault();
     }
@@ -36898,7 +37122,8 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     onBlur: props.onBlur,
     onKeyDown: onKeyDown,
     tabIndex: tabIndex,
-    "aria-labelledby": props.ariaLabelledBy
+    role: "button",
+    "aria-pressed": props.checked
   }), iconElement, /*#__PURE__*/React.createElement("span", {
     className: "p-button-label"
   }, label), /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
@@ -36921,7 +37146,6 @@ ToggleButton.defaultProps = {
   tabIndex: 0,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   onChange: null,
   onFocus: null,
   onBlur: null
@@ -39360,6 +39584,7 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
     return /*#__PURE__*/React.createElement(TreeTableBodyCell, _extends({
       key: column.props.columnKey || column.props.field
     }, column.props, {
+      column: column,
       selectOnEdit: props.selectOnEdit,
       selected: isSelected(),
       node: props.node,
@@ -39873,6 +40098,14 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     }
   };
 
+  var getColumnProp = function getColumnProp() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return props.column ? typeof args[0] === 'string' ? props.column.props[args[0]] : (args[0] || props.column).props[args[1]] : null;
+  };
+
   var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
     if (column.props.sortable) {
       var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
@@ -39946,7 +40179,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
       var className = classNames(column.props.headerClassName || column.props.className, {
         'p-sortable-column': column.props.sortable,
         'p-highlight': sorted,
-        'p-resizable-column': props.resizableColumns
+        'p-resizable-column': props.resizableColumns && getColumnProp('resizeable')
       });
       var resizer = createResizer(column);
       return /*#__PURE__*/React.createElement("th", {
@@ -41390,12 +41623,10 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       setFocusedState = _React$useState2[1];
 
   var elementRef = React.useRef(null);
-  var inputRef = React.useRef(props.inputRef);
 
   var onClick = function onClick(event) {
-    if (!props.disabled) {
+    if (!props.disabled && !props.readOnly) {
       toggle(event);
-      inputRef.current.focus();
     }
   };
 
@@ -41426,9 +41657,13 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     setFocusedState(false);
   };
 
-  React.useEffect(function () {
-    ObjectUtils.combinedRefs(inputRef, props.inputRef);
-  }, [inputRef, props.inputRef]);
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 32) {
+      toggle(e);
+      e.preventDefault();
+    }
+  };
+
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = ObjectUtils.findDiffKeys(props, TriStateCheckbox.defaultProps);
   var className = classNames('p-tristatecheckbox p-checkbox p-component', props.className);
@@ -41441,6 +41676,8 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     'pi pi-check': props.value === true,
     'pi pi-times': props.value === false
   });
+  var ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
+  var ariaChecked = props.value ? 'true' : 'false';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
@@ -41449,24 +41686,21 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   }, otherProps, {
     onClick: onClick
   }), /*#__PURE__*/React.createElement("div", {
-    className: "p-hidden-accessible"
-  }, /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    type: "checkbox",
-    "aria-labelledby": props.ariaLabelledBy,
-    id: props.inputId,
-    name: props.name,
+    className: boxClassName,
+    tabIndex: props.tabIndex,
     onFocus: onFocus,
     onBlur: onBlur,
-    disabled: props.disabled,
-    defaultChecked: props.value
-  })), /*#__PURE__*/React.createElement("div", {
-    className: boxClassName,
+    onKeyDown: onKeyDown,
     role: "checkbox",
-    "aria-checked": props.value === true
+    "aria-checked": ariaChecked,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label']
   }, /*#__PURE__*/React.createElement("span", {
     className: iconClassName
-  }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  })), focusedState && /*#__PURE__*/React.createElement("span", {
+    className: "p-sr-only",
+    "aria-live": "polite"
+  }, ariaValueLabel)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions)));
@@ -41475,17 +41709,17 @@ TriStateCheckbox.displayName = 'TriStateCheckbox';
 TriStateCheckbox.defaultProps = {
   __TYPE: 'TriStateCheckbox',
   id: null,
-  inputRef: null,
-  inputId: null,
   value: null,
-  name: null,
   style: null,
   className: null,
   disabled: false,
+  readOnly: false,
+  tabIndex: "0",
+  'aria-label': null,
+  'aria-labelledby': null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   onChange: null
 };
 
-export { Accordion, AccordionTab, AutoComplete, Avatar, AvatarGroup, Badge, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, Captcha, Card, Carousel, CascadeSelect, Chart, Checkbox, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ConnectedOverlayScrollHandler, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, Editor, EventBus, Fieldset, FileUpload, FilterMatchMode, FilterOperator, FilterService, FullCalendar, GMap, Galleria, IconUtils, Image, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PickList, Portal, PrimeIcons, ProgressBar, ProgressSpinner, RadioButton, Rating, Ripple, Row, ScrollPanel, ScrollTop, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SpeedDial, SplitButton, Splitter, SplitterPanel, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, TieredMenu, Timeline, Toast, ToggleButton, Toolbar, Tooltip, Tree, TreeSelect, TreeTable, TriStateCheckbox, UniqueComponentId, VirtualScroller, ZIndexUtils, addLocale, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, updateLocaleOption, updateLocaleOptions, useEventListener, useInterval, useMountEffect, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useTimeout, useUnmountEffect, useUpdateEffect };
+export { Accordion, AccordionTab, AutoComplete, Avatar, AvatarGroup, Badge, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, Captcha, Card, Carousel, CascadeSelect, Chart, Checkbox, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ConnectedOverlayScrollHandler, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, Editor, EventBus, Fieldset, FileUpload, FilterMatchMode, FilterOperator, FilterService, FullCalendar, GMap, Galleria, IconUtils, Image, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PickList, Portal, PrimeIcons, ProgressBar, ProgressSpinner, RadioButton, Rating, Ripple, Row, ScrollPanel, ScrollTop, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SpeedDial, SplitButton, Splitter, SplitterPanel, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, TieredMenu, Timeline, Toast, ToggleButton, Toolbar, Tooltip, Tree, TreeSelect, TreeTable, TriStateCheckbox, UniqueComponentId, VirtualScroller, ZIndexUtils, addLocale, ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, updateLocaleOption, updateLocaleOptions, useEventListener, useInterval, useMountEffect, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useStorage, useTimeout, useUnmountEffect, useUpdateEffect };