primereact 9.4.0 → 9.6.0

package/dropdown/dropdown.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevrondown, times, overlayservice, tooltip, utils, csstransition, portal, virtualscroller, ripple, search) {
+this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevrondown, times, overlayservice, tooltip, utils, componentbase, csstransition, search, portal, virtualscroller, ripple) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -136,7 +136,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
   }
 
-  var DropdownBase = {
+  var DropdownBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Dropdown',
       appendTo: null,
@@ -201,17 +201,19 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       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,
@@ -225,22 +227,27 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       '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 = {
@@ -253,11 +260,11 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     };
     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);
           }
         }
@@ -271,15 +278,16 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       });
     };
     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;
     };
@@ -297,15 +305,17 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           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] : {};
@@ -316,12 +326,13 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
         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);
@@ -334,7 +345,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           template: props.itemTemplate,
           selected: props.isSelected(option),
           disabled: disabled,
-          onClick: props.onOptionClick
+          onClick: props.onOptionClick,
+          ptm: ptm
         });
       }
     };
@@ -349,7 +361,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     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() {
@@ -357,9 +369,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
               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;
@@ -373,26 +385,29 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           '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,
@@ -406,9 +421,10 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           };
           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;
     };
@@ -433,38 +449,49 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
             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",
@@ -480,12 +507,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
         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, {
@@ -501,7 +523,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
   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],
@@ -514,16 +537,26 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       _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,
@@ -571,7 +604,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     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;
       }
@@ -947,7 +980,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       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();
     };
@@ -967,7 +1000,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       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');
@@ -1037,6 +1070,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
         },
         getFocusInput: function getFocusInput() {
           return focusInputRef.current;
+        },
+        getVirtualScroller: function getVirtualScroller() {
+          return virtualScrollerRef.current;
         }
       };
     });
@@ -1085,73 +1121,80 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           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
         });
       }
@@ -1159,22 +1202,22 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     };
     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();
@@ -1193,18 +1236,21 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     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,
@@ -1227,11 +1273,14 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       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';
 
@@ -1241,4 +1290,4 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
 
   return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.icons.chevrondown, primereact.icons.times, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.csstransition, primereact.portal, primereact.virtualscroller, primereact.ripple, primereact.icons.search);
+})({}, React, primereact.api, primereact.hooks, primereact.icons.chevrondown, primereact.icons.times, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.csstransition, primereact.icons.search, primereact.portal, primereact.virtualscroller, primereact.ripple);