primereact 9.4.0 → 9.6.0

package/multiselect/multiselect.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chevrondown, times, timescircle, overlayservice, tooltip, utils, csstransition, portal, virtualscroller, check, inputtext, ripple, search) {
+this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chevrondown, times, timescircle, overlayservice, tooltip, utils, componentbase, csstransition, portal, virtualscroller, check, search, inputtext, ripple) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -152,7 +152,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
   }
 
-  var MultiSelectBase = {
+  var MultiSelectBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'MultiSelect',
       appendTo: null,
@@ -167,6 +167,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       emptyFilterMessage: null,
       filter: false,
       filterBy: null,
+      filterInputAutoFocus: true,
       filterLocale: undefined,
       filterMatchMode: 'contains',
       filterPlaceholder: null,
@@ -182,6 +183,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       itemTemplate: null,
       maxSelectedLabels: null,
       name: null,
+      onClick: null,
       onBlur: null,
       onChange: null,
       onFilter: null,
@@ -220,58 +222,57 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       value: null,
       virtualScrollerOptions: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, MultiSelectBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, MultiSelectBase.defaultProps);
     }
-  };
+  });
 
-  var CheckboxBase = {
+  var CheckboxBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Checkbox',
-      id: null,
-      inputRef: null,
-      inputId: null,
-      value: null,
-      name: null,
+      autoFocus: false,
       checked: false,
-      trueValue: true,
-      falseValue: false,
-      style: null,
       className: null,
       disabled: false,
-      required: false,
-      readOnly: false,
-      tabIndex: null,
+      falseValue: false,
       icon: null,
-      tooltip: null,
-      tooltipOptions: null,
+      id: null,
+      inputId: null,
+      inputRef: null,
+      name: null,
       onChange: null,
       onClick: null,
-      onMouseDown: null,
       onContextMenu: null,
+      onMouseDown: null,
+      readOnly: false,
+      required: false,
+      style: null,
+      tabIndex: null,
+      tooltip: null,
+      tooltipOptions: null,
+      trueValue: true,
+      value: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, CheckboxBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, CheckboxBase.defaultProps);
     }
-  };
+  });
 
+  function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = CheckboxBase.getProps(inProps);
+    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
+        }
+      }),
+      ptm = _CheckboxBase$setMeta.ptm;
     var elementRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       if (props.disabled || props.readOnly) {
         return;
       }
@@ -312,16 +313,16 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
         event.preventDefault();
       }
     };
-    var onFocus = function onFocus() {
+    var _onFocus = function onFocus() {
       setFocusedState(true);
     };
-    var onBlur = function onBlur() {
+    var _onBlur = function onBlur() {
       setFocusedState(false);
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.code === 'Space' || event.key === ' ') {
         // event.key is for Android support
-        onClick(event);
+        _onClick(event);
       }
     };
     var isChecked = function isChecked() {
@@ -347,6 +348,11 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
     hooks.useUpdateEffect(function () {
       inputRef.current.checked = isChecked();
     }, [props.checked, props.trueValue]);
+    hooks.useMountEffect(function () {
+      if (props.autoFocus) {
+        utils.DomHandler.focus(inputRef.current, props.autoFocus);
+      }
+    });
     var checked = isChecked();
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
     var otherProps = CheckboxBase.getOtherProps(props);
@@ -362,50 +368,62 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       'p-focus': focusedState
     });
     var iconClassName = 'p-checkbox-icon p-c';
-    var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
-      className: iconClassName
-    }) : null;
-    var checkboxIcon = utils.IconUtils.getJSXIcon(icon, {
+    var iconProps = utils.mergeProps({
       className: iconClassName
-    }, {
+    }, 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
     });
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
+    var rootProps = utils.mergeProps({
       ref: elementRef,
       id: props.id,
       className: className,
-      style: props.style
-    }, otherProps, {
-      onPointerUp: onClick,
+      style: props.style,
+      onClick: function onClick(e) {
+        return _onClick(e);
+      },
       onContextMenu: props.onContextMenu,
       onMouseDown: props.onMouseDown
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-hidden-accessible"
-    }, /*#__PURE__*/React__namespace.createElement("input", _extends({
-      ref: inputRef,
-      type: "checkbox",
+    }, otherProps, ptm('root'));
+    var hiddenInputWrapperProps = utils.mergeProps({
+      className: 'p-hidden-accessible'
+    }, ptm('hiddenInputWrapper'));
+    var hiddenInputProps = utils.mergeProps(_objectSpread$4({
       id: props.inputId,
+      ref: inputRef,
+      type: 'checkbox',
       name: props.name,
       tabIndex: props.tabIndex,
       defaultChecked: checked,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown,
+      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))), /*#__PURE__*/React__namespace.createElement("div", {
+    }, ariaProps), ptm('hiddenInput'));
+    var inputProps = utils.mergeProps({
       className: boxClass
-    }, checkboxIcon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, ptm('input'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", hiddenInputProps)), /*#__PURE__*/React__namespace.createElement("div", inputProps, checkboxIcon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   Checkbox.displayName = 'Checkbox';
 
-  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; }
+  function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     var filterOptions = {
       filter: function filter(e) {
@@ -434,26 +452,27 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
     };
     var createFilterElement = function createFilterElement() {
       var filterIconClassName = 'p-multiselect-filter-icon';
-      var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, {
-        className: filterIconClassName
-      });
-      var filterIcon = utils.IconUtils.getJSXIcon(icon, {
+      var filterIconProps = utils.mergeProps({
         className: filterIconClassName
-      }, {
+      }, props.ptm('filterIcon'));
+      var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, filterIconProps);
+      var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, filterIconProps), {
         props: props
       });
       if (props.filter) {
         var containerClassName = utils.classNames('p-multiselect-filter-container');
-        var content = /*#__PURE__*/React__namespace.createElement("div", {
+        var filterContainerProps = utils.mergeProps({
           className: containerClassName
-        }, /*#__PURE__*/React__namespace.createElement(inputtext.InputText, {
+        }, props.ptm('filterContainer'));
+        var content = /*#__PURE__*/React__namespace.createElement("div", filterContainerProps, /*#__PURE__*/React__namespace.createElement(inputtext.InputText, {
           ref: props.filterRef,
           type: "text",
           role: "textbox",
           value: props.filterValue,
           onChange: onFilter,
           className: "p-multiselect-filter",
-          placeholder: props.filterPlaceholder
+          placeholder: props.filterPlaceholder,
+          pt: props.ptm('filterInput')
         }), filterIcon);
         if (props.filterTemplate) {
           var defaultContentOptions = {
@@ -471,13 +490,11 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       return null;
     };
     var filterElement = createFilterElement();
-    var checkboxIconClassName = 'p-checkbox-icon p-c';
-    var checkedIcon = props.itemCheckboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
-      className: checkboxIconClassName
-    });
-    var itemCheckboxIcon = utils.IconUtils.getJSXIcon(checkedIcon, {
-      className: checkboxIconClassName
-    }, {
+    var headerCheckboxProps = utils.mergeProps({
+      className: 'p-checkbox-icon p-c'
+    }, props.ptm('headerCheckbox'));
+    var checkedIcon = props.itemCheckboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, headerCheckboxProps);
+    var itemCheckboxIcon = utils.IconUtils.getJSXIcon(checkedIcon, _objectSpread$3({}, headerCheckboxProps), {
       selected: props.selected
     });
     var checkboxElement = props.showSelectAll ? /*#__PURE__*/React__namespace.createElement(Checkbox, {
@@ -487,23 +504,25 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       "aria-checked": props.selectAll,
       icon: itemCheckboxIcon
     }) : null;
-    var iconProps = {
+    var iconProps = utils.mergeProps({
       className: 'p-multiselect-close-icon',
       'aria-hidden': true
-    };
+    }, props.ptm('closeIcon'));
     var icon = props.closeIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, iconProps);
-    var closeIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$2({}, iconProps), {
+    var closeIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
       props: props
     });
-    var closeElement = /*#__PURE__*/React__namespace.createElement("button", {
-      type: "button",
-      className: "p-multiselect-close p-link",
-      "aria-label": PrimeReact.localeOption('close'),
+    var headerProps = utils.mergeProps({
+      className: 'p-multiselect-header'
+    }, props.ptm('header'));
+    var closeButtonProps = utils.mergeProps({
+      type: 'button',
+      className: 'p-multiselect-close p-link',
+      'aria-label': PrimeReact.localeOption('close'),
       onClick: props.onClose
-    }, closeIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
-    var element = /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-multiselect-header"
-    }, checkboxElement, filterElement, closeElement);
+    }, props.ptm('closeButton'));
+    var closeElement = /*#__PURE__*/React__namespace.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    var element = /*#__PURE__*/React__namespace.createElement("div", headerProps, checkboxElement, filterElement, closeElement);
     if (props.template) {
       var defaultOptions = {
         className: 'p-multiselect-header',
@@ -525,7 +544,16 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
   });
   MultiSelectHeader.displayName = 'MultiSelectHeader';
 
+  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 MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
+    var getPTOptions = function getPTOptions(key) {
+      return props.ptm(key, {
+        context: {
+          selected: props.selected
+        }
+      });
+    };
     var onClick = function onClick(event) {
       if (props.onClick) {
         props.onClick({
@@ -550,30 +578,31 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
     var checkboxClassName = utils.classNames('p-checkbox-box', {
       'p-highlight': props.selected
     });
-    var checkboxIconClassName = 'p-checkbox-icon p-c';
-    var icon = props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
-      className: checkboxIconClassName
-    });
-    var checkboxIcon = props.selected ? utils.IconUtils.getJSXIcon(icon, {
-      className: checkboxIconClassName
-    }, {
+    var checkboxIconClassName = utils.mergeProps({
+      className: 'p-checkbox-icon p-c'
+    }, getPTOptions('checkboxIcon'));
+    var icon = props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkboxIconClassName);
+    var checkboxIcon = props.selected ? utils.IconUtils.getJSXIcon(icon, _objectSpread$2({}, checkboxIconClassName), {
       selected: props.selected
     }) : null;
     var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props.option) : props.label;
     var tabIndex = props.disabled ? null : props.tabIndex || 0;
-    return /*#__PURE__*/React__namespace.createElement("li", {
+    var checkboxContainerProps = utils.mergeProps({
+      className: 'p-checkbox p-component'
+    }, getPTOptions('checkboxContainer'));
+    var checkboxProps = utils.mergeProps({
+      className: checkboxClassName
+    }, getPTOptions('checkbox'));
+    var itemProps = utils.mergeProps({
       className: className,
       style: props.style,
       onClick: onClick,
       tabIndex: tabIndex,
       onKeyDown: onKeyDown,
-      role: "option",
-      "aria-selected": props.selected
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-checkbox p-component"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: checkboxClassName
-    }, checkboxIcon)), /*#__PURE__*/React__namespace.createElement("span", null, content), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      role: 'option',
+      'aria-selected': props.selected
+    }, 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));
   });
   MultiSelectItem.displayName = 'MultiSelectItem';
 
@@ -582,6 +611,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
   var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var virtualScrollerRef = React__namespace.useRef(null);
     var filterInputRef = React__namespace.useRef(null);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
     var onEnter = function onEnter() {
       props.onEnter(function () {
         if (virtualScrollerRef.current) {
@@ -596,7 +626,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
     };
     var onEntered = function onEntered() {
       props.onEntered(function () {
-        if (props.filter && filterInputRef.current) {
+        if (props.filter && props.filterInputAutoFocus && filterInputRef.current) {
           utils.DomHandler.focus(filterInputRef.current, false);
         }
       });
@@ -626,7 +656,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
         resetFilter: props.resetFilter,
         closeIcon: props.closeIcon,
         filterIcon: props.filterIcon,
-        itemCheckboxIcon: props.itemCheckboxIcon
+        itemCheckboxIcon: props.itemCheckboxIcon,
+        ptm: props.ptm
       });
     };
     var createFooter = function createFooter() {
@@ -658,15 +689,17 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
           tabIndex: tabIndex,
           disabled: disabled,
           className: props.itemClassName,
-          checkboxIcon: props.checkboxIcon
+          checkboxIcon: props.checkboxIcon,
+          ptm: props.ptm
         });
       });
     };
     var createEmptyFilter = function createEmptyFilter() {
       var emptyFilterMessage = utils.ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || PrimeReact.localeOption('emptyFilterMessage');
-      return /*#__PURE__*/React__namespace.createElement("li", {
-        className: "p-multiselect-empty-message"
-      }, emptyFilterMessage);
+      var emptyMessageProps = utils.mergeProps({
+        className: 'p-multiselect-empty-message'
+      }, props.ptm('emptyMessage'));
+      return /*#__PURE__*/React__namespace.createElement("li", emptyMessageProps, emptyFilterMessage);
     };
     var createItem = function createItem(option, index) {
       var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -677,12 +710,13 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
         var groupContent = props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
         var groupChildrenContent = createGroupChildren(option, style);
         var key = index + '_' + props.getOptionGroupRenderKey(option);
+        var itemGroupProps = utils.mergeProps({
+          className: 'p-multiselect-item-group',
+          style: style
+        }, props.ptm('itemGroup'));
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
           key: key
-        }, /*#__PURE__*/React__namespace.createElement("li", {
-          className: "p-multiselect-item-group",
-          style: style
-        }, groupContent), groupChildrenContent);
+        }, /*#__PURE__*/React__namespace.createElement("li", itemGroupProps, groupContent), groupChildrenContent);
       } else {
         var optionLabel = props.getOptionLabel(option);
         var optionKey = index + '_' + props.getOptionRenderKey(option);
@@ -701,7 +735,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
           tabIndex: tabIndex,
           disabled: disabled,
           className: props.itemClassName,
-          checkboxIcon: props.checkboxIcon
+          checkboxIcon: props.checkboxIcon,
+          ptm: props.ptm
         });
       }
     };
@@ -733,30 +768,35 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
           contentTemplate: function contentTemplate(options) {
             var className = utils.classNames('p-multiselect-items p-component', options.className);
             var content = isEmptyFilter() ? createEmptyFilter() : options.children;
-            return /*#__PURE__*/React__namespace.createElement("ul", {
+            var listProps = utils.mergeProps({
               ref: options.contentRef,
               style: options.style,
               className: className,
-              role: "listbox",
-              "aria-multiselectable": true
-            }, content);
+              role: 'listbox',
+              'aria-multiselectable': true
+            }, props.ptm('list'));
+            return /*#__PURE__*/React__namespace.createElement("ul", listProps, content);
           }
         });
         return /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
           ref: virtualScrollerRef
-        }, virtualScrollerProps));
+        }, virtualScrollerProps, {
+          pt: props.ptm('virtualScroller')
+        }));
       } else {
         var items = createItems();
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-multiselect-items-wrapper",
+        var wrapperProps = utils.mergeProps({
+          className: 'p-multiselect-items-wrapper',
           style: {
             maxHeight: props.scrollHeight
           }
-        }, /*#__PURE__*/React__namespace.createElement("ul", {
-          className: "p-multiselect-items p-component",
-          role: "listbox",
-          "aria-multiselectable": true
-        }, items));
+        }, props.ptm('wrapper'));
+        var listProps = utils.mergeProps({
+          className: 'p-multiselect-items p-component',
+          role: 'listbox',
+          'aria-multiselectable': true
+        }, props.ptm('list'));
+        return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("ul", listProps, items));
       }
     };
     var createElement = function createElement() {
@@ -765,19 +805,20 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
         'p-multiselect-inline': props.inline,
         'p-multiselect-flex': props.flex,
         'p-multiselect-limited': !allowOptionSelect,
-        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
-        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+        'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
       }, props.panelClassName);
       var header = createHeader();
       var content = createContent();
       var footer = createFooter();
+      var panelProps = utils.mergeProps({
+        ref: ref,
+        className: panelClassName,
+        style: props.panelStyle,
+        onClick: props.onClick
+      }, props.ptm('panel'));
       if (props.inline) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          ref: ref,
-          className: panelClassName,
-          style: props.panelStyle,
-          onClick: props.onClick
-        }, content, footer);
+        return /*#__PURE__*/React__namespace.createElement("div", panelProps, content, footer);
       }
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: ref,
@@ -793,12 +834,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
         onEntered: onEntered,
         onExit: props.onExit,
         onExited: props.onExited
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        ref: ref,
-        className: panelClassName,
-        style: props.panelStyle,
-        onClick: props.onClick
-      }, header, content, footer));
+      }, /*#__PURE__*/React__namespace.createElement("div", panelProps, header, content, footer));
     };
     var element = createElement();
     if (props.inline) return element;
@@ -815,7 +851,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
   var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = MultiSelectBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = MultiSelectBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       filterState = _React$useState2[0],
@@ -835,6 +872,15 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
     var hasFilter = filterState && filterState.trim().length > 0;
     var empty = utils.ObjectUtils.isEmpty(props.value);
     var equalityKey = props.optionValue ? null : props.dataKey;
+    var _MultiSelectBase$setM = MultiSelectBase.setMetaData({
+        props: props,
+        state: {
+          filterState: filterState,
+          focused: focusedState,
+          overlayVisible: overlayVisibleState
+        }
+      }),
+      ptm = _MultiSelectBase$setM.ptm;
     var _useOverlayListener = hooks.useOverlayListener({
         target: elementRef,
         overlay: overlayRef,
@@ -1049,7 +1095,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       setOverlayVisibleState(false);
     };
     var onOverlayEnter = function onOverlayEnter(callback) {
-      utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
+      utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['overlay'] || PrimeReact__default["default"].zIndex['overlay']);
       alignOverlay();
       scrollInView();
       callback && callback();
@@ -1070,7 +1116,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       props.onHide && props.onHide();
     };
     var alignOverlay = function alignOverlay() {
-      utils.DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact__default["default"].appendTo);
+      utils.DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo);
     };
     var isClearClicked = function isClearClicked(event) {
       return utils.DomHandler.hasClass(event.target, 'p-multiselect-clear-icon');
@@ -1167,6 +1213,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
           return !isOptionDisabled(option);
         });
         if (props.optionGroupLabel) {
+          var areAllSelected = true;
           var _iterator2 = _createForOfIteratorHelper(options),
             _step2;
           try {
@@ -1175,22 +1222,24 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
               var visibleOptionsGroupChildren = getOptionGroupChildren(optionGroup).filter(function (option) {
                 return !isOptionDisabled(option);
               });
-              return !visibleOptionsGroupChildren.some(function (option) {
+              if (visibleOptionsGroupChildren.some(function (option) {
                 return !isSelected(option);
-              });
+              }) === true) {
+                areAllSelected = false;
+              }
             }
           } catch (err) {
             _iterator2.e(err);
           } finally {
             _iterator2.f();
           }
+          return areAllSelected;
         } else {
           return !options.some(function (option) {
             return !isSelected(option);
           });
         }
       }
-      return true;
     };
     var getOptionLabel = function getOptionLabel(option) {
       return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
@@ -1271,27 +1320,28 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       } else {
         if (props.display === 'chip' && !empty) {
           var value = props.value.slice(0, props.maxSelectedLabels || props.value.length);
-          return value.map(function (val) {
+          return value.map(function (val, i) {
             var label = getLabelByValue(val);
-            var icon = !props.disabled && (props.removeIcon ? utils.IconUtils.getJSXIcon(props.removeIcon, {
+            var iconProps = utils.mergeProps({
+              key: i,
               className: 'p-multiselect-token-icon',
               onClick: function onClick(e) {
                 return removeChip(e, val);
               }
-            }, {
+            }, ptm('removeTokenIcon'));
+            var icon = !props.disabled && (props.removeIcon ? utils.IconUtils.getJSXIcon(props.removeIcon, _objectSpread({}, iconProps), {
               props: props
-            }) : /*#__PURE__*/React__namespace.createElement(timescircle.TimesCircleIcon, {
-              className: "p-multiselect-token-icon",
-              onClick: function onClick(e) {
-                return removeChip(e, val);
-              }
-            }));
-            return /*#__PURE__*/React__namespace.createElement("div", {
-              className: "p-multiselect-token",
+            }) : /*#__PURE__*/React__namespace.createElement(timescircle.TimesCircleIcon, iconProps));
+            var tokenProps = utils.mergeProps({
+              className: 'p-multiselect-token'
+            }, ptm('token'));
+            var tokenLabelProps = utils.mergeProps({
+              key: label + i,
+              className: 'p-multiselect-token-label'
+            }, ptm('tokenLabel'));
+            return /*#__PURE__*/React__namespace.createElement("div", _extends({}, tokenProps, {
               key: label
-            }, /*#__PURE__*/React__namespace.createElement("span", {
-              className: "p-multiselect-token-label"
-            }, label), icon);
+            }), /*#__PURE__*/React__namespace.createElement("span", tokenLabelProps, label), icon);
           });
         }
         return getLabel();
@@ -1362,22 +1412,18 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       utils.ZIndexUtils.clear(overlayRef.current);
     });
     var createClearIcon = function createClearIcon() {
-      var iconClassName = 'p-multiselect-clear-icon';
-      var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, {
-        className: iconClassName
-      });
-      var clearIcon = utils.IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      var clearIconProps = utils.mergeProps({
+        className: 'p-multiselect-clear-icon',
+        onClick: function onClick(e) {
+          return updateModel(e, null, null);
+        }
+      }, ptm('clearIcon'));
+      var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, clearIconProps);
+      var clearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, clearIconProps), {
         props: props
       });
       if (!empty && props.showClear && !props.disabled) {
-        return /*#__PURE__*/React__namespace.createElement("i", {
-          className: iconClassName,
-          onClick: function onClick(e) {
-            return updateModel(e, null, null);
-          }
-        }, clearIcon);
+        return clearIcon;
       }
       return null;
     };
@@ -1388,12 +1434,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
         'p-multiselect-label-empty': empty && !props.placeholder && !props.selectedItemTemplate,
         'p-multiselect-items-label': !empty && props.display !== 'chip' && props.value.length > props.maxSelectedLabels
       });
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      var labelContainerProps = utils.mergeProps({
         ref: labelRef,
-        className: "p-multiselect-label-container"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: 'p-multiselect-label-container'
+      }, ptm('labelContainer'));
+      var labelProps = utils.mergeProps({
         className: className
-      }, content || props.placeholder || 'empty'));
+      }, ptm('label'));
+      return /*#__PURE__*/React__namespace.createElement("div", labelContainerProps, /*#__PURE__*/React__namespace.createElement("div", labelProps, content || props.placeholder || 'empty'));
     };
     var visibleOptions = getVisibleOptions();
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
@@ -1408,40 +1456,44 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       'p-inputwrapper-focus': focusedState || overlayVisibleState
     }, props.className);
     var dropdownIconClass = 'p-multiselect-trigger-icon p-c';
-    var dropdownIcon = /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-multiselect-trigger"
-    }, props.dropdownIcon ? utils.IconUtils.getJSXIcon(props.dropdownIcon, {
+    var triggerIconProps = utils.mergeProps({
       className: dropdownIconClass
-    }, {
+    }, ptm('triggerIcon'));
+    var triggerProps = utils.mergeProps({
+      className: 'p-multiselect-trigger'
+    }, ptm('trigger'));
+    var dropdownIcon = /*#__PURE__*/React__namespace.createElement("div", triggerProps, props.dropdownIcon ? utils.IconUtils.getJSXIcon(props.dropdownIcon, _objectSpread({}, triggerIconProps), {
       props: props
-    }) : /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, {
-      className: dropdownIconClass
-    }));
+    }) : /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, triggerIconProps));
     var label = !props.inline && createLabel();
     var clearIcon = !props.inline && createClearIcon();
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
+    var rootProps = utils.mergeProps(_objectSpread(_objectSpread({
       ref: elementRef,
       id: props.id,
       style: props.style,
       className: className
-    }, otherProps, {
+    }, otherProps), {}, {
       onClick: onClick
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-hidden-accessible"
-    }, /*#__PURE__*/React__namespace.createElement("input", _extends({
+    }), MultiSelectBase.getOtherProps(props), ptm('root'));
+    var hiddenInputWrapperProps = utils.mergeProps({
+      className: 'p-hidden-accessible'
+    }, ptm('hiddenInputWrapper'));
+    var inputProps = utils.mergeProps(_objectSpread({
       ref: inputRef,
       id: props.inputId,
       name: props.name,
-      readOnly: true,
-      type: "text",
+      type: 'text',
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
-      role: "listbox",
-      "aria-expanded": overlayVisibleState,
+      role: 'listbox',
+      'aria-expanded': overlayVisibleState,
       disabled: props.disabled,
       tabIndex: props.tabIndex
-    }, ariaProps))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, dropdownIcon), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
+    }, ariaProps), ptm('input'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({}, inputProps, {
+      readOnly: true
+    }))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, dropdownIcon), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
       ref: overlayRef,
       visibleOptions: visibleOptions
     }, props, {
@@ -1469,11 +1521,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
       onEnter: onOverlayEnter,
       onEntered: onOverlayEntered,
       onExit: onOverlayExit,
-      onExited: onOverlayExited
+      onExited: onOverlayExited,
+      ptm: ptm
     }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   MultiSelect.displayName = 'MultiSelect';
 
@@ -1483,4 +1538,4 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, chev
 
   return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.icons.chevrondown, primereact.icons.times, primereact.icons.timescircle, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.csstransition, primereact.portal, primereact.virtualscroller, primereact.icons.check, primereact.inputtext, primereact.ripple, primereact.icons.search);
+})({}, React, primereact.api, primereact.hooks, primereact.icons.chevrondown, primereact.icons.times, primereact.icons.timescircle, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.csstransition, primereact.portal, primereact.virtualscroller, primereact.icons.check, primereact.icons.search, primereact.inputtext, primereact.ripple);