primereact 9.5.0 → 9.6.1

package/dock/dock.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.dock=function(e,t,r,n,o){"use strict";function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var c=i(t);function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function l(e,t){if("object"!==a(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==a(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function u(e){var t=l(e,"string");return"symbol"===a(t)?t:String(t)}function s(e,t,r){return(t=u(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(e){if(Array.isArray(e))return e}function p(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,c,a=[],l=!0,u=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);l=!0);}catch(e){u=!0,o=e}finally{try{if(!l&&null!=r.return&&(c=r.return(),Object(c)!==c))return}finally{if(u)throw o}}return a}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function d(e,t){if(e){if("string"==typeof e)return f(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?f(e,t):void 0}}function b(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var y=o.ComponentBase.extend({defaultProps:{__TYPE:"Dock",id:null,style:null,className:null,model:null,position:"bottom",magnification:!0,header:null,footer:null,children:void 0}});function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?v(Object(r),!0).forEach((function(t){s(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):v(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var O=c.memo(c.forwardRef((function(e,t){var o,i,a=y.getProps(e),l=c.useState(-3),u=(i=2,m(o=l)||p(o,i)||d(o,i)||b()),s=u[0],f=u[1],v=y.setMetaData({props:a,state:{currentIndex:s}}).ptm,O=c.useRef(null),j=function(){f(-3)},h=function(e){f(e)},P=function(e,t){t.command&&t.command({originalEvent:e,item:t}),e.preventDefault()},k=function(e,t){if(!1===e.visible)return null;var o=e.disabled,i=e.icon,l=e.label,u=e.template,m=e.url,p=e.target,f=n.classNames("p-dock-item",{"p-dock-item-second-prev":s-2===t,"p-dock-item-prev":s-1===t,"p-dock-item-current":s===t,"p-dock-item-next":s+1===t,"p-dock-item-second-next":s+2===t}),d=n.classNames("p-dock-action",{"p-disabled":o}),b=n.classNames("p-dock-action-icon",i),y=n.mergeProps({className:"p-dock-action-icon"},v("icon")),O=n.IconUtils.getJSXIcon(i,g({},y),{props:a}),j=n.mergeProps({href:m||"#",role:"menuitem",className:d,target:p,"data-pr-tooltip":l,onClick:function(t){return P(t,e)}},v("action")),k=c.createElement("a",j,O,c.createElement(r.Ripple,null));u&&(k=n.ObjectUtils.getJSXElement(u,e,{onClick:function(t){return P(t,e)},className:d,iconClassName:b,element:k,props:a,index:t}));var E=n.mergeProps({key:t,className:f,role:"none",onMouseEnter:function(){return h(t)}},v("menuitem"));return c.createElement("li",E,k)};c.useImperativeHandle(t,(function(){return{props:a,getElement:function(){return O.current}}}));var E,S,N=n.classNames("p-dock p-component p-dock-".concat(a.position),{"p-dock-magnification":a.magnification},a.className),w=function(){if(a.header){var e=n.ObjectUtils.getJSXElement(a.header,{props:a}),t=n.mergeProps({className:"p-dock-header"},v("header"));return c.createElement("div",t,e)}return null}(),D=(E=a.model?a.model.map(k):null,S=n.mergeProps({className:"p-dock-list",role:"menu",onMouseLeave:j},v("menu")),c.createElement("ul",S,E)),I=function(){if(a.footer){var e=n.ObjectUtils.getJSXElement(a.footer,{props:a}),t=n.mergeProps({className:"p-dock-footer"},v("footer"));return c.createElement("div",t,e)}return null}(),x=n.mergeProps({id:a.id,ref:O,className:N,style:a.style},y.getOtherProps(a),v("root")),A=n.mergeProps({className:"p-dock-container"},v("container"));return c.createElement("div",x,c.createElement("div",A,w,D,I))})));return O.displayName="Dock",e.Dock=O,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.ripple,primereact.utils,primereact.componentbase);
+this.primereact=this.primereact||{},this.primereact.dock=function(e,t,r,n,o,i){"use strict";function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=c(t);function l(e){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},l(e)}function u(e,t){if("object"!==l(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==l(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function s(e){var t=u(e,"string");return"symbol"===l(t)?t:String(t)}function m(e,t,r){return(t=s(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){if(Array.isArray(e))return e}function f(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,c,a=[],l=!0,u=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);l=!0);}catch(e){u=!0,o=e}finally{try{if(!l&&null!=r.return&&(c=r.return(),Object(c)!==c))return}finally{if(u)throw o}}return a}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function b(e,t){if(e){if("string"==typeof e)return d(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?d(e,t):void 0}}function y(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var v=o.ComponentBase.extend({defaultProps:{__TYPE:"Dock",id:null,style:null,className:null,model:null,position:"bottom",magnification:!0,header:null,footer:null,children:void 0}});function g(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?g(Object(r),!0).forEach((function(t){m(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var j=a.memo(a.forwardRef((function(e,t){var o,c,l=a.useContext(i.PrimeReactContext),u=v.getProps(e,l),s=a.useState(-3),m=(c=2,p(o=s)||f(o,c)||b(o,c)||y()),d=m[0],g=m[1],j=v.setMetaData({props:u,state:{currentIndex:d}}).ptm,P=a.useRef(null),h=function(){g(-3)},k=function(e){g(e)},E=function(e,t){t.command&&t.command({originalEvent:e,item:t}),e.preventDefault()},S=function(e,t){if(!1===e.visible)return null;var o=e.disabled,i=e.icon,c=e.label,l=e.template,s=e.url,m=e.target,p=n.classNames("p-dock-item",{"p-dock-item-second-prev":d-2===t,"p-dock-item-prev":d-1===t,"p-dock-item-current":d===t,"p-dock-item-next":d+1===t,"p-dock-item-second-next":d+2===t}),f=n.classNames("p-dock-action",{"p-disabled":o}),b=n.classNames("p-dock-action-icon",i),y=n.mergeProps({className:"p-dock-action-icon"},j("icon")),v=n.IconUtils.getJSXIcon(i,O({},y),{props:u}),g=n.mergeProps({href:s||"#",role:"menuitem",className:f,target:m,"data-pr-tooltip":c,onClick:function(t){return E(t,e)}},j("action")),P=a.createElement("a",g,v,a.createElement(r.Ripple,null));l&&(P=n.ObjectUtils.getJSXElement(l,e,{onClick:function(t){return E(t,e)},className:f,iconClassName:b,element:P,props:u,index:t}));var h=n.mergeProps({key:t,className:p,role:"none",onMouseEnter:function(){return k(t)}},j("menuitem"));return a.createElement("li",h,P)};a.useImperativeHandle(t,(function(){return{props:u,getElement:function(){return P.current}}}));var N,w,D=n.classNames("p-dock p-component p-dock-".concat(u.position),{"p-dock-magnification":u.magnification},u.className),x=function(){if(u.header){var e=n.ObjectUtils.getJSXElement(u.header,{props:u}),t=n.mergeProps({className:"p-dock-header"},j("header"));return a.createElement("div",t,e)}return null}(),C=(N=u.model?u.model.map(S):null,w=n.mergeProps({className:"p-dock-list",role:"menu",onMouseLeave:h},j("menu")),a.createElement("ul",w,N)),I=function(){if(u.footer){var e=n.ObjectUtils.getJSXElement(u.footer,{props:u}),t=n.mergeProps({className:"p-dock-footer"},j("footer"));return a.createElement("div",t,e)}return null}(),A=n.mergeProps({id:u.id,ref:P,className:D,style:u.style},v.getOtherProps(u),j("root")),M=n.mergeProps({className:"p-dock-container"},j("container"));return a.createElement("div",A,a.createElement("div",M,x,C,I))})));return j.displayName="Dock",e.Dock=j,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.ripple,primereact.utils,primereact.componentbase,primereact.api);

package/dropdown/dropdown.cjs.js

@@ -10,6 +10,7 @@ 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');
@@ -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-dropdown-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';