primereact 7.0.0-rc.1 → 7.1.0

package/dropdown/dropdown.cjs.js

@@ -3,9 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var core = require('primereact/core');
+var utils = require('primereact/utils');
+var ripple = require('primereact/ripple');
+var csstransition = require('primereact/csstransition');
+var portal = require('primereact/portal');
 var virtualscroller = require('primereact/virtualscroller');
 var PrimeReact = require('primereact/api');
+var tooltip = require('primereact/tooltip');
+var overlayservice = require('primereact/overlayservice');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -163,20 +168,20 @@ var DropdownItem = /*#__PURE__*/function (_Component) {
   }, {
     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));
     }
   }]);
 
@@ -270,7 +275,7 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
 
         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,
@@ -283,9 +288,9 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
     }
   }, {
     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);
     }
@@ -293,19 +298,19 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
     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,
@@ -326,7 +331,7 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
           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);
@@ -337,7 +342,7 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
       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 () {
@@ -356,14 +361,14 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
 
       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;
           },
@@ -374,7 +379,7 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
           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"
         })));
       }
@@ -391,7 +396,7 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
           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), {
@@ -402,9 +407,9 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
             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"
@@ -412,19 +417,19 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
           }
         });
 
-        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));
@@ -433,10 +438,10 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
   }, {
     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,
@@ -451,7 +456,7 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
         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,
@@ -462,7 +467,7 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
     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
       });
@@ -472,8 +477,8 @@ var DropdownPanelComponent = /*#__PURE__*/function (_Component) {
   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));
 });
@@ -545,7 +550,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         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();
@@ -593,7 +598,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     key: "onPanelClick",
     value: function onPanelClick(event) {
-      core.OverlayService.emit('overlay-click', {
+      overlayservice.OverlayService.emit('overlay-click', {
         originalEvent: event,
         target: this.container
       });
@@ -1020,7 +1025,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       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;
         }
       }
@@ -1030,7 +1035,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     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",
@@ -1054,17 +1059,17 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     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();
     }
   }, {
@@ -1081,18 +1086,18 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         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({
@@ -1130,7 +1135,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       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();
           }
@@ -1153,7 +1158,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
 
       if (!this.resizeListener) {
         this.resizeListener = function () {
-          if (_this10.state.overlayVisible && !core.DomHandler.isTouchDevice()) {
+          if (_this10.state.overlayVisible && !utils.DomHandler.isTouchDevice()) {
             _this10.hideOverlay();
           }
         };
@@ -1177,7 +1182,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     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",
@@ -1194,23 +1199,23 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     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;
@@ -1218,27 +1223,36 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     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'];
 
@@ -1310,7 +1324,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       }
 
       this.updateInputField();
-      this.inputRef.current.selectedIndex = 1;
+
+      if (this.inputRef.current) {
+        this.inputRef.current.selectedIndex = 1;
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -1333,7 +1350,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         this.hideTimeout = null;
       }
 
-      core.ZIndexUtils.clear(this.overlayRef.current);
+      utils.ZIndexUtils.clear(this.overlayRef.current);
     }
   }, {
     key: "componentDidUpdate",
@@ -1361,20 +1378,23 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       }
 
       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,
@@ -1385,7 +1405,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      this.tooltip = core.tip({
+      this.tooltip = tooltip.tip({
         target: this.container,
         content: this.props.tooltip,
         options: this.props.tooltipOptions
@@ -1396,9 +1416,9 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     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;
         },
@@ -1420,11 +1440,11 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     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;
           },
@@ -1442,12 +1462,12 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           "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;
           },
@@ -1459,7 +1479,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     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
         });
@@ -1472,8 +1492,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     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;
         },
@@ -1481,7 +1501,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         role: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": this.state.overlayVisible
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: iconClassName
       }));
     }
@@ -1490,7 +1510,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     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,
@@ -1499,12 +1519,13 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       });
       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;
@@ -1514,10 +1535,11 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         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,
@@ -1568,8 +1590,8 @@ _defineProperty(Dropdown, "defaultProps", {
   filterMatchMode: 'contains',
   filterPlaceholder: null,
   filterLocale: undefined,
-  emptyMessage: 'No records found',
-  emptyFilterMessage: 'No results found',
+  emptyMessage: null,
+  emptyFilterMessage: null,
   editable: false,
   placeholder: null,
   required: false,