primereact 9.5.0 → 9.6.1

package/dropdown/dropdown.esm.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import PrimeReact, { localeOption, FilterService } from 'primereact/api';
+import PrimeReact, { PrimeReactContext, localeOption, FilterService } from 'primereact/api';
 import { useOverlayListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { TimesIcon } from 'primereact/icons/times';
 import { OverlayService } from 'primereact/overlayservice';
 import { Tooltip } from 'primereact/tooltip';
-import { ObjectUtils, classNames, DomHandler, IconUtils, ZIndexUtils } from 'primereact/utils';
+import { classNames, ObjectUtils, mergeProps, DomHandler, IconUtils, ZIndexUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { CSSTransition } from 'primereact/csstransition';
 import { SearchIcon } from 'primereact/icons/search';
 import { Portal } from 'primereact/portal';
@@ -123,7 +124,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
 }
 
-var DropdownBase = {
+var DropdownBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Dropdown',
     appendTo: null,
@@ -188,17 +189,19 @@ var DropdownBase = {
     value: null,
     valueTemplate: null,
     virtualScrollerOptions: null
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, DropdownBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, DropdownBase.defaultProps);
   }
-};
+});
 
 var DropdownItem = /*#__PURE__*/React.memo(function (props) {
-  var onClick = function onClick(event) {
+  var getPTOptions = function getPTOptions(key) {
+    return props.ptm(key, {
+      context: {
+        selected: props.selected,
+        disabled: props.disabled
+      }
+    });
+  };
+  var _onClick = function onClick(event) {
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
@@ -212,22 +215,27 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
     'p-dropdown-item-empty': !props.label || props.label.length === 0
   }, props.option && props.option.className);
   var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
-  return /*#__PURE__*/React.createElement("li", {
+  var itemProps = mergeProps({
     className: className,
     style: props.style,
-    onClick: onClick,
-    "aria-label": props.label,
-    key: props.label,
-    role: "option",
-    "aria-selected": props.selected
-  }, content, /*#__PURE__*/React.createElement(Ripple, null));
+    onClick: function onClick(e) {
+      return _onClick(e);
+    },
+    'aria-label': props.label,
+    role: 'option',
+    'aria-selected': props.selected,
+    key: props.label
+  }, getPTOptions('item'));
+  return /*#__PURE__*/React.createElement("li", itemProps, content, /*#__PURE__*/React.createElement(Ripple, null));
 });
 DropdownItem.displayName = 'DropdownItem';
 
 function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var virtualScrollerRef = React.useRef(null);
+  var ptm = props.ptm;
+  var context = React.useContext(PrimeReactContext);
+  React.useRef(null);
   var filterInputRef = React.useRef(null);
   var isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
   var filterOptions = {
@@ -240,11 +248,11 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
   };
   var onEnter = function onEnter() {
     props.onEnter(function () {
-      if (virtualScrollerRef.current) {
+      if (props.virtualScrollerRef.current) {
         var selectedIndex = props.getSelectedOptionIndex();
         if (selectedIndex !== -1) {
           setTimeout(function () {
-            return virtualScrollerRef.current.scrollToIndex(selectedIndex);
+            return props.virtualScrollerRef.current.scrollToIndex(selectedIndex);
           }, 0);
         }
       }
@@ -258,15 +266,16 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
     });
   };
   var onFilterInputChange = function onFilterInputChange(event) {
-    virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
+    props.virtualScrollerRef.current && props.virtualScrollerRef.current.scrollToIndex(0);
     props.onFilterInputChange && props.onFilterInputChange(event);
   };
   var createFooter = function createFooter() {
     if (props.panelFooterTemplate) {
       var content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-dropdown-footer"
-      }, content);
+      var footerProps = mergeProps({
+        className: 'p-dropdown-footer'
+      }, ptm('footer'));
+      return /*#__PURE__*/React.createElement("div", footerProps, content);
     }
     return null;
   };
@@ -284,15 +293,17 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         template: props.itemTemplate,
         selected: props.isSelected(option),
         disabled: disabled,
-        onClick: props.onOptionClick
+        onClick: props.onOptionClick,
+        ptm: ptm
       });
     });
   };
   var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
     var message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
-    return /*#__PURE__*/React.createElement("li", {
-      className: "p-dropdown-empty-message"
-    }, message);
+    var emptyMessageProps = mergeProps({
+      className: 'p-dropdown-empty-message'
+    }, ptm('emptyMessage'));
+    return /*#__PURE__*/React.createElement("li", emptyMessageProps, message);
   };
   var createItem = function createItem(option, index) {
     var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -303,12 +314,13 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       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-dropdown-item-group',
+        style: style
+      }, ptm('itemGroup'));
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
-      }, /*#__PURE__*/React.createElement("li", {
-        className: "p-dropdown-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);
@@ -321,7 +333,8 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         template: props.itemTemplate,
         selected: props.isSelected(option),
         disabled: disabled,
-        onClick: props.onOptionClick
+        onClick: props.onOptionClick,
+        ptm: ptm
       });
     }
   };
@@ -336,7 +349,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
   var createFilterClearIcon = function createFilterClearIcon() {
     if (props.showFilterClear && props.filterValue) {
       var ariaLabel = localeOption('clear');
-      var iconProps = {
+      var clearIconProps = mergeProps({
         className: 'p-dropdown-filter-clear-icon',
         'aria-label': ariaLabel,
         onClick: function onClick() {
@@ -344,9 +357,9 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
             return DomHandler.focus(filterInputRef.current);
           });
         }
-      };
-      var icon = props.filterClearIcon || /*#__PURE__*/React.createElement(TimesIcon, iconProps);
-      var filterClearIcon = IconUtils.getJSXIcon(icon, _objectSpread$1({}, iconProps), {
+      }, ptm('clearIcon'));
+      var icon = props.filterClearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
+      var filterClearIcon = IconUtils.getJSXIcon(icon, _objectSpread$1({}, clearIconProps), {
         props: props
       });
       return filterClearIcon;
@@ -360,26 +373,29 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         'p-dropdown-clearable-filter': !!clearIcon
       });
       var iconClassName = 'p-dropdown-filter-icon';
-      var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, {
-        className: iconClassName
-      });
-      var filterIcon = IconUtils.getJSXIcon(icon, {
+      var filterIconProps = mergeProps({
         className: iconClassName
-      }, {
+      }, ptm('filterIcon'));
+      var icon = props.filterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
+      var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$1({}, filterIconProps), {
         props: props
       });
-      var content = /*#__PURE__*/React.createElement("div", {
+      var filterContainerProps = mergeProps({
         className: containerClassName
-      }, /*#__PURE__*/React.createElement("input", {
+      }, ptm('filterContainer'));
+      var filterInputProps = mergeProps({
         ref: filterInputRef,
-        type: "text",
-        autoComplete: "off",
-        className: "p-dropdown-filter p-inputtext p-component",
+        type: 'text',
+        autoComplete: 'off',
+        className: 'p-dropdown-filter p-inputtext p-component',
         placeholder: props.filterPlaceholder,
         onKeyDown: props.onFilterInputKeyDown,
-        onChange: onFilterInputChange,
+        onChange: function onChange(e) {
+          return onFilterInputChange(e);
+        },
         value: props.filterValue
-      }), clearIcon, filterIcon);
+      }, ptm('filterInput'));
+      var content = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement("input", filterInputProps), clearIcon, filterIcon);
       if (props.filterTemplate) {
         var defaultContentOptions = {
           className: containerClassName,
@@ -393,9 +409,10 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         };
         content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
       }
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-dropdown-header"
-      }, content);
+      var headerProps = mergeProps({
+        className: 'p-dropdown-header'
+      }, ptm('header'));
+      return /*#__PURE__*/React.createElement("div", headerProps, content);
     }
     return null;
   };
@@ -420,38 +437,49 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
           var className = classNames('p-dropdown-items', options.className);
           var emptyMessage = props.hasFilter ? props.emptyFilterMessage : props.emptyMessage;
           var content = isEmptyFilter ? createEmptyMessage(emptyMessage) : options.children;
-          return /*#__PURE__*/React.createElement("ul", {
+          var listProps = mergeProps({
             ref: options.contentRef,
             style: options.style,
             className: className,
-            role: "listbox"
-          }, content);
+            role: 'listbox'
+          }, ptm('list'));
+          return /*#__PURE__*/React.createElement("ul", listProps, content);
         }
       });
       return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
-        ref: virtualScrollerRef
-      }, virtualScrollerProps));
+        ref: props.virtualScrollerRef
+      }, virtualScrollerProps, {
+        pt: ptm('virtualScroller')
+      }));
     } else {
       var items = createItems();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-dropdown-items-wrapper",
+      var wrapperProps = mergeProps({
+        className: 'p-dropdown-items-wrapper',
         style: {
           maxHeight: props.scrollHeight || 'auto'
         }
-      }, /*#__PURE__*/React.createElement("ul", {
-        className: "p-dropdown-items",
-        role: "listbox"
-      }, items));
+      }, ptm('wrapper'));
+      var listProps = mergeProps({
+        className: 'p-dropdown-items',
+        role: 'listbox'
+      }, ptm('list'));
+      return /*#__PURE__*/React.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("ul", listProps, items));
     }
   };
   var createElement = function createElement() {
     var className = classNames('p-dropdown-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 filter = createFilter();
     var content = createContent();
     var footer = createFooter();
+    var panelProps = mergeProps({
+      ref: ref,
+      className: className,
+      style: props.panelStyle,
+      onClick: props.onClick
+    }, ptm('panel'));
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: ref,
       classNames: "p-connected-overlay",
@@ -467,12 +495,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       onEntered: onEntered,
       onExit: props.onExit,
       onExited: props.onExited
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      className: className,
-      style: props.panelStyle,
-      onClick: props.onClick
-    }, filter, content, footer));
+    }, /*#__PURE__*/React.createElement("div", panelProps, filter, content, footer));
   };
   var element = createElement();
   return /*#__PURE__*/React.createElement(Portal, {
@@ -488,7 +511,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 Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = DropdownBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = DropdownBase.getProps(inProps, context);
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     filterState = _React$useState2[0],
@@ -501,16 +525,26 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     overlayVisibleState = _React$useState6[0],
     setOverlayVisibleState = _React$useState6[1];
+  var _DropdownBase$setMeta = DropdownBase.setMetaData({
+      props: props,
+      state: {
+        filter: filterState,
+        focused: focusedState,
+        overlayVisible: overlayVisibleState
+      }
+    }),
+    ptm = _DropdownBase$setMeta.ptm;
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
   var focusInputRef = React.useRef(props.focusInputRef);
+  var virtualScrollerRef = React.useRef(null);
   var searchTimeout = React.useRef(null);
   var searchValue = React.useRef(null);
   var currentSearchChar = React.useRef(null);
   var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
   var hasFilter = ObjectUtils.isNotEmpty(filterState);
-  var appendTo = props.appendTo || PrimeReact.appendTo;
+  var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
   var _useOverlayListener = useOverlayListener({
       target: elementRef,
       overlay: overlayRef,
@@ -558,7 +592,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var isClearClicked = function isClearClicked(event) {
     return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || DomHandler.hasClass(event.target, 'p-dropdown-filter-clear-icon');
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event) {
     if (props.disabled) {
       return;
     }
@@ -934,7 +968,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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();
     callback && callback();
   };
@@ -954,7 +988,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     props.onHide && props.onHide();
   };
   var alignOverlay = function alignOverlay() {
-    DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
+    DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
   };
   var scrollInView = function scrollInView() {
     var highlightItem = DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
@@ -1024,6 +1058,9 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       },
       getFocusInput: function getFocusInput() {
         return focusInputRef.current;
+      },
+      getVirtualScroller: function getVirtualScroller() {
+        return virtualScrollerRef.current;
       }
     };
   });
@@ -1072,73 +1109,80 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         label: getOptionLabel(selectedOption)
       };
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-hidden-accessible p-dropdown-hidden-select"
-    }, /*#__PURE__*/React.createElement("select", {
+    var hiddenSelectedMessageProps = mergeProps({
+      className: 'p-hidden-accessible p-dropdown-hidden-select'
+    }, ptm('hiddenSelectedMessage'));
+    var selectProps = mergeProps({
       ref: inputRef,
       required: props.required,
       defaultValue: option.value,
       name: props.name,
       tabIndex: -1,
-      "aria-hidden": "true"
-    }, /*#__PURE__*/React.createElement("option", {
+      'aria-hidden': 'true'
+    }, ptm('select'));
+    var optionProps = mergeProps({
       value: option.value
-    }, option.label)));
+    }, ptm('option'));
+    return /*#__PURE__*/React.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React.createElement("select", selectProps, /*#__PURE__*/React.createElement("option", optionProps, option.label)));
   };
   var createKeyboardHelper = function createKeyboardHelper() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-hidden-accessible"
-    }, /*#__PURE__*/React.createElement("input", _extends({
+    var hiddenSelectedMessageProps = mergeProps({
+      className: 'p-hidden-accessible'
+    }, ptm('hiddenSelectedMessage'));
+    var inputProps = mergeProps(_objectSpread({
       ref: focusInputRef,
       id: props.inputId,
-      type: "text",
+      type: 'text',
       readOnly: true,
-      "aria-haspopup": "listbox",
+      'aria-haspopup': 'listbox',
       onFocus: onInputFocus,
       onBlur: onInputBlur,
       onKeyDown: onInputKeyDown,
       disabled: props.disabled,
       tabIndex: props.tabIndex
-    }, ariaProps)));
+    }, ariaProps), ptm('input'));
+    return /*#__PURE__*/React.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React.createElement("input", inputProps));
   };
   var createLabel = function createLabel() {
     var label = ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
     if (props.editable) {
       var value = label || props.value || '';
-      return /*#__PURE__*/React.createElement("input", _extends({
+      var inputProps = mergeProps(_objectSpread({
         ref: inputRef,
-        type: "text",
+        type: 'text',
         defaultValue: value,
-        className: "p-dropdown-label p-inputtext",
+        className: 'p-dropdown-label p-inputtext',
         disabled: props.disabled,
         placeholder: props.placeholder,
         maxLength: props.maxLength,
         onInput: onEditableInputChange,
         onFocus: onEditableInputFocus,
         onBlur: onInputBlur,
-        "aria-haspopup": "listbox"
-      }, ariaProps));
+        'aria-haspopup': 'listbox'
+      }, ariaProps), ptm('input'));
+      return /*#__PURE__*/React.createElement("input", inputProps);
     } else {
       var _className = classNames('p-dropdown-label p-inputtext', {
         'p-placeholder': label === null && props.placeholder,
         'p-dropdown-label-empty': label === null && !props.placeholder
       });
       var content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
-      return /*#__PURE__*/React.createElement("span", {
+      var _inputProps = mergeProps({
         ref: inputRef,
         className: _className
-      }, content);
+      }, ptm('input'));
+      return /*#__PURE__*/React.createElement("span", _inputProps, content);
     }
   };
   var createClearIcon = function createClearIcon() {
     if (props.value != null && props.showClear && !props.disabled) {
       var iconClassName = classNames('p-dropdown-clear-icon p-clickable');
-      var iconProps = {
+      var clearIconProps = mergeProps({
         className: iconClassName,
         onPointerUp: clear
-      };
-      var icon = props.clearIcon || /*#__PURE__*/React.createElement(TimesIcon, iconProps);
-      return IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+      }, ptm('clearIcon'));
+      var icon = props.clearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
+      return IconUtils.getJSXIcon(icon, _objectSpread({}, clearIconProps), {
         props: props
       });
     }
@@ -1146,22 +1190,22 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
   var createDropdownIcon = function createDropdownIcon() {
     var iconClassName = classNames('p-dropdown-trigger-icon p-clickable');
-    var icon = props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      className: iconClassName
-    });
-    var dropdownIcon = IconUtils.getJSXIcon(icon, {
+    var dropdownIconProps = mergeProps({
       className: iconClassName
-    }, {
+    }, ptm('dropdownIcon'));
+    var icon = props.dropdownIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, dropdownIconProps);
+    var dropdownIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, dropdownIconProps), {
       props: props
     });
     var ariaLabel = props.placeholder || props.ariaLabel;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "p-dropdown-trigger",
-      role: "button",
-      "aria-haspopup": "listbox",
-      "aria-expanded": overlayVisibleState,
-      "aria-label": ariaLabel
-    }, dropdownIcon);
+    var triggerProps = mergeProps({
+      className: 'p-dropdown-trigger',
+      role: 'button',
+      'aria-haspopup': 'listbox',
+      'aria-expanded': overlayVisibleState,
+      'aria-label': ariaLabel
+    }, ptm('trigger'));
+    return /*#__PURE__*/React.createElement("div", triggerProps, dropdownIcon);
   };
   var visibleOptions = getVisibleOptions();
   var selectedOption = getSelectedOption();
@@ -1180,18 +1224,21 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var labelElement = createLabel();
   var dropdownIcon = createDropdownIcon();
   var clearIcon = createClearIcon();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
-    ref: elementRef,
+  var rootProps = mergeProps({
     id: props.id,
+    ref: elementRef,
     className: className,
-    style: props.style
-  }, otherProps, {
-    onClick: onClick,
+    style: props.style,
+    onClick: function onClick(e) {
+      return _onClick(e);
+    },
     onMouseDown: props.onMouseDown,
     onContextMenu: props.onContextMenu
-  }), keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement(DropdownPanel, _extends({
+  }, otherProps, ptm('root'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement(DropdownPanel, _extends({
     ref: overlayRef,
-    visibleOptions: visibleOptions
+    visibleOptions: visibleOptions,
+    virtualScrollerRef: virtualScrollerRef
   }, props, {
     appendTo: appendTo,
     onClick: onPanelClick,
@@ -1214,11 +1261,14 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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')
+  })));
 }));
 Dropdown.displayName = 'Dropdown';