primereact 9.4.0 → 9.6.0

package/dropdown/dropdown.cjs.js

@@ -10,11 +10,12 @@ var times = require('primereact/icons/times');
 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 search = require('primereact/icons/search');
 var portal = require('primereact/portal');
 var virtualscroller = require('primereact/virtualscroller');
 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 }; }
 
@@ -150,7 +151,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
 }
 
-var DropdownBase = {
+var DropdownBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Dropdown',
     appendTo: null,
@@ -215,17 +216,19 @@ var DropdownBase = {
     value: null,
     valueTemplate: null,
     virtualScrollerOptions: null
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, DropdownBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, DropdownBase.defaultProps);
   }
-};
+});
 
 var DropdownItem = /*#__PURE__*/React__namespace.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,
@@ -239,22 +242,27 @@ var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-dropdown-item-empty': !props.label || props.label.length === 0
   }, props.option && props.option.className);
   var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props.option) : props.label;
-  return /*#__PURE__*/React__namespace.createElement("li", {
+  var itemProps = utils.mergeProps({
     className: className,
     style: props.style,
-    onClick: onClick,
-    "aria-label": props.label,
-    key: props.label,
-    role: "option",
-    "aria-selected": props.selected
-  }, content, /*#__PURE__*/React__namespace.createElement(ripple.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__namespace.createElement("li", itemProps, content, /*#__PURE__*/React__namespace.createElement(ripple.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__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
-  var virtualScrollerRef = React__namespace.useRef(null);
+  var ptm = props.ptm;
+  var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+  React__namespace.useRef(null);
   var filterInputRef = React__namespace.useRef(null);
   var isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
   var filterOptions = {
@@ -267,11 +275,11 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
   };
   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);
         }
       }
@@ -285,15 +293,16 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
     });
   };
   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 = utils.ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-multiselect-footer"
-      }, content);
+      var footerProps = utils.mergeProps({
+        className: 'p-dropdown-footer'
+      }, ptm('footer'));
+      return /*#__PURE__*/React__namespace.createElement("div", footerProps, content);
     }
     return null;
   };
@@ -311,15 +320,17 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
         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 = utils.ObjectUtils.getJSXElement(emptyMessage, props) || PrimeReact.localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
-    return /*#__PURE__*/React__namespace.createElement("li", {
-      className: "p-dropdown-empty-message"
-    }, message);
+    var emptyMessageProps = utils.mergeProps({
+      className: 'p-dropdown-empty-message'
+    }, ptm('emptyMessage'));
+    return /*#__PURE__*/React__namespace.createElement("li", emptyMessageProps, message);
   };
   var createItem = function createItem(option, index) {
     var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -330,12 +341,13 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
       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-dropdown-item-group',
+        style: style
+      }, ptm('itemGroup'));
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
         key: key
-      }, /*#__PURE__*/React__namespace.createElement("li", {
-        className: "p-dropdown-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);
@@ -348,7 +360,8 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
         template: props.itemTemplate,
         selected: props.isSelected(option),
         disabled: disabled,
-        onClick: props.onOptionClick
+        onClick: props.onOptionClick,
+        ptm: ptm
       });
     }
   };
@@ -363,7 +376,7 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
   var createFilterClearIcon = function createFilterClearIcon() {
     if (props.showFilterClear && props.filterValue) {
       var ariaLabel = PrimeReact.localeOption('clear');
-      var iconProps = {
+      var clearIconProps = utils.mergeProps({
         className: 'p-dropdown-filter-clear-icon',
         'aria-label': ariaLabel,
         onClick: function onClick() {
@@ -371,9 +384,9 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
             return utils.DomHandler.focus(filterInputRef.current);
           });
         }
-      };
-      var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, iconProps);
-      var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, iconProps), {
+      }, ptm('clearIcon'));
+      var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, clearIconProps);
+      var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, clearIconProps), {
         props: props
       });
       return filterClearIcon;
@@ -387,26 +400,29 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
         'p-dropdown-clearable-filter': !!clearIcon
       });
       var iconClassName = 'p-dropdown-filter-icon';
-      var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, {
-        className: iconClassName
-      });
-      var filterIcon = utils.IconUtils.getJSXIcon(icon, {
+      var filterIconProps = utils.mergeProps({
         className: iconClassName
-      }, {
+      }, ptm('filterIcon'));
+      var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, filterIconProps);
+      var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, filterIconProps), {
         props: props
       });
-      var content = /*#__PURE__*/React__namespace.createElement("div", {
+      var filterContainerProps = utils.mergeProps({
         className: containerClassName
-      }, /*#__PURE__*/React__namespace.createElement("input", {
+      }, ptm('filterContainer'));
+      var filterInputProps = utils.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__namespace.createElement("div", filterContainerProps, /*#__PURE__*/React__namespace.createElement("input", filterInputProps), clearIcon, filterIcon);
       if (props.filterTemplate) {
         var defaultContentOptions = {
           className: containerClassName,
@@ -420,9 +436,10 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
         };
         content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
       }
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-dropdown-header"
-      }, content);
+      var headerProps = utils.mergeProps({
+        className: 'p-dropdown-header'
+      }, ptm('header'));
+      return /*#__PURE__*/React__namespace.createElement("div", headerProps, content);
     }
     return null;
   };
@@ -447,38 +464,49 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
           var className = utils.classNames('p-dropdown-items', options.className);
           var emptyMessage = props.hasFilter ? props.emptyFilterMessage : props.emptyMessage;
           var content = isEmptyFilter ? createEmptyMessage(emptyMessage) : options.children;
-          return /*#__PURE__*/React__namespace.createElement("ul", {
+          var listProps = utils.mergeProps({
             ref: options.contentRef,
             style: options.style,
             className: className,
-            role: "listbox"
-          }, content);
+            role: 'listbox'
+          }, ptm('list'));
+          return /*#__PURE__*/React__namespace.createElement("ul", listProps, content);
         }
       });
       return /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
-        ref: virtualScrollerRef
-      }, virtualScrollerProps));
+        ref: props.virtualScrollerRef
+      }, virtualScrollerProps, {
+        pt: ptm('virtualScroller')
+      }));
     } else {
       var items = createItems();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-dropdown-items-wrapper",
+      var wrapperProps = utils.mergeProps({
+        className: 'p-dropdown-items-wrapper',
         style: {
           maxHeight: props.scrollHeight || 'auto'
         }
-      }, /*#__PURE__*/React__namespace.createElement("ul", {
-        className: "p-dropdown-items",
-        role: "listbox"
-      }, items));
+      }, ptm('wrapper'));
+      var listProps = utils.mergeProps({
+        className: 'p-dropdown-items',
+        role: 'listbox'
+      }, ptm('list'));
+      return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("ul", listProps, items));
     }
   };
   var createElement = function createElement() {
     var className = utils.classNames('p-dropdown-panel p-component', props.panelClassName, {
-      '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
     });
     var filter = createFilter();
     var content = createContent();
     var footer = createFooter();
+    var panelProps = utils.mergeProps({
+      ref: ref,
+      className: className,
+      style: props.panelStyle,
+      onClick: props.onClick
+    }, ptm('panel'));
     return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
       nodeRef: ref,
       classNames: "p-connected-overlay",
@@ -494,12 +522,7 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
       onEntered: onEntered,
       onExit: props.onExit,
       onExited: props.onExited
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      ref: ref,
-      className: className,
-      style: props.panelStyle,
-      onClick: props.onClick
-    }, filter, content, footer));
+    }, /*#__PURE__*/React__namespace.createElement("div", panelProps, filter, content, footer));
   };
   var element = createElement();
   return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
@@ -515,7 +538,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__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-  var props = DropdownBase.getProps(inProps);
+  var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+  var props = DropdownBase.getProps(inProps, context);
   var _React$useState = React__namespace.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     filterState = _React$useState2[0],
@@ -528,16 +552,26 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     _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__namespace.useRef(null);
   var overlayRef = React__namespace.useRef(null);
   var inputRef = React__namespace.useRef(props.inputRef);
   var focusInputRef = React__namespace.useRef(props.focusInputRef);
+  var virtualScrollerRef = React__namespace.useRef(null);
   var searchTimeout = React__namespace.useRef(null);
   var searchValue = React__namespace.useRef(null);
   var currentSearchChar = React__namespace.useRef(null);
   var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
   var hasFilter = utils.ObjectUtils.isNotEmpty(filterState);
-  var appendTo = props.appendTo || PrimeReact__default["default"].appendTo;
+  var appendTo = props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo;
   var _useOverlayListener = hooks.useOverlayListener({
       target: elementRef,
       overlay: overlayRef,
@@ -585,7 +619,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var isClearClicked = function isClearClicked(event) {
     return utils.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || utils.DomHandler.hasClass(event.target, 'p-dropdown-filter-clear-icon');
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event) {
     if (props.disabled) {
       return;
     }
@@ -961,7 +995,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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();
     callback && callback();
   };
@@ -981,7 +1015,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     props.onHide && props.onHide();
   };
   var alignOverlay = function alignOverlay() {
-    utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact__default["default"].appendTo);
+    utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo);
   };
   var scrollInView = function scrollInView() {
     var highlightItem = utils.DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
@@ -1051,6 +1085,9 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       },
       getFocusInput: function getFocusInput() {
         return focusInputRef.current;
+      },
+      getVirtualScroller: function getVirtualScroller() {
+        return virtualScrollerRef.current;
       }
     };
   });
@@ -1099,73 +1136,80 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         label: getOptionLabel(selectedOption)
       };
     }
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-hidden-accessible p-dropdown-hidden-select"
-    }, /*#__PURE__*/React__namespace.createElement("select", {
+    var hiddenSelectedMessageProps = utils.mergeProps({
+      className: 'p-hidden-accessible p-dropdown-hidden-select'
+    }, ptm('hiddenSelectedMessage'));
+    var selectProps = utils.mergeProps({
       ref: inputRef,
       required: props.required,
       defaultValue: option.value,
       name: props.name,
       tabIndex: -1,
-      "aria-hidden": "true"
-    }, /*#__PURE__*/React__namespace.createElement("option", {
+      'aria-hidden': 'true'
+    }, ptm('select'));
+    var optionProps = utils.mergeProps({
       value: option.value
-    }, option.label)));
+    }, ptm('option'));
+    return /*#__PURE__*/React__namespace.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React__namespace.createElement("select", selectProps, /*#__PURE__*/React__namespace.createElement("option", optionProps, option.label)));
   };
   var createKeyboardHelper = function createKeyboardHelper() {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-hidden-accessible"
-    }, /*#__PURE__*/React__namespace.createElement("input", _extends({
+    var hiddenSelectedMessageProps = utils.mergeProps({
+      className: 'p-hidden-accessible'
+    }, ptm('hiddenSelectedMessage'));
+    var inputProps = utils.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__namespace.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React__namespace.createElement("input", inputProps));
   };
   var createLabel = function createLabel() {
     var label = utils.ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
     if (props.editable) {
       var value = label || props.value || '';
-      return /*#__PURE__*/React__namespace.createElement("input", _extends({
+      var inputProps = utils.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__namespace.createElement("input", inputProps);
     } else {
       var _className = utils.classNames('p-dropdown-label p-inputtext', {
         'p-placeholder': label === null && props.placeholder,
         'p-dropdown-label-empty': label === null && !props.placeholder
       });
       var content = props.valueTemplate ? utils.ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
-      return /*#__PURE__*/React__namespace.createElement("span", {
+      var _inputProps = utils.mergeProps({
         ref: inputRef,
         className: _className
-      }, content);
+      }, ptm('input'));
+      return /*#__PURE__*/React__namespace.createElement("span", _inputProps, content);
     }
   };
   var createClearIcon = function createClearIcon() {
     if (props.value != null && props.showClear && !props.disabled) {
       var iconClassName = utils.classNames('p-dropdown-clear-icon p-clickable');
-      var iconProps = {
+      var clearIconProps = utils.mergeProps({
         className: iconClassName,
         onPointerUp: clear
-      };
-      var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, iconProps);
-      return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+      }, ptm('clearIcon'));
+      var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, clearIconProps);
+      return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, clearIconProps), {
         props: props
       });
     }
@@ -1173,22 +1217,22 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createDropdownIcon = function createDropdownIcon() {
     var iconClassName = utils.classNames('p-dropdown-trigger-icon p-clickable');
-    var icon = props.dropdownIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, {
-      className: iconClassName
-    });
-    var dropdownIcon = utils.IconUtils.getJSXIcon(icon, {
+    var dropdownIconProps = utils.mergeProps({
       className: iconClassName
-    }, {
+    }, ptm('dropdownIcon'));
+    var icon = props.dropdownIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, dropdownIconProps);
+    var dropdownIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, dropdownIconProps), {
       props: props
     });
     var ariaLabel = props.placeholder || props.ariaLabel;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-dropdown-trigger",
-      role: "button",
-      "aria-haspopup": "listbox",
-      "aria-expanded": overlayVisibleState,
-      "aria-label": ariaLabel
-    }, dropdownIcon);
+    var triggerProps = utils.mergeProps({
+      className: 'p-dropdown-trigger',
+      role: 'button',
+      'aria-haspopup': 'listbox',
+      'aria-expanded': overlayVisibleState,
+      'aria-label': ariaLabel
+    }, ptm('trigger'));
+    return /*#__PURE__*/React__namespace.createElement("div", triggerProps, dropdownIcon);
   };
   var visibleOptions = getVisibleOptions();
   var selectedOption = getSelectedOption();
@@ -1207,18 +1251,21 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var labelElement = createLabel();
   var dropdownIcon = createDropdownIcon();
   var clearIcon = createClearIcon();
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: elementRef,
+  var rootProps = utils.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__namespace.createElement(DropdownPanel, _extends({
+  }, otherProps, ptm('root'));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.createElement(DropdownPanel, _extends({
     ref: overlayRef,
-    visibleOptions: visibleOptions
+    visibleOptions: visibleOptions,
+    virtualScrollerRef: virtualScrollerRef
   }, props, {
     appendTo: appendTo,
     onClick: onPanelClick,
@@ -1241,11 +1288,14 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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')
+  })));
 }));
 Dropdown.displayName = 'Dropdown';