primereact 10.5.1 → 10.5.2

package/metergroup/metergroup.js

@@ -0,0 +1,236 @@
+this.primereact = this.primereact || {};
+this.primereact.metergroup = (function (exports, react, hooks, api, utils, componentbase) {
+  'use strict';
+
+  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(o) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+      return typeof o;
+    } : function (o) {
+      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+    }, _typeof(o);
+  }
+
+  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;
+  }
+
+  var classes = {
+    root: function root(_ref) {
+      var props = _ref.props;
+      return [utils.classNames('p-metergroup p-component', {
+        'p-metergroup-horizontal': props.orientation === 'horizontal',
+        'p-metergroup-vertical': props.orientation === 'vertical'
+      })];
+    },
+    metercontainer: 'p-metergroup-meter-container',
+    meter: 'p-metergroup-meter',
+    labellist: function labellist(_ref2) {
+      var props = _ref2.props;
+      return utils.classNames('p-metergroup-label-list', {
+        'p-metergroup-label-list-start': props.labelPosition === 'start',
+        'p-metergroup-label-list-end': props.labelPosition === 'end',
+        'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
+        'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
+      });
+    },
+    labellistitem: 'p-metergroup-label-list-item',
+    labelicon: 'p-metergroup-label-icon',
+    labellisttype: 'p-metergroup-label-type',
+    label: 'p-metergroup-label'
+  };
+  var styles = "\n@layer primereact {\n    .p-metergroup {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .p-metergroup-vertical.p-metergroup {\n        display: flex;\n    }\n\n    .p-metergroup-vertical .p-metergroup-meter-container {\n        flex-direction: column;\n    }\n\n    .p-metergroup-meter-container {\n        display: flex;\n    }\n\n    .p-metergroup-label-list {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n    .p-metergroup-vertical .p-metergroup-label-list {\n        align-items: start;\n    }\n\n    .p-metergroup-label-list-vertical {\n        flex-direction: column;\n    }\n\n    .p-metergroup-label-list-horizontal {\n        flex-direction: row;\n    }\n\n    .p-metergroup-label-list-item {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-metergroup-label-type {\n        display: inline-block;\n    }\n}\n";
+  var MeterGroupBase = componentbase.ComponentBase.extend({
+    defaultProps: {
+      __TYPE: 'MeterGroup',
+      __parentMetadata: null,
+      children: undefined,
+      className: null,
+      values: null,
+      min: 0,
+      max: 100,
+      orientation: 'horizontal',
+      labelPosition: 'end',
+      labelOrientation: 'horizontal',
+      start: null,
+      end: null,
+      meter: null,
+      labelList: null
+    },
+    css: {
+      classes: classes,
+      styles: styles
+    }
+  });
+
+  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  var MeterGroup = function MeterGroup(inProps) {
+    var context = react.useContext(api.PrimeReactContext);
+    var props = MeterGroupBase.getProps(inProps, context);
+    var values = props.values,
+      min = props.min,
+      max = props.max,
+      orientation = props.orientation,
+      labelPosition = props.labelPosition,
+      start = props.start,
+      end = props.end,
+      meter = props.meter,
+      labelList = props.labelList;
+    var mergeProps = hooks.useMergeProps();
+    var _MeterGroupBase$setMe = MeterGroupBase.setMetaData(_objectSpread(_objectSpread({
+        props: props
+      }, props.__parentMetadata), {}, {
+        context: {
+          disabled: props.disabled
+        }
+      })),
+      ptm = _MeterGroupBase$setMe.ptm,
+      cx = _MeterGroupBase$setMe.cx,
+      isUnstyled = _MeterGroupBase$setMe.isUnstyled;
+    componentbase.useHandleStyle(MeterGroupBase.css.styles, isUnstyled, {
+      name: 'progressbar'
+    });
+    var totalPercent = 0;
+    var precentages = [];
+    values.map(function (item) {
+      totalPercent += item.value;
+      precentages.push(Math.round(item.value / totalPercent * 100));
+    });
+    var calculatePercentage = function calculatePercentage() {
+      var meterValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var percentageOfItem = (meterValue - min) / (max - min) * 100;
+      return Math.round(Math.max(0, Math.min(100, percentageOfItem)));
+    };
+    var rootProps = mergeProps({
+      className: utils.classNames(props.className, cx('root', {
+        orientation: orientation
+      }))
+    }, MeterGroupBase.getOtherProps(props), ptm('root'));
+    var createMeters = function createMeters() {
+      var meters = values.map(function (item, index) {
+        var calculatedPercantage = calculatePercentage(item.value);
+        var meterInlineStyles = {
+          backgroundColor: item.color,
+          width: orientation === 'horizontal' ? calculatedPercantage + '%' : 'auto',
+          height: orientation === 'vertical' ? calculatedPercantage + '%' : 'auto'
+        };
+        var meterProps = mergeProps({
+          className: cx('meter'),
+          style: meterInlineStyles
+        }, ptm('meter'));
+        if (meter || item.meterTemplate) {
+          var meterTemplateProps = mergeProps({
+            className: cx('meter')
+          }, ptm('meter'));
+          return utils.ObjectUtils.getJSXElement(item.meterTemplate || meter, _objectSpread(_objectSpread({}, item), {}, {
+            percentage: calculatedPercantage,
+            index: index
+          }), meterTemplateProps);
+        } else {
+          return /*#__PURE__*/React.createElement("span", _extends({
+            key: index
+          }, meterProps));
+        }
+      });
+      var meterContainerProps = mergeProps({
+        className: cx('metercontainer')
+      }, ptm('metercontainer'));
+      return /*#__PURE__*/React.createElement("div", meterContainerProps, meters);
+    };
+    var createLabelList = function createLabelList() {
+      var labelListProps = mergeProps({
+        className: cx('labellist')
+      }, ptm('labellist'));
+      var labelItemProps = mergeProps({
+        className: cx('labellistitem')
+      }, ptm('labellistitem'));
+      var labelProps = mergeProps({
+        className: cx('label')
+      }, ptm('label'));
+      return /*#__PURE__*/React.createElement("ol", labelListProps, values.map(function (item, index) {
+        var labelIconProps = mergeProps({
+          className: utils.classNames(cx('labelicon'), item.icon),
+          style: {
+            color: item.color
+          }
+        }, ptm('labelicon'));
+        var labelListIconProps = mergeProps({
+          className: cx('labellisttype'),
+          style: {
+            backgroundColor: item.color
+          }
+        }, ptm('labellisttype'));
+        var labelIcon = item.icon ? /*#__PURE__*/React.createElement("i", labelIconProps) : /*#__PURE__*/React.createElement("span", labelListIconProps);
+        return /*#__PURE__*/React.createElement("li", _extends({
+          key: index
+        }, labelItemProps), labelIcon, /*#__PURE__*/React.createElement("span", labelProps, item === null || item === void 0 ? void 0 : item.label, " ", (item === null || item === void 0 ? void 0 : item.value) && "(".concat(item === null || item === void 0 ? void 0 : item.value, "%)")));
+      }));
+    };
+    var templateProps = {
+      totalPercent: totalPercent,
+      precentages: precentages,
+      values: values
+    };
+    var labelElement = utils.ObjectUtils.getJSXElement(labelList || createLabelList, {
+      values: values,
+      totalPercent: totalPercent
+    });
+    return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
+      role: "meter",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": totalPercent
+    }), labelPosition === 'start' && labelElement, start && utils.ObjectUtils.getJSXElement(start, templateProps), createMeters(), end && utils.ObjectUtils.getJSXElement(end, templateProps), labelPosition === 'end' && labelElement);
+  };
+
+  exports.MeterGroup = MeterGroup;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+  return exports;
+
+})({}, React, primereact.hooks, primereact.api, primereact.utils, primereact.componentbase);

package/metergroup/metergroup.min.js

@@ -0,0 +1 @@
+this.primereact=this.primereact||{},this.primereact.metergroup=function(e,t,r,n,l,a){"use strict";function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}function i(e){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function s(e,t){if("object"!==i(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function c(e){var t=s(e,"string");return"symbol"===i(t)?t:String(t)}var p=a.ComponentBase.extend({defaultProps:{__TYPE:"MeterGroup",__parentMetadata:null,children:void 0,className:null,values:null,min:0,max:100,orientation:"horizontal",labelPosition:"end",labelOrientation:"horizontal",start:null,end:null,meter:null,labelList:null},css:{classes:{root:function(e){var t=e.props;return[l.classNames("p-metergroup p-component",{"p-metergroup-horizontal":"horizontal"===t.orientation,"p-metergroup-vertical":"vertical"===t.orientation})]},metercontainer:"p-metergroup-meter-container",meter:"p-metergroup-meter",labellist:function(e){var t=e.props;return l.classNames("p-metergroup-label-list",{"p-metergroup-label-list-start":"start"===t.labelPosition,"p-metergroup-label-list-end":"end"===t.labelPosition,"p-metergroup-label-list-vertical":"vertical"===t.labelOrientation,"p-metergroup-label-list-horizontal":"horizontal"===t.labelOrientation})},labellistitem:"p-metergroup-label-list-item",labelicon:"p-metergroup-label-icon",labellisttype:"p-metergroup-label-type",label:"p-metergroup-label"},styles:"\n@layer primereact {\n    .p-metergroup {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .p-metergroup-vertical.p-metergroup {\n        display: flex;\n    }\n\n    .p-metergroup-vertical .p-metergroup-meter-container {\n        flex-direction: column;\n    }\n\n    .p-metergroup-meter-container {\n        display: flex;\n    }\n\n    .p-metergroup-label-list {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n    .p-metergroup-vertical .p-metergroup-label-list {\n        align-items: start;\n    }\n\n    .p-metergroup-label-list-vertical {\n        flex-direction: column;\n    }\n\n    .p-metergroup-label-list-horizontal {\n        flex-direction: row;\n    }\n\n    .p-metergroup-label-list-item {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-metergroup-label-type {\n        display: inline-block;\n    }\n}\n"}});function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?m(Object(r),!0).forEach((function(t){var n,l,a;n=e,a=r[t],(l=c(l=t))in n?Object.defineProperty(n,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[l]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}return e.MeterGroup=function(e){var i=t.useContext(n.PrimeReactContext),s=p.getProps(e,i),c=s.values,m=s.min,b=s.max,g=s.orientation,v=s.labelPosition,f=s.start,y=s.end,d=s.meter,h=s.labelList,O=r.useMergeProps(),P=p.setMetaData(u(u({props:s},s.__parentMetadata),{},{context:{disabled:s.disabled}})),j=P.ptm,x=P.cx;a.useHandleStyle(p.css.styles,P.isUnstyled,{name:"progressbar"});var E=0,N=[];c.map((function(e){E+=e.value,N.push(Math.round(e.value/E*100))}));var S,w,M=function(){return Math.round(Math.max(0,Math.min(100,((arguments.length>0&&void 0!==arguments[0]?arguments[0]:0)-m)/(b-m)*100)))},R=O({className:l.classNames(s.className,x("root",{orientation:g}))},p.getOtherProps(s),j("root")),z={totalPercent:E,precentages:N,values:c},_=l.ObjectUtils.getJSXElement(h||function(){var e=O({className:x("labellist")},j("labellist")),t=O({className:x("labellistitem")},j("labellistitem")),r=O({className:x("label")},j("label"));return React.createElement("ol",e,c.map((function(e,n){var a=O({className:l.classNames(x("labelicon"),e.icon),style:{color:e.color}},j("labelicon")),i=O({className:x("labellisttype"),style:{backgroundColor:e.color}},j("labellisttype")),s=e.icon?React.createElement("i",a):React.createElement("span",i);return React.createElement("li",o({key:n},t),s,React.createElement("span",r,null==e?void 0:e.label," ",(null==e?void 0:e.value)&&"(".concat(null==e?void 0:e.value,"%)")))})))},{values:c,totalPercent:E});return React.createElement("div",o({},R,{role:"meter","aria-valuemin":m,"aria-valuemax":b,"aria-valuenow":E}),"start"===v&&_,f&&l.ObjectUtils.getJSXElement(f,z),(S=c.map((function(e,t){var r=M(e.value),n={backgroundColor:e.color,width:"horizontal"===g?r+"%":"auto",height:"vertical"===g?r+"%":"auto"},a=O({className:x("meter"),style:n},j("meter"));if(d||e.meterTemplate){var i=O({className:x("meter")},j("meter"));return l.ObjectUtils.getJSXElement(e.meterTemplate||d,u(u({},e),{},{percentage:r,index:t}),i)}return React.createElement("span",o({key:t},a))})),w=O({className:x("metercontainer")},j("metercontainer")),React.createElement("div",w,S)),y&&l.ObjectUtils.getJSXElement(y,z),"end"===v&&_)},Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.hooks,primereact.api,primereact.utils,primereact.componentbase);

package/multiselect/multiselect.cjs.js

@@ -184,6 +184,7 @@ var classes$1 = {
     return utils.classNames('p-multiselect p-component p-inputwrapper', {
       'p-multiselect-chip': props.display === 'chip',
       'p-disabled': props.disabled,
+      'p-invalid': props.invalid,
       'p-multiselect-clearable': props.showClear && !props.disabled,
       'p-focus': focusedState,
       'p-inputwrapper-filled': utils.ObjectUtils.isNotEmpty(props.value),
@@ -243,24 +244,18 @@ var classes$1 = {
   },
   checkboxContainer: 'p-checkbox p-component',
   checkboxIcon: 'p-checkbox-icon p-c',
-  checkbox: function checkbox(_ref6) {
-    var props = _ref6.itemProps;
-    return utils.classNames('p-checkbox-box', {
-      'p-highlight': props.selected
-    });
-  },
   transition: 'p-connected-overlay'
 };
-var styles$1 = "\n@layer primereact {\n    .p-multiselect {\n        display: inline-flex;\n        user-select: none;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label-container {\n        overflow: hidden;\n        flex: 1 1 auto;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label  {\n        display: block;\n        white-space: nowrap;\n        cursor: pointer;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    \n    .p-multiselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-multiselect-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-multiselect-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-multiselect .p-multiselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel {\n        border: none;\n        position: initial;\n        background: none;\n        box-shadow: none;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {\n        padding: 0;\n    }\n    \n    .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    \n    .p-multiselect-items-wrapper {\n        overflow: auto;\n    }\n    \n    .p-multiselect-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    \n    .p-multiselect-item {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: normal;\n        white-space: nowrap;\n        position: relative;\n        overflow: hidden;\n        outline: none;\n    }\n    \n    .p-multiselect-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-multiselect-select-all-label {\n        margin-left: 0.5rem;\n    }\n    \n    .p-multiselect-filter-container {\n        position: relative;\n        flex: 1 1 auto;\n    }\n    \n    .p-multiselect-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-multiselect-filter-container .p-inputtext {\n        width: 100%;\n    }\n    \n    .p-multiselect-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n        margin-left: auto;\n    }\n    \n    .p-multiselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n        right: 3rem;\n    }\n    \n    .p-fluid .p-multiselect {\n        display: flex;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-multiselect {\n        display: inline-flex;\n        user-select: none;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label-container {\n        overflow: hidden;\n        flex: 1 1 auto;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label  {\n        display: block;\n        white-space: nowrap;\n        cursor: pointer;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    \n    .p-multiselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-multiselect-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-multiselect-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-multiselect .p-multiselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel {\n        border: none;\n        position: initial;\n        background: none;\n        box-shadow: none;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {\n        padding: 0;\n    }\n    \n    .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    \n    .p-multiselect-items-wrapper {\n        overflow: auto;\n    }\n    \n    .p-multiselect-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    \n    .p-multiselect-item {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: normal;\n        white-space: nowrap;\n        position: relative;\n        overflow: hidden;\n        outline: none;\n    }\n    \n    .p-multiselect-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-multiselect-select-all-label {\n        margin-left: 0.5rem;\n    }\n    \n    .p-multiselect-filter-container {\n        position: relative;\n        flex: 1 1 auto;\n    }\n    \n    .p-multiselect-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-multiselect-filter-container .p-inputtext {\n        width: 100%;\n    }\n    \n    .p-multiselect-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n        margin-left: auto;\n    }\n    \n    .p-multiselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n        right: 3rem;\n    }\n    \n    .p-fluid .p-multiselect {\n        display: flex;\n    }\n}\n";
 var inlineStyles = {
-  root: function root(_ref7) {
-    var props = _ref7.props;
+  root: function root(_ref6) {
+    var props = _ref6.props;
     return props.showClear && !props.disabled && {
       position: 'relative'
     };
   },
-  itemGroup: function itemGroup(_ref8) {
-    var scrollerOptions = _ref8.scrollerOptions;
+  itemGroup: function itemGroup(_ref7) {
+    var scrollerOptions = _ref7.scrollerOptions;
     return {
       height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
     };
@@ -296,10 +291,12 @@ var MultiSelectBase = componentbase.ComponentBase.extend({
     inline: false,
     inputId: null,
     inputRef: null,
+    invalid: false,
     itemCheckboxIcon: null,
     itemClassName: null,
     itemTemplate: null,
     loading: false,
+    loadingIcon: null,
     maxSelectedLabels: null,
     name: null,
     onBlur: null,
@@ -346,35 +343,26 @@ var MultiSelectBase = componentbase.ComponentBase.extend({
   },
   css: {
     classes: classes$1,
-    styles: styles$1,
+    styles: styles,
     inlineStyles: inlineStyles
   }
 });
 
 var classes = {
-  icon: 'p-checkbox-icon p-c',
-  input: function input(_ref) {
+  box: 'p-checkbox-box',
+  input: 'p-checkbox-input',
+  icon: 'p-checkbox-icon',
+  root: function root(_ref) {
     var props = _ref.props,
-      checked = _ref.checked,
-      focusedState = _ref.focusedState;
-    return utils.classNames('p-checkbox-box', {
+      checked = _ref.checked;
+    return utils.classNames('p-checkbox p-component', {
       'p-highlight': checked,
       'p-disabled': props.disabled,
-      'p-focus': focusedState
-    });
-  },
-  root: function root(_ref2) {
-    var props = _ref2.props,
-      checked = _ref2.checked,
-      focusedState = _ref2.focusedState;
-    return utils.classNames('p-checkbox p-component', {
-      'p-checkbox-checked': checked,
-      'p-checkbox-disabled': props.disabled,
-      'p-checkbox-focused': focusedState
+      'p-invalid': props.invalid,
+      'p-variant-filled': props.variant === 'filled'
     });
   }
 };
-var styles = "\n.p-checkbox {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: bottom;\n    position: relative;\n}\n\n.p-checkbox.p-checkbox-disabled {\n    cursor: auto;\n}\n\n.p-checkbox-box {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}        \n";
 var CheckboxBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Checkbox',
@@ -387,6 +375,7 @@ var CheckboxBase = componentbase.ComponentBase.extend({
     id: null,
     inputId: null,
     inputRef: null,
+    invalid: false,
     name: null,
     onChange: null,
     onClick: null,
@@ -403,8 +392,7 @@ var CheckboxBase = componentbase.ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes,
-    styles: styles
+    classes: classes
   }
 });
 
@@ -414,15 +402,8 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var mergeProps = hooks.useMergeProps();
   var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
   var props = CheckboxBase.getProps(inProps, context);
-  var _React$useState = React__namespace.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedState = _React$useState2[0],
-    setFocusedState = _React$useState2[1];
   var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
       props: props,
-      state: {
-        focused: focusedState
-      },
       context: {
         checked: props.checked === props.trueValue,
         disabled: props.disabled
@@ -432,20 +413,19 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     cx = _CheckboxBase$setMeta.cx,
     isUnstyled = _CheckboxBase$setMeta.isUnstyled;
   componentbase.useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
-    name: 'checkbox',
-    styled: true
+    name: 'checkbox'
   });
   var elementRef = React__namespace.useRef(null);
   var inputRef = React__namespace.useRef(props.inputRef);
-  var _onClick = function onClick(event) {
-    if (props.disabled || props.readOnly) {
+  var isChecked = function isChecked() {
+    return props.checked === props.trueValue;
+  };
+  var _onChange = function onChange(event) {
+    if (props.disabled || props.readonly) {
       return;
     }
-    if (props.onChange || props.onClick) {
+    if (props.onChange) {
       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;
       var value = _checked ? props.falseValue : props.trueValue;
       var eventData = {
         originalEvent: event,
@@ -465,33 +445,22 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           checked: value
         }
       };
-      props.onClick && props.onClick(eventData);
+      props.onChange && props.onChange(eventData);
 
       // do not continue if the user defined click wants to prevent
       if (event.defaultPrevented) {
         return;
       }
-      if (isInputToggled || isCheckboxToggled) {
-        props.onChange && props.onChange(eventData);
-      }
       utils.DomHandler.focus(inputRef.current);
-      event.preventDefault();
     }
   };
   var _onFocus = function onFocus() {
-    setFocusedState(true);
+    var _props$onFocus;
+    props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
   };
   var _onBlur = function onBlur() {
-    setFocusedState(false);
-  };
-  var _onKeyDown = function onKeyDown(event) {
-    if (event.code === 'Space' || event.key === ' ') {
-      // event.key is for Android support
-      _onClick(event);
-    }
-  };
-  var isChecked = function isChecked() {
-    return props.checked === props.trueValue;
+    var _props$onBlur;
+    props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
   };
   React__namespace.useImperativeHandle(ref, function () {
     return {
@@ -521,66 +490,66 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var checked = isChecked();
   var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = CheckboxBase.getOtherProps(props);
-  var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
-  var iconProps = mergeProps({
-    className: cx('icon')
-  }, ptm('icon'));
-  var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, iconProps) : null;
-  var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$4({}, iconProps), {
-    props: props,
-    checked: checked
-  });
   var rootProps = mergeProps({
     id: props.id,
     className: utils.classNames(props.className, cx('root', {
-      checked: checked,
-      focusedState: focusedState
+      checked: checked
     })),
     style: props.style,
-    onClick: function onClick(e) {
-      return _onClick(e);
-    },
     'data-p-highlight': checked,
     'data-p-disabled': props.disabled,
     onContextMenu: props.onContextMenu,
     onMouseDown: props.onMouseDown
   }, otherProps, ptm('root'));
-  var hiddenInputWrapperProps = mergeProps({
-    className: 'p-hidden-accessible'
-  }, ptm('hiddenInputWrapper'));
-  var hiddenInputProps = mergeProps(_objectSpread$4({
-    id: props.inputId,
-    type: 'checkbox',
-    name: props.name,
-    tabIndex: props.tabIndex,
-    defaultChecked: checked,
-    onFocus: function onFocus(e) {
-      return _onFocus();
-    },
-    onBlur: function onBlur(e) {
-      return _onBlur();
-    },
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown(e);
-    },
-    disabled: props.disabled,
-    readOnly: props.readOnly,
-    required: props.required
-  }, ariaProps), ptm('hiddenInput'));
-  var inputProps = mergeProps({
-    className: cx('input', {
-      checked: checked,
-      focusedState: focusedState
-    }),
-    'data-p-highlight': checked,
-    'data-p-disabled': props.disabled,
-    'data-p-focus': focusedState
-  }, ptm('input'));
+  var createInputElement = function createInputElement() {
+    var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
+    var inputProps = mergeProps(_objectSpread$4({
+      id: props.inputId,
+      type: 'checkbox',
+      className: cx('input'),
+      name: props.name,
+      tabIndex: props.tabIndex,
+      defaultChecked: checked,
+      onFocus: function onFocus(e) {
+        return _onFocus();
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur();
+      },
+      onChange: function onChange(e) {
+        return _onChange(e);
+      },
+      disabled: props.disabled,
+      readOnly: props.readOnly,
+      required: props.required,
+      'aria-invalid': props.invalid,
+      checked: isChecked()
+    }, ariaProps), ptm('input'));
+    return /*#__PURE__*/React__namespace.createElement("input", _extends({
+      ref: inputRef
+    }, inputProps));
+  };
+  var createBoxElement = function createBoxElement() {
+    var iconProps = mergeProps({
+      className: cx('icon')
+    }, ptm('icon'));
+    var boxProps = mergeProps({
+      className: cx('box', {
+        checked: checked
+      }),
+      'data-p-highlight': checked,
+      'data-p-disabled': props.disabled
+    }, ptm('box'));
+    var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, iconProps) : null;
+    var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$4({}, iconProps), {
+      props: props,
+      checked: checked
+    });
+    return /*#__PURE__*/React__namespace.createElement("div", boxProps, checkboxIcon);
+  };
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: elementRef
-  }, rootProps), /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({
-    ref: inputRef
-  }, hiddenInputProps))), /*#__PURE__*/React__namespace.createElement("div", inputProps, checkboxIcon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+  }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
     target: elementRef,
     content: props.tooltip,
     pt: ptm('tooltip')
@@ -641,7 +610,7 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       var content = /*#__PURE__*/React__namespace.createElement("div", filterContainerProps, /*#__PURE__*/React__namespace.createElement(inputtext.InputText, {
         ref: props.filterRef,
         type: "text",
-        role: "textbox",
+        role: "searchbox",
         value: props.filterValue,
         onChange: onFilter,
         className: "p-multiselect-filter",
@@ -741,7 +710,8 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
     setFocusedState = _React$useState2[1];
   var mergeProps = hooks.useMergeProps();
   var ptm = props.ptm,
-    cx = props.cx;
+    cx = props.cx,
+    isUnstyled = props.isUnstyled;
   var getPTOptions = function getPTOptions(key) {
     return ptm(key, {
       hostName: props.hostName,
@@ -779,12 +749,6 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var checkboxContainerProps = mergeProps({
     className: cx('checkboxContainer')
   }, getPTOptions('checkboxContainer'));
-  var checkboxProps = mergeProps({
-    className: cx('checkbox', {
-      itemProps: props
-    }),
-    'data-p-highlight': props.selected
-  }, getPTOptions('checkbox'));
   var itemProps = mergeProps({
     className: utils.classNames(props.className, props.option.className, cx('item', {
       itemProps: props
@@ -799,7 +763,12 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
     'data-p-highlight': props.selected,
     'data-p-disabled': props.disabled
   }, getPTOptions('item'));
-  return /*#__PURE__*/React__namespace.createElement("li", itemProps, /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkboxIcon)), /*#__PURE__*/React__namespace.createElement("span", null, content), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+  return /*#__PURE__*/React__namespace.createElement("li", itemProps, /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement(Checkbox, {
+    checked: props.selected,
+    icon: checkboxIcon,
+    pt: ptm('checkbox'),
+    unstyled: isUnstyled()
+  })), /*#__PURE__*/React__namespace.createElement("span", null, content), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
 });
 MultiSelectItem.displayName = 'MultiSelectItem';
 
@@ -905,6 +874,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         disabled: disabled,
         className: props.itemClassName,
         checkboxIcon: props.checkboxIcon,
+        isUnstyled: isUnstyled,
         ptm: ptm,
         cx: cx
       });
@@ -963,6 +933,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         disabled: disabled,
         className: props.itemClassName,
         checkboxIcon: props.checkboxIcon,
+        isUnstyled: isUnstyled,
         ptm: ptm,
         cx: cx
       });
@@ -1233,7 +1204,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       }).map(function (option) {
         return getOptionValue(option);
       });
-      updateModel(event, value);
+      updateModel(event, value, value);
     }
   };
   var onOptionSelect = function onOptionSelect(event, option) {
@@ -1246,7 +1217,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     if (selected) value = props.value.filter(function (val) {
       return !utils.ObjectUtils.equals(val, getOptionValue(option), equalityKey);
     });else value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
-    updateModel(event, value);
+    updateModel(event, value, option);
     index !== -1 && setFocusedOptionIndex(index);
   };
   var onClick = function onClick(event) {
@@ -1406,7 +1377,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
           }).map(function (option) {
             return getOptionValue(option);
           });
-          updateModel(event, value);
+          updateModel(event, value, value);
           event.preventDefault();
           break;
         }
@@ -2043,7 +2014,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
-    role: 'listbox',
+    role: 'combobox',
     'aria-expanded': overlayVisibleState,
     disabled: props.disabled,
     tabIndex: !props.disabled ? props.tabIndex : -1