primereact 9.5.0 → 9.6.0

package/multiselect/multiselect.esm.js

@@ -1,19 +1,20 @@
 import * as React from 'react';
-import PrimeReact, { localeOption, FilterService } from 'primereact/api';
+import PrimeReact, { PrimeReactContext, localeOption, FilterService } from 'primereact/api';
 import { useUpdateEffect, useMountEffect, useOverlayListener, useUnmountEffect } from 'primereact/hooks';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { TimesIcon } from 'primereact/icons/times';
 import { TimesCircleIcon } from 'primereact/icons/timescircle';
 import { OverlayService } from 'primereact/overlayservice';
 import { Tooltip } from 'primereact/tooltip';
-import { ObjectUtils, DomHandler, classNames, IconUtils, ZIndexUtils } from 'primereact/utils';
+import { DomHandler, ObjectUtils, classNames, mergeProps, IconUtils, ZIndexUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { CSSTransition } from 'primereact/csstransition';
 import { Portal } from 'primereact/portal';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { CheckIcon } from 'primereact/icons/check';
+import { SearchIcon } from 'primereact/icons/search';
 import { InputText } from 'primereact/inputtext';
 import { Ripple } from 'primereact/ripple';
-import { SearchIcon } from 'primereact/icons/search';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -142,7 +143,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
 }
 
-var MultiSelectBase = {
+var MultiSelectBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'MultiSelect',
     appendTo: null,
@@ -173,6 +174,7 @@ var MultiSelectBase = {
     itemTemplate: null,
     maxSelectedLabels: null,
     name: null,
+    onClick: null,
     onBlur: null,
     onChange: null,
     onFilter: null,
@@ -211,16 +213,10 @@ var MultiSelectBase = {
     value: null,
     virtualScrollerOptions: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, MultiSelectBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, MultiSelectBase.defaultProps);
   }
-};
+});
 
-var CheckboxBase = {
+var CheckboxBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Checkbox',
     autoFocus: false,
@@ -246,24 +242,28 @@ var CheckboxBase = {
     trueValue: true,
     value: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, CheckboxBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return 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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = CheckboxBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = CheckboxBase.getProps(inProps, context);
   var _React$useState = React.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.useRef(null);
   var inputRef = React.useRef(props.inputRef);
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event) {
     if (props.disabled || props.readOnly) {
       return;
     }
@@ -304,16 +304,16 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       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() {
@@ -359,50 +359,62 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     'p-focus': focusedState
   });
   var iconClassName = 'p-checkbox-icon p-c';
-  var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, {
-    className: iconClassName
-  }) : null;
-  var checkboxIcon = IconUtils.getJSXIcon(icon, {
+  var iconProps = mergeProps({
     className: iconClassName
-  }, {
+  }, ptm('icon'));
+  var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
+  var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$4({}, iconProps), {
     props: props,
     checked: checked
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+  var rootProps = mergeProps({
     ref: elementRef,
     id: props.id,
     className: className,
-    style: props.style
-  }, otherProps, {
-    onClick: onClick,
+    style: props.style,
+    onClick: function onClick(e) {
+      return _onClick(e);
+    },
     onContextMenu: props.onContextMenu,
     onMouseDown: props.onMouseDown
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "p-hidden-accessible"
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef,
-    type: "checkbox",
+  }, otherProps, ptm('root'));
+  var hiddenInputWrapperProps = mergeProps({
+    className: 'p-hidden-accessible'
+  }, ptm('hiddenInputWrapper'));
+  var hiddenInputProps = 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.createElement("div", {
+  }, ariaProps), ptm('hiddenInput'));
+  var inputProps = mergeProps({
     className: boxClass
-  }, checkboxIcon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, ptm('input'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", hiddenInputProps)), /*#__PURE__*/React.createElement("div", inputProps, checkboxIcon)), hasTooltip && /*#__PURE__*/React.createElement(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.memo(function (props) {
   var filterOptions = {
     filter: function filter(e) {
@@ -431,26 +443,27 @@ var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
   };
   var createFilterElement = function createFilterElement() {
     var filterIconClassName = 'p-multiselect-filter-icon';
-    var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, {
-      className: filterIconClassName
-    });
-    var filterIcon = IconUtils.getJSXIcon(icon, {
+    var filterIconProps = mergeProps({
       className: filterIconClassName
-    }, {
+    }, props.ptm('filterIcon'));
+    var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
+    var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, filterIconProps), {
       props: props
     });
     if (props.filter) {
       var containerClassName = classNames('p-multiselect-filter-container');
-      var content = /*#__PURE__*/React.createElement("div", {
+      var filterContainerProps = mergeProps({
         className: containerClassName
-      }, /*#__PURE__*/React.createElement(InputText, {
+      }, props.ptm('filterContainer'));
+      var content = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement(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 = {
@@ -468,13 +481,11 @@ var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
     return null;
   };
   var filterElement = createFilterElement();
-  var checkboxIconClassName = 'p-checkbox-icon p-c';
-  var checkedIcon = props.itemCheckboxIcon || /*#__PURE__*/React.createElement(CheckIcon, {
-    className: checkboxIconClassName
-  });
-  var itemCheckboxIcon = IconUtils.getJSXIcon(checkedIcon, {
-    className: checkboxIconClassName
-  }, {
+  var headerCheckboxProps = mergeProps({
+    className: 'p-checkbox-icon p-c'
+  }, props.ptm('headerCheckbox'));
+  var checkedIcon = props.itemCheckboxIcon || /*#__PURE__*/React.createElement(CheckIcon, headerCheckboxProps);
+  var itemCheckboxIcon = IconUtils.getJSXIcon(checkedIcon, _objectSpread$3({}, headerCheckboxProps), {
     selected: props.selected
   });
   var checkboxElement = props.showSelectAll ? /*#__PURE__*/React.createElement(Checkbox, {
@@ -484,23 +495,25 @@ var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
     "aria-checked": props.selectAll,
     icon: itemCheckboxIcon
   }) : null;
-  var iconProps = {
+  var iconProps = mergeProps({
     className: 'p-multiselect-close-icon',
     'aria-hidden': true
-  };
+  }, props.ptm('closeIcon'));
   var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, iconProps);
-  var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$2({}, iconProps), {
+  var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread$3({}, iconProps), {
     props: props
   });
-  var closeElement = /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "p-multiselect-close p-link",
-    "aria-label": localeOption('close'),
+  var headerProps = mergeProps({
+    className: 'p-multiselect-header'
+  }, props.ptm('header'));
+  var closeButtonProps = mergeProps({
+    type: 'button',
+    className: 'p-multiselect-close p-link',
+    'aria-label': localeOption('close'),
     onClick: props.onClose
-  }, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
-  var element = /*#__PURE__*/React.createElement("div", {
-    className: "p-multiselect-header"
-  }, checkboxElement, filterElement, closeElement);
+  }, props.ptm('closeButton'));
+  var closeElement = /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
+  var element = /*#__PURE__*/React.createElement("div", headerProps, checkboxElement, filterElement, closeElement);
   if (props.template) {
     var defaultOptions = {
       className: 'p-multiselect-header',
@@ -522,7 +535,16 @@ var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
 });
 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.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({
@@ -547,30 +569,31 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
   var checkboxClassName = classNames('p-checkbox-box', {
     'p-highlight': props.selected
   });
-  var checkboxIconClassName = 'p-checkbox-icon p-c';
-  var icon = props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, {
-    className: checkboxIconClassName
-  });
-  var checkboxIcon = props.selected ? IconUtils.getJSXIcon(icon, {
-    className: checkboxIconClassName
-  }, {
+  var checkboxIconClassName = mergeProps({
+    className: 'p-checkbox-icon p-c'
+  }, getPTOptions('checkboxIcon'));
+  var icon = props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconClassName);
+  var checkboxIcon = props.selected ? IconUtils.getJSXIcon(icon, _objectSpread$2({}, checkboxIconClassName), {
     selected: props.selected
   }) : null;
   var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
   var tabIndex = props.disabled ? null : props.tabIndex || 0;
-  return /*#__PURE__*/React.createElement("li", {
+  var checkboxContainerProps = mergeProps({
+    className: 'p-checkbox p-component'
+  }, getPTOptions('checkboxContainer'));
+  var checkboxProps = mergeProps({
+    className: checkboxClassName
+  }, getPTOptions('checkbox'));
+  var itemProps = mergeProps({
     className: className,
     style: props.style,
     onClick: onClick,
     tabIndex: tabIndex,
     onKeyDown: onKeyDown,
-    role: "option",
-    "aria-selected": props.selected
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-checkbox p-component"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: checkboxClassName
-  }, checkboxIcon)), /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Ripple, null));
+    role: 'option',
+    'aria-selected': props.selected
+  }, getPTOptions('item'));
+  return /*#__PURE__*/React.createElement("li", itemProps, /*#__PURE__*/React.createElement("div", checkboxContainerProps, /*#__PURE__*/React.createElement("div", checkboxProps, checkboxIcon)), /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Ripple, null));
 });
 MultiSelectItem.displayName = 'MultiSelectItem';
 
@@ -579,6 +602,7 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
 var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var virtualScrollerRef = React.useRef(null);
   var filterInputRef = React.useRef(null);
+  var context = React.useContext(PrimeReactContext);
   var onEnter = function onEnter() {
     props.onEnter(function () {
       if (virtualScrollerRef.current) {
@@ -623,7 +647,8 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       resetFilter: props.resetFilter,
       closeIcon: props.closeIcon,
       filterIcon: props.filterIcon,
-      itemCheckboxIcon: props.itemCheckboxIcon
+      itemCheckboxIcon: props.itemCheckboxIcon,
+      ptm: props.ptm
     });
   };
   var createFooter = function createFooter() {
@@ -655,15 +680,17 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         tabIndex: tabIndex,
         disabled: disabled,
         className: props.itemClassName,
-        checkboxIcon: props.checkboxIcon
+        checkboxIcon: props.checkboxIcon,
+        ptm: props.ptm
       });
     });
   };
   var createEmptyFilter = function createEmptyFilter() {
     var emptyFilterMessage = ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || localeOption('emptyFilterMessage');
-    return /*#__PURE__*/React.createElement("li", {
-      className: "p-multiselect-empty-message"
-    }, emptyFilterMessage);
+    var emptyMessageProps = mergeProps({
+      className: 'p-multiselect-empty-message'
+    }, props.ptm('emptyMessage'));
+    return /*#__PURE__*/React.createElement("li", emptyMessageProps, emptyFilterMessage);
   };
   var createItem = function createItem(option, index) {
     var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -674,12 +701,13 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
       var groupChildrenContent = createGroupChildren(option, style);
       var key = index + '_' + props.getOptionGroupRenderKey(option);
+      var itemGroupProps = mergeProps({
+        className: 'p-multiselect-item-group',
+        style: style
+      }, props.ptm('itemGroup'));
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
-      }, /*#__PURE__*/React.createElement("li", {
-        className: "p-multiselect-item-group",
-        style: style
-      }, groupContent), groupChildrenContent);
+      }, /*#__PURE__*/React.createElement("li", itemGroupProps, groupContent), groupChildrenContent);
     } else {
       var optionLabel = props.getOptionLabel(option);
       var optionKey = index + '_' + props.getOptionRenderKey(option);
@@ -698,7 +726,8 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         tabIndex: tabIndex,
         disabled: disabled,
         className: props.itemClassName,
-        checkboxIcon: props.checkboxIcon
+        checkboxIcon: props.checkboxIcon,
+        ptm: props.ptm
       });
     }
   };
@@ -730,30 +759,35 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         contentTemplate: function contentTemplate(options) {
           var className = classNames('p-multiselect-items p-component', options.className);
           var content = isEmptyFilter() ? createEmptyFilter() : options.children;
-          return /*#__PURE__*/React.createElement("ul", {
+          var listProps = 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.createElement("ul", listProps, content);
         }
       });
       return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
         ref: virtualScrollerRef
-      }, virtualScrollerProps));
+      }, virtualScrollerProps, {
+        pt: props.ptm('virtualScroller')
+      }));
     } else {
       var items = createItems();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-multiselect-items-wrapper",
+      var wrapperProps = mergeProps({
+        className: 'p-multiselect-items-wrapper',
         style: {
           maxHeight: props.scrollHeight
         }
-      }, /*#__PURE__*/React.createElement("ul", {
-        className: "p-multiselect-items p-component",
-        role: "listbox",
-        "aria-multiselectable": true
-      }, items));
+      }, props.ptm('wrapper'));
+      var listProps = mergeProps({
+        className: 'p-multiselect-items p-component',
+        role: 'listbox',
+        'aria-multiselectable': true
+      }, props.ptm('list'));
+      return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("ul", listProps, items));
     }
   };
   var createElement = function createElement() {
@@ -762,19 +796,20 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       'p-multiselect-inline': props.inline,
       'p-multiselect-flex': props.flex,
       'p-multiselect-limited': !allowOptionSelect,
-      'p-input-filled': PrimeReact.inputStyle === 'filled',
-      'p-ripple-disabled': PrimeReact.ripple === false
+      'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
     }, props.panelClassName);
     var header = createHeader();
     var content = createContent();
     var footer = createFooter();
+    var panelProps = mergeProps({
+      ref: ref,
+      className: panelClassName,
+      style: props.panelStyle,
+      onClick: props.onClick
+    }, props.ptm('panel'));
     if (props.inline) {
-      return /*#__PURE__*/React.createElement("div", {
-        ref: ref,
-        className: panelClassName,
-        style: props.panelStyle,
-        onClick: props.onClick
-      }, content, footer);
+      return /*#__PURE__*/React.createElement("div", panelProps, content, footer);
     }
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: ref,
@@ -790,12 +825,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       onEntered: onEntered,
       onExit: props.onExit,
       onExited: props.onExited
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      className: panelClassName,
-      style: props.panelStyle,
-      onClick: props.onClick
-    }, header, content, footer));
+    }, /*#__PURE__*/React.createElement("div", panelProps, header, content, footer));
   };
   var element = createElement();
   if (props.inline) return element;
@@ -812,7 +842,8 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = MultiSelectBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = MultiSelectBase.getProps(inProps, context);
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     filterState = _React$useState2[0],
@@ -832,6 +863,15 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var hasFilter = filterState && filterState.trim().length > 0;
   var empty = 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 = useOverlayListener({
       target: elementRef,
       overlay: overlayRef,
@@ -1046,7 +1086,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     setOverlayVisibleState(false);
   };
   var onOverlayEnter = function onOverlayEnter(callback) {
-    ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
+    ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex['overlay'] || PrimeReact.zIndex['overlay']);
     alignOverlay();
     scrollInView();
     callback && callback();
@@ -1067,7 +1107,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     props.onHide && props.onHide();
   };
   var alignOverlay = function alignOverlay() {
-    DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
+    DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
   };
   var isClearClicked = function isClearClicked(event) {
     return DomHandler.hasClass(event.target, 'p-multiselect-clear-icon');
@@ -1164,6 +1204,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         return !isOptionDisabled(option);
       });
       if (props.optionGroupLabel) {
+        var areAllSelected = true;
         var _iterator2 = _createForOfIteratorHelper(options),
           _step2;
         try {
@@ -1172,22 +1213,24 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
             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 ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
@@ -1268,27 +1311,28 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     } 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 ? IconUtils.getJSXIcon(props.removeIcon, {
+          var iconProps = mergeProps({
+            key: i,
             className: 'p-multiselect-token-icon',
             onClick: function onClick(e) {
               return removeChip(e, val);
             }
-          }, {
+          }, ptm('removeTokenIcon'));
+          var icon = !props.disabled && (props.removeIcon ? IconUtils.getJSXIcon(props.removeIcon, _objectSpread({}, iconProps), {
             props: props
-          }) : /*#__PURE__*/React.createElement(TimesCircleIcon, {
-            className: "p-multiselect-token-icon",
-            onClick: function onClick(e) {
-              return removeChip(e, val);
-            }
-          }));
-          return /*#__PURE__*/React.createElement("div", {
-            className: "p-multiselect-token",
+          }) : /*#__PURE__*/React.createElement(TimesCircleIcon, iconProps));
+          var tokenProps = mergeProps({
+            className: 'p-multiselect-token'
+          }, ptm('token'));
+          var tokenLabelProps = mergeProps({
+            key: label + i,
+            className: 'p-multiselect-token-label'
+          }, ptm('tokenLabel'));
+          return /*#__PURE__*/React.createElement("div", _extends({}, tokenProps, {
             key: label
-          }, /*#__PURE__*/React.createElement("span", {
-            className: "p-multiselect-token-label"
-          }, label), icon);
+          }), /*#__PURE__*/React.createElement("span", tokenLabelProps, label), icon);
         });
       }
       return getLabel();
@@ -1359,12 +1403,12 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     ZIndexUtils.clear(overlayRef.current);
   });
   var createClearIcon = function createClearIcon() {
-    var clearIconProps = {
+    var clearIconProps = mergeProps({
       className: 'p-multiselect-clear-icon',
       onClick: function onClick(e) {
         return updateModel(e, null, null);
       }
-    };
+    }, ptm('clearIcon'));
     var icon = props.clearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
     var clearIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, clearIconProps), {
       props: props
@@ -1381,12 +1425,14 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       '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.createElement("div", {
+    var labelContainerProps = mergeProps({
       ref: labelRef,
-      className: "p-multiselect-label-container"
-    }, /*#__PURE__*/React.createElement("div", {
+      className: 'p-multiselect-label-container'
+    }, ptm('labelContainer'));
+    var labelProps = mergeProps({
       className: className
-    }, content || props.placeholder || 'empty'));
+    }, ptm('label'));
+    return /*#__PURE__*/React.createElement("div", labelContainerProps, /*#__PURE__*/React.createElement("div", labelProps, content || props.placeholder || 'empty'));
   };
   var visibleOptions = getVisibleOptions();
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
@@ -1401,40 +1447,44 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     'p-inputwrapper-focus': focusedState || overlayVisibleState
   }, props.className);
   var dropdownIconClass = 'p-multiselect-trigger-icon p-c';
-  var dropdownIcon = /*#__PURE__*/React.createElement("div", {
-    className: "p-multiselect-trigger"
-  }, props.dropdownIcon ? IconUtils.getJSXIcon(props.dropdownIcon, {
+  var triggerIconProps = mergeProps({
     className: dropdownIconClass
-  }, {
+  }, ptm('triggerIcon'));
+  var triggerProps = mergeProps({
+    className: 'p-multiselect-trigger'
+  }, ptm('trigger'));
+  var dropdownIcon = /*#__PURE__*/React.createElement("div", triggerProps, props.dropdownIcon ? IconUtils.getJSXIcon(props.dropdownIcon, _objectSpread({}, triggerIconProps), {
     props: props
-  }) : /*#__PURE__*/React.createElement(ChevronDownIcon, {
-    className: dropdownIconClass
-  }));
+  }) : /*#__PURE__*/React.createElement(ChevronDownIcon, triggerIconProps));
   var label = !props.inline && createLabel();
   var clearIcon = !props.inline && createClearIcon();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+  var rootProps = mergeProps(_objectSpread(_objectSpread({
     ref: elementRef,
     id: props.id,
     style: props.style,
     className: className
-  }, otherProps, {
+  }, otherProps), {}, {
     onClick: onClick
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "p-hidden-accessible"
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }), MultiSelectBase.getOtherProps(props), ptm('root'));
+  var hiddenInputWrapperProps = mergeProps({
+    className: 'p-hidden-accessible'
+  }, ptm('hiddenInputWrapper'));
+  var inputProps = 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.createElement(React.Fragment, null, label, clearIcon, dropdownIcon), /*#__PURE__*/React.createElement(MultiSelectPanel, _extends({
+  }, ariaProps), ptm('input'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
+    readOnly: true
+  }))), !props.inline && /*#__PURE__*/React.createElement(React.Fragment, null, label, clearIcon, dropdownIcon), /*#__PURE__*/React.createElement(MultiSelectPanel, _extends({
     ref: overlayRef,
     visibleOptions: visibleOptions
   }, props, {
@@ -1462,11 +1512,14 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     onEnter: onOverlayEnter,
     onEntered: onOverlayEntered,
     onExit: onOverlayExit,
-    onExited: onOverlayExited
+    onExited: onOverlayExited,
+    ptm: ptm
   }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
-  }, props.tooltipOptions)));
+  }, props.tooltipOptions, {
+    pt: ptm('tooltip')
+  })));
 }));
 MultiSelect.displayName = 'MultiSelect';