From d59f7058e6bc0b06cd433c90c4576c8846f0522b Mon Sep 17 00:00:00 2001 From: melloware Date: Tue, 9 Jan 2024 15:53:50 -0500 Subject: [PATCH] Fix #5311/#5058/#5266 AppendTo fix --- components/lib/api/api.d.ts | 4 ++-- components/lib/autocomplete/autocomplete.d.ts | 2 +- components/lib/calendar/Calendar.js | 4 +++- components/lib/calendar/calendar.d.ts | 2 +- components/lib/cascadeselect/cascadeselect.d.ts | 2 +- components/lib/colorpicker/colorpicker.d.ts | 2 +- components/lib/confirmdialog/confirmdialog.d.ts | 2 +- components/lib/confirmpopup/confirmpopup.d.ts | 2 +- components/lib/contextmenu/contextmenu.d.ts | 2 +- components/lib/datatable/datatable.d.ts | 2 +- components/lib/dataview/dataview.d.ts | 2 +- components/lib/dialog/dialog.d.ts | 2 +- components/lib/dropdown/dropdown.d.ts | 2 +- components/lib/menu/menu.d.ts | 2 +- components/lib/multiselect/multiselect.d.ts | 2 +- components/lib/overlaypanel/overlaypanel.d.ts | 2 +- components/lib/paginator/paginator.d.ts | 2 +- components/lib/password/password.d.ts | 2 +- components/lib/portal/Portal.js | 12 ++++++++++-- components/lib/sidebar/sidebar.d.ts | 2 +- components/lib/slidemenu/slidemenu.d.ts | 2 +- components/lib/splitbutton/splitbutton.d.ts | 2 +- components/lib/tieredmenu/tieredmenu.d.ts | 2 +- components/lib/toast/toast.d.ts | 2 +- components/lib/tooltip/tooltipoptions.d.ts | 2 +- components/lib/treeselect/treeselect.d.ts | 2 +- components/lib/treetable/treetable.d.ts | 2 +- 27 files changed, 39 insertions(+), 29 deletions(-) diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index 4eb15b8f3c..213b4140e7 100644 --- a/components/lib/api/api.d.ts +++ b/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; diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts index 1e6502869d..da565f89f4 100755 --- a/components/lib/autocomplete/autocomplete.d.ts +++ b/components/lib/autocomplete/autocomplete.d.ts @@ -236,7 +236,7 @@ export interface AutoCompleteProps extends Omit HTMLElement); /** * When present, it specifies that the component should automatically get focus on load. * @defaultValue false diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 74d95d2ba0..178e2954e2 100644 --- a/components/lib/calendar/Calendar.js +++ b/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 = () => { diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts index 4c143426fa..4a6c7de88c 100644 --- a/components/lib/calendar/calendar.d.ts +++ b/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 diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts index 2d6dd7de7d..373ea08edb 100644 --- a/components/lib/cascadeselect/cascadeselect.d.ts +++ b/components/lib/cascadeselect/cascadeselect.d.ts @@ -256,7 +256,7 @@ export interface CascadeSelectProps extends Omit HTMLElement); /** * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. * @type {CSSTransitionProps} diff --git a/components/lib/colorpicker/colorpicker.d.ts b/components/lib/colorpicker/colorpicker.d.ts index ae1aa799dc..666639db18 100644 --- a/components/lib/colorpicker/colorpicker.d.ts +++ b/components/lib/colorpicker/colorpicker.d.ts @@ -149,7 +149,7 @@ export interface ColorPickerProps extends Omit HTMLElement); /** * When present, it specifies that the component should automatically get focus on load. * @defaultValue false diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts index 39d8344e3d..dc816566f8 100644 --- a/components/lib/confirmdialog/confirmdialog.d.ts +++ b/components/lib/confirmdialog/confirmdialog.d.ts @@ -214,7 +214,7 @@ export interface ConfirmDialogProps extends Omit HTMLElement); /** * Style class of the element. */ diff --git a/components/lib/confirmpopup/confirmpopup.d.ts b/components/lib/confirmpopup/confirmpopup.d.ts index 4ab1dcd1f8..848f8c337f 100644 --- a/components/lib/confirmpopup/confirmpopup.d.ts +++ b/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 diff --git a/components/lib/contextmenu/contextmenu.d.ts b/components/lib/contextmenu/contextmenu.d.ts index cc432dd5e0..1c93393420 100644 --- a/components/lib/contextmenu/contextmenu.d.ts +++ b/components/lib/contextmenu/contextmenu.d.ts @@ -169,7 +169,7 @@ export interface ContextMenuProps extends Omit HTMLElement); /** * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. */ diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts index 02a2c3fab1..376757678f 100644 --- a/components/lib/datatable/datatable.d.ts +++ b/components/lib/datatable/datatable.d.ts @@ -1222,7 +1222,7 @@ interface DataTableBaseProps extends Omit HTMLElement); /** * Content for the left side of the paginator. */ diff --git a/components/lib/dataview/dataview.d.ts b/components/lib/dataview/dataview.d.ts index e64fff6399..afba957f70 100755 --- a/components/lib/dataview/dataview.d.ts +++ b/components/lib/dataview/dataview.d.ts @@ -285,7 +285,7 @@ export interface DataViewProps extends Omit HTMLElement); /** * Array of integer values to display inside rows per page dropdown. */ diff --git a/components/lib/dialog/dialog.d.ts b/components/lib/dialog/dialog.d.ts index c2ec9999a4..f4995d67df 100644 --- a/components/lib/dialog/dialog.d.ts +++ b/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. */ diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index 701ef07e77..dcc710b444 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -220,7 +220,7 @@ export interface DropdownProps extends Omit HTMLElement); /** * Used to define a string that labels the component. */ diff --git a/components/lib/menu/menu.d.ts b/components/lib/menu/menu.d.ts index 39fcb7d4d0..eb6e9e008f 100644 --- a/components/lib/menu/menu.d.ts +++ b/components/lib/menu/menu.d.ts @@ -118,7 +118,7 @@ export interface MenuProps extends Omit HTMLElement); /** * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. * @type {CSSTransitionProps} diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts index 6280c61553..cf27b231fc 100644 --- a/components/lib/multiselect/multiselect.d.ts +++ b/components/lib/multiselect/multiselect.d.ts @@ -421,7 +421,7 @@ export interface MultiSelectProps extends Omit HTMLElement); /** * Establishes relationships between the component and label(s) where its value should be one or more element IDs. */ diff --git a/components/lib/overlaypanel/overlaypanel.d.ts b/components/lib/overlaypanel/overlaypanel.d.ts index cbd9330f27..527d3006f9 100644 --- a/components/lib/overlaypanel/overlaypanel.d.ts +++ b/components/lib/overlaypanel/overlaypanel.d.ts @@ -106,7 +106,7 @@ export interface OverlayPanelProps extends Omit HTMLElement); /** * Aria label of the close icon. * @defaultValue close diff --git a/components/lib/paginator/paginator.d.ts b/components/lib/paginator/paginator.d.ts index 83220e3a40..b5e458c73b 100644 --- a/components/lib/paginator/paginator.d.ts +++ b/components/lib/paginator/paginator.d.ts @@ -610,7 +610,7 @@ export interface PaginatorProps extends Omit HTMLElement); /** * Callback to invoke when page changes, the event object contains information about the new state. * @param {PaginatorPageChangeEvent} event - Custom page change event. diff --git a/components/lib/password/password.d.ts b/components/lib/password/password.d.ts index 8a221c443b..b9e43f7f34 100644 --- a/components/lib/password/password.d.ts +++ b/components/lib/password/password.d.ts @@ -215,7 +215,7 @@ export interface PasswordProps extends Omit HTMLElement); /** * Template of panel header if "feedback" is enabled. */ diff --git a/components/lib/portal/Portal.js b/components/lib/portal/Portal.js index 09bb7959a9..1959c3436c 100644 --- a/components/lib/portal/Portal.js +++ b/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); } diff --git a/components/lib/sidebar/sidebar.d.ts b/components/lib/sidebar/sidebar.d.ts index 0f91ab0211..b49d7c7bd5 100644 --- a/components/lib/sidebar/sidebar.d.ts +++ b/components/lib/sidebar/sidebar.d.ts @@ -177,7 +177,7 @@ export interface SidebarProps extends Omit HTMLElement); /** * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. * @type {CSSTransitionProps} diff --git a/components/lib/slidemenu/slidemenu.d.ts b/components/lib/slidemenu/slidemenu.d.ts index 1accdf4847..b5eba8e670 100644 --- a/components/lib/slidemenu/slidemenu.d.ts +++ b/components/lib/slidemenu/slidemenu.d.ts @@ -143,7 +143,7 @@ export interface SlideMenuProps extends Omit HTMLElement); /** * Whether to automatically manage layering. * @defaultValue true diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts index 5db863040f..de1f048fe7 100644 --- a/components/lib/splitbutton/splitbutton.d.ts +++ b/components/lib/splitbutton/splitbutton.d.ts @@ -185,7 +185,7 @@ export interface SplitButtonProps extends Omit HTMLElement); /** * Content of the tooltip. */ diff --git a/components/lib/tieredmenu/tieredmenu.d.ts b/components/lib/tieredmenu/tieredmenu.d.ts index 49b75e570a..fcb6b94a3c 100644 --- a/components/lib/tieredmenu/tieredmenu.d.ts +++ b/components/lib/tieredmenu/tieredmenu.d.ts @@ -142,7 +142,7 @@ export interface TieredMenuProps extends Omit HTMLElement); /** * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. * @type {CSSTransitionProps} diff --git a/components/lib/toast/toast.d.ts b/components/lib/toast/toast.d.ts index eaf527e061..16cb6505ce 100644 --- a/components/lib/toast/toast.d.ts +++ b/components/lib/toast/toast.d.ts @@ -267,7 +267,7 @@ export interface ToastProps extends Omit HTMLElement); /** * Callback to invoke when an active tab is collapsed by clicking on the header. * @param {ToastMessage} message - Clicked message diff --git a/components/lib/tooltip/tooltipoptions.d.ts b/components/lib/tooltip/tooltipoptions.d.ts index f614f464a3..ce7db5af53 100644 --- a/components/lib/tooltip/tooltipoptions.d.ts +++ b/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. */ diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts index fbb888d9ee..4c3b59d0c3 100644 --- a/components/lib/treeselect/treeselect.d.ts +++ b/components/lib/treeselect/treeselect.d.ts @@ -358,7 +358,7 @@ export interface TreeSelectProps extends Omit HTMLElement); /** * Used to define a string that labels the component. */ diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 99da8e44dd..0432cc94c9 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -733,7 +733,7 @@ export interface TreeTableProps extends Omit HTMLElement); /** * Content for the left side of the paginator. */