primereact 9.4.0 → 9.6.0

package/treeselect/treeselect.d.ts

@@ -9,9 +9,128 @@
  */
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
+import { TreeNodeTemplateOptions, TreePassThroughOptions, TreeTogglerTemplateOptions } from '../tree/tree';
 import { TreeNode } from '../treenode';
 import { FormEvent } from '../ts-helpers';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TreeSelectPassThroughType<T> = PassThroughType<T, TreeSelectPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreeSelectPassThroughMethodOptions {
+    props: TreeSelectProps;
+    state: TreeSelectState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeSelectProps.pt}
+ */
+export interface TreeSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label container's DOM element.
+     */
+    labelContainer?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     */
+    trigger?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the trigger icon's DOM element.
+     */
+    triggerIcon?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     * @see {@link TreePassThroughOptionType}
+     */
+    tree?: TreePassThroughOptions;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * uses to pass attributes to the filter's DOM element.
+     */
+    filter?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * uses to pass attributes to the header icon's DOM element.
+     */
+    headerIcon?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * uses to pass attributes to the header's DOM element.
+     */
+    header?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLButtonElement>>;
+}
+
+/**
+ * Defines current inline state in TreeSelect component.
+ */
+export interface TreeSelectState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current expanded keys state.
+     */
+    expandedKeys: TreeSelectExpandedKeysType;
+    /**
+     * Current selected keys state.
+     */
+    filterValue: string;
+}
 
 /**
  * Custom panel header template options.
@@ -160,7 +279,7 @@ interface TreeSelectFilterOptions {
  * Defines valid properties in TreeSelect component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
  */
-export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref'> {
+export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref' | 'pt'> {
     /**
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
@@ -174,6 +293,11 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
     ariaLabelledBy?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
     /**
      * Used to get the child elements of the component.
      * @readonly
@@ -263,6 +387,11 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * Name of the input element.
      */
     name?: string | undefined;
+    /**
+     * Template of internally used tree component node element.
+     * @defaultValue false
+     */
+    nodeTemplate?: React.ReactNode | ((node: TreeNode, options: TreeNodeTemplateOptions) => React.ReactNode);
     /**
      * An array of options to display.
      */
@@ -291,6 +420,14 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * Clears the filter value when hiding the dropdown.
      * @defaultValue false
      */
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreeSelectPassThroughOptions}
+     */
+    pt?: TreeSelectPassThroughOptions;
+    /**
+     * Resets the filter when the overlay is hidden.
+     */
     resetFilterOnHide?: boolean | undefined;
     /**
      * Maximum height of the options panel.
@@ -305,6 +442,10 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      */
     transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Template of toggler element.
+     */
+    togglerTemplate?: React.ReactNode | ((node: TreeNode, options: TreeTogglerTemplateOptions) => React.ReactNode);
     /**
      * A single or an object of keys to control the selection state.
      */

package/treeselect/treeselect.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { localeOption } from 'primereact/api';
+import PrimeReact, { PrimeReactContext, localeOption } from 'primereact/api';
 import { useOverlayListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { SearchIcon } from 'primereact/icons/search';
@@ -7,7 +7,8 @@ import { TimesIcon } from 'primereact/icons/times';
 import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
 import { Tree } from 'primereact/tree';
-import { ObjectUtils, classNames, DomHandler, ZIndexUtils, IconUtils } from 'primereact/utils';
+import { classNames, mergeProps, ObjectUtils, DomHandler, ZIndexUtils, IconUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { CSSTransition } from 'primereact/csstransition';
 import { Portal } from 'primereact/portal';
 
@@ -122,7 +123,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
 }
 
-var TreeSelectBase = {
+var TreeSelectBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TreeSelect',
     appendTo: null,
@@ -148,6 +149,7 @@ var TreeSelectBase = {
     inputRef: null,
     metaKeySelection: true,
     name: null,
+    nodeTemplate: null,
     onChange: null,
     onFilterValueChange: null,
     onHide: null,
@@ -167,28 +169,34 @@ var TreeSelectBase = {
     selectionMode: 'single',
     style: null,
     tabIndex: null,
+    togglerTemplate: null,
     transitionOptions: null,
     value: null,
     valueTemplate: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, TreeSelectBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, TreeSelectBase.defaultProps);
   }
-};
+});
 
 var TreeSelectPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var context = React.useContext(PrimeReactContext);
   var createElement = function createElement() {
     var wrapperStyle = {
       maxHeight: props.scrollHeight || 'auto'
     };
     var className = classNames('p-treeselect-panel p-component', props.panelClassName, {
-      '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
     });
+    var panelProps = mergeProps({
+      ref: ref,
+      className: className,
+      style: props.panelStyle,
+      onClick: props.onClick
+    }, props.ptm('panel'));
+    var wrapperProps = mergeProps({
+      className: 'p-treeselect-items-wrapper',
+      style: wrapperStyle
+    }, props.ptm('wrapper'));
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: ref,
       classNames: "p-connected-overlay",
@@ -204,15 +212,7 @@ var TreeSelectPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onEntered: props.onEntered,
       onExit: props.onExit,
       onExited: props.onExited
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      className: className,
-      style: props.panelStyle,
-      onClick: props.onClick
-    }, props.header, /*#__PURE__*/React.createElement("div", {
-      className: "p-treeselect-items-wrapper",
-      style: wrapperStyle
-    }, props.children), props.footer));
+    }, /*#__PURE__*/React.createElement("div", panelProps, props.header, /*#__PURE__*/React.createElement("div", wrapperProps, props.children), props.footer));
   };
   var element = createElement();
   return /*#__PURE__*/React.createElement(Portal, {
@@ -228,7 +228,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 TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = TreeSelectBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = TreeSelectBase.getProps(inProps, context);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
@@ -257,6 +258,16 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var hasNoOptions = ObjectUtils.isEmpty(props.options);
   var isSingleSelectionMode = props.selectionMode === 'single';
   var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
+  var _TreeSelectBase$setMe = TreeSelectBase.setMetaData({
+      props: props,
+      state: {
+        focused: focusedState,
+        overlayVisible: overlayVisibleState,
+        expandedKeys: expandedKeys,
+        filterValue: filteredValue
+      }
+    }),
+    ptm = _TreeSelectBase$setMe.ptm;
   var filterOptions = {
     filter: function filter(e) {
       return onFilterInputChange(e);
@@ -396,7 +407,7 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     setFilterValueState('');
   };
   var onOverlayEnter = function onOverlayEnter() {
-    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();
   };
@@ -418,7 +429,7 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     props.onHide && props.onHide();
   };
   var alignOverlay = function alignOverlay() {
-    DomHandler.alignOverlay(overlayRef.current, triggerRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
+    DomHandler.alignOverlay(overlayRef.current, triggerRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
   };
   var scrollInView = function scrollInView() {
     var highlightItem = DomHandler.findSingle(overlayRef.current, '.p-treenode-content.p-highlight');
@@ -552,6 +563,9 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   }, [focusInputRef, props.inputRef]);
   useMountEffect(function () {
     updateTreeState();
+    if (props.autoFocus) {
+      DomHandler.focus(focusInputRef.current, props.autoFocus);
+    }
   });
   useUpdateEffect(function () {
     if (overlayVisibleState && props.filter) {
@@ -578,27 +592,42 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     ZIndexUtils.clear(overlayRef.current);
   });
   var createKeyboardHelper = function createKeyboardHelper() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-hidden-accessible"
-    }, /*#__PURE__*/React.createElement("input", _extends({
+    var hiddenInputWrapperProps = mergeProps({
+      className: 'p-hidden-accessible'
+    }, ptm('hiddenInputWrapper'));
+    var hiddenInputProps = mergeProps(_objectSpread({
       ref: focusInputRef,
-      role: "listbox",
+      role: 'listbox',
       id: props.inputId,
-      type: "text",
-      readOnly: true,
-      "aria-expanded": overlayVisibleState,
+      type: 'text',
+      'aria-expanded': overlayVisibleState,
       onFocus: onInputFocus,
       onBlur: onInputBlur,
       onKeyDown: onInputKeyDown,
       disabled: props.disabled,
       tabIndex: props.tabIndex
-    }, ariaProps)));
+    }, ariaProps), ptm('hiddenInput'));
+    return /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({}, hiddenInputProps, {
+      readOnly: true
+    })));
   };
   var createLabel = function createLabel() {
     var labelClassName = classNames('p-treeselect-label', {
       'p-placeholder': getLabel() === props.placeholder,
       'p-treeselect-label-empty': !props.placeholder && isValueEmpty
     });
+    var tokenProps = mergeProps({
+      className: 'p-treeselect-token'
+    }, ptm('token'));
+    var tokenLabelProps = mergeProps({
+      className: 'p-treeselect-token-label'
+    }, ptm('tokenLabel'));
+    var labelContainerProps = mergeProps({
+      className: 'p-treeselect-label-container'
+    }, ptm('labelContainer'));
+    var labelProps = mergeProps({
+      className: labelClassName
+    }, ptm('label'));
     var content = null;
     if (props.valueTemplate) {
       content = ObjectUtils.getJSXElement(props.valueTemplate, selectedNodes, props);
@@ -607,89 +636,87 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         content = getLabel() || 'empty';
       } else if (props.display === 'chip') {
         content = /*#__PURE__*/React.createElement(React.Fragment, null, selectedNodes && selectedNodes.map(function (node, index) {
-          return /*#__PURE__*/React.createElement("div", {
-            className: "p-treeselect-token",
+          return /*#__PURE__*/React.createElement("div", _extends({}, tokenProps, {
             key: "".concat(node.key, "_").concat(index)
-          }, /*#__PURE__*/React.createElement("span", {
-            className: "p-treeselect-token-label"
-          }, node.label));
+          }), /*#__PURE__*/React.createElement("span", tokenLabelProps, node.label));
         }), isValueEmpty && (props.placeholder || 'empty'));
       }
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-treeselect-label-container"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: labelClassName
-    }, content));
+    return /*#__PURE__*/React.createElement("div", labelContainerProps, /*#__PURE__*/React.createElement("div", labelProps, content));
   };
   var createDropdownIcon = function createDropdownIcon() {
+    var triggerProps = mergeProps({
+      ref: triggerRef,
+      className: 'p-treeselect-trigger',
+      role: 'button',
+      'aria-haspopup': 'listbox',
+      'aria-expanded': overlayVisibleState
+    }, ptm('trigger'));
     var iconClassName = 'p-treeselect-trigger-icon p-clickable';
-    var icon = props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      className: iconClassName
-    });
-    var dropdownIcon = IconUtils.getJSXIcon(icon, {
+    var triggerIconProps = mergeProps({
       className: iconClassName
-    }, {
+    }, ptm('triggerIcon'));
+    var icon = props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, triggerIconProps);
+    var dropdownIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, triggerIconProps), {
       props: props
     });
-    return /*#__PURE__*/React.createElement("div", {
-      ref: triggerRef,
-      className: "p-treeselect-trigger",
-      role: "button",
-      "aria-haspopup": "listbox",
-      "aria-expanded": overlayVisibleState
-    }, dropdownIcon);
+    return /*#__PURE__*/React.createElement("div", triggerProps, dropdownIcon);
   };
   var createContent = function createContent() {
+    var emptyMessageProps = mergeProps({
+      className: 'p-treeselect-empty-message'
+    }, ptm('emptyMessage'));
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tree, {
-      value: props.options,
-      selectionMode: props.selectionMode,
-      selectionKeys: props.value,
-      metaKeySelection: props.metaKeySelection,
-      onSelectionChange: onSelectionChange,
-      onSelect: onNodeSelect,
-      onUnselect: onNodeUnselect,
       expandedKeys: expandedKeys,
-      onToggle: onNodeToggle,
-      onExpand: props.onNodeExpand,
-      onCollapse: props.onNodeCollapse,
       filter: props.filter,
-      filterValue: filteredValue,
       filterBy: props.filterBy,
+      filterLocale: props.filterLocale,
       filterMode: props.filterMode,
       filterPlaceholder: props.filterPlaceholder,
-      filterLocale: props.filterLocale,
+      filterValue: filteredValue,
+      metaKeySelection: props.metaKeySelection,
+      nodeTemplate: props.nodeTemplate,
+      onCollapse: props.onNodeCollapse,
+      onExpand: props.onNodeExpand,
+      onFilterValueChange: onFilterValueChange,
+      onSelect: onNodeSelect,
+      onSelectionChange: onSelectionChange,
+      onToggle: onNodeToggle,
+      onUnselect: onNodeUnselect,
+      selectionKeys: props.value,
+      selectionMode: props.selectionMode,
       showHeader: false,
-      onFilterValueChange: onFilterValueChange
-    }), hasNoOptions && /*#__PURE__*/React.createElement("div", {
-      className: "p-treeselect-empty-message"
-    }, props.emptyMessage || localeOption('emptyMessage')));
+      togglerTemplate: props.togglerTemplate,
+      value: props.options,
+      pt: ptm('tree')
+    }), hasNoOptions && /*#__PURE__*/React.createElement("div", emptyMessageProps, props.emptyMessage || localeOption('emptyMessage')));
   };
   var createFilterElement = function createFilterElement() {
     if (props.filter) {
       var filterValue = ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
-      var iconClassName = 'p-treeselect-filter-icon';
-      var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, {
-        className: iconClassName
-      });
-      var filterIcon = IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
-        props: props
-      });
-      var filterContent = /*#__PURE__*/React.createElement("div", {
-        className: "p-treeselect-filter-container"
-      }, /*#__PURE__*/React.createElement("input", {
+      var filterContainerProps = mergeProps({
+        className: 'p-treeselect-filter-container'
+      }, ptm('filterContainer'));
+      var filterProps = mergeProps({
         ref: filterInputRef,
-        type: "text",
+        type: 'text',
         value: filterValue,
-        autoComplete: "off",
-        className: "p-treeselect-filter p-inputtext p-component",
+        autoComplete: 'off',
+        className: 'p-treeselect-filter p-inputtext p-component',
         placeholder: props.filterPlaceholder,
         onKeyDown: onFilterInputKeyDown,
         onChange: onFilterInputChange,
         disabled: props.disabled
-      }), filterIcon);
+      }, ptm('filter'));
+      var iconClassName = 'p-treeselect-filter-icon';
+      var filterIconProps = mergeProps({
+        className: iconClassName
+      }, ptm('filterIcon'));
+      var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
+      var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, filterIconProps), {
+        props: props
+      });
+      var filterContent = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement("input", filterProps), filterIcon);
       if (props.filterTemplate) {
         var defaultContentOptions = {
           className: 'p-treeselect-filter-container',
@@ -711,19 +738,24 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       className: 'p-treeselect-close-icon',
       'aria-hidden': true
     };
-    var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, iconProps);
-    var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+    var headerIconProps = mergeProps({
+      className: iconProps
+    }, ptm('headerIcon'));
+    var icon = props.closeIcon || /*#__PURE__*/React.createElement(TimesIcon, headerIconProps);
+    var closeIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, headerIconProps), {
       props: props
     });
-    var closeElement = /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "p-treeselect-close p-link",
+    var closeButtonProps = mergeProps({
+      type: 'button',
+      className: 'p-treeselect-close p-link',
       onClick: hide,
-      "aria-label": localeOption('close')
-    }, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
-    var content = /*#__PURE__*/React.createElement("div", {
-      className: "p-treeselect-header"
-    }, filterElement, closeElement);
+      'aria-label': localeOption('close')
+    }, ptm('closeButton'));
+    var headerProps = mergeProps({
+      className: 'p-treeselect-header'
+    }, ptm('header'));
+    var closeElement = /*#__PURE__*/React.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React.createElement(Ripple, null));
+    var content = /*#__PURE__*/React.createElement("div", headerProps, filterElement, closeElement);
     if (props.panelHeaderTemplate) {
       var defaultOptions = {
         className: 'p-treeselect-header',
@@ -752,19 +784,19 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     'p-inputwrapper-filled': !isValueEmpty,
     'p-inputwrapper-focus': focusedState || overlayVisibleState
   }, props.className);
+  var rootProps = mergeProps({
+    ref: elementRef,
+    className: className,
+    style: props.style,
+    onClick: onClick
+  }, TreeSelectBase.getOtherProps(props), ptm('root'));
   var keyboardHelper = createKeyboardHelper();
   var labelElement = createLabel();
   var dropdownIcon = createDropdownIcon();
   var content = createContent();
   var header = createHeader();
   var footer = createFooter();
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: elementRef,
-    className: className,
-    style: props.style
-  }, otherProps, {
-    onClick: onClick
-  }), keyboardHelper, labelElement, dropdownIcon, /*#__PURE__*/React.createElement(TreeSelectPanel, {
+  return /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, labelElement, dropdownIcon, /*#__PURE__*/React.createElement(TreeSelectPanel, {
     ref: overlayRef,
     appendTo: props.appendTo,
     panelStyle: props.panelStyle,
@@ -778,7 +810,8 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onEnter: onOverlayEnter,
     onEntered: onOverlayEntered,
     onExit: onOverlayExit,
-    onExited: onOverlayExited
+    onExited: onOverlayExited,
+    ptm: ptm
   }, content));
 }));
 TreeSelect.displayName = 'TreeSelect';