primereact 9.3.1 → 9.4.0

package/core/core.js

@@ -111,7 +111,7 @@ this.primereact.utils = (function (exports, React) {
           })) : classes;
         }
       }
-      return classes.join(' ');
+      return classes.join(' ').trim();
     }
     return undefined;
   }
@@ -1278,432 +1278,19 @@ this.primereact.utils = (function (exports, React) {
     };
   }
 
-  function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-  function mask(el, options) {
-    var defaultOptions = {
-      mask: null,
-      slotChar: '_',
-      autoClear: true,
-      unmask: false,
-      readOnly: false,
-      onComplete: null,
-      onChange: null,
-      onFocus: null,
-      onBlur: null
-    };
-    options = _objectSpread$1(_objectSpread$1({}, defaultOptions), options);
-    var tests, partialPosition, len, firstNonMaskPos, defs, androidChrome, lastRequiredNonMaskPos, oldVal, focusText, caretTimeoutId, buffer, defaultBuffer;
-    var caret = function caret(first, last) {
-      var range, begin, end;
-      if (!el.offsetParent || el !== document.activeElement) {
-        return;
-      }
-      if (typeof first === 'number') {
-        begin = first;
-        end = typeof last === 'number' ? last : begin;
-        if (el.setSelectionRange) {
-          el.setSelectionRange(begin, end);
-        } else if (el['createTextRange']) {
-          range = el['createTextRange']();
-          range.collapse(true);
-          range.moveEnd('character', end);
-          range.moveStart('character', begin);
-          range.select();
-        }
-      } else {
-        if (el.setSelectionRange) {
-          begin = el.selectionStart;
-          end = el.selectionEnd;
-        } else if (document['selection'] && document['selection'].createRange) {
-          range = document['selection'].createRange();
-          begin = 0 - range.duplicate().moveStart('character', -100000);
-          end = begin + range.text.length;
-        }
-        return {
-          begin: begin,
-          end: end
-        };
-      }
-    };
-    var isCompleted = function isCompleted() {
-      for (var i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) {
-        if (tests[i] && buffer[i] === getPlaceholder(i)) {
-          return false;
-        }
-      }
-      return true;
-    };
-    var getPlaceholder = function getPlaceholder(i) {
-      if (i < options.slotChar.length) {
-        return options.slotChar.charAt(i);
-      }
-      return options.slotChar.charAt(0);
-    };
-    var getValue = function getValue() {
-      return options.unmask ? getUnmaskedValue() : el && el.value;
-    };
-    var seekNext = function seekNext(pos) {
-      while (++pos < len && !tests[pos]);
-      return pos;
-    };
-    var seekPrev = function seekPrev(pos) {
-      while (--pos >= 0 && !tests[pos]);
-      return pos;
-    };
-    var shiftL = function shiftL(begin, end) {
-      var i, j;
-      if (begin < 0) {
-        return;
-      }
-      for (i = begin, j = seekNext(end); i < len; i++) {
-        if (tests[i]) {
-          if (j < len && tests[i].test(buffer[j])) {
-            buffer[i] = buffer[j];
-            buffer[j] = getPlaceholder(j);
-          } else {
-            break;
-          }
-          j = seekNext(j);
-        }
-      }
-      writeBuffer();
-      caret(Math.max(firstNonMaskPos, begin));
-    };
-    var shiftR = function shiftR(pos) {
-      var i, c, j, t;
-      for (i = pos, c = getPlaceholder(pos); i < len; i++) {
-        if (tests[i]) {
-          j = seekNext(i);
-          t = buffer[i];
-          buffer[i] = c;
-          if (j < len && tests[j].test(t)) {
-            c = t;
-          } else {
-            break;
-          }
-        }
-      }
-    };
-    var handleAndroidInput = function handleAndroidInput(e) {
-      var curVal = el.value;
-      var pos = caret();
-      if (oldVal && oldVal.length && oldVal.length > curVal.length) {
-        // a deletion or backspace happened
-        checkVal(true);
-        while (pos.begin > 0 && !tests[pos.begin - 1]) pos.begin--;
-        if (pos.begin === 0) {
-          while (pos.begin < firstNonMaskPos && !tests[pos.begin]) pos.begin++;
-        }
-        caret(pos.begin, pos.begin);
-      } else {
-        checkVal(true);
-        while (pos.begin < len && !tests[pos.begin]) pos.begin++;
-        caret(pos.begin, pos.begin);
-      }
-      if (options.onComplete && isCompleted()) {
-        options.onComplete({
-          originalEvent: e,
-          value: getValue()
-        });
-      }
-    };
-    var onBlur = function onBlur(e) {
-      checkVal();
-      options.onBlur && options.onBlur(e);
-      updateModel(e);
-      if (el.value !== focusText) {
-        var event = document.createEvent('HTMLEvents');
-        event.initEvent('change', true, false);
-        el.dispatchEvent(event);
-      }
-    };
-    var onKeyDown = function onKeyDown(e) {
-      if (options.readOnly) {
-        return;
-      }
-      var k = e.which || e.keyCode,
-        pos,
-        begin,
-        end;
-      oldVal = el.value;
-
-      //backspace, delete, and escape get special treatment
-      if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
-        pos = caret();
-        begin = pos.begin;
-        end = pos.end;
-        if (end - begin === 0) {
-          begin = k !== 46 ? seekPrev(begin) : end = seekNext(begin - 1);
-          end = k === 46 ? seekNext(end) : end;
-        }
-        clearBuffer(begin, end);
-        shiftL(begin, end - 1);
-        updateModel(e);
-        e.preventDefault();
-      } else if (k === 13) {
-        // enter
-        onBlur(e);
-        updateModel(e);
-      } else if (k === 27) {
-        // escape
-        el.value = focusText;
-        caret(0, checkVal());
-        updateModel(e);
-        e.preventDefault();
-      }
-    };
-    var onKeyPress = function onKeyPress(e) {
-      if (options.readOnly) {
-        return;
-      }
-      var k = e.which || e.keyCode,
-        pos = caret(),
-        p,
-        c,
-        next,
-        completed;
-      if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
-        //Ignore
-        return;
-      } else if (k && k !== 13) {
-        if (pos.end - pos.begin !== 0) {
-          clearBuffer(pos.begin, pos.end);
-          shiftL(pos.begin, pos.end - 1);
-        }
-        p = seekNext(pos.begin - 1);
-        if (p < len) {
-          c = String.fromCharCode(k);
-          if (tests[p].test(c)) {
-            shiftR(p);
-            buffer[p] = c;
-            writeBuffer();
-            next = seekNext(p);
-            if (DomHandler.isAndroid()) {
-              //Path for CSP Violation on FireFox OS 1.1
-              var proxy = function proxy() {
-                caret(next);
-              };
-              setTimeout(proxy, 0);
-            } else {
-              caret(next);
-            }
-            if (pos.begin <= lastRequiredNonMaskPos) {
-              completed = isCompleted();
-            }
-          }
-        }
-        e.preventDefault();
-      }
-      updateModel(e);
-      if (options.onComplete && completed) {
-        options.onComplete({
-          originalEvent: e,
-          value: getValue()
-        });
-      }
-    };
-    var clearBuffer = function clearBuffer(start, end) {
-      var i;
-      for (i = start; i < end && i < len; i++) {
-        if (tests[i]) {
-          buffer[i] = getPlaceholder(i);
-        }
-      }
-    };
-    var writeBuffer = function writeBuffer() {
-      el.value = buffer.join('');
-    };
-    var checkVal = function checkVal(allow) {
-      //try to place characters where they belong
-      var test = el.value,
-        lastMatch = -1,
-        i,
-        c,
-        pos;
-      for (i = 0, pos = 0; i < len; i++) {
-        if (tests[i]) {
-          buffer[i] = getPlaceholder(i);
-          while (pos++ < test.length) {
-            c = test.charAt(pos - 1);
-            if (tests[i].test(c)) {
-              buffer[i] = c;
-              lastMatch = i;
-              break;
-            }
-          }
-          if (pos > test.length) {
-            clearBuffer(i + 1, len);
-            break;
-          }
-        } else {
-          if (buffer[i] === test.charAt(pos)) {
-            pos++;
-          }
-          if (i < partialPosition) {
-            lastMatch = i;
-          }
-        }
-      }
-      if (allow) {
-        writeBuffer();
-      } else if (lastMatch + 1 < partialPosition) {
-        if (options.autoClear || buffer.join('') === defaultBuffer) {
-          // Invalid value. Remove it and replace it with the
-          // mask, which is the default behavior.
-          if (el.value) el.value = '';
-          clearBuffer(0, len);
-        } else {
-          // Invalid value, but we opt to show the value to the
-          // user and allow them to correct their mistake.
-          writeBuffer();
-        }
-      } else {
-        writeBuffer();
-        el.value = el.value.substring(0, lastMatch + 1);
-      }
-      return partialPosition ? i : firstNonMaskPos;
-    };
-    var onFocus = function onFocus(e) {
-      if (options.readOnly) {
-        return;
-      }
-      clearTimeout(caretTimeoutId);
-      var pos;
-      focusText = el.value;
-      pos = checkVal();
-      caretTimeoutId = setTimeout(function () {
-        if (el !== document.activeElement) {
-          return;
-        }
-        writeBuffer();
-        if (pos === options.mask.replace('?', '').length) {
-          caret(0, pos);
-        } else {
-          caret(pos);
-        }
-      }, 10);
-      if (options.onFocus) {
-        options.onFocus(e);
-      }
-    };
-    var onInput = function onInput(event) {
-      if (androidChrome) handleAndroidInput(event);else handleInputChange(event);
-    };
-    var handleInputChange = function handleInputChange(e) {
-      if (options.readOnly) {
-        return;
-      }
-      var pos = checkVal(true);
-      caret(pos);
-      updateModel(e);
-      if (options.onComplete && isCompleted()) {
-        options.onComplete({
-          originalEvent: e,
-          value: getValue()
-        });
-      }
-    };
-    var getUnmaskedValue = function getUnmaskedValue() {
-      var unmaskedBuffer = [];
-      for (var i = 0; i < buffer.length; i++) {
-        var c = buffer[i];
-        if (tests[i] && c !== getPlaceholder(i)) {
-          unmaskedBuffer.push(c);
-        }
-      }
-      return unmaskedBuffer.join('');
-    };
-    var updateModel = function updateModel(e) {
-      if (options.onChange) {
-        var val = getValue().replace(options.slotChar, '');
-        options.onChange({
-          originalEvent: e,
-          value: defaultBuffer !== val ? val : ''
-        });
-      }
-    };
-    var bindEvents = function bindEvents() {
-      el.addEventListener('focus', onFocus);
-      el.addEventListener('blur', onBlur);
-      el.addEventListener('keydown', onKeyDown);
-      el.addEventListener('keypress', onKeyPress);
-      el.addEventListener('input', onInput);
-      el.addEventListener('paste', handleInputChange);
-    };
-    var unbindEvents = function unbindEvents() {
-      el.removeEventListener('focus', onFocus);
-      el.removeEventListener('blur', onBlur);
-      el.removeEventListener('keydown', onKeyDown);
-      el.removeEventListener('keypress', onKeyPress);
-      el.removeEventListener('input', onInput);
-      el.removeEventListener('paste', handleInputChange);
-    };
-    var init = function init() {
-      tests = [];
-      partialPosition = options.mask.length;
-      len = options.mask.length;
-      firstNonMaskPos = null;
-      defs = {
-        9: '[0-9]',
-        a: '[A-Za-z]',
-        '*': '[A-Za-z0-9]'
-      };
-      androidChrome = DomHandler.isChrome() && DomHandler.isAndroid();
-      var maskTokens = options.mask.split('');
-      for (var i = 0; i < maskTokens.length; i++) {
-        var c = maskTokens[i];
-        if (c === '?') {
-          len--;
-          partialPosition = i;
-        } else if (defs[c]) {
-          tests.push(new RegExp(defs[c]));
-          if (firstNonMaskPos === null) {
-            firstNonMaskPos = tests.length - 1;
-          }
-          if (i < partialPosition) {
-            lastRequiredNonMaskPos = tests.length - 1;
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
           }
-        } else {
-          tests.push(null);
-        }
-      }
-      buffer = [];
-      for (var _i = 0; _i < maskTokens.length; _i++) {
-        var _c = maskTokens[_i];
-        if (_c !== '?') {
-          if (defs[_c]) buffer.push(getPlaceholder(_i));else buffer.push(_c);
         }
       }
-      defaultBuffer = buffer.join('');
-    };
-    if (el && options.mask) {
-      init();
-      bindEvents();
-    }
-    return {
-      init: init,
-      bindEvents: bindEvents,
-      unbindEvents: unbindEvents,
-      updateModel: updateModel,
-      getValue: getValue
+      return target;
     };
-  }
-
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-  }
-
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-  }
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
+    return _extends.apply(this, arguments);
   }
 
   var ObjectUtils = /*#__PURE__*/function () {
@@ -1780,263 +1367,697 @@ this.primereact.utils = (function (exports, React) {
         }
       }
     }, {
-      key: "isFunction",
-      value: function isFunction(obj) {
-        return !!(obj && obj.constructor && obj.call && obj.apply);
+      key: "isFunction",
+      value: function isFunction(obj) {
+        return !!(obj && obj.constructor && obj.call && obj.apply);
+      }
+    }, {
+      key: "isLetter",
+      value: function isLetter(_char) {
+        return _char && (_char.toUpperCase() != _char.toLowerCase() || _char.codePointAt(0) > 127);
+      }
+    }, {
+      key: "findDiffKeys",
+      value: function findDiffKeys(obj1, obj2) {
+        if (!obj1 || !obj2) {
+          return {};
+        }
+        return Object.keys(obj1).filter(function (key) {
+          return !obj2.hasOwnProperty(key);
+        }).reduce(function (result, current) {
+          result[current] = obj1[current];
+          return result;
+        }, {});
+      }
+
+      /**
+       * Removes keys from a JSON object that start with a string such as "data" to get all "data-id" type properties.
+       *
+       * @param {any} obj the JSON object to reduce
+       * @param {string[]} startsWiths the string(s) to check if the property starts with this key
+       * @returns the JSON object containing only the key/values that match the startsWith string
+       */
+    }, {
+      key: "reduceKeys",
+      value: function reduceKeys(obj, startsWiths) {
+        var result = {};
+        if (!obj || !startsWiths || startsWiths.length === 0) {
+          return result;
+        }
+        Object.keys(obj).filter(function (key) {
+          return startsWiths.some(function (value) {
+            return key.startsWith(value);
+          });
+        }).forEach(function (key) {
+          result[key] = obj[key];
+          delete obj[key];
+        });
+        return result;
+      }
+    }, {
+      key: "reorderArray",
+      value: function reorderArray(value, from, to) {
+        if (value && from !== to) {
+          if (to >= value.length) {
+            to %= value.length;
+            from %= value.length;
+          }
+          value.splice(to, 0, value.splice(from, 1)[0]);
+        }
+      }
+    }, {
+      key: "findIndexInList",
+      value: function findIndexInList(value, list, dataKey) {
+        var _this = this;
+        if (list) {
+          return dataKey ? list.findIndex(function (item) {
+            return _this.equals(item, value, dataKey);
+          }) : list.findIndex(function (item) {
+            return item === value;
+          });
+        }
+        return -1;
+      }
+    }, {
+      key: "getJSXElement",
+      value: function getJSXElement(obj) {
+        for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          params[_key - 1] = arguments[_key];
+        }
+        return this.isFunction(obj) ? obj.apply(void 0, params) : obj;
+      }
+    }, {
+      key: "getProp",
+      value: function getProp(props) {
+        var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+        var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var value = props ? props[prop] : undefined;
+        return value === undefined ? defaultProps[prop] : value;
+      }
+    }, {
+      key: "getMergedProps",
+      value: function getMergedProps(props, defaultProps) {
+        return Object.assign({}, defaultProps, props);
+      }
+    }, {
+      key: "getDiffProps",
+      value: function getDiffProps(props, defaultProps) {
+        return this.findDiffKeys(props, defaultProps);
+      }
+    }, {
+      key: "getPropValue",
+      value: function getPropValue(obj) {
+        for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          params[_key2 - 1] = arguments[_key2];
+        }
+        return this.isFunction(obj) ? obj.apply(void 0, params) : obj;
+      }
+    }, {
+      key: "getComponentProp",
+      value: function getComponentProp(component) {
+        var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+        var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        return this.isNotEmpty(component) ? this.getProp(component.props, prop, defaultProps) : undefined;
+      }
+    }, {
+      key: "getComponentProps",
+      value: function getComponentProps(component, defaultProps) {
+        return this.isNotEmpty(component) ? this.getMergedProps(component.props, defaultProps) : undefined;
+      }
+    }, {
+      key: "getComponentDiffProps",
+      value: function getComponentDiffProps(component, defaultProps) {
+        return this.isNotEmpty(component) ? this.getDiffProps(component.props, defaultProps) : undefined;
+      }
+    }, {
+      key: "isValidChild",
+      value: function isValidChild(child, type, validTypes) {
+        /* eslint-disable */
+        if (child) {
+          var childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
+          var isValid = childType === type;
+          try {
+            var messageTypes; if ("production" !== 'production' && !isValid) ;
+          } catch (error) {
+            // NOOP
+          }
+          return isValid;
+        }
+        return false;
+        /* eslint-enable */
+      }
+    }, {
+      key: "getRefElement",
+      value: function getRefElement(ref) {
+        if (ref) {
+          return _typeof(ref) === 'object' && ref.hasOwnProperty('current') ? ref.current : ref;
+        }
+        return null;
+      }
+    }, {
+      key: "combinedRefs",
+      value: function combinedRefs(innerRef, forwardRef) {
+        if (innerRef && forwardRef) {
+          if (typeof forwardRef === 'function') {
+            forwardRef(innerRef.current);
+          } else {
+            forwardRef.current = innerRef.current;
+          }
+        }
+      }
+    }, {
+      key: "removeAccents",
+      value: function removeAccents(str) {
+        if (str && str.search(/[\xC0-\xFF]/g) > -1) {
+          str = str.replace(/[\xC0-\xC5]/g, 'A').replace(/[\xC6]/g, 'AE').replace(/[\xC7]/g, 'C').replace(/[\xC8-\xCB]/g, 'E').replace(/[\xCC-\xCF]/g, 'I').replace(/[\xD0]/g, 'D').replace(/[\xD1]/g, 'N').replace(/[\xD2-\xD6\xD8]/g, 'O').replace(/[\xD9-\xDC]/g, 'U').replace(/[\xDD]/g, 'Y').replace(/[\xDE]/g, 'P').replace(/[\xE0-\xE5]/g, 'a').replace(/[\xE6]/g, 'ae').replace(/[\xE7]/g, 'c').replace(/[\xE8-\xEB]/g, 'e').replace(/[\xEC-\xEF]/g, 'i').replace(/[\xF1]/g, 'n').replace(/[\xF2-\xF6\xF8]/g, 'o').replace(/[\xF9-\xFC]/g, 'u').replace(/[\xFE]/g, 'p').replace(/[\xFD\xFF]/g, 'y');
+        }
+        return str;
+      }
+    }, {
+      key: "convertToFlatCase",
+      value: function convertToFlatCase(str) {
+        // convert snake, kebab, camel and pascal cases to flat case
+        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+      }
+    }, {
+      key: "isEmpty",
+      value: function isEmpty(value) {
+        return value === null || value === undefined || value === '' || Array.isArray(value) && value.length === 0 || !(value instanceof Date) && _typeof(value) === 'object' && Object.keys(value).length === 0;
       }
     }, {
-      key: "isLetter",
-      value: function isLetter(_char) {
-        return _char && (_char.toUpperCase() != _char.toLowerCase() || _char.codePointAt(0) > 127);
+      key: "isNotEmpty",
+      value: function isNotEmpty(value) {
+        return !this.isEmpty(value);
       }
     }, {
-      key: "findDiffKeys",
-      value: function findDiffKeys(obj1, obj2) {
-        if (!obj1 || !obj2) {
-          return {};
+      key: "sort",
+      value: function sort(value1, value2) {
+        var order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+        var locale = arguments.length > 3 ? arguments[3] : undefined;
+        var nullSortOrder = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+        var result = ObjectUtils.compare(value1, value2, locale, order);
+        var finalSortOrder = order;
+
+        // nullSortOrder == 1 means Excel like sort nulls at bottom
+        if (ObjectUtils.isEmpty(value1) || ObjectUtils.isEmpty(value2)) {
+          finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
         }
-        return Object.keys(obj1).filter(function (key) {
-          return !obj2.hasOwnProperty(key);
-        }).reduce(function (result, current) {
-          result[current] = obj1[current];
-          return result;
-        }, {});
+        return finalSortOrder * result;
       }
-
-      /**
-       * Removes keys from a JSON object that start with a string such as "data" to get all "data-id" type properties.
-       *
-       * @param {any} obj the JSON object to reduce
-       * @param {string[]} startsWiths the string(s) to check if the property starts with this key
-       * @returns the JSON object containing only the key/values that match the startsWith string
-       */
     }, {
-      key: "reduceKeys",
-      value: function reduceKeys(obj, startsWiths) {
-        var result = {};
-        if (!obj || !startsWiths || startsWiths.length === 0) {
-          return result;
-        }
-        Object.keys(obj).filter(function (key) {
-          return startsWiths.some(function (value) {
-            return key.startsWith(value);
-          });
-        }).forEach(function (key) {
-          result[key] = obj[key];
-          delete obj[key];
-        });
+      key: "compare",
+      value: function compare(value1, value2, locale) {
+        var order = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+        var result = -1;
+        var emptyValue1 = ObjectUtils.isEmpty(value1);
+        var emptyValue2 = ObjectUtils.isEmpty(value2);
+        if (emptyValue1 && emptyValue2) result = 0;else if (emptyValue1) result = order;else if (emptyValue2) result = -order;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, locale, {
+          numeric: true
+        });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
         return result;
       }
-    }, {
-      key: "reorderArray",
-      value: function reorderArray(value, from, to) {
-        if (value && from !== to) {
-          if (to >= value.length) {
-            to %= value.length;
-            from %= value.length;
+    }]);
+    return ObjectUtils;
+  }();
+
+  function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var IconUtils = /*#__PURE__*/function () {
+    function IconUtils() {
+      _classCallCheck(this, IconUtils);
+    }
+    _createClass(IconUtils, null, [{
+      key: "getJSXIcon",
+      value: function getJSXIcon(icon) {
+        var iconProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var content = null;
+        if (icon !== null) {
+          var iconType = _typeof(icon);
+          var className = classNames(iconProps.className, iconType === 'string' && icon);
+          content = /*#__PURE__*/React__namespace.createElement("span", _extends({}, iconProps, {
+            className: className
+          }));
+          if (iconType !== 'string') {
+            var defaultContentOptions = _objectSpread$2({
+              iconProps: iconProps,
+              element: content
+            }, options);
+            return ObjectUtils.getJSXElement(icon, defaultContentOptions);
           }
-          value.splice(to, 0, value.splice(from, 1)[0]);
         }
+        return content;
       }
-    }, {
-      key: "findIndexInList",
-      value: function findIndexInList(value, list, dataKey) {
-        var _this = this;
-        if (list) {
-          return dataKey ? list.findIndex(function (item) {
-            return _this.equals(item, value, dataKey);
-          }) : list.findIndex(function (item) {
-            return item === value;
-          });
+    }]);
+    return IconUtils;
+  }();
+
+  function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function mask(el, options) {
+    var defaultOptions = {
+      mask: null,
+      slotChar: '_',
+      autoClear: true,
+      unmask: false,
+      readOnly: false,
+      onComplete: null,
+      onChange: null,
+      onFocus: null,
+      onBlur: null
+    };
+    options = _objectSpread$1(_objectSpread$1({}, defaultOptions), options);
+    var tests, partialPosition, len, firstNonMaskPos, defs, androidChrome, lastRequiredNonMaskPos, oldVal, focusText, caretTimeoutId, buffer, defaultBuffer;
+    var caret = function caret(first, last) {
+      var range, begin, end;
+      if (!el.offsetParent || el !== document.activeElement) {
+        return;
+      }
+      if (typeof first === 'number') {
+        begin = first;
+        end = typeof last === 'number' ? last : begin;
+        if (el.setSelectionRange) {
+          el.setSelectionRange(begin, end);
+        } else if (el['createTextRange']) {
+          range = el['createTextRange']();
+          range.collapse(true);
+          range.moveEnd('character', end);
+          range.moveStart('character', begin);
+          range.select();
         }
-        return -1;
+      } else {
+        if (el.setSelectionRange) {
+          begin = el.selectionStart;
+          end = el.selectionEnd;
+        } else if (document['selection'] && document['selection'].createRange) {
+          range = document['selection'].createRange();
+          begin = 0 - range.duplicate().moveStart('character', -100000);
+          end = begin + range.text.length;
+        }
+        return {
+          begin: begin,
+          end: end
+        };
       }
-    }, {
-      key: "getJSXElement",
-      value: function getJSXElement(obj) {
-        for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          params[_key - 1] = arguments[_key];
+    };
+    var isCompleted = function isCompleted() {
+      for (var i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) {
+        if (tests[i] && buffer[i] === getPlaceholder(i)) {
+          return false;
         }
-        return this.isFunction(obj) ? obj.apply(void 0, params) : obj;
       }
-    }, {
-      key: "getProp",
-      value: function getProp(props) {
-        var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-        var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        var value = props ? props[prop] : undefined;
-        return value === undefined ? defaultProps[prop] : value;
+      return true;
+    };
+    var getPlaceholder = function getPlaceholder(i) {
+      if (i < options.slotChar.length) {
+        return options.slotChar.charAt(i);
       }
-    }, {
-      key: "getMergedProps",
-      value: function getMergedProps(props, defaultProps) {
-        return Object.assign({}, defaultProps, props);
+      return options.slotChar.charAt(0);
+    };
+    var getValue = function getValue() {
+      return options.unmask ? getUnmaskedValue() : el && el.value;
+    };
+    var seekNext = function seekNext(pos) {
+      while (++pos < len && !tests[pos]);
+      return pos;
+    };
+    var seekPrev = function seekPrev(pos) {
+      while (--pos >= 0 && !tests[pos]);
+      return pos;
+    };
+    var shiftL = function shiftL(begin, end) {
+      var i, j;
+      if (begin < 0) {
+        return;
       }
-    }, {
-      key: "getDiffProps",
-      value: function getDiffProps(props, defaultProps) {
-        return this.findDiffKeys(props, defaultProps);
+      for (i = begin, j = seekNext(end); i < len; i++) {
+        if (tests[i]) {
+          if (j < len && tests[i].test(buffer[j])) {
+            buffer[i] = buffer[j];
+            buffer[j] = getPlaceholder(j);
+          } else {
+            break;
+          }
+          j = seekNext(j);
+        }
+      }
+      writeBuffer();
+      caret(Math.max(firstNonMaskPos, begin));
+    };
+    var shiftR = function shiftR(pos) {
+      var i, c, j, t;
+      for (i = pos, c = getPlaceholder(pos); i < len; i++) {
+        if (tests[i]) {
+          j = seekNext(i);
+          t = buffer[i];
+          buffer[i] = c;
+          if (j < len && tests[j].test(t)) {
+            c = t;
+          } else {
+            break;
+          }
+        }
+      }
+    };
+    var handleAndroidInput = function handleAndroidInput(e) {
+      var curVal = el.value;
+      var pos = caret();
+      if (oldVal && oldVal.length && oldVal.length > curVal.length) {
+        // a deletion or backspace happened
+        checkVal(true);
+        while (pos.begin > 0 && !tests[pos.begin - 1]) pos.begin--;
+        if (pos.begin === 0) {
+          while (pos.begin < firstNonMaskPos && !tests[pos.begin]) pos.begin++;
+        }
+        caret(pos.begin, pos.begin);
+      } else {
+        checkVal(true);
+        while (pos.begin < len && !tests[pos.begin]) pos.begin++;
+        caret(pos.begin, pos.begin);
+      }
+      if (options.onComplete && isCompleted()) {
+        options.onComplete({
+          originalEvent: e,
+          value: getValue()
+        });
       }
-    }, {
-      key: "getPropValue",
-      value: function getPropValue(obj) {
-        for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          params[_key2 - 1] = arguments[_key2];
-        }
-        var methodParams = params;
-        if (params && params.length === 1) {
-          methodParams = params[0];
-        }
-        return this.isFunction(obj) ? obj.apply(void 0, _toConsumableArray(methodParams)) : obj;
+    };
+    var onBlur = function onBlur(e) {
+      checkVal();
+      options.onBlur && options.onBlur(e);
+      updateModel(e);
+      if (el.value !== focusText) {
+        var event = document.createEvent('HTMLEvents');
+        event.initEvent('change', true, false);
+        el.dispatchEvent(event);
       }
-    }, {
-      key: "getComponentProp",
-      value: function getComponentProp(component) {
-        var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-        var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        return this.isNotEmpty(component) ? this.getProp(component.props, prop, defaultProps) : undefined;
+    };
+    var onKeyDown = function onKeyDown(e) {
+      if (options.readOnly) {
+        return;
       }
-    }, {
-      key: "getComponentProps",
-      value: function getComponentProps(component, defaultProps) {
-        return this.isNotEmpty(component) ? this.getMergedProps(component.props, defaultProps) : undefined;
+      var k = e.which || e.keyCode,
+        pos,
+        begin,
+        end;
+      oldVal = el.value;
+
+      //backspace, delete, and escape get special treatment
+      if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
+        pos = caret();
+        begin = pos.begin;
+        end = pos.end;
+        if (end - begin === 0) {
+          begin = k !== 46 ? seekPrev(begin) : end = seekNext(begin - 1);
+          end = k === 46 ? seekNext(end) : end;
+        }
+        clearBuffer(begin, end);
+        shiftL(begin, end - 1);
+        updateModel(e);
+        e.preventDefault();
+      } else if (k === 13) {
+        // enter
+        onBlur(e);
+        updateModel(e);
+      } else if (k === 27) {
+        // escape
+        el.value = focusText;
+        caret(0, checkVal());
+        updateModel(e);
+        e.preventDefault();
       }
-    }, {
-      key: "getComponentDiffProps",
-      value: function getComponentDiffProps(component, defaultProps) {
-        return this.isNotEmpty(component) ? this.getDiffProps(component.props, defaultProps) : undefined;
+    };
+    var onKeyPress = function onKeyPress(e) {
+      if (options.readOnly) {
+        return;
       }
-    }, {
-      key: "isValidChild",
-      value: function isValidChild(child, type, validTypes) {
-        /* eslint-disable */
-        if (child) {
-          var childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
-          var isValid = childType === type;
-          try {
-            var messageTypes; if ("production" !== 'production' && !isValid) ;
-          } catch (error) {
-            // NOOP
+      var k = e.which || e.keyCode,
+        pos = caret(),
+        p,
+        c,
+        next,
+        completed;
+      if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
+        //Ignore
+        return;
+      } else if (k && k !== 13) {
+        if (pos.end - pos.begin !== 0) {
+          clearBuffer(pos.begin, pos.end);
+          shiftL(pos.begin, pos.end - 1);
+        }
+        p = seekNext(pos.begin - 1);
+        if (p < len) {
+          c = String.fromCharCode(k);
+          if (tests[p].test(c)) {
+            shiftR(p);
+            buffer[p] = c;
+            writeBuffer();
+            next = seekNext(p);
+            if (DomHandler.isAndroid()) {
+              //Path for CSP Violation on FireFox OS 1.1
+              var proxy = function proxy() {
+                caret(next);
+              };
+              setTimeout(proxy, 0);
+            } else {
+              caret(next);
+            }
+            if (pos.begin <= lastRequiredNonMaskPos) {
+              completed = isCompleted();
+            }
           }
-          return isValid;
         }
-        return false;
-        /* eslint-enable */
+        e.preventDefault();
       }
-    }, {
-      key: "getRefElement",
-      value: function getRefElement(ref) {
-        if (ref) {
-          return _typeof(ref) === 'object' && ref.hasOwnProperty('current') ? ref.current : ref;
+      updateModel(e);
+      if (options.onComplete && completed) {
+        options.onComplete({
+          originalEvent: e,
+          value: getValue()
+        });
+      }
+    };
+    var clearBuffer = function clearBuffer(start, end) {
+      var i;
+      for (i = start; i < end && i < len; i++) {
+        if (tests[i]) {
+          buffer[i] = getPlaceholder(i);
         }
-        return null;
       }
-    }, {
-      key: "combinedRefs",
-      value: function combinedRefs(innerRef, forwardRef) {
-        if (innerRef && forwardRef) {
-          if (typeof forwardRef === 'function') {
-            forwardRef(innerRef.current);
-          } else {
-            forwardRef.current = innerRef.current;
+    };
+    var writeBuffer = function writeBuffer() {
+      el.value = buffer.join('');
+    };
+    var checkVal = function checkVal(allow) {
+      //try to place characters where they belong
+      var test = el.value,
+        lastMatch = -1,
+        i,
+        c,
+        pos;
+      for (i = 0, pos = 0; i < len; i++) {
+        if (tests[i]) {
+          buffer[i] = getPlaceholder(i);
+          while (pos++ < test.length) {
+            c = test.charAt(pos - 1);
+            if (tests[i].test(c)) {
+              buffer[i] = c;
+              lastMatch = i;
+              break;
+            }
+          }
+          if (pos > test.length) {
+            clearBuffer(i + 1, len);
+            break;
+          }
+        } else {
+          if (buffer[i] === test.charAt(pos)) {
+            pos++;
+          }
+          if (i < partialPosition) {
+            lastMatch = i;
           }
         }
       }
-    }, {
-      key: "removeAccents",
-      value: function removeAccents(str) {
-        if (str && str.search(/[\xC0-\xFF]/g) > -1) {
-          str = str.replace(/[\xC0-\xC5]/g, 'A').replace(/[\xC6]/g, 'AE').replace(/[\xC7]/g, 'C').replace(/[\xC8-\xCB]/g, 'E').replace(/[\xCC-\xCF]/g, 'I').replace(/[\xD0]/g, 'D').replace(/[\xD1]/g, 'N').replace(/[\xD2-\xD6\xD8]/g, 'O').replace(/[\xD9-\xDC]/g, 'U').replace(/[\xDD]/g, 'Y').replace(/[\xDE]/g, 'P').replace(/[\xE0-\xE5]/g, 'a').replace(/[\xE6]/g, 'ae').replace(/[\xE7]/g, 'c').replace(/[\xE8-\xEB]/g, 'e').replace(/[\xEC-\xEF]/g, 'i').replace(/[\xF1]/g, 'n').replace(/[\xF2-\xF6\xF8]/g, 'o').replace(/[\xF9-\xFC]/g, 'u').replace(/[\xFE]/g, 'p').replace(/[\xFD\xFF]/g, 'y');
+      if (allow) {
+        writeBuffer();
+      } else if (lastMatch + 1 < partialPosition) {
+        if (options.autoClear || buffer.join('') === defaultBuffer) {
+          // Invalid value. Remove it and replace it with the
+          // mask, which is the default behavior.
+          if (el.value) el.value = '';
+          clearBuffer(0, len);
+        } else {
+          // Invalid value, but we opt to show the value to the
+          // user and allow them to correct their mistake.
+          writeBuffer();
         }
-        return str;
+      } else {
+        writeBuffer();
+        el.value = el.value.substring(0, lastMatch + 1);
       }
-    }, {
-      key: "isEmpty",
-      value: function isEmpty(value) {
-        return value === null || value === undefined || value === '' || Array.isArray(value) && value.length === 0 || !(value instanceof Date) && _typeof(value) === 'object' && Object.keys(value).length === 0;
+      return partialPosition ? i : firstNonMaskPos;
+    };
+    var onFocus = function onFocus(e) {
+      if (options.readOnly) {
+        return;
       }
-    }, {
-      key: "isNotEmpty",
-      value: function isNotEmpty(value) {
-        return !this.isEmpty(value);
+      clearTimeout(caretTimeoutId);
+      var pos;
+      focusText = el.value;
+      pos = checkVal();
+      caretTimeoutId = setTimeout(function () {
+        if (el !== document.activeElement) {
+          return;
+        }
+        writeBuffer();
+        if (pos === options.mask.replace('?', '').length) {
+          caret(0, pos);
+        } else {
+          caret(pos);
+        }
+      }, 10);
+      if (options.onFocus) {
+        options.onFocus(e);
       }
-    }, {
-      key: "sort",
-      value: function sort(value1, value2) {
-        var order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-        var locale = arguments.length > 3 ? arguments[3] : undefined;
-        var nullSortOrder = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
-        var result = ObjectUtils.compare(value1, value2, locale, order);
-        var finalSortOrder = order;
-
-        // nullSortOrder == 1 means Excel like sort nulls at bottom
-        if (ObjectUtils.isEmpty(value1) || ObjectUtils.isEmpty(value2)) {
-          finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
+    };
+    var onInput = function onInput(event) {
+      if (androidChrome) handleAndroidInput(event);else handleInputChange(event);
+    };
+    var handleInputChange = function handleInputChange(e) {
+      if (options.readOnly) {
+        return;
+      }
+      var pos = checkVal(true);
+      caret(pos);
+      updateModel(e);
+      if (options.onComplete && isCompleted()) {
+        options.onComplete({
+          originalEvent: e,
+          value: getValue()
+        });
+      }
+    };
+    var getUnmaskedValue = function getUnmaskedValue() {
+      var unmaskedBuffer = [];
+      for (var i = 0; i < buffer.length; i++) {
+        var c = buffer[i];
+        if (tests[i] && c !== getPlaceholder(i)) {
+          unmaskedBuffer.push(c);
         }
-        return finalSortOrder * result;
       }
-    }, {
-      key: "compare",
-      value: function compare(value1, value2, locale) {
-        var order = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-        var result = -1;
-        var emptyValue1 = ObjectUtils.isEmpty(value1);
-        var emptyValue2 = ObjectUtils.isEmpty(value2);
-        if (emptyValue1 && emptyValue2) result = 0;else if (emptyValue1) result = order;else if (emptyValue2) result = -order;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, locale, {
-          numeric: true
-        });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-        return result;
+      return unmaskedBuffer.join('');
+    };
+    var updateModel = function updateModel(e) {
+      if (options.onChange) {
+        var val = getValue().replace(options.slotChar, '');
+        options.onChange({
+          originalEvent: e,
+          value: defaultBuffer !== val ? val : ''
+        });
       }
-    }]);
-    return ObjectUtils;
-  }();
-
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
+    };
+    var bindEvents = function bindEvents() {
+      el.addEventListener('focus', onFocus);
+      el.addEventListener('blur', onBlur);
+      el.addEventListener('keydown', onKeyDown);
+      el.addEventListener('keypress', onKeyPress);
+      el.addEventListener('input', onInput);
+      el.addEventListener('paste', handleInputChange);
+    };
+    var unbindEvents = function unbindEvents() {
+      el.removeEventListener('focus', onFocus);
+      el.removeEventListener('blur', onBlur);
+      el.removeEventListener('keydown', onKeyDown);
+      el.removeEventListener('keypress', onKeyPress);
+      el.removeEventListener('input', onInput);
+      el.removeEventListener('paste', handleInputChange);
+    };
+    var init = function init() {
+      tests = [];
+      partialPosition = options.mask.length;
+      len = options.mask.length;
+      firstNonMaskPos = null;
+      defs = {
+        9: '[0-9]',
+        a: '[A-Za-z]',
+        '*': '[A-Za-z0-9]'
+      };
+      androidChrome = DomHandler.isChrome() && DomHandler.isAndroid();
+      var maskTokens = options.mask.split('');
+      for (var i = 0; i < maskTokens.length; i++) {
+        var c = maskTokens[i];
+        if (c === '?') {
+          len--;
+          partialPosition = i;
+        } else if (defs[c]) {
+          tests.push(new RegExp(defs[c]));
+          if (firstNonMaskPos === null) {
+            firstNonMaskPos = tests.length - 1;
+          }
+          if (i < partialPosition) {
+            lastRequiredNonMaskPos = tests.length - 1;
           }
+        } else {
+          tests.push(null);
         }
       }
-      return target;
+      buffer = [];
+      for (var _i = 0; _i < maskTokens.length; _i++) {
+        var _c = maskTokens[_i];
+        if (_c !== '?') {
+          if (defs[_c]) buffer.push(getPlaceholder(_i));else buffer.push(_c);
+        }
+      }
+      defaultBuffer = buffer.join('');
+    };
+    if (el && options.mask) {
+      init();
+      bindEvents();
+    }
+    return {
+      init: init,
+      bindEvents: bindEvents,
+      unbindEvents: unbindEvents,
+      updateModel: updateModel,
+      getValue: getValue
     };
-    return _extends.apply(this, arguments);
   }
 
   function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-  var IconUtils = /*#__PURE__*/function () {
-    function IconUtils() {
-      _classCallCheck(this, IconUtils);
+  function mergeProps() {
+    for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+      props[_key] = arguments[_key];
     }
-    _createClass(IconUtils, null, [{
-      key: "getJSXIcon",
-      value: function getJSXIcon(icon) {
-        var iconProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        var content = null;
-        if (icon !== null) {
-          var iconType = _typeof(icon);
-          var className = classNames(iconProps.className, iconType === 'string' && icon);
-          content = /*#__PURE__*/React__namespace.createElement("span", _extends({}, iconProps, {
-            className: className
-          }));
-          if (iconType !== 'string') {
-            var defaultContentOptions = _objectSpread({
-              iconProps: iconProps,
-              element: content
-            }, options);
-            return ObjectUtils.getJSXElement(icon, defaultContentOptions);
+    if (props) {
+      var isFn = function isFn(o) {
+        return !!(o && o.constructor && o.call && o.apply);
+      };
+      return props.reduce(function (merged, ps) {
+        var _loop = function _loop() {
+          if (key === 'style') {
+            merged['style'] = _objectSpread(_objectSpread({}, merged['style']), ps['style']);
+          } else if (key === 'className') {
+            merged['className'] = [merged['className'], ps['className']].join(' ').trim();
+          } else if (isFn(ps[key])) {
+            var fn = merged[key];
+            merged[key] = fn ? function () {
+              fn.apply(void 0, arguments);
+              value.apply(void 0, arguments);
+            } : ps[key];
+          } else {
+            merged[key] = ps[key];
           }
+        };
+        for (var key in ps) {
+          _loop();
         }
-        return content;
-      }
-    }]);
-    return IconUtils;
-  }();
+        return merged;
+      }, {});
+    }
+    return undefined;
+  }
 
   var lastId = 0;
   function UniqueComponentId() {
@@ -2045,6 +2066,22 @@ this.primereact.utils = (function (exports, React) {
     return "".concat(prefix).concat(lastId);
   }
 
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
+  }
+
   function handler() {
     var zIndexes = [];
     var generateZIndex = function generateZIndex(key, autoZIndex) {
@@ -2106,6 +2143,7 @@ this.primereact.utils = (function (exports, React) {
   exports.ZIndexUtils = ZIndexUtils;
   exports.classNames = classNames;
   exports.mask = mask;
+  exports.mergeProps = mergeProps;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
@@ -2831,6 +2869,116 @@ this.primereact.api = (function (exports, utils) {
 
 })({}, primereact.utils);
 
+this.primereact = this.primereact || {};
+this.primereact.componentbase = (function (exports, utils) {
+  'use strict';
+
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
+  }
+
+  function _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
+  function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+
+  function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  var ComponentBase = {
+    defaultProps: {
+      pt: undefined
+    },
+    extend: function extend() {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var defaultProps = _objectSpread(_objectSpread({}, props.defaultProps), ComponentBase.defaultProps);
+      var getProps = function getProps(props) {
+        return utils.ObjectUtils.getMergedProps(props, defaultProps);
+      };
+      var getOtherProps = function getOtherProps(props) {
+        return utils.ObjectUtils.getDiffProps(props, defaultProps);
+      };
+      var getPTItem = function getPTItem() {
+        var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+        var fKey = utils.ObjectUtils.convertToFlatCase(key);
+        return obj[Object.keys(obj).find(function (k) {
+          return utils.ObjectUtils.convertToFlatCase(k) === fKey;
+        }) || ''];
+      };
+      var getPTValue = function getPTValue() {
+        var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+        var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        return utils.ObjectUtils.getPropValue(getPTItem(obj, key), params);
+      };
+      var setMetaData = function setMetaData() {
+        var metadata = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        var ptm = function ptm() {
+          var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+          var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          return ptmo((metadata.props || {}).pt, key, _objectSpread(_objectSpread({}, metadata), params));
+        };
+        var ptmo = function ptmo() {
+          var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+          var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+          var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+          return getPTValue(obj, key, params);
+        };
+        return {
+          ptm: ptm,
+          ptmo: ptmo
+        };
+      };
+      return _objectSpread(_objectSpread({
+        getProps: getProps,
+        getOtherProps: getOtherProps,
+        setMetaData: setMetaData
+      }, props), {}, {
+        defaultProps: defaultProps
+      });
+    }
+  };
+
+  exports.ComponentBase = ComponentBase;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+  return exports;
+
+})({}, primereact.utils);
+
 this.primereact = this.primereact || {};
 this.primereact.hooks = (function (exports, React, utils) {
   'use strict';
@@ -3194,8 +3342,21 @@ this.primereact.hooks = (function (exports, React, utils) {
   /* eslint-enable */
 
   /* eslint-disable */
+
+  /**
+   * Custom hook to run a mount effect only once. Accounts for React 18 Strict Mode by making sure it only runs exactly once.
+   * @param {*} fn the callback function
+   * @returns the hook
+   */
   var useMountEffect = function useMountEffect(fn) {
-    return React__namespace.useEffect(fn, []);
+    var mounted = React__namespace.useRef(false);
+    return React__namespace.useEffect(function () {
+      if (!mounted.current) {
+        mounted.current = true;
+        return fn && fn();
+      }
+      return;
+    }, []);
   };
   /* eslint-enable */
 
@@ -3696,7 +3857,7 @@ this.primereact.hooks = (function (exports, React, utils) {
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindWindowStorageListener = _useEventListener2[0],
       unbindWindowStorageListener = _useEventListener2[1];
-    var _React$useState = React__namespace.useState(undefined),
+    var _React$useState = React__namespace.useState(initialValue),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       storedValue = _React$useState2[0],
       setStoredValue = _React$useState2[1];
@@ -7540,7 +7701,7 @@ this.primereact.icons.windowminimize = (function (exports, React, iconbase) {
 })({}, React, primereact.iconbase);
 
 this.primereact = this.primereact || {};
-this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal, utils) {
+this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal, utils, componentbase) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -7566,21 +7727,6 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
@@ -7693,7 +7839,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var TooltipBase = {
+  var TooltipBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Tooltip',
       appendTo: null,
@@ -7724,14 +7870,8 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
       target: null,
       updateDelay: 0,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, TooltipBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, TooltipBase.defaultProps);
     }
-  };
+  });
 
   var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var props = TooltipBase.getProps(inProps);
@@ -7747,6 +7887,15 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       classNameState = _React$useState6[0],
       setClassNameState = _React$useState6[1];
+    var _TooltipBase$setMetaD = TooltipBase.setMetaData({
+        props: props,
+        state: {
+          visible: visibleState,
+          position: positionState,
+          className: classNameState
+        }
+      }),
+      ptm = _TooltipBase$setMetaD.ptm;
     var elementRef = React__namespace.useRef(null);
     var textRef = React__namespace.useRef(null);
     var currentTargetRef = React__namespace.useRef(null);
@@ -7984,12 +8133,12 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
         if (position === 'left') elementRef.current.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';else if (position === 'top') elementRef.current.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
       }
     };
-    var onMouseEnter = function onMouseEnter() {
+    var _onMouseEnter = function onMouseEnter() {
       if (!isAutoHide()) {
         allowHide.current = false;
       }
     };
-    var onMouseLeave = function onMouseLeave(e) {
+    var _onMouseLeave = function onMouseLeave(e) {
       if (!isAutoHide()) {
         allowHide.current = true;
         hide(e);
@@ -8166,25 +8315,30 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
       };
     });
     var createElement = function createElement() {
-      var otherProps = TooltipBase.getOtherProps(props);
       var tooltipClassName = utils.classNames('p-tooltip p-component', _defineProperty({}, "p-tooltip-".concat(positionState), true), props.className, classNameState);
       var empty = isTargetContentEmpty(currentTargetRef.current);
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
+      var rootProps = utils.mergeProps({
         id: props.id,
         ref: elementRef,
         className: tooltipClassName,
         style: props.style,
-        role: "tooltip",
-        "aria-hidden": visibleState
-      }, otherProps, {
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave
-      }), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-tooltip-arrow"
-      }), /*#__PURE__*/React__namespace.createElement("div", {
+        role: 'tooltip',
+        'aria-hidden': visibleState,
+        onMouseEnter: function onMouseEnter(e) {
+          return _onMouseEnter();
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return _onMouseLeave;
+        }
+      }, TooltipBase.getOtherProps(props), ptm('root'));
+      var arrowProps = utils.mergeProps({
+        className: 'p-tooltip-arrow'
+      }, ptm('arrow'));
+      var textProps = utils.mergeProps({
         ref: textRef,
-        className: "p-tooltip-text"
-      }, empty && props.children));
+        className: 'p-tooltip-text'
+      }, ptm('text'));
+      return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", arrowProps), /*#__PURE__*/React__namespace.createElement("div", textProps, empty && props.children));
     };
     if (visibleState) {
       var element = createElement();
@@ -8204,7 +8358,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
 
   return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.portal, primereact.utils);
+})({}, React, primereact.api, primereact.hooks, primereact.portal, primereact.utils, primereact.componentbase);
 
 this.primereact = this.primereact || {};
 this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinner) {
@@ -9209,7 +9363,7 @@ this.primereact.overlayservice = (function (exports, utils) {
 })({}, primereact.utils);
 
 this.primereact = this.primereact || {};
-this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils, check) {
+this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, utils) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -9323,6 +9477,7 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils, che
       tooltip: null,
       tooltipOptions: null,
       onChange: null,
+      onClick: null,
       onMouseDown: null,
       onContextMenu: null,
       children: undefined
@@ -9344,19 +9499,26 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils, che
     var elementRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
     var onClick = function onClick(event) {
-      if (!props.disabled && !props.readOnly && props.onChange) {
+      if (props.disabled || props.readOnly) {
+        return;
+      }
+      if (props.onChange || props.onClick) {
         var _checked = isChecked();
         var checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement || event.target instanceof Object;
         var isInputToggled = event.target === inputRef.current;
         var isCheckboxToggled = checkboxClicked && event.target.checked !== _checked;
         if (isInputToggled || isCheckboxToggled) {
           var value = _checked ? props.falseValue : props.trueValue;
-          props.onChange({
+          var eventData = {
             originalEvent: event,
             value: props.value,
             checked: value,
-            stopPropagation: function stopPropagation() {},
-            preventDefault: function preventDefault() {},
+            stopPropagation: function stopPropagation() {
+              event.stopPropagation();
+            },
+            preventDefault: function preventDefault() {
+              event.preventDefault();
+            },
             target: {
               type: 'checkbox',
               name: props.name,
@@ -9364,7 +9526,14 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils, che
               value: props.value,
               checked: value
             }
-          });
+          };
+          props.onClick && props.onClick(eventData);
+
+          // do not continue if the user defined click wants to prevent
+          if (event.defaultPrevented) {
+            return;
+          }
+          props.onChange && props.onChange(eventData);
         }
         utils.DomHandler.focus(inputRef.current);
         event.preventDefault();
@@ -9435,7 +9604,7 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils, che
       className: className,
       style: props.style
     }, otherProps, {
-      onClick: onClick,
+      onPointerUp: onClick,
       onContextMenu: props.onContextMenu,
       onMouseDown: props.onMouseDown
     }), /*#__PURE__*/React__namespace.createElement("div", {
@@ -9468,10 +9637,10 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils, che
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.tooltip, primereact.utils, primereact.icons.check);
+})({}, React, primereact.hooks, primereact.icons.check, primereact.tooltip, primereact.utils);
 
 this.primereact = this.primereact || {};
-this.primereact.button = (function (exports, React, ripple, tooltip, utils, spinner) {
+this.primereact.button = (function (exports, React, spinner, ripple, tooltip, utils, componentbase) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -9550,40 +9719,41 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
     return obj;
   }
 
-  var ButtonBase = {
+  var ButtonBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Button',
-      label: null,
+      badge: null,
+      badgeClassName: null,
+      className: null,
+      children: undefined,
+      disabled: false,
       icon: null,
       iconPos: 'left',
-      badge: null,
-      severity: null,
-      rounded: false,
-      raised: false,
+      label: null,
+      link: false,
+      loading: false,
+      loadingIcon: null,
       outlined: false,
+      raised: false,
+      rounded: false,
+      severity: null,
+      size: null,
       text: false,
-      link: false,
-      badgeClassName: null,
       tooltip: null,
-      size: null,
       tooltipOptions: null,
-      disabled: false,
-      loading: false,
-      loadingIcon: null,
-      visible: true,
-      children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, ButtonBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, ButtonBase.defaultProps);
+      visible: true
     }
-  };
+  });
 
+  function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var _classNames2;
     var props = ButtonBase.getProps(inProps);
+    var _ButtonBase$setMetaDa = ButtonBase.setMetaData({
+        props: props
+      }),
+      ptm = _ButtonBase$setMetaDa.ptm;
     var elementRef = React__namespace.useRef(ref);
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(elementRef, ref);
@@ -9592,24 +9762,29 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
       return null;
     }
     var createIcon = function createIcon() {
-      var className = utils.classNames('p-button-icon p-c', _defineProperty({
+      var className = utils.classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
+      var iconsProps = utils.mergeProps({
+        className: className
+      }, ptm('icon'));
+      className = utils.classNames(className, {
         'p-button-loading-icon': props.loading
-      }, "p-button-icon-".concat(props.iconPos), props.label));
-      var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
-        className: className,
-        spin: true
-      }) : props.icon;
-      return utils.IconUtils.getJSXIcon(icon, {
+      });
+      var loadingIconProps = utils.mergeProps({
         className: className
-      }, {
+      }, ptm('loadingIcon'));
+      var icon = props.loading ? props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
+        spin: true
+      })) : props.icon;
+      return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconsProps), {
         props: props
       });
     };
     var createLabel = function createLabel() {
       if (props.label) {
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-button-label p-c"
-        }, props.label);
+        var labelProps = utils.mergeProps({
+          className: 'p-button-label p-c'
+        }, ptm('label'));
+        return /*#__PURE__*/React__namespace.createElement("span", labelProps, props.label);
       }
       return !props.children && !props.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-button-label p-c",
@@ -9621,23 +9796,23 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
     var createBadge = function createBadge() {
       if (props.badge) {
         var badgeClassName = utils.classNames('p-badge', props.badgeClassName);
-        return /*#__PURE__*/React__namespace.createElement("span", {
+        var badgeProps = utils.mergeProps({
           className: badgeClassName
-        }, props.badge);
+        }, ptm('badge'));
+        return /*#__PURE__*/React__namespace.createElement("span", badgeProps, props.badge);
       }
       return null;
     };
     var disabled = props.disabled || props.loading;
     var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
-    var otherProps = ButtonBase.getOtherProps(props);
     var sizeMapping = {
       large: 'lg',
       small: 'sm'
     };
     var size = sizeMapping[props.size];
     var className = utils.classNames('p-button p-component', props.className, (_classNames2 = {
-      'p-button-icon-only': (props.icon || props.loading && props.loadingIcon) && !props.label && !props.children,
+      'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
       'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
       'p-disabled': disabled,
       'p-button-loading': props.loading,
@@ -9647,18 +9822,18 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
       'p-button-text': props.text,
       'p-button-rounded': props.rounded,
       'p-button-loading-label-only': props.loading && !props.icon && props.label
-    }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.loadingIcon && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
+    }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.label), _defineProperty(_classNames2, "p-button-".concat(size), size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
     var icon = createIcon();
     var label = createLabel();
     var badge = createBadge();
     var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", _extends({
+    var rootProps = utils.mergeProps({
       ref: elementRef,
-      "aria-label": defaultAriaLabel
-    }, otherProps, {
+      'aria-label': defaultAriaLabel,
       className: className,
       disabled: disabled
-    }), icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, ButtonBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
     }, props.tooltipOptions)));
@@ -9671,7 +9846,7 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils, spin
 
   return exports;
 
-})({}, React, primereact.ripple, primereact.tooltip, primereact.utils, primereact.icons.spinner);
+})({}, React, primereact.icons.spinner, primereact.ripple, primereact.tooltip, primereact.utils, primereact.componentbase);
 
 this.primereact = this.primereact || {};
 this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils) {
@@ -9742,15 +9917,15 @@ this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils
       }
     };
     var onInput = function onInput(event) {
+      var target = event.target;
       var validatePattern = true;
       if (props.keyfilter && props.validateOnly) {
         validatePattern = keyfilter.KeyFilter.validate(event, props.keyfilter);
       }
       props.onInput && props.onInput(event, validatePattern);
-      if (!props.onChange) {
-        var target = event.target;
-        utils.ObjectUtils.isNotEmpty(target.value) ? utils.DomHandler.addClass(target, 'p-filled') : utils.DomHandler.removeClass(target, 'p-filled');
-      }
+
+      // for uncontrolled changes
+      utils.ObjectUtils.isNotEmpty(target.value) ? utils.DomHandler.addClass(target, 'p-filled') : utils.DomHandler.removeClass(target, 'p-filled');
     };
     var onPaste = function onPaste(event) {
       props.onPaste && props.onPaste(event);
@@ -9758,13 +9933,12 @@ this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils
         keyfilter.KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
       }
     };
-    var currentValue = elementRef.current && elementRef.current.value;
-    var isFilled = React__namespace.useMemo(function () {
-      return utils.ObjectUtils.isNotEmpty(props.value) || utils.ObjectUtils.isNotEmpty(props.defaultValue) || utils.ObjectUtils.isNotEmpty(currentValue);
-    }, [props.value, props.defaultValue, currentValue]);
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
+    var isFilled = React__namespace.useMemo(function () {
+      return utils.ObjectUtils.isNotEmpty(props.value) || utils.ObjectUtils.isNotEmpty(props.defaultValue);
+    }, [props.value, props.defaultValue]);
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
     var otherProps = InputTextBase.getOtherProps(props);
     var className = utils.classNames('p-inputtext p-component', {
@@ -9794,7 +9968,7 @@ this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils
 })({}, React, primereact.keyfilter, primereact.tooltip, primereact.utils);
 
 this.primereact = this.primereact || {};
-this.primereact.inputnumber = (function (exports, React, hooks, inputtext, ripple, tooltip, utils, angleup, angledown) {
+this.primereact.inputnumber = (function (exports, React, hooks, angledown, angleup, inputtext, ripple, tooltip, utils) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -10735,8 +10909,12 @@ this.primereact.inputnumber = (function (exports, React, hooks, inputtext, rippl
         props.onValueChange({
           originalEvent: event,
           value: value,
-          stopPropagation: function stopPropagation() {},
-          preventDefault: function preventDefault() {},
+          stopPropagation: function stopPropagation() {
+            event.stopPropagation();
+          },
+          preventDefault: function preventDefault() {
+            event.preventDefault();
+          },
           target: {
             name: props.name,
             id: props.id,
@@ -10940,7 +11118,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, inputtext, rippl
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.inputtext, primereact.ripple, primereact.tooltip, primereact.utils, primereact.icons.angleup, primereact.icons.angledown);
+})({}, React, primereact.hooks, primereact.icons.angledown, primereact.icons.angleup, primereact.inputtext, primereact.ripple, primereact.tooltip, primereact.utils);
 
 this.primereact = this.primereact || {};
 this.primereact.messages = (function (exports, React, reactTransitionGroup, csstransition, utils, api, hooks, check, exclamationtriangle, infocircle, times, timescircle, ripple) {
@@ -11231,13 +11409,14 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
       messagesState = _React$useState2[0],
       setMessagesState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
-    var show = function show(value) {
-      if (value) {
-        var messages = assignIdentifiers(value, true);
-        setMessagesState(messages);
+    var show = function show(messageInfo) {
+      if (messageInfo) {
+        setMessagesState(function (prev) {
+          return assignIdentifiers(prev, messageInfo, true);
+        });
       }
     };
-    var assignIdentifiers = function assignIdentifiers(messageInfo, copy) {
+    var assignIdentifiers = function assignIdentifiers(currentState, messageInfo, copy) {
       var messages;
       if (Array.isArray(messageInfo)) {
         var multipleMessages = messageInfo.reduce(function (acc, message) {
@@ -11248,7 +11427,7 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
           return acc;
         }, []);
         if (copy) {
-          messages = messagesState ? [].concat(_toConsumableArray(messagesState), _toConsumableArray(multipleMessages)) : multipleMessages;
+          messages = currentState ? [].concat(_toConsumableArray(currentState), _toConsumableArray(multipleMessages)) : multipleMessages;
         } else {
           messages = multipleMessages;
         }
@@ -11258,7 +11437,7 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
           message: messageInfo
         };
         if (copy) {
-          messages = messagesState ? [].concat(_toConsumableArray(messagesState), [message]) : [message];
+          messages = currentState ? [].concat(_toConsumableArray(currentState), [message]) : [message];
         } else {
           messages = [message];
         }
@@ -11269,14 +11448,16 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
       setMessagesState([]);
     };
     var replace = function replace(messageInfo) {
-      var replaced = assignIdentifiers(messageInfo, false);
-      setMessagesState(replaced);
+      setMessagesState(function (prev) {
+        return assignIdentifiers(prev, messageInfo, false);
+      });
     };
     var remove = function remove(messageInfo) {
-      var messages = messagesState.filter(function (msg) {
-        return msg._pId !== messageInfo._pId;
+      setMessagesState(function (prev) {
+        return prev.filter(function (msg) {
+          return msg._pId !== messageInfo._pId;
+        });
       });
-      setMessagesState(messages);
       props.onRemove && props.onRemove(messageInfo.message);
     };
     var onClose = function onClose(messageInfo) {
@@ -11331,140 +11512,127 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
 })({}, React, ReactTransitionGroup, primereact.csstransition, primereact.utils, primereact.api, primereact.hooks, primereact.icons.check, primereact.icons.exclamationtriangle, primereact.icons.infocircle, primereact.icons.times, primereact.icons.timescircle, primereact.ripple);
 
 this.primereact = this.primereact || {};
-this.primereact.progressbar = (function (exports, React, utils) {
-  'use strict';
+this.primereact.progressbar = (function (exports, React, utils, componentbase) {
+    'use strict';
 
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-      Object.keys(e).forEach(function (k) {
-        if (k !== 'default') {
-          var d = Object.getOwnPropertyDescriptor(e, k);
-          Object.defineProperty(n, k, d.get ? d : {
-            enumerable: true,
-            get: function () { return e[k]; }
-          });
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
         }
-      });
+        n["default"] = e;
+        return Object.freeze(n);
     }
-    n["default"] = e;
-    return Object.freeze(n);
-  }
 
-  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
+    var ProgressBarBase = componentbase.ComponentBase.extend({
+      defaultProps: {
+        __TYPE: 'ProgressBar',
+        id: null,
+        value: null,
+        showValue: true,
+        unit: '%',
+        style: null,
+        className: null,
+        mode: 'determinate',
+        displayValueTemplate: null,
+        color: null,
+        children: undefined
       }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  var ProgressBarBase = {
-    defaultProps: {
-      __TYPE: 'ProgressBar',
-      id: null,
-      value: null,
-      showValue: true,
-      unit: '%',
-      style: null,
-      className: null,
-      mode: 'determinate',
-      displayValueTemplate: null,
-      color: null,
-      children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, ProgressBarBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, ProgressBarBase.defaultProps);
-    }
-  };
+    });
 
-  var ProgressBar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = ProgressBarBase.getProps(inProps);
-    var elementRef = React__namespace.useRef(null);
-    var createLabel = function createLabel() {
-      if (props.showValue && props.value != null) {
-        var label = props.displayValueTemplate ? props.displayValueTemplate(props.value) : props.value + props.unit;
-        return label;
-      }
-      return null;
-    };
-    var createDeterminate = function createDeterminate() {
-      var otherProps = ProgressBarBase.getOtherProps(props);
-      var className = utils.classNames('p-progressbar p-component p-progressbar-determinate', props.className);
-      var label = createLabel();
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
-        role: "progressbar",
-        id: props.id,
-        ref: elementRef,
-        className: className,
-        style: props.style,
-        "aria-valuemin": "0",
-        "aria-valuenow": props.value,
-        "aria-valuemax": "100"
-      }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-progressbar-value p-progressbar-value-animate",
-        style: {
-          width: props.value + '%',
-          display: 'flex',
-          backgroundColor: props.color
-        }
-      }, props.value != null && props.value !== 0 && props.showValue && /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-progressbar-label"
-      }, label)));
-    };
-    var createIndeterminate = function createIndeterminate() {
-      var otherProps = ProgressBarBase.getOtherProps(props);
-      var className = utils.classNames('p-progressbar p-component p-progressbar-indeterminate', props.className);
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
-        role: "progressbar",
-        id: props.id,
-        ref: elementRef,
-        className: className,
-        style: props.style
-      }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-progressbar-indeterminate-container"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-progressbar-value p-progressbar-value-animate",
-        style: {
-          backgroundColor: props.color
-        }
-      })));
-    };
-    React__namespace.useImperativeHandle(ref, function () {
-      return {
-        props: props,
-        getElement: function getElement() {
-          return elementRef.current;
+    var ProgressBar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+      var props = ProgressBarBase.getProps(inProps);
+      var _ProgressBarBase$setM = ProgressBarBase.setMetaData({
+          props: props
+        }),
+        ptm = _ProgressBarBase$setM.ptm;
+      var elementRef = React__namespace.useRef(null);
+      var createLabel = function createLabel() {
+        if (props.showValue && props.value != null) {
+          var label = props.displayValueTemplate ? props.displayValueTemplate(props.value) : props.value + props.unit;
+          return label;
         }
+        return null;
       };
-    });
-    if (props.mode === 'determinate') return createDeterminate();else if (props.mode === 'indeterminate') return createIndeterminate();else throw new Error(props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
-  }));
-  ProgressBar.displayName = 'ProgressBar';
+      var createDeterminate = function createDeterminate() {
+        var className = utils.classNames('p-progressbar p-component p-progressbar-determinate', props.className);
+        var label = createLabel();
+        var rootProps = utils.mergeProps({
+          id: props.id,
+          ref: elementRef,
+          className: className,
+          style: props.style,
+          role: 'progressbar',
+          'aria-valuemin': '0',
+          'aria-valuenow': props.value,
+          'aria-valuemax': '100'
+        }, ProgressBarBase.getOtherProps(props), ptm('root'));
+        var valueProps = utils.mergeProps({
+          className: 'p-progressbar-value p-progressbar-value-animate',
+          style: {
+            width: props.value + '%',
+            display: 'flex',
+            backgroundColor: props.color
+          }
+        }, ptm('value'));
+        var labelProps = utils.mergeProps({
+          className: 'p-progressbar-label'
+        }, ptm('label'));
+        return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", valueProps, props.value != null && props.value !== 0 && props.showValue && /*#__PURE__*/React__namespace.createElement("div", labelProps, label)));
+      };
+      var createIndeterminate = function createIndeterminate() {
+        var className = utils.classNames('p-progressbar p-component p-progressbar-indeterminate', props.className);
+        var rootProps = utils.mergeProps({
+          id: props.id,
+          ref: elementRef,
+          className: className,
+          style: props.style,
+          role: 'progressbar'
+        }, ProgressBarBase.getOtherProps(props), ptm('root'));
+        var indeterminateContainerProps = utils.mergeProps({
+          className: 'p-progressbar-indeterminate-container'
+        }, ptm('indeterminateContainer'));
+        var valueProps = utils.mergeProps({
+          className: 'p-progressbar-value p-progressbar-value-animate',
+          style: {
+            backgroundColor: props.color
+          }
+        }, ptm('value'));
+        return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", indeterminateContainerProps, /*#__PURE__*/React__namespace.createElement("div", valueProps)));
+      };
+      React__namespace.useImperativeHandle(ref, function () {
+        return {
+          props: props,
+          getElement: function getElement() {
+            return elementRef.current;
+          }
+        };
+      });
+      if (props.mode === 'determinate') return createDeterminate();else if (props.mode === 'indeterminate') return createIndeterminate();else throw new Error(props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
+    }));
+    ProgressBar.displayName = 'ProgressBar';
 
-  exports.ProgressBar = ProgressBar;
+    exports.ProgressBar = ProgressBar;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+    Object.defineProperty(exports, '__esModule', { value: true });
 
-  return exports;
+    return exports;
 
-})({}, React, primereact.utils);
+})({}, React, primereact.utils, primereact.componentbase);
 
 this.primereact = this.primereact || {};
-this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlayservice, tooltip, utils, csstransition, portal, virtualscroller, ripple, times, search, chevrondown) {
+this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevrondown, times, overlayservice, tooltip, utils, csstransition, portal, virtualscroller, ripple, search) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11608,6 +11776,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       ariaLabel: null,
       ariaLabelledBy: null,
       autoFocus: false,
+      children: undefined,
       className: null,
       clearIcon: null,
       dataKey: null,
@@ -11617,9 +11786,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       emptyFilterMessage: null,
       emptyMessage: null,
       filter: false,
-      filterIcon: null,
       filterBy: null,
       filterClearIcon: null,
+      filterIcon: null,
       filterInputAutoFocus: true,
       filterLocale: undefined,
       filterMatchMode: 'contains',
@@ -11641,13 +11810,14 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       onMouseDown: null,
       onShow: null,
       optionDisabled: null,
-      optionGroupChildren: null,
+      optionGroupChildren: 'items',
       optionGroupLabel: null,
       optionGroupTemplate: null,
       optionLabel: null,
       optionValue: null,
       options: null,
       panelClassName: null,
+      panelFooterTemplate: null,
       panelStyle: null,
       placeholder: null,
       required: false,
@@ -11663,8 +11833,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       transitionOptions: null,
       value: null,
       valueTemplate: null,
-      virtualScrollerOptions: null,
-      children: undefined
+      virtualScrollerOptions: null
     },
     getProps: function getProps(props) {
       return utils.ObjectUtils.getMergedProps(props, DropdownBase.defaultProps);
@@ -11738,6 +11907,15 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
       props.onFilterInputChange && props.onFilterInputChange(event);
     };
+    var createFooter = function createFooter() {
+      if (props.panelFooterTemplate) {
+        var content = utils.ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          className: "p-multiselect-footer"
+        }, content);
+      }
+      return null;
+    };
     var createGroupChildren = function createGroupChildren(optionGroup, style) {
       var groupChildren = props.getOptionGroupChildren(optionGroup);
       return groupChildren.map(function (option, j) {
@@ -11886,7 +12064,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           },
           contentTemplate: function contentTemplate(options) {
             var className = utils.classNames('p-dropdown-items', options.className);
-            var content = isEmptyFilter ? createEmptyMessage() : options.children;
+            var emptyMessage = props.hasFilter ? props.emptyFilterMessage : props.emptyMessage;
+            var content = isEmptyFilter ? createEmptyMessage(emptyMessage) : options.children;
             return /*#__PURE__*/React__namespace.createElement("ul", {
               ref: options.contentRef,
               style: options.style,
@@ -11918,6 +12097,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       });
       var filter = createFilter();
       var content = createContent();
+      var footer = createFooter();
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: ref,
         classNames: "p-connected-overlay",
@@ -11938,7 +12118,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         className: className,
         style: props.panelStyle,
         onClick: props.onClick
-      }, filter, content));
+      }, filter, content, footer));
     };
     var element = createElement();
     return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
@@ -12005,9 +12185,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
               var optgroup = _step.value;
               var filteredSubOptions = PrimeReact.FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
               if (filteredSubOptions && filteredSubOptions.length) {
-                filteredGroups.push(_objectSpread(_objectSpread({}, optgroup), {
-                  items: filteredSubOptions
-                }));
+                filteredGroups.push(_objectSpread(_objectSpread({}, optgroup), _defineProperty({}, "".concat(props.optionGroupChildren), filteredSubOptions)));
               }
             }
           } catch (err) {
@@ -12058,8 +12236,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           props.onBlur({
             originalEvent: event.originalEvent,
             value: currentValue,
-            stopPropagation: function stopPropagation() {},
-            preventDefault: function preventDefault() {},
+            stopPropagation: function stopPropagation() {
+              event.originalEvent.stopPropagation();
+            },
+            preventDefault: function preventDefault() {
+              event.originalEvent.preventDefault();
+            },
             target: {
               name: props.name,
               id: props.id,
@@ -12270,8 +12452,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         props.onChange({
           originalEvent: event.originalEvent,
           value: event.target.value,
-          stopPropagation: function stopPropagation() {},
-          preventDefault: function preventDefault() {},
+          stopPropagation: function stopPropagation() {
+            event.originalEvent.stopPropagation();
+          },
+          preventDefault: function preventDefault() {
+            event.originalEvent.preventDefault();
+          },
           target: {
             name: props.name,
             id: props.id,
@@ -12318,8 +12504,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         props.onChange({
           originalEvent: event,
           value: undefined,
-          stopPropagation: function stopPropagation() {},
-          preventDefault: function preventDefault() {},
+          stopPropagation: function stopPropagation() {
+            event.stopPropagation();
+          },
+          preventDefault: function preventDefault() {
+            event.preventDefault();
+          },
           target: {
             name: props.name,
             id: props.id,
@@ -12337,8 +12527,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           props.onChange({
             originalEvent: event.originalEvent,
             value: optionValue,
-            stopPropagation: function stopPropagation() {},
-            preventDefault: function preventDefault() {},
+            stopPropagation: function stopPropagation() {
+              event.originalEvent.stopPropagation();
+            },
+            preventDefault: function preventDefault() {
+              event.originalEvent.preventDefault();
+            },
             target: {
               name: props.name,
               id: props.id,
@@ -12680,10 +12874,10 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
 
   return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.csstransition, primereact.portal, primereact.virtualscroller, primereact.ripple, primereact.icons.times, primereact.icons.search, primereact.icons.chevrondown);
+})({}, React, primereact.api, primereact.hooks, primereact.icons.chevrondown, primereact.icons.times, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.csstransition, primereact.portal, primereact.virtualscroller, primereact.ripple, primereact.icons.search);
 
 this.primereact = this.primereact || {};
-this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, hooks, portal, ripple, utils, times, windowmaximize, windowminimize) {
+this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, hooks, times, windowmaximize, windowminimize, portal, ripple, utils, componentbase) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12709,21 +12903,6 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
@@ -12836,7 +13015,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var DialogBase = {
+  var DialogBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Dialog',
       appendTo: null,
@@ -12863,9 +13042,11 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
       maskClassName: null,
       maskStyle: null,
       maximizable: false,
+      maximizeIcon: null,
       maximized: false,
       minX: 0,
       minY: 0,
+      minimizeIcon: null,
       modal: true,
       onClick: null,
       onDrag: null,
@@ -12885,17 +13066,9 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
       style: null,
       transitionOptions: null,
       visible: false,
-      maximizeIcon: null,
-      minimizeIcon: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, DialogBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, DialogBase.defaultProps);
     }
-  };
+  });
 
   function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -12920,6 +13093,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
       setMaximizedState = _React$useState8[1];
     var dialogRef = React__namespace.useRef(null);
     var maskRef = React__namespace.useRef(null);
+    var pointerRef = React__namespace.useRef(null);
     var contentRef = React__namespace.useRef(null);
     var headerRef = React__namespace.useRef(null);
     var footerRef = React__namespace.useRef(null);
@@ -12931,6 +13105,15 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     var styleElement = React__namespace.useRef(null);
     var attributeSelector = React__namespace.useRef(uniqueId);
     var maximized = props.onMaximize ? props.maximized : maximizedState;
+    var _DialogBase$setMetaDa = DialogBase.setMetaData({
+        props: props,
+        state: {
+          id: idState,
+          maximized: maximized,
+          containerVisible: maskVisibleState
+        }
+      }),
+      ptm = _DialogBase$setMetaDa.ptm;
     var _useEventListener = hooks.useEventListener({
         type: 'keydown',
         listener: function listener(event) {
@@ -12999,11 +13182,16 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
         closeRef.current.focus();
       }
     };
-    var onMaskClick = function onMaskClick(event) {
-      if (props.dismissableMask && props.modal && maskRef.current === event.target) {
+    var onDialogPointerDown = function onDialogPointerDown(event) {
+      pointerRef.current = event.target;
+      props.onPointerDown && props.onPointerDown(event);
+    };
+    var onMaskPointerUp = function onMaskPointerUp(event) {
+      if (props.dismissableMask && props.modal && maskRef.current === event.target && !pointerRef.current) {
         onClose(event);
       }
       props.onMaskClick && props.onMaskClick(event);
+      pointerRef.current = null;
     };
     var toggleMaximize = function toggleMaximize(event) {
       if (props.onMaximize) {
@@ -13245,7 +13433,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     };
     var changeScrollOnMaximizable = function changeScrollOnMaximizable() {
       if (!props.blockScroll) {
-        var funcName = maximized ? 'addClass' : 'removeClass';
+        var funcName = maximized && visibleState ? 'addClass' : 'removeClass';
         utils.DomHandler[funcName](document.body, 'p-overflow-hidden');
       }
     };
@@ -13273,7 +13461,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     }, [maskVisibleState]);
     hooks.useUpdateEffect(function () {
       changeScrollOnMaximizable();
-    }, [props.maximized, maximizedState]);
+    }, [props.maximized, maximizedState, visibleState]);
     hooks.useUnmountEffect(function () {
       disableDocumentSettings();
       utils.DomHandler.removeInlineStyle(styleElement.current);
@@ -13306,47 +13494,46 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     var createCloseIcon = function createCloseIcon() {
       if (props.closable) {
         var ariaLabel = props.ariaCloseIconLabel || PrimeReact.localeOption('close');
-        var iconProps = {
+        var closeButtonIconProps = utils.mergeProps({
           className: 'p-dialog-header-close-icon',
           'aria-hidden': true
-        };
-        var icon = props.closeIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, iconProps);
-        var headerCloseIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+        }, ptm('closeButtonIcon'));
+        var icon = props.closeIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, closeButtonIconProps);
+        var headerCloseIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, closeButtonIconProps), {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("button", {
+        var closeButtonProps = utils.mergeProps({
           ref: closeRef,
-          type: "button",
-          className: "p-dialog-header-icon p-dialog-header-close p-link",
-          "aria-label": ariaLabel,
+          type: 'button',
+          className: 'p-dialog-header-icon p-dialog-header-close p-link',
+          'aria-label': ariaLabel,
           onClick: onClose
-        }, headerCloseIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, ptm('closeButton'));
+        return /*#__PURE__*/React__namespace.createElement("button", closeButtonProps, headerCloseIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
     var createMaximizeIcon = function createMaximizeIcon() {
       var icon;
       var iconClassName = 'p-dialog-header-maximize-icon';
+      var maximizableIconProps = utils.mergeProps({
+        className: iconClassName
+      }, ptm('maximizableIcon'));
       if (!maximized) {
-        icon = props.maximizeIcon || /*#__PURE__*/React__namespace.createElement(windowmaximize.WindowMaximizeIcon, {
-          className: iconClassName
-        });
+        icon = props.maximizeIcon || /*#__PURE__*/React__namespace.createElement(windowmaximize.WindowMaximizeIcon, maximizableIconProps);
       } else {
-        icon = props.minimizeIcon || /*#__PURE__*/React__namespace.createElement(windowminimize.WindowMinimizeIcon, {
-          className: iconClassName
-        });
+        icon = props.minimizeIcon || /*#__PURE__*/React__namespace.createElement(windowminimize.WindowMinimizeIcon, maximizableIconProps);
       }
-      var toggleIcon = utils.IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      var toggleIcon = utils.IconUtils.getJSXIcon(icon, maximizableIconProps, {
         props: props
       });
       if (props.maximizable) {
-        return /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          className: "p-dialog-header-icon p-dialog-header-maximize p-link",
+        var maximizableButtonProps = utils.mergeProps({
+          type: 'button',
+          className: 'p-dialog-header-icon p-dialog-header-maximize p-link',
           onClick: toggleMaximize
-        }, toggleIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, ptm('maximizableButton'));
+        return /*#__PURE__*/React__namespace.createElement("button", maximizableButtonProps, toggleIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
@@ -13358,36 +13545,41 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
         var header = utils.ObjectUtils.getJSXElement(props.header, props);
         var headerId = idState + '_header';
         var headerClassName = utils.classNames('p-dialog-header', props.headerClassName);
-        return /*#__PURE__*/React__namespace.createElement("div", {
+        var headerProps = utils.mergeProps({
           ref: headerRef,
           style: props.headerStyle,
           className: headerClassName,
           onMouseDown: onDragStart
-        }, /*#__PURE__*/React__namespace.createElement("div", {
+        }, ptm('header'));
+        var headerTitleProps = utils.mergeProps({
           id: headerId,
-          className: "p-dialog-title"
-        }, header), /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-dialog-header-icons"
-        }, icons, maximizeIcon, closeIcon));
+          className: 'p-dialog-title'
+        }, ptm('headerTitle'));
+        var headerIconsProps = utils.mergeProps({
+          className: 'p-dialog-header-icons'
+        }, ptm('headerIcons'));
+        return /*#__PURE__*/React__namespace.createElement("div", headerProps, /*#__PURE__*/React__namespace.createElement("div", headerTitleProps, header), /*#__PURE__*/React__namespace.createElement("div", headerIconsProps, icons, maximizeIcon, closeIcon));
       }
       return null;
     };
     var createContent = function createContent() {
       var className = utils.classNames('p-dialog-content', props.contentClassName);
       var contentId = idState + '_content';
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      var contentProps = utils.mergeProps({
         id: contentId,
         ref: contentRef,
-        className: className,
-        style: props.contentStyle
-      }, props.children);
+        style: props.contentStyle,
+        className: className
+      }, ptm('content'));
+      return /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children);
     };
     var createFooter = function createFooter() {
       var footer = utils.ObjectUtils.getJSXElement(props.footer, props);
-      return footer && /*#__PURE__*/React__namespace.createElement("div", {
+      var footerProps = utils.mergeProps({
         ref: footerRef,
-        className: "p-dialog-footer"
-      }, footer);
+        className: 'p-dialog-footer'
+      }, ptm('footer'));
+      return footer && /*#__PURE__*/React__namespace.createElement("div", footerProps, footer);
     };
     var createResizer = function createResizer() {
       if (props.resizable) {
@@ -13402,7 +13594,6 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
       return null;
     };
     var createElement = function createElement() {
-      var otherProps = DialogBase.getOtherProps(props);
       var className = utils.classNames('p-dialog p-component', props.className, {
         'p-dialog-rtl': props.rtl,
         'p-dialog-maximized': maximized,
@@ -13426,12 +13617,25 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
         enter: props.position === 'center' ? 150 : 300,
         exit: props.position === 'center' ? 150 : 300
       };
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      var maskProps = utils.mergeProps({
         ref: maskRef,
         style: props.maskStyle,
         className: maskClassName,
-        onClick: onMaskClick
-      }, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
+        onPointerUp: onMaskPointerUp
+      }, ptm('mask'));
+      var rootProps = utils.mergeProps({
+        ref: dialogRef,
+        id: idState,
+        className: className,
+        style: props.style,
+        onClick: props.onClick,
+        role: 'dialog',
+        'aria-labelledby': headerId,
+        'aria-describedby': contentId,
+        'aria-modal': props.modal,
+        onPointerDown: onDialogPointerDown
+      }, DialogBase.getOtherProps(props), ptm('root'));
+      return /*#__PURE__*/React__namespace.createElement("div", maskProps, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: dialogRef,
         classNames: "p-dialog",
         timeout: transitionTimeout,
@@ -13442,18 +13646,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
         onEntered: onEntered,
         onExiting: onExiting,
         onExited: onExited
-      }, /*#__PURE__*/React__namespace.createElement("div", _extends({
-        ref: dialogRef,
-        id: idState,
-        className: className,
-        style: props.style,
-        onClick: props.onClick,
-        role: "dialog"
-      }, otherProps, {
-        "aria-labelledby": headerId,
-        "aria-describedby": contentId,
-        "aria-modal": props.modal
-      }), header, content, footer, resizer)));
+      }, /*#__PURE__*/React__namespace.createElement("div", rootProps, header, content, footer, resizer)));
     };
     var createDialog = function createDialog() {
       var element = createElement();
@@ -13473,7 +13666,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
 
   return exports;
 
-})({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.portal, primereact.ripple, primereact.utils, primereact.icons.times, primereact.icons.windowmaximize, primereact.icons.windowminimize);
+})({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.icons.times, primereact.icons.windowmaximize, primereact.icons.windowminimize, primereact.portal, primereact.ripple, primereact.utils, primereact.componentbase);
 
 this.primereact = this.primereact || {};
 this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple, angledoubleleft, inputnumber, angledoubleright, angleright, angleleft, dropdown) {