primereact 7.0.0-rc.1 → 7.1.0

package/dropdown/dropdown.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.dropdown = (function (exports, React, core, virtualscroller, PrimeReact) {
+this.primereact.dropdown = (function (exports, React, utils, ripple, csstransition, portal, virtualscroller, PrimeReact, tooltip, overlayservice) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -158,20 +158,20 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "render",
       value: function render() {
-        var className = core.classNames('p-dropdown-item', {
+        var className = utils.classNames('p-dropdown-item', {
           'p-highlight': this.props.selected,
           'p-disabled': this.props.disabled,
           'p-dropdown-item-empty': !this.props.label || this.props.label.length === 0
         }, this.props.option.className);
-        var content = this.props.template ? core.ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
-        return /*#__PURE__*/React__default['default'].createElement("li", {
+        var content = this.props.template ? utils.ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
+        return /*#__PURE__*/React__default["default"].createElement("li", {
           className: className,
           onClick: this.onClick,
           "aria-label": this.props.label,
           key: this.props.label,
           role: "option",
           "aria-selected": this.props.selected
-        }, content, /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+        }, content, /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
       }
     }]);
 
@@ -265,7 +265,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
 
           var disabled = _this4.props.isOptionDisabled(option);
 
-          return /*#__PURE__*/React__default['default'].createElement(DropdownItem, {
+          return /*#__PURE__*/React__default["default"].createElement(DropdownItem, {
             key: optionKey,
             label: optionLabel,
             option: option,
@@ -278,9 +278,9 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
       }
     }, {
       key: "renderEmptyMessage",
-      value: function renderEmptyMessage(emptyMessage) {
-        var message = core.ObjectUtils.getJSXElement(emptyMessage, this.props);
-        return /*#__PURE__*/React__default['default'].createElement("li", {
+      value: function renderEmptyMessage(emptyMessage, isFilter) {
+        var message = utils.ObjectUtils.getJSXElement(emptyMessage, this.props) || PrimeReact.localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
+        return /*#__PURE__*/React__default["default"].createElement("li", {
           className: "p-dropdown-empty-message"
         }, message);
       }
@@ -288,19 +288,19 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
       key: "renderItem",
       value: function renderItem(option, index) {
         if (this.props.optionGroupLabel) {
-          var groupContent = this.props.optionGroupTemplate ? core.ObjectUtils.getJSXElement(this.props.optionGroupTemplate, option, index) : this.props.getOptionGroupLabel(option);
+          var groupContent = this.props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(this.props.optionGroupTemplate, option, index) : this.props.getOptionGroupLabel(option);
           var groupChildrenContent = this.renderGroupChildren(option);
           var key = index + '_' + this.props.getOptionGroupRenderKey(option);
-          return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
+          return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
             key: key
-          }, /*#__PURE__*/React__default['default'].createElement("li", {
+          }, /*#__PURE__*/React__default["default"].createElement("li", {
             className: "p-dropdown-item-group"
           }, groupContent), groupChildrenContent);
         } else {
           var optionLabel = this.props.getOptionLabel(option);
           var optionKey = index + '_' + this.props.getOptionRenderKey(option);
           var disabled = this.props.isOptionDisabled(option);
-          return /*#__PURE__*/React__default['default'].createElement(DropdownItem, {
+          return /*#__PURE__*/React__default["default"].createElement(DropdownItem, {
             key: optionKey,
             label: optionLabel,
             option: option,
@@ -321,7 +321,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
             return _this5.renderItem(option, index);
           });
         } else if (this.props.hasFilter()) {
-          return this.renderEmptyMessage(this.props.emptyFilterMessage);
+          return this.renderEmptyMessage(this.props.emptyFilterMessage, true);
         }
 
         return this.renderEmptyMessage(this.props.emptyMessage);
@@ -332,7 +332,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
         var _this6 = this;
 
         if (this.props.showFilterClear && this.props.filterValue) {
-          return /*#__PURE__*/React__default['default'].createElement("i", {
+          return /*#__PURE__*/React__default["default"].createElement("i", {
             className: "p-dropdown-filter-clear-icon pi pi-times",
             onClick: function onClick() {
               return _this6.props.onFilterClearIconClick(function () {
@@ -351,14 +351,14 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
 
         if (this.props.filter) {
           var clearIcon = this.renderFilterClearIcon();
-          var containerClassName = core.classNames('p-dropdown-filter-container', {
+          var containerClassName = utils.classNames('p-dropdown-filter-container', {
             'p-dropdown-clearable-filter': !!clearIcon
           });
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-dropdown-header"
-          }, /*#__PURE__*/React__default['default'].createElement("div", {
+          }, /*#__PURE__*/React__default["default"].createElement("div", {
             className: containerClassName
-          }, /*#__PURE__*/React__default['default'].createElement("input", {
+          }, /*#__PURE__*/React__default["default"].createElement("input", {
             ref: function ref(el) {
               return _this7.filterInput = el;
             },
@@ -369,7 +369,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
             onKeyDown: this.props.onFilterInputKeyDown,
             onChange: this.onFilterInputChange,
             value: this.props.filterValue
-          }), clearIcon, /*#__PURE__*/React__default['default'].createElement("i", {
+          }), clearIcon, /*#__PURE__*/React__default["default"].createElement("i", {
             className: "p-dropdown-filter-icon pi pi-search"
           })));
         }
@@ -386,7 +386,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
             style: _objectSpread$1(_objectSpread$1({}, this.props.virtualScrollerOptions.style), {
               height: this.props.scrollHeight
             }),
-            className: core.classNames('p-dropdown-items-wrapper', this.props.virtualScrollerOptions.className),
+            className: utils.classNames('p-dropdown-items-wrapper', this.props.virtualScrollerOptions.className),
             items: this.props.visibleOptions,
             onLazyLoad: function onLazyLoad(event) {
               return _this8.props.virtualScrollerOptions.onLazyLoad(_objectSpread$1(_objectSpread$1({}, event), {
@@ -397,9 +397,9 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
               return item && _this8.renderItem(item, options.index);
             },
             contentTemplate: function contentTemplate(options) {
-              var className = core.classNames('p-dropdown-items', options.className);
+              var className = utils.classNames('p-dropdown-items', options.className);
               var content = _this8.isEmptyFilter() ? _this8.renderEmptyMessage() : options.children;
-              return /*#__PURE__*/React__default['default'].createElement("ul", {
+              return /*#__PURE__*/React__default["default"].createElement("ul", {
                 ref: options.contentRef,
                 className: className,
                 role: "listbox"
@@ -407,19 +407,19 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
             }
           });
 
-          return /*#__PURE__*/React__default['default'].createElement(virtualscroller.VirtualScroller, _extends({
+          return /*#__PURE__*/React__default["default"].createElement(virtualscroller.VirtualScroller, _extends({
             ref: function ref(el) {
               return _this8.virtualScrollerRef = el;
             }
           }, virtualScrollerProps));
         } else {
           var items = this.renderItems();
-          return /*#__PURE__*/React__default['default'].createElement("div", {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
             className: "p-dropdown-items-wrapper",
             style: {
               maxHeight: this.props.scrollHeight || 'auto'
             }
-          }, /*#__PURE__*/React__default['default'].createElement("ul", {
+          }, /*#__PURE__*/React__default["default"].createElement("ul", {
             className: "p-dropdown-items",
             role: "listbox"
           }, items));
@@ -428,10 +428,10 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "renderElement",
       value: function renderElement() {
-        var className = core.classNames('p-dropdown-panel p-component', this.props.panelClassName);
+        var className = utils.classNames('p-dropdown-panel p-component', this.props.panelClassName);
         var filter = this.renderFilter();
         var content = this.renderContent();
-        return /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+        return /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
           nodeRef: this.props.forwardRef,
           classNames: "p-connected-overlay",
           in: this.props.in,
@@ -446,7 +446,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
           onEntered: this.onEntered,
           onExit: this.props.onExit,
           onExited: this.props.onExited
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           ref: this.props.forwardRef,
           className: className,
           style: this.props.panelStyle,
@@ -457,7 +457,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
       key: "render",
       value: function render() {
         var element = this.renderElement();
-        return /*#__PURE__*/React__default['default'].createElement(core.Portal, {
+        return /*#__PURE__*/React__default["default"].createElement(portal.Portal, {
           element: element,
           appendTo: this.props.appendTo
         });
@@ -467,8 +467,8 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     return DropdownPanelComponent;
   }(React.Component);
 
-  var DropdownPanel = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
-    return /*#__PURE__*/React__default['default'].createElement(DropdownPanelComponent, _extends({
+  var DropdownPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+    return /*#__PURE__*/React__default["default"].createElement(DropdownPanelComponent, _extends({
       forwardRef: ref
     }, props));
   });
@@ -540,7 +540,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
           return;
         }
 
-        if (core.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
+        if (utils.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
           return;
         } else if (!this.overlayRef.current || !(this.overlayRef.current && this.overlayRef.current.contains(event.target))) {
           this.focusInput.focus();
@@ -588,7 +588,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "onPanelClick",
       value: function onPanelClick(event) {
-        core.OverlayService.emit('overlay-click', {
+        overlayservice.OverlayService.emit('overlay-click', {
           originalEvent: event,
           target: this.container
         });
@@ -1015,7 +1015,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
         var key = this.equalityKey();
 
         for (var i = 0; i < list.length; i++) {
-          if (core.ObjectUtils.equals(value, this.getOptionValue(list[i]), key)) {
+          if (utils.ObjectUtils.equals(value, this.getOptionValue(list[i]), key)) {
             return i;
           }
         }
@@ -1025,7 +1025,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "isSelected",
       value: function isSelected(option) {
-        return core.ObjectUtils.equals(this.props.value, this.getOptionValue(option), this.equalityKey());
+        return utils.ObjectUtils.equals(this.props.value, this.getOptionValue(option), this.equalityKey());
       }
     }, {
       key: "equalityKey",
@@ -1049,17 +1049,17 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "onOverlayEnter",
       value: function onOverlayEnter(callback) {
-        core.ZIndexUtils.set('overlay', this.overlayRef.current);
+        utils.ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
         this.alignOverlay();
         callback && callback();
       }
     }, {
       key: "onOverlayEntered",
       value: function onOverlayEntered(callback) {
+        callback && callback();
         this.bindDocumentClickListener();
         this.bindScrollListener();
         this.bindResizeListener();
-        callback && callback();
         this.props.onShow && this.props.onShow();
       }
     }, {
@@ -1076,18 +1076,18 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
           this.resetFilter();
         }
 
-        core.ZIndexUtils.clear(this.overlayRef.current);
+        utils.ZIndexUtils.clear(this.overlayRef.current);
         this.props.onHide && this.props.onHide();
       }
     }, {
       key: "alignOverlay",
       value: function alignOverlay() {
-        core.DomHandler.alignOverlay(this.overlayRef.current, this.input.parentElement, this.props.appendTo || PrimeReact__default['default'].appendTo);
+        utils.DomHandler.alignOverlay(this.overlayRef.current, this.input.parentElement, this.props.appendTo || PrimeReact__default["default"].appendTo);
       }
     }, {
       key: "scrollInView",
       value: function scrollInView() {
-        var highlightItem = core.DomHandler.findSingle(this.overlayRef.current, 'li.p-highlight');
+        var highlightItem = utils.DomHandler.findSingle(this.overlayRef.current, 'li.p-highlight');
 
         if (highlightItem) {
           highlightItem.scrollIntoView({
@@ -1125,7 +1125,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
         var _this9 = this;
 
         if (!this.scrollHandler) {
-          this.scrollHandler = new core.ConnectedOverlayScrollHandler(this.container, function () {
+          this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.container, function () {
             if (_this9.state.overlayVisible) {
               _this9.hideOverlay();
             }
@@ -1148,7 +1148,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
 
         if (!this.resizeListener) {
           this.resizeListener = function () {
-            if (_this10.state.overlayVisible && !core.DomHandler.isTouchDevice()) {
+            if (_this10.state.overlayVisible && !utils.DomHandler.isTouchDevice()) {
               _this10.hideOverlay();
             }
           };
@@ -1172,7 +1172,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "isClearClicked",
       value: function isClearClicked(event) {
-        return core.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon');
+        return utils.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || utils.DomHandler.hasClass(event.target, 'p-dropdown-filter-clear-icon');
       }
     }, {
       key: "updateEditableLabel",
@@ -1189,23 +1189,23 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "getOptionLabel",
       value: function getOptionLabel(option) {
-        return this.props.optionLabel ? core.ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+        return this.props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
       }
     }, {
       key: "getOptionValue",
       value: function getOptionValue(option) {
-        return this.props.optionValue ? core.ObjectUtils.resolveFieldData(option, this.props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
+        return this.props.optionValue ? utils.ObjectUtils.resolveFieldData(option, this.props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
       }
     }, {
       key: "getOptionRenderKey",
       value: function getOptionRenderKey(option) {
-        return this.props.dataKey ? core.ObjectUtils.resolveFieldData(option, this.props.dataKey) : this.getOptionLabel(option);
+        return this.props.dataKey ? utils.ObjectUtils.resolveFieldData(option, this.props.dataKey) : this.getOptionLabel(option);
       }
     }, {
       key: "isOptionDisabled",
       value: function isOptionDisabled(option) {
         if (this.props.optionDisabled) {
-          return core.ObjectUtils.isFunction(this.props.optionDisabled) ? this.props.optionDisabled(option) : core.ObjectUtils.resolveFieldData(option, this.props.optionDisabled);
+          return utils.ObjectUtils.isFunction(this.props.optionDisabled) ? this.props.optionDisabled(option) : utils.ObjectUtils.resolveFieldData(option, this.props.optionDisabled);
         }
 
         return option && option['disabled'] !== undefined ? option['disabled'] : false;
@@ -1213,27 +1213,36 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "getOptionGroupRenderKey",
       value: function getOptionGroupRenderKey(optionGroup) {
-        return core.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
+        return utils.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
       }
     }, {
       key: "getOptionGroupLabel",
       value: function getOptionGroupLabel(optionGroup) {
-        return core.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
+        return utils.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
       }
     }, {
       key: "getOptionGroupChildren",
       value: function getOptionGroupChildren(optionGroup) {
-        return core.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren);
+        return utils.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren);
       }
     }, {
       key: "checkValidity",
       value: function checkValidity() {
-        return this.inputRef.current.checkValidity();
+        if (this.inputRef.current) {
+          return this.inputRef.current.checkValidity();
+        }
+
+        return false;
+      }
+    }, {
+      key: "isLazy",
+      value: function isLazy() {
+        return this.props.virtualScrollerOptions && this.props.virtualScrollerOptions.lazy;
       }
     }, {
       key: "getVisibleOptions",
       value: function getVisibleOptions() {
-        if (this.hasFilter()) {
+        if (this.hasFilter() && !this.isLazy()) {
           var filterValue = this.state.filter.trim().toLocaleLowerCase(this.props.filterLocale);
           var searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label'];
 
@@ -1305,7 +1314,10 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
         }
 
         this.updateInputField();
-        this.inputRef.current.selectedIndex = 1;
+
+        if (this.inputRef.current) {
+          this.inputRef.current.selectedIndex = 1;
+        }
       }
     }, {
       key: "componentWillUnmount",
@@ -1328,7 +1340,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
           this.hideTimeout = null;
         }
 
-        core.ZIndexUtils.clear(this.overlayRef.current);
+        utils.ZIndexUtils.clear(this.overlayRef.current);
       }
     }, {
       key: "componentDidUpdate",
@@ -1356,20 +1368,23 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
         }
 
         this.updateInputField();
-        this.inputRef.current.selectedIndex = 1;
+
+        if (this.inputRef.current) {
+          this.inputRef.current.selectedIndex = 1;
+        }
       }
     }, {
       key: "renderHiddenSelect",
       value: function renderHiddenSelect(selectedOption) {
-        var placeHolderOption = /*#__PURE__*/React__default['default'].createElement("option", {
+        var placeHolderOption = /*#__PURE__*/React__default["default"].createElement("option", {
           value: ""
         }, this.props.placeholder);
-        var option = selectedOption ? /*#__PURE__*/React__default['default'].createElement("option", {
+        var option = selectedOption ? /*#__PURE__*/React__default["default"].createElement("option", {
           value: selectedOption.value
         }, this.getOptionLabel(selectedOption)) : null;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-hidden-accessible p-dropdown-hidden-select"
-        }, /*#__PURE__*/React__default['default'].createElement("select", {
+        }, /*#__PURE__*/React__default["default"].createElement("select", {
           ref: this.inputRef,
           required: this.props.required,
           name: this.props.name,
@@ -1380,7 +1395,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     }, {
       key: "renderTooltip",
       value: function renderTooltip() {
-        this.tooltip = core.tip({
+        this.tooltip = tooltip.tip({
           target: this.container,
           content: this.props.tooltip,
           options: this.props.tooltipOptions
@@ -1391,9 +1406,9 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
       value: function renderKeyboardHelper() {
         var _this11 = this;
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-hidden-accessible"
-        }, /*#__PURE__*/React__default['default'].createElement("input", {
+        }, /*#__PURE__*/React__default["default"].createElement("input", {
           ref: function ref(el) {
             return _this11.focusInput = el;
           },
@@ -1415,11 +1430,11 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
       value: function renderLabel(selectedOption) {
         var _this12 = this;
 
-        var label = selectedOption ? this.getOptionLabel(selectedOption) : null;
+        var label = utils.ObjectUtils.isNotEmpty(selectedOption) ? this.getOptionLabel(selectedOption) : null;
 
         if (this.props.editable) {
           var value = label || this.props.value || '';
-          return /*#__PURE__*/React__default['default'].createElement("input", {
+          return /*#__PURE__*/React__default["default"].createElement("input", {
             ref: function ref(el) {
               return _this12.input = el;
             },
@@ -1437,12 +1452,12 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
             "aria-haspopup": "listbox"
           });
         } else {
-          var className = core.classNames('p-dropdown-label p-inputtext', {
+          var className = utils.classNames('p-dropdown-label p-inputtext', {
             'p-placeholder': label === null && this.props.placeholder,
             'p-dropdown-label-empty': label === null && !this.props.placeholder
           });
-          var content = this.props.valueTemplate ? core.ObjectUtils.getJSXElement(this.props.valueTemplate, selectedOption, this.props) : label || this.props.placeholder || 'empty';
-          return /*#__PURE__*/React__default['default'].createElement("span", {
+          var content = this.props.valueTemplate ? utils.ObjectUtils.getJSXElement(this.props.valueTemplate, selectedOption, this.props) : label || this.props.placeholder || 'empty';
+          return /*#__PURE__*/React__default["default"].createElement("span", {
             ref: function ref(el) {
               return _this12.input = el;
             },
@@ -1454,7 +1469,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
       key: "renderClearIcon",
       value: function renderClearIcon() {
         if (this.props.value != null && this.props.showClear && !this.props.disabled) {
-          return /*#__PURE__*/React__default['default'].createElement("i", {
+          return /*#__PURE__*/React__default["default"].createElement("i", {
             className: "p-dropdown-clear-icon pi pi-times",
             onClick: this.clear
           });
@@ -1467,8 +1482,8 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
       value: function renderDropdownIcon() {
         var _this13 = this;
 
-        var iconClassName = core.classNames('p-dropdown-trigger-icon p-clickable', this.props.dropdownIcon);
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        var iconClassName = utils.classNames('p-dropdown-trigger-icon p-clickable', this.props.dropdownIcon);
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: function ref(el) {
             return _this13.trigger = el;
           },
@@ -1476,7 +1491,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
           role: "button",
           "aria-haspopup": "listbox",
           "aria-expanded": this.state.overlayVisible
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
           className: iconClassName
         }));
       }
@@ -1485,7 +1500,7 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
       value: function render() {
         var _this14 = this;
 
-        var className = core.classNames('p-dropdown p-component p-inputwrapper', this.props.className, {
+        var className = utils.classNames('p-dropdown p-component p-inputwrapper', this.props.className, {
           'p-disabled': this.props.disabled,
           'p-focus': this.state.focused,
           'p-dropdown-clearable': this.props.showClear && !this.props.disabled,
@@ -1494,12 +1509,13 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
         });
         var visibleOptions = this.getVisibleOptions();
         var selectedOption = this.getSelectedOption();
+        var appendTo = this.props.appendTo || PrimeReact__default["default"].appendTo;
         var hiddenSelect = this.renderHiddenSelect(selectedOption);
         var keyboardHelper = this.renderKeyboardHelper();
         var labelElement = this.renderLabel(selectedOption);
         var dropdownIcon = this.renderDropdownIcon();
         var clearIcon = this.renderClearIcon();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           id: this.props.id,
           ref: function ref(el) {
             return _this14.container = el;
@@ -1509,10 +1525,11 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
           onClick: this.onClick,
           onMouseDown: this.props.onMouseDown,
           onContextMenu: this.props.onContextMenu
-        }, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__default['default'].createElement(DropdownPanel, _extends({
+        }, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__default["default"].createElement(DropdownPanel, _extends({
           ref: this.overlayRef,
           visibleOptions: visibleOptions
         }, this.props, {
+          appendTo: appendTo,
           onClick: this.onPanelClick,
           onOptionClick: this.onOptionClick,
           filterValue: this.state.filter,
@@ -1563,8 +1580,8 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
     filterMatchMode: 'contains',
     filterPlaceholder: null,
     filterLocale: undefined,
-    emptyMessage: 'No records found',
-    emptyFilterMessage: 'No results found',
+    emptyMessage: null,
+    emptyFilterMessage: null,
     editable: false,
     placeholder: null,
     required: false,
@@ -1604,4 +1621,4 @@ this.primereact.dropdown = (function (exports, React, core, virtualscroller, Pri
 
   return exports;
 
-}({}, React, primereact.core, primereact.virtualscroller, primereact.api));
+})({}, React, primereact.utils, primereact.ripple, primereact.csstransition, primereact.portal, primereact.virtualscroller, primereact.api, primereact.tooltip, primereact.overlayservice);