Fix primefaces#5311/primefaces#5058/primefaces#5266 AppendTo fix

components/lib/api/api.d.ts

@@ -61,6 +61,7 @@ import { OverlayPanelPassThroughOptions } from '../overlaypanel/overlaypanel';
 import { PaginatorPassThroughOptions } from '../paginator/paginator';
 import { PanelPassThroughOptions } from '../panel/panel';
 import { PanelMenuPassThroughOptions } from '../panelmenu/panelmenu';
+import { PassThroughOptions } from '../passthrough';
 import { PasswordPassThroughOptions } from '../password/password';
 import { PickListPassThroughOptions } from '../picklist/picklist';
 import { ProgressBarPassThroughOptions } from '../progressbar/progressbar';
@@ -93,7 +94,6 @@ import { TreePassThroughOptions } from '../tree/tree';
 import { TreeSelectPassThroughOptions } from '../treeselect/treeselect';
 import { TreeTablePassThroughOptions } from '../treetable/treetable';
 import { VirtualScrollerPassThroughOptions } from '../virtualscroller/virtualscroller';
-import { PassThroughOptions } from '../passthrough';
 
 // Config
 /**
@@ -129,7 +129,7 @@ export interface ZIndexOptions {
 
 export type InputStyleType = 'outlined' | 'filled';
 
-export type AppendToType = 'self' | HTMLElement | undefined | null;
+export type AppendToType = 'self' | HTMLElement | undefined | null | (() => HTMLElement);
 
 export type StyleContainerType = ShadowRoot | HTMLElement | undefined | null;
 

components/lib/autocomplete/autocomplete.d.ts

@@ -236,7 +236,7 @@ export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.HT
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @defaultValue false

components/lib/calendar/Calendar.js

@@ -1534,7 +1534,9 @@ export const Calendar = React.memo(
         };
 
         const appendDisabled = () => {
-            return props.appendTo === 'self' || props.inline;
+            const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo;
+
+            return appendTo === 'self' || props.inline;
         };
 
         const alignOverlay = () => {

components/lib/calendar/calendar.d.ts

@@ -523,7 +523,7 @@ interface CalendarBaseProps {
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @defaultValue false

components/lib/cascadeselect/cascadeselect.d.ts

@@ -256,7 +256,7 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}

components/lib/colorpicker/colorpicker.d.ts

@@ -149,7 +149,7 @@ export interface ColorPickerProps extends Omit<React.DetailedHTMLProps<React.Inp
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @defaultValue false

components/lib/confirmdialog/confirmdialog.d.ts

@@ -214,7 +214,7 @@ export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide' | 'footer
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Style class of the element.
      */

components/lib/confirmpopup/confirmpopup.d.ts

@@ -234,7 +234,7 @@ export interface ConfirmPopupProps {
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Enables to hide the popup when outside is clicked.
      * @defaultValue true

components/lib/contextmenu/contextmenu.d.ts

@@ -169,7 +169,7 @@ export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTM
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      */

components/lib/datatable/datatable.d.ts

@@ -1222,7 +1222,7 @@ interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<Re
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    paginatorDropdownAppendTo?: 'self' | HTMLElement | null | undefined;
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Content for the left side of the paginator.
      */

components/lib/dataview/dataview.d.ts

@@ -285,7 +285,7 @@ export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null;
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Array of integer values to display inside rows per page dropdown.
      */

components/lib/dialog/dialog.d.ts

@@ -190,7 +190,7 @@ export interface DialogProps {
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Defines a string that labels the close icon.
      */

components/lib/dropdown/dropdown.d.ts

@@ -220,7 +220,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Used to define a string that labels the component.
      */

components/lib/menu/menu.d.ts

@@ -118,7 +118,7 @@ export interface MenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}

components/lib/multiselect/multiselect.d.ts

@@ -421,7 +421,7 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */

components/lib/overlaypanel/overlaypanel.d.ts

@@ -106,7 +106,7 @@ export interface OverlayPanelProps extends Omit<React.DetailedHTMLProps<React.HT
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Aria label of the close icon.
      * @defaultValue close

components/lib/paginator/paginator.d.ts

@@ -391,7 +391,7 @@ interface PaginatorRowsPerPageDropdownOptions {
     /**
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
      */
-    appendTo: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The current page number.
      */
@@ -610,7 +610,7 @@ export interface PaginatorProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    dropdownAppendTo?: 'self' | HTMLElement | null | undefined;
+    dropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Callback to invoke when page changes, the event object contains information about the new state.
      * @param {PaginatorPageChangeEvent} event - Custom page change event.

components/lib/password/password.d.ts

@@ -215,7 +215,7 @@ export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputH
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Template of panel header if "feedback" is enabled.
      */

components/lib/portal/Portal.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import ReactDOM from 'react-dom';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
-import { DomHandler } from '../utils/Utils';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
 import { PortalBase } from './PortalBase';
 
 export const Portal = React.memo((inProps) => {
@@ -29,7 +29,15 @@ export const Portal = React.memo((inProps) => {
     const element = props.element || props.children;
 
     if (element && mountedState) {
-        const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo || document.body;
+        let appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo;
+
+        if (ObjectUtils.isFunction(appendTo)) {
+            appendTo = appendTo();
+        }
+
+        if (!appendTo) {
+            appendTo = document.body;
+        }
 
         return appendTo === 'self' ? element : ReactDOM.createPortal(element, appendTo);
     }

components/lib/sidebar/sidebar.d.ts

@@ -177,7 +177,7 @@ export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and self. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}

components/lib/slidemenu/slidemenu.d.ts

@@ -143,7 +143,7 @@ export interface SlideMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Whether to automatically manage layering.
      * @defaultValue true

components/lib/splitbutton/splitbutton.d.ts

@@ -185,7 +185,7 @@ export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTM
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Content of the tooltip.
      */

components/lib/tieredmenu/tieredmenu.d.ts

@@ -142,7 +142,7 @@ export interface TieredMenuProps extends Omit<React.DetailedHTMLProps<React.HTML
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
      * @type {CSSTransitionProps}

components/lib/toast/toast.d.ts

@@ -267,7 +267,7 @@ export interface ToastProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      * DOM element instance where the component should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue self
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Callback to invoke when an active tab is collapsed by clicking on the header.
      * @param {ToastMessage} message - Clicked message

components/lib/tooltip/tooltipoptions.d.ts

@@ -34,7 +34,7 @@ export interface TooltipOptions {
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | null | undefined;
+    appendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
     /**
      * Defines which position on the target element to align the positioned tooltip.
      */

components/lib/treeselect/treeselect.d.ts

@@ -358,7 +358,7 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    appendTo?: 'self' | HTMLElement | undefined | null;
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Used to define a string that labels the component.
      */

components/lib/treetable/treetable.d.ts

@@ -733,7 +733,7 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
      * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
      * @defaultValue document.body
      */
-    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null;
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
     /**
      * Content for the left side of the paginator.
      */