primereact 9.4.0 → 9.6.0

package/multiselect/multiselect.cjs.js

@@ -11,13 +11,14 @@ var timescircle = require('primereact/icons/timescircle');
 var overlayservice = require('primereact/overlayservice');
 var tooltip = require('primereact/tooltip');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 var csstransition = require('primereact/csstransition');
 var portal = require('primereact/portal');
 var virtualscroller = require('primereact/virtualscroller');
 var check = require('primereact/icons/check');
+var search = require('primereact/icons/search');
 var inputtext = require('primereact/inputtext');
 var ripple = require('primereact/ripple');
-var search = require('primereact/icons/search');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -169,7 +170,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
 }
 
-var MultiSelectBase = {
+var MultiSelectBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'MultiSelect',
     appendTo: null,
@@ -184,6 +185,7 @@ var MultiSelectBase = {
     emptyFilterMessage: null,
     filter: false,
     filterBy: null,
+    filterInputAutoFocus: true,
     filterLocale: undefined,
     filterMatchMode: 'contains',
     filterPlaceholder: null,
@@ -199,6 +201,7 @@ var MultiSelectBase = {
     itemTemplate: null,
     maxSelectedLabels: null,
     name: null,
+    onClick: null,
     onBlur: null,
     onChange: null,
     onFilter: null,
@@ -237,58 +240,57 @@ var MultiSelectBase = {
     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;
     }
@@ -329,16 +331,16 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       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() {
@@ -364,6 +366,11 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   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);
@@ -379,50 +386,62 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     'p-focus': focusedState
   });
   var iconClassName = 'p-checkbox-icon p-c';
-  var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+  var iconProps = utils.mergeProps({
     className: iconClassName
-  }) : null;
-  var checkboxIcon = utils.IconUtils.getJSXIcon(icon, {
-    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) {
@@ -451,26 +470,27 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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 = {
@@ -488,13 +508,11 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     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, {
@@ -504,23 +522,25 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     "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',
@@ -542,7 +562,16 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.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__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({
@@ -567,30 +596,31 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
   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';
 
@@ -599,6 +629,7 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
 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) {
@@ -613,7 +644,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
   };
   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);
       }
     });
@@ -643,7 +674,8 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       resetFilter: props.resetFilter,
       closeIcon: props.closeIcon,
       filterIcon: props.filterIcon,
-      itemCheckboxIcon: props.itemCheckboxIcon
+      itemCheckboxIcon: props.itemCheckboxIcon,
+      ptm: props.ptm
     });
   };
   var createFooter = function createFooter() {
@@ -675,15 +707,17 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         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] : {};
@@ -694,12 +728,13 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       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);
@@ -718,7 +753,8 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         tabIndex: tabIndex,
         disabled: disabled,
         className: props.itemClassName,
-        checkboxIcon: props.checkboxIcon
+        checkboxIcon: props.checkboxIcon,
+        ptm: props.ptm
       });
     }
   };
@@ -750,30 +786,35 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         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() {
@@ -782,19 +823,20 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       '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,
@@ -810,12 +852,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       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;
@@ -832,7 +869,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__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],
@@ -852,6 +890,15 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   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,
@@ -1066,7 +1113,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     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();
@@ -1087,7 +1134,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     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');
@@ -1184,6 +1231,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
         return !isOptionDisabled(option);
       });
       if (props.optionGroupLabel) {
+        var areAllSelected = true;
         var _iterator2 = _createForOfIteratorHelper(options),
           _step2;
         try {
@@ -1192,22 +1240,24 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
             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;
@@ -1288,27 +1338,28 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     } 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();
@@ -1379,22 +1430,18 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     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;
   };
@@ -1405,12 +1452,14 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       '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);
@@ -1425,40 +1474,44 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     '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, {
@@ -1486,11 +1539,14 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     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';