From adef94d32f2f34d9df47e260d8670565c5538dc3 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Tue, 12 Sep 2023 16:16:35 +0300
Subject: [PATCH] Refactor #4602 - Add parentMetadata to related components

---
 components/lib/autocomplete/AutoComplete.js   | 21 ++++++-
 components/lib/badge/Badge.js                 |  3 +-
 components/lib/badge/BadgeBase.js             |  1 +
 components/lib/button/Button.js               | 11 ++--
 components/lib/calendar/Calendar.js           |  8 ++-
 components/lib/componentbase/ComponentBase.js |  2 +-
 components/lib/confirmdialog/ConfirmDialog.js | 20 +++++--
 components/lib/confirmpopup/ConfirmPopup.js   | 17 ++++--
 components/lib/datatable/ColumnFilter.js      | 12 +++-
 components/lib/dataview/DataView.js           |  6 +-
 components/lib/dialog/Dialog.js               |  1 +
 components/lib/dialog/DialogBase.js           |  1 +
 components/lib/dropdown/Dropdown.js           |  1 +
 components/lib/dropdown/DropdownBase.js       |  1 +
 components/lib/fileupload/FileUpload.js       | 60 +++++++++++++++----
 components/lib/inplace/Inplace.js             | 10 +++-
 components/lib/inputmask/InputMask.js         |  4 ++
 components/lib/inputnumber/InputNumber.js     |  7 ++-
 components/lib/inputnumber/InputNumberBase.js |  1 +
 components/lib/inputtext/InputText.js         |  2 +
 components/lib/inputtext/InputTextBase.js     |  1 +
 components/lib/inputtextarea/InputTextarea.js |  3 +-
 .../lib/inputtextarea/InputTextareaBase.js    |  1 +
 components/lib/listbox/ListBoxHeader.js       |  1 +
 components/lib/mention/Mention.js             | 13 ++--
 components/lib/messages/Messages.js           |  1 +
 components/lib/messages/MessagesBase.js       |  1 +
 components/lib/multiselect/MultiSelect.js     | 11 ++--
 .../lib/multiselect/MultiSelectHeader.js      | 14 ++++-
 .../lib/multiselect/MultiSelectPanel.js       |  1 +
 components/lib/orderlist/OrderList.js         |  7 ++-
 components/lib/orderlist/OrderListControls.js | 20 +++++--
 .../OrganizationChartBase.js                  |  2 +-
 .../OrganizationChartNode.js                  |  4 +-
 components/lib/paginator/JumpToPageInput.js   |  4 +-
 components/lib/paginator/Paginator.js         | 15 +++--
 components/lib/paginator/PaginatorBase.js     |  5 +-
 .../lib/paginator/RowsPerPageDropdown.js      | 16 ++++-
 components/lib/password/Password.js           | 11 ++--
 components/lib/picklist/PickList.js           |  8 ++-
 components/lib/picklist/PickListControls.js   |  8 +--
 .../lib/picklist/PickListTransferControls.js  |  8 +--
 components/lib/progressbar/ProgressBar.js     |  3 +-
 components/lib/progressbar/ProgressBarBase.js |  1 +
 components/lib/speeddial/SpeedDial.js         | 10 ++--
 components/lib/splitbutton/SplitButton.js     |  8 +--
 components/lib/treetable/TreeTable.js         |  1 +
 components/lib/treetable/TreeTableHeader.js   |  1 +
 48 files changed, 267 insertions(+), 101 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index 445f5a97c5..f7004b369a 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -21,7 +21,8 @@ export const AutoComplete = React.memo(
         const [searchingState, setSearchingState] = React.useState(false);
         const [focusedState, setFocusedState] = React.useState(false);
         const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
-        const { ptm, cx, sx, isUnstyled } = AutoCompleteBase.setMetaData({
+
+        const metaData = {
             props,
             state: {
                 id: idState,
@@ -29,7 +30,9 @@ export const AutoComplete = React.memo(
                 focused: focusedState,
                 overlayVisible: overlayVisibleState
             }
-        });
+        };
+
+        const { ptm, cx, sx, isUnstyled } = AutoCompleteBase.setMetaData(metaData);
 
         useHandleStyle(AutoCompleteBase.css.styles, isUnstyled, { name: 'autocomplete' });
         const elementRef = React.useRef(null);
@@ -551,6 +554,7 @@ export const AutoComplete = React.memo(
                     onDoubleClick={props.onDblClick}
                     pt={ptm('input')}
                     {...ariaProps}
+                    __parentMetadata={{ parent: metaData }}
                 />
             );
         };
@@ -667,7 +671,18 @@ export const AutoComplete = React.memo(
             if (props.dropdown) {
                 const ariaLabel = props.dropdownAriaLabel || props.placeholder || localeOption('choose');
 
-                return <Button type="button" icon={props.dropdownIcon || <ChevronDownIcon />} className={cx('dropdownButton')} disabled={props.disabled} onClick={onDropdownClick} aria-label={ariaLabel} pt={ptm('dropdownButton')} />;
+                return (
+                    <Button
+                        type="button"
+                        icon={props.dropdownIcon || <ChevronDownIcon />}
+                        className={cx('dropdownButton')}
+                        disabled={props.disabled}
+                        onClick={onDropdownClick}
+                        aria-label={ariaLabel}
+                        pt={ptm('dropdownButton')}
+                        __parentMetadata={{ parent: metaData }}
+                    />
+                );
             }
 
             return null;
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
index ae0850373e..27cfa02f50 100644
--- a/components/lib/badge/Badge.js
+++ b/components/lib/badge/Badge.js
@@ -10,7 +10,8 @@ export const Badge = React.memo(
         const props = BadgeBase.getProps(inProps, context);
 
         const { ptm, cx, isUnstyled } = BadgeBase.setMetaData({
-            props
+            props,
+            ...props.__parentMetadata
         });
 
         useHandleStyle(BadgeBase.css.styles, isUnstyled, { name: 'badge' });
diff --git a/components/lib/badge/BadgeBase.js b/components/lib/badge/BadgeBase.js
index 709346c548..6060102a82 100644
--- a/components/lib/badge/BadgeBase.js
+++ b/components/lib/badge/BadgeBase.js
@@ -50,6 +50,7 @@ const styles = `
 export const BadgeBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Badge',
+        __parentMetadata: null,
         value: null,
         severity: null,
         size: null,
diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
index 6992bab287..b49aea8d48 100644
--- a/components/lib/button/Button.js
+++ b/components/lib/button/Button.js
@@ -14,13 +14,15 @@ export const Button = React.memo(
         const props = ButtonBase.getProps(inProps, context);
         const disabled = props.disabled || props.loading;
 
-        const { ptm, cx, isUnstyled } = ButtonBase.setMetaData({
+        const metaData = {
             props,
-            ...inProps.__parentMetadata,
+            ...props.__parentMetadata,
             context: {
                 disabled
             }
-        });
+        };
+
+        const { ptm, cx, isUnstyled } = ButtonBase.setMetaData(metaData);
 
         useHandleStyle(ButtonBase.css.styles, isUnstyled, { name: 'button', styled: true });
 
@@ -83,7 +85,8 @@ export const Button = React.memo(
                     {
                         className: classNames(props.badgeClassName),
                         value: props.badge,
-                        unstyled: props.unstyled
+                        unstyled: props.unstyled,
+                        __parentMetadata: { parent: metaData }
                     },
                     ptm('badge')
                 );
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index dd4c347206..8644f62475 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -22,14 +22,15 @@ export const Calendar = React.memo(
         const [focusedState, setFocusedState] = React.useState(false);
         const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
         const [viewDateState, setViewDateState] = React.useState(null);
-        const { ptm, cx, isUnstyled } = CalendarBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 focused: focusedState,
                 overlayVisible: overlayVisibleState,
                 viewDate: viewDateState
             }
-        });
+        };
+        const { ptm, cx, isUnstyled } = CalendarBase.setMetaData(metaData);
 
         useHandleStyle(CalendarBase.css.styles, isUnstyled, { name: 'calendar' });
         const elementRef = React.useRef(null);
@@ -3539,6 +3540,7 @@ export const Calendar = React.memo(
                         tooltip={props.tooltip}
                         tooltipOptions={props.tooltipOptions}
                         pt={ptm('input')}
+                        __parentMetadata={{ parent: metaData }}
                     />
                 );
             }
@@ -3548,7 +3550,7 @@ export const Calendar = React.memo(
 
         const createButton = () => {
             if (props.showIcon) {
-                return <Button type="button" icon={props.icon || <CalendarIcon />} onClick={onButtonClick} tabIndex="-1" disabled={props.disabled} className={cx('dropdownButton')} pt={ptm('dropdownButton')} />;
+                return <Button type="button" icon={props.icon || <CalendarIcon />} onClick={onButtonClick} tabIndex="-1" disabled={props.disabled} className={cx('dropdownButton')} pt={ptm('dropdownButton')} __parentMetadata={{ parent: metaData }} />;
             }
 
             return null;
diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
index 3a3d256d3e..a950332c25 100644
--- a/components/lib/componentbase/ComponentBase.js
+++ b/components/lib/componentbase/ComponentBase.js
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import PrimeReact from '../api/Api';
 import { useStyle } from '../hooks/Hooks';
-import { ObjectUtils } from '../utils/Utils';
 import { Tailwind } from '../passthrough/tailwind';
 import { mergeProps } from '../utils/MergeProps';
+import { ObjectUtils } from '../utils/Utils';
 
 const buttonStyles = `
 .p-button {
diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
index e458688d24..98db4a645a 100644
--- a/components/lib/confirmdialog/ConfirmDialog.js
+++ b/components/lib/confirmdialog/ConfirmDialog.js
@@ -40,12 +40,13 @@ export const ConfirmDialog = React.memo(
         const acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
         const rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
 
-        const { ptm, cx } = ConfirmDialogBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 visible: visibleState
             }
-        });
+        };
+        const { ptm, cx } = ConfirmDialogBase.setMetaData(metaData);
 
         const accept = () => {
             if (!isCallbackExecuting.current) {
@@ -140,7 +141,10 @@ export const ConfirmDialog = React.memo(
                 className: classNames(getPropValue('rejectClassName'), cx('rejectButton', { getPropValue })),
                 onClick: reject,
                 pt: ptm('rejectButton'),
-                unstyled: props.unstyled
+                unstyled: props.unstyled,
+                __parentMetadata: {
+                    parent: metaData
+                }
             };
 
             const acceptButtonProps = mergeProps(
@@ -149,7 +153,10 @@ export const ConfirmDialog = React.memo(
                     icon: getPropValue('acceptIcon'),
                     className: classNames(getPropValue('acceptClassName'), cx('acceptButton')),
                     onClick: accept,
-                    unstyled: props.unstyled
+                    unstyled: props.unstyled,
+                    __parentMetadata: {
+                        parent: metaData
+                    }
                 },
                 ptm('acceptButton')
             );
@@ -209,7 +216,10 @@ export const ConfirmDialog = React.memo(
                     breakpoints: getPropValue('breakpoints'),
                     pt: currentProps.pt,
                     unstyled: props.unstyled,
-                    appendTo: getPropValue('appendTo')
+                    appendTo: getPropValue('appendTo'),
+                    __parentMetadata: {
+                        parent: metaData
+                    }
                 },
                 ConfirmDialogBase.getOtherProps(currentProps)
             );
diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
index 7c27d57de4..0cfae7df84 100644
--- a/components/lib/confirmpopup/ConfirmPopup.js
+++ b/components/lib/confirmpopup/ConfirmPopup.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
 import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { ConfirmPopupBase } from './ConfirmPopupBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const confirmPopup = (props = {}) => {
     props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
@@ -31,13 +31,14 @@ export const ConfirmPopup = React.memo(
 
         const [visibleState, setVisibleState] = React.useState(props.visible);
         const [reshowState, setReshowState] = React.useState(false);
-        const { ptm, cx, isUnstyled } = ConfirmPopupBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 visible: visibleState,
                 reshow: reshowState
             }
-        });
+        };
+        const { ptm, cx, isUnstyled } = ConfirmPopupBase.setMetaData(metaData);
 
         useHandleStyle(ConfirmPopupBase.css.styles, isUnstyled, { name: 'confirmpopup' });
 
@@ -279,7 +280,10 @@ export const ConfirmPopup = React.memo(
                 className: cx('rejectButton', { getPropValue }),
                 onClick: reject,
                 pt: ptm('rejectButton'),
-                unstyled: props.unstyled
+                unstyled: props.unstyled,
+                __parentMetadata: {
+                    parent: metaData
+                }
             });
 
             const acceptButtonProps = mergeProps({
@@ -289,7 +293,10 @@ export const ConfirmPopup = React.memo(
                 className: cx('acceptButton', { getPropValue }),
                 onClick: accept,
                 pt: ptm('acceptButton'),
-                unstyled: props.unstyled
+                unstyled: props.unstyled,
+                __parentMetadata: {
+                    parent: metaData
+                }
             });
 
             const content = (
diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
index 00dcff3c56..66cb653e43 100644
--- a/components/lib/datatable/ColumnFilter.js
+++ b/components/lib/datatable/ColumnFilter.js
@@ -493,6 +493,7 @@ export const ColumnFilter = React.memo((props) => {
                 maxLength={getColumnProp('filterMaxLength')}
                 aria-label={getColumnProp('filterPlaceholder')}
                 unstyled={props.unstyled}
+                __parentMetadata={{ parent: props.metaData }}
             />
         );
     };
@@ -669,7 +670,15 @@ export const ColumnFilter = React.memo((props) => {
 
             return (
                 <div {...filterOperatorProps}>
-                    <Dropdown options={options} value={value} onChange={onOperatorChange} className="p-column-filter-operator-dropdown" pt={getColumnPTOptions('filterOperatorDropdown')} unstyled={props.unstyled} />
+                    <Dropdown
+                        options={options}
+                        value={value}
+                        onChange={onOperatorChange}
+                        className="p-column-filter-operator-dropdown"
+                        pt={getColumnPTOptions('filterOperatorDropdown')}
+                        unstyled={props.unstyled}
+                        __parentMetadata={{ parent: props.metaData }}
+                    />
                 </div>
             );
         }
@@ -709,6 +718,7 @@ export const ColumnFilter = React.memo((props) => {
                     label={removeRuleLabel}
                     pt={getColumnPTOptions('filterRemoveButton')}
                     unstyled={props.unstyled}
+                    __parentMetadata={{ parent: props.metaData }}
                 />
             );
         }
diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
index ea64ff74dc..35f1eaa67e 100644
--- a/components/lib/dataview/DataView.js
+++ b/components/lib/dataview/DataView.js
@@ -80,13 +80,14 @@ export const DataView = React.memo(
         const props = DataViewBase.getProps(inProps, context);
         const [firstState, setFirstState] = React.useState(props.first);
         const [rowsState, setRowsState] = React.useState(props.rows);
-        const { ptm, cx, isUnstyled } = DataViewBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 first: firstState,
                 rows: rowsState
             }
-        });
+        };
+        const { ptm, cx, isUnstyled } = DataViewBase.setMetaData(metaData);
 
         useHandleStyle(DataViewBase.css.styles, isUnstyled, { name: 'dataview' });
 
@@ -123,6 +124,7 @@ export const DataView = React.memo(
                     dropdownAppendTo={props.paginatorDropdownAppendTo}
                     ptm={ptm('paginator')}
                     unstyled={props.unstyled}
+                    __parentMetadata={{ parent: metaData }}
                 />
             );
         };
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index f2e8faeffb..b39bb3dc9d 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -39,6 +39,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
 
     const { ptm, cx, sx, isUnstyled } = DialogBase.setMetaData({
         props,
+        ...props.__parentMetadata,
         state: {
             id: idState,
             maximized: maximized,
diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js
index 33bae3b4f4..3ee36ae960 100644
--- a/components/lib/dialog/DialogBase.js
+++ b/components/lib/dialog/DialogBase.js
@@ -244,6 +244,7 @@ const inlineStyles = {
 export const DialogBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Dialog',
+        __parentMetadata: null,
         appendTo: null,
         ariaCloseIconLabel: null,
         baseZIndex: 0,
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 3c225863aa..33ecd28183 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -30,6 +30,7 @@ export const Dropdown = React.memo(
         const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo;
         const { ptm, cx, sx, isUnstyled } = DropdownBase.setMetaData({
             props,
+            ...props.__parentMetadata,
             state: {
                 filter: filterState,
                 focused: focusedState,
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 2bb561227a..650e7fa719 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -148,6 +148,7 @@ const inlineStyles = {
 export const DropdownBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Dropdown',
+        __parentMetadata: null,
         appendTo: null,
         ariaLabel: null,
         ariaLabelledBy: null,
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 9463b6d1e4..b450d3a352 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { localeOption } from '../api/Api';
-import { PrimeReactContext } from '../api/Api';
+import { localeOption, PrimeReactContext } from '../api/Api';
 import { Badge } from '../badge/Badge';
 import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { PlusIcon } from '../icons/plus';
 import { TimesIcon } from '../icons/times';
 import { UploadIcon } from '../icons/upload';
@@ -11,7 +11,6 @@ import { ProgressBar } from '../progressbar/ProgressBar';
 import { Ripple } from '../ripple/Ripple';
 import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { FileUploadBase } from './FileUploadBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const FileUpload = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -22,7 +21,8 @@ export const FileUpload = React.memo(
         const [progressState, setProgressState] = React.useState(0);
         const [focusedState, setFocusedState] = React.useState(false);
         const [uploadingState, setUploadingState] = React.useState(false);
-        const { ptm, cx, isUnstyled } = FileUploadBase.setMetaData({
+
+        const metaData = {
             props,
             state: {
                 progress: progressState,
@@ -31,7 +31,9 @@ export const FileUpload = React.memo(
                 files: filesState,
                 focused: focusedState
             }
-        });
+        };
+
+        const { ptm, cx, isUnstyled } = FileUploadBase.setMetaData(metaData);
 
         useHandleStyle(FileUploadBase.css.styles, isUnstyled, { name: 'fileupload' });
         const fileInputRef = React.useRef(null);
@@ -465,12 +467,22 @@ export const FileUpload = React.memo(
                 <div {...detailsProps}>
                     <div {...fileNameProps}> {file.name}</div>
                     <span {...fileSizeProps}>{formatSize(file.size)}</span>
-                    <Badge className="p-fileupload-file-badge" value={badgeOptions.value} severity={badgeOptions.severity} pt={ptm('badge')} />
+                    <Badge className="p-fileupload-file-badge" value={badgeOptions.value} severity={badgeOptions.severity} pt={ptm('badge')} __parentMetadata={{ parent: metaData }} />
                 </div>
             );
             const removeButton = (
                 <div {...actionsProps}>
-                    <Button type="button" icon={props.removeIcon || <TimesIcon />} text rounded severity="danger" onClick={(e) => onRemoveClick(e, badgeOptions, index)} disabled={disabled} pt={ptm('removeButton')} />
+                    <Button
+                        type="button"
+                        icon={props.removeIcon || <TimesIcon />}
+                        text
+                        rounded
+                        severity="danger"
+                        onClick={(e) => onRemoveClick(e, badgeOptions, index)}
+                        disabled={disabled}
+                        pt={ptm('removeButton')}
+                        __parentMetadata={{ parent: metaData }}
+                    />
                 </div>
             );
             let content = (
@@ -537,7 +549,7 @@ export const FileUpload = React.memo(
                 return ObjectUtils.getJSXElement(props.progressBarTemplate, props);
             }
 
-            return <ProgressBar value={progressState} showValue={false} pt={ptm('progressbar')} />;
+            return <ProgressBar value={progressState} showValue={false} pt={ptm('progressbar')} __parentMetadata={{ parent: metaData }} />;
         };
 
         const createAdvanced = () => {
@@ -565,8 +577,32 @@ export const FileUpload = React.memo(
                 );
                 const cancelIcon = IconUtils.getJSXIcon(cancelOptions.icon || <TimesIcon {...cancelIconProps} />, { ...cancelIconProps }, { props });
 
-                uploadButton = <Button type="button" label={uploadLabel} icon={uploadIcon} onClick={upload} disabled={uploadDisabled} style={uploadOptions.style} className={uploadOptions.className} pt={ptm('uploadButton')} />;
-                cancelButton = <Button type="button" label={cancelLabel} icon={cancelIcon} onClick={clear} disabled={cancelDisabled} style={cancelOptions.style} className={cancelOptions.className} pt={ptm('cancelButton')} />;
+                uploadButton = (
+                    <Button
+                        type="button"
+                        label={uploadLabel}
+                        icon={uploadIcon}
+                        onClick={upload}
+                        disabled={uploadDisabled}
+                        style={uploadOptions.style}
+                        className={uploadOptions.className}
+                        pt={ptm('uploadButton')}
+                        __parentMetadata={{ parent: metaData }}
+                    />
+                );
+                cancelButton = (
+                    <Button
+                        type="button"
+                        label={cancelLabel}
+                        icon={cancelIcon}
+                        onClick={clear}
+                        disabled={cancelDisabled}
+                        style={cancelOptions.style}
+                        className={cancelOptions.className}
+                        pt={ptm('cancelButton')}
+                        __parentMetadata={{ parent: metaData }}
+                    />
+                );
             }
 
             if (hasFiles) {
@@ -635,7 +671,7 @@ export const FileUpload = React.memo(
                     {header}
                     <div {...contentProps}>
                         {progressBar}
-                        <Messages ref={messagesRef} />
+                        <Messages ref={messagesRef} __parentMetadata={{ parent: metaData }} />
                         {hasFiles ? filesList : null}
                         {hasUploadedFiles ? uplaodedFilesList : null}
                         {emptyContent}
@@ -699,7 +735,7 @@ export const FileUpload = React.memo(
 
             return (
                 <div {...rootProps}>
-                    <Messages ref={messagesRef} pt={ptm('message')} />
+                    <Messages ref={messagesRef} pt={ptm('message')} __parentMetadata={{ parent: metaData }} />
                     <span {...basicButtonProps}>
                         {chooseIcon}
                         {label}
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index f68ce4ec94..0fe743bae9 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -16,12 +16,13 @@ export const Inplace = React.forwardRef((inProps, ref) => {
     const [activeState, setActiveState] = React.useState(props.active);
     const elementRef = React.useRef(null);
     const active = props.onToggle ? props.active : activeState;
-    const { ptm, cx, isUnstyled } = InplaceBase.setMetaData({
+    const metaData = {
         props,
         state: {
             active: activeState
         }
-    });
+    };
+    const { ptm, cx, isUnstyled } = InplaceBase.setMetaData(metaData);
 
     useHandleStyle(InplaceBase.css.styles, isUnstyled, { name: 'inplace' });
 
@@ -89,7 +90,10 @@ export const Inplace = React.forwardRef((inProps, ref) => {
                 type: 'button',
                 onClick: close,
                 'aria-label': ariaLabel,
-                pt: ptm('closeButton')
+                pt: ptm('closeButton'),
+                __parentMetadata: {
+                    parent: metaData
+                }
             });
 
             return <Button {...closeButtonProps}></Button>;
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
index cade99df89..04568f0086 100644
--- a/components/lib/inputmask/InputMask.js
+++ b/components/lib/inputmask/InputMask.js
@@ -23,6 +23,9 @@ export const InputMask = React.memo(
         const defaultBuffer = React.useRef(null);
         const caretTimeoutId = React.useRef(null);
         const androidChrome = React.useRef(false);
+        const metaData = {
+            props
+        };
 
         const caret = (first, last) => {
             let range, begin, end;
@@ -610,6 +613,7 @@ export const InputMask = React.memo(
                 tooltipOptions={props.tooltipOptions}
                 pt={props.pt}
                 unstyled={props.unstyled}
+                __parentMetadata={{ parent: metaData }}
             />
         );
     })
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index f4af542c93..672c1b927e 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -15,12 +15,14 @@ export const InputNumber = React.memo(
         const context = React.useContext(PrimeReactContext);
         const props = InputNumberBase.getProps(inProps, context);
         const [focusedState, setFocusedState] = React.useState(false);
-        const { ptm, cx, isUnstyled } = InputNumberBase.setMetaData({
+        const metaData = {
             props,
+            ...props.__parentMetadata,
             state: {
                 focused: focusedState
             }
-        });
+        };
+        const { ptm, cx, isUnstyled } = InputNumberBase.setMetaData(metaData);
 
         useHandleStyle(InputNumberBase.css.styles, isUnstyled, { name: 'inputnumber' });
         const elementRef = React.useRef(null);
@@ -1057,6 +1059,7 @@ export const InputNumber = React.memo(
                     {...ariaProps}
                     {...dataProps}
                     pt={ptm('input')}
+                    __parentMetadata={{ parent: metaData }}
                 />
             );
         };
diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js
index c32e043a62..95d74996f1 100644
--- a/components/lib/inputnumber/InputNumberBase.js
+++ b/components/lib/inputnumber/InputNumberBase.js
@@ -129,6 +129,7 @@ const styles = `
 export const InputNumberBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'InputNumber',
+        __parentMetadata: null,
         allowEmpty: true,
         ariaLabelledBy: null,
         autoFocus: false,
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index c80df46eb6..9d3f79ab59 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -10,8 +10,10 @@ export const InputText = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = InputTextBase.getProps(inProps, context);
+
         const { ptm, cx, isUnstyled } = InputTextBase.setMetaData({
             props,
+            ...props.__parentMetadata,
             context: {
                 disabled: props.disabled
             }
diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
index 05fc2d6be5..258079b8db 100644
--- a/components/lib/inputtext/InputTextBase.js
+++ b/components/lib/inputtext/InputTextBase.js
@@ -16,6 +16,7 @@ const classes = {
 export const InputTextBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'InputText',
+        __parentMetadata: null,
         keyfilter: null,
         validateOnly: false,
         tooltip: null,
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index 59fe55976d..ae45442177 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
 import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils';
 import { InputTextareaBase } from './InputTextareaBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const InputTextarea = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -16,6 +16,7 @@ export const InputTextarea = React.memo(
 
         const { ptm, cx, isUnstyled } = InputTextareaBase.setMetaData({
             props,
+            ...props.__parentMetadata,
             context: {
                 disabled: props.disabled
             }
diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js
index 30d17aa3df..6fccf868b9 100644
--- a/components/lib/inputtextarea/InputTextareaBase.js
+++ b/components/lib/inputtextarea/InputTextareaBase.js
@@ -28,6 +28,7 @@ const styles = `
 export const InputTextareaBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'InputTextarea',
+        __parentMetadata: null,
         autoResize: false,
         keyfilter: null,
         onBlur: null,
diff --git a/components/lib/listbox/ListBoxHeader.js b/components/lib/listbox/ListBoxHeader.js
index cfe737c5f5..793f8031a1 100644
--- a/components/lib/listbox/ListBoxHeader.js
+++ b/components/lib/listbox/ListBoxHeader.js
@@ -59,6 +59,7 @@ export const ListBoxHeader = React.memo((props) => {
                     {...props.filterInputProps}
                     pt={ptm('filterInput')}
                     unstyled={props.unstyled}
+                    __parentMetadata={{ parent: props.metaData }}
                 />
                 {filterIcon}
             </div>
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
index 45d38e9cc8..6648996d85 100644
--- a/components/lib/mention/Mention.js
+++ b/components/lib/mention/Mention.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { InputTextarea } from '../inputtextarea/InputTextarea';
@@ -8,7 +9,6 @@ import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
 import { DomHandler, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
 import { MentionBase } from './MentionBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Mention = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -24,8 +24,7 @@ export const Mention = React.memo(
         const inputRef = React.useRef(props.inputRef);
         const listRef = React.useRef(null);
         const timeout = React.useRef(null);
-
-        const { ptm, cx, sx, isUnstyled } = MentionBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 overlayVisible: overlayVisibleState,
@@ -33,7 +32,8 @@ export const Mention = React.memo(
                 searching: searchingState,
                 trigger: triggerState
             }
-        });
+        };
+        const { ptm, cx, sx, isUnstyled } = MentionBase.setMetaData(metaData);
 
         useHandleStyle(MentionBase.css.styles, isUnstyled, { name: 'mention' });
 
@@ -463,7 +463,10 @@ export const Mention = React.memo(
                 onKeyDown: onKeyDown,
                 onInput: onInput,
                 onKeyUp: onKeyUp,
-                onChange: onChange
+                onChange: onChange,
+                __parentMetadata: {
+                    parent: metaData
+                }
             },
             ptm('input')
         );
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
index e5bad88586..0a270f6914 100644
--- a/components/lib/messages/Messages.js
+++ b/components/lib/messages/Messages.js
@@ -17,6 +17,7 @@ export const Messages = React.memo(
         const elementRef = React.useRef(null);
         const metaData = {
             props,
+            ...props.__parentMetadata,
             state: {
                 messages: messagesState
             }
diff --git a/components/lib/messages/MessagesBase.js b/components/lib/messages/MessagesBase.js
index c7dcbb651b..5ffb3c08b2 100644
--- a/components/lib/messages/MessagesBase.js
+++ b/components/lib/messages/MessagesBase.js
@@ -64,6 +64,7 @@ const classes = {
 export const MessagesBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Messages',
+        __parentMetadata: null,
         id: null,
         className: null,
         style: null,
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index d5d53b3583..893f4d76c7 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { TimesIcon } from '../icons/times';
 import { TimesCircleIcon } from '../icons/timescircle';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
 import { MultiSelectBase } from './MultiSelectBase';
 import { MultiSelectPanel } from './MultiSelectPanel';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const MultiSelect = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -26,15 +26,15 @@ export const MultiSelect = React.memo(
         const hasFilter = filterState && filterState.trim().length > 0;
         const empty = ObjectUtils.isEmpty(props.value);
         const equalityKey = props.optionValue ? null : props.dataKey;
-
-        const { ptm, cx, sx, isUnstyled } = MultiSelectBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 filterState: filterState,
                 focused: focusedState,
                 overlayVisible: overlayVisibleState
             }
-        });
+        };
+        const { ptm, cx, sx, isUnstyled } = MultiSelectBase.setMetaData(metaData);
 
         useHandleStyle(MultiSelectBase.css.styles, isUnstyled, { name: 'multiselect' });
         const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
@@ -770,6 +770,7 @@ export const MultiSelect = React.memo(
                         cx={cx}
                         sx={sx}
                         isUnstyled={isUnstyled}
+                        metaData={metaData}
                     />
                 </div>
                 {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} pt={ptm('tooltip')} />}
diff --git a/components/lib/multiselect/MultiSelectHeader.js b/components/lib/multiselect/MultiSelectHeader.js
index 453e6ef44a..2331c666c7 100644
--- a/components/lib/multiselect/MultiSelectHeader.js
+++ b/components/lib/multiselect/MultiSelectHeader.js
@@ -6,7 +6,7 @@ import { SearchIcon } from '../icons/search';
 import { TimesIcon } from '../icons/times';
 import { InputText } from '../inputtext/InputText';
 import { Ripple } from '../ripple/Ripple';
-import { IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils';
+import { IconUtils, ObjectUtils, UniqueComponentId, mergeProps } from '../utils/Utils';
 
 export const MultiSelectHeader = React.memo((props) => {
     const { ptm, cx, isUnstyled } = props;
@@ -56,7 +56,17 @@ export const MultiSelectHeader = React.memo((props) => {
 
             let content = (
                 <div {...filterContainerProps}>
-                    <InputText ref={props.filterRef} type="text" role="textbox" value={props.filterValue} onChange={onFilter} className="p-multiselect-filter" placeholder={props.filterPlaceholder} pt={ptm('filterInput')} />
+                    <InputText
+                        ref={props.filterRef}
+                        type="text"
+                        role="textbox"
+                        value={props.filterValue}
+                        onChange={onFilter}
+                        className="p-multiselect-filter"
+                        placeholder={props.filterPlaceholder}
+                        pt={ptm('filterInput')}
+                        __parentMetadata={{ parent: props.metaData }}
+                    />
                     {filterIcon}
                 </div>
             );
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index 57ef77f475..6f9523d52f 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -69,6 +69,7 @@ export const MultiSelectPanel = React.memo(
                     ptm={ptm}
                     cx={cx}
                     isUnstyled={isUnstyled}
+                    metaData={props.metaData}
                 />
             );
         };
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 345427401e..cf3e53c219 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -19,15 +19,15 @@ export const OrderList = React.memo(
         const elementRef = React.useRef(null);
         const styleElementRef = React.useRef(null);
         const reorderDirection = React.useRef(null);
-
-        const { ptm, cx, isUnstyled } = OrderListBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 selection: selectionState,
                 filterValue: filterValueState,
                 attributeSelector: attributeSelectorState
             }
-        });
+        };
+        const { ptm, cx, isUnstyled } = OrderListBase.setMetaData(metaData);
 
         useHandleStyle(OrderListBase.css.styles, isUnstyled, { name: 'orderlist' });
 
@@ -257,6 +257,7 @@ export const OrderList = React.memo(
                     ptm={ptm}
                     cx={cx}
                     unstyled={props.unstyled}
+                    metaData={metaData}
                 />
                 <OrderListSubList
                     value={visibleList}
diff --git a/components/lib/orderlist/OrderListControls.js b/components/lib/orderlist/OrderListControls.js
index d84976fcb5..6b6539bd85 100644
--- a/components/lib/orderlist/OrderListControls.js
+++ b/components/lib/orderlist/OrderListControls.js
@@ -139,7 +139,10 @@ export const OrderListControls = React.memo((props) => {
             unstyled: unstyled,
             icon: moveUpIcon,
             onClick: moveUp,
-            'aria-label': ariaLabel('moveUp')
+            'aria-label': ariaLabel('moveUp'),
+            __parentMetadata: {
+                parent: props.metaData
+            }
         },
         ptm('moveUpButton')
     );
@@ -150,7 +153,10 @@ export const OrderListControls = React.memo((props) => {
             unstyled: unstyled,
             icon: moveTopIcon,
             onClick: moveTop,
-            'aria-label': ariaLabel('moveTop')
+            'aria-label': ariaLabel('moveTop'),
+            __parentMetadata: {
+                parent: props.metaData
+            }
         },
         ptm('moveTopButton')
     );
@@ -161,7 +167,10 @@ export const OrderListControls = React.memo((props) => {
             unstyled: unstyled,
             icon: moveDownIcon,
             onClick: moveDown,
-            'aria-label': ariaLabel('moveDown')
+            'aria-label': ariaLabel('moveDown'),
+            __parentMetadata: {
+                parent: props.metaData
+            }
         },
         ptm('moveDownButton')
     );
@@ -172,7 +181,10 @@ export const OrderListControls = React.memo((props) => {
             unstyled: unstyled,
             icon: moveBottomIcon,
             onClick: moveBottom,
-            'aria-label': ariaLabel('moveBottom')
+            'aria-label': ariaLabel('moveBottom'),
+            __parentMetadata: {
+                parent: props.metaData
+            }
         },
         ptm('moveBottomButton')
     );
diff --git a/components/lib/organizationchart/OrganizationChartBase.js b/components/lib/organizationchart/OrganizationChartBase.js
index b44ef9b6ff..81098c79b2 100644
--- a/components/lib/organizationchart/OrganizationChartBase.js
+++ b/components/lib/organizationchart/OrganizationChartBase.js
@@ -71,7 +71,7 @@ const classes = {
     nodes: 'p-organizationchart-nodes',
     lines: 'p-organizationchart-lines',
     lineLeft: ({ index }) => classNames('p-organizationchart-line-left', { 'p-organizationchart-line-top': index !== 0 }),
-    lineRight: ({ index }) => classNames('p-organizationchart-line-right', { 'p-organizationchart-line-top': index !== nodeChildLength - 1 }),
+    lineRight: ({ index, nodeChildLength }) => classNames('p-organizationchart-line-right', { 'p-organizationchart-line-top': index !== nodeChildLength - 1 }),
     lineDown: 'p-organizationchart-line-down',
     nodeTogglerIcon: 'p-node-toggler-icon',
     nodeToggler: 'p-node-toggler'
diff --git a/components/lib/organizationchart/OrganizationChartNode.js b/components/lib/organizationchart/OrganizationChartNode.js
index 67f9c853a1..5fb0b77093 100644
--- a/components/lib/organizationchart/OrganizationChartNode.js
+++ b/components/lib/organizationchart/OrganizationChartNode.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { ChevronUpIcon } from '../icons/chevronup';
-import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
 
 export const OrganizationChartNode = React.memo((props) => {
     const node = props.node;
@@ -119,7 +119,7 @@ export const OrganizationChartNode = React.memo((props) => {
                         );
                         const lineRightProps = mergeProps(
                             {
-                                className: cx('lineRight', { index })
+                                className: cx('lineRight', { index, nodeChildLength })
                             },
                             getNodePTOptions(index !== nodeChildLength - 1, 'lineRight')
                         );
diff --git a/components/lib/paginator/JumpToPageInput.js b/components/lib/paginator/JumpToPageInput.js
index 87dd2a41e0..2253987139 100644
--- a/components/lib/paginator/JumpToPageInput.js
+++ b/components/lib/paginator/JumpToPageInput.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
 import { InputNumber } from '../inputnumber/InputNumber';
 import { ObjectUtils } from '../utils/Utils';
 import { JumpToPageInputBase } from './PaginatorBase';
-import { PrimeReactContext } from '../api/Api';
 
 export const JumpToPageInput = React.memo((inProps) => {
     const context = React.useContext(PrimeReactContext);
@@ -15,7 +15,7 @@ export const JumpToPageInput = React.memo((inProps) => {
     };
 
     const value = props.pageCount > 0 ? props.page + 1 : 0;
-    const element = <InputNumber value={value} onChange={onChange} className="p-paginator-page-input" disabled={props.disabled} pt={props.ptm('JTPInput')} />;
+    const element = <InputNumber value={value} onChange={onChange} className="p-paginator-page-input" disabled={props.disabled} pt={props.ptm('JTPInput')} unstyled={props.unstyled} __parentMetadata={{ parent: props.metaData }} />;
 
     if (props.template) {
         const defaultOptions = {
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
index 4e78a2bafe..0d421c000e 100644
--- a/components/lib/paginator/Paginator.js
+++ b/components/lib/paginator/Paginator.js
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useUpdateEffect } from '../hooks/Hooks';
 import { classNames, mergeProps, ObjectUtils } from '../utils/Utils';
 import { CurrentPageReport } from './CurrentPageReport';
@@ -10,16 +12,16 @@ import { PageLinks } from './PageLinks';
 import { PaginatorBase } from './PaginatorBase';
 import { PrevPageLink } from './PrevPageLink';
 import { RowsPerPageDropdown } from './RowsPerPageDropdown';
-import { PrimeReactContext } from '../api/Api';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Paginator = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = PaginatorBase.getProps(inProps, context);
-        const { ptm, cx, isUnstyled } = PaginatorBase.setMetaData({
-            props
-        });
+        const metaData = {
+            props,
+            ...props.__parentMetadata
+        };
+        const { ptm, cx, isUnstyled } = PaginatorBase.setMetaData(metaData);
 
         useHandleStyle(PaginatorBase.css.styles, isUnstyled, { name: 'paginator' });
         const elementRef = React.useRef(null);
@@ -157,6 +159,7 @@ export const Paginator = React.memo(
                             unstyled={props.unstyled}
                             ptm={ptm}
                             cx={cx}
+                            metaData={metaData}
                         />
                     );
                     break;
@@ -165,7 +168,7 @@ export const Paginator = React.memo(
                     element = <CurrentPageReport reportTemplate={props.currentPageReportTemplate} key={key} page={page} pageCount={pageCount} first={props.first} rows={props.rows} totalRecords={props.totalRecords} template={template} ptm={ptm} />;
                     break;
                 case 'JumpToPageInput':
-                    element = <JumpToPageInput key={key} rows={props.rows} page={page} pageCount={pageCount} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} />;
+                    element = <JumpToPageInput key={key} rows={props.rows} page={page} pageCount={pageCount} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} unstyled={props.unstyled} metaData={metaData} />;
                     break;
 
                 default:
diff --git a/components/lib/paginator/PaginatorBase.js b/components/lib/paginator/PaginatorBase.js
index 940df037f8..659f1f69d8 100644
--- a/components/lib/paginator/PaginatorBase.js
+++ b/components/lib/paginator/PaginatorBase.js
@@ -63,6 +63,7 @@ const styles = `
 export const PaginatorBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Paginator',
+        __parentMetadata: null,
         totalRecords: 0,
         rows: 0,
         first: 0,
@@ -119,7 +120,9 @@ export const JumpToPageInputBase = ComponentBase.extend({
         disabled: false,
         template: null,
         onChange: null,
-        children: undefined
+        children: undefined,
+        metaData: null,
+        ptm: null
     }
 });
 
diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js
index 5a52bc3e06..23c82b2611 100644
--- a/components/lib/paginator/RowsPerPageDropdown.js
+++ b/components/lib/paginator/RowsPerPageDropdown.js
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { localeOption } from '../api/Api';
+import { PrimeReactContext, localeOption } from '../api/Api';
 import { Dropdown } from '../dropdown/Dropdown';
 import { ObjectUtils } from '../utils/Utils';
 import { RowsPerPageDropdownBase } from './PaginatorBase';
-import { PrimeReactContext } from '../api/Api';
 
 export const RowsPerPageDropdown = React.memo((inProps) => {
     const context = React.useContext(PrimeReactContext);
@@ -13,7 +12,18 @@ export const RowsPerPageDropdown = React.memo((inProps) => {
     const options = hasOptions ? props.options.map((opt) => ({ label: String(opt), value: opt })) : [];
     const ariaLabel = localeOption('choose');
     const element = hasOptions ? (
-        <Dropdown value={props.value} options={options} onChange={props.onChange} appendTo={props.appendTo} disabled={props.disabled} placeholder={ariaLabel} aria-label={ariaLabel} pt={props.ptm('RPPDropdown')} unstyled={props.unstyled} />
+        <Dropdown
+            value={props.value}
+            options={options}
+            onChange={props.onChange}
+            appendTo={props.appendTo}
+            disabled={props.disabled}
+            placeholder={ariaLabel}
+            aria-label={ariaLabel}
+            pt={props.ptm('RPPDropdown')}
+            unstyled={props.unstyled}
+            __parentMetadata={{ parent: props.metaData }}
+        />
     ) : null;
 
     if (props.template) {
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index 25af5390fc..91c1d607b9 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -32,8 +32,7 @@ export const Password = React.memo(
         const mediumCheckRegExp = React.useRef(new RegExp(props.mediumRegex));
         const strongCheckRegExp = React.useRef(new RegExp(props.strongRegex));
         const type = unmaskedState ? 'text' : 'password';
-
-        const { ptm, cx, sx, isUnstyled } = PasswordBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 overlayVisible: overlayVisibleState,
@@ -42,7 +41,8 @@ export const Password = React.memo(
                 focused: focusedState,
                 unmasked: unmaskedState
             }
-        });
+        };
+        const { ptm, cx, isUnstyled } = PasswordBase.setMetaData(metaData);
 
         useHandleStyle(PasswordBase.css.styles, isUnstyled, { name: 'password' });
 
@@ -399,7 +399,10 @@ export const Password = React.memo(
                 tooltip: props.tooltip,
                 tooltipOptions: props.tooltipOptions,
                 type: type,
-                value: props.value
+                value: props.value,
+                __parentMetadata: {
+                    parent: metaData
+                }
             },
             ptm('input')
         );
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index 09062ce086..9ebf56f496 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -18,7 +18,7 @@ export const PickList = React.memo(
         const [sourceFilterValueState, setSourceFilterValueState] = React.useState('');
         const [targetFilterValueState, setTargetFilterValueState] = React.useState('');
         const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
-        const { ptm, cx, isUnstyled } = PickListBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 sourceSelection: sourceSelectionState,
@@ -27,7 +27,8 @@ export const PickList = React.memo(
                 targetFilterValue: targetFilterValueState,
                 attributeSelector: attributeSelectorState
             }
-        });
+        };
+        const { ptm, cx, isUnstyled } = PickListBase.setMetaData(metaData);
 
         useHandleStyle(PickListBase.css.styles, isUnstyled, { name: 'picklist' });
         const elementRef = React.useRef(null);
@@ -313,6 +314,7 @@ export const PickList = React.memo(
                         ptm={ptm}
                         cx={cx}
                         unstyled={props.unstyled}
+                        metaData={metaData}
                     />
                 )}
 
@@ -357,6 +359,7 @@ export const PickList = React.memo(
                     ptm={ptm}
                     cx={cx}
                     unstyled={props.unstyled}
+                    metaData={metaData}
                 />
 
                 <PickListSubList
@@ -397,6 +400,7 @@ export const PickList = React.memo(
                         ptm={ptm}
                         cx={cx}
                         unstyled={props.unstyled}
+                        metaData={metaData}
                     />
                 )}
             </div>
diff --git a/components/lib/picklist/PickListControls.js b/components/lib/picklist/PickListControls.js
index 578319457c..c4cdca357b 100644
--- a/components/lib/picklist/PickListControls.js
+++ b/components/lib/picklist/PickListControls.js
@@ -145,10 +145,10 @@ export const PickListControls = React.memo((props) => {
 
     return (
         <div {...controlsProps}>
-            <Button disabled={moveDisabled} type="button" icon={moveUpIcon} onClick={moveUp} pt={ptm('moveUpButton')} unstyled={unstyled}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveTopIcon} onClick={moveTop} pt={ptm('moveTopButton')} unstyled={unstyled}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveDownIcon} onClick={moveDown} pt={ptm('moveDownButton')} unstyled={unstyled}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveBottomIcon} onClick={moveBottom} pt={ptm('moveBottomButton')} unstyled={unstyled}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveUpIcon} onClick={moveUp} pt={ptm('moveUpButton')} unstyled={unstyled} __parentMetadata={{ parent: props.metaData }}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveTopIcon} onClick={moveTop} pt={ptm('moveTopButton')} unstyled={unstyled} __parentMetadata={{ parent: props.metaData }}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveDownIcon} onClick={moveDown} pt={ptm('moveDownButton')} unstyled={unstyled} __parentMetadata={{ parent: props.metaData }}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveBottomIcon} onClick={moveBottom} pt={ptm('moveBottomButton')} unstyled={unstyled} __parentMetadata={{ parent: props.metaData }}></Button>
         </div>
     );
 });
diff --git a/components/lib/picklist/PickListTransferControls.js b/components/lib/picklist/PickListTransferControls.js
index 1a4a5407b9..0325698d10 100644
--- a/components/lib/picklist/PickListTransferControls.js
+++ b/components/lib/picklist/PickListTransferControls.js
@@ -133,10 +133,10 @@ export const PickListTransferControls = React.memo((props) => {
 
     return (
         <div {...buttonsProps}>
-            <Button disabled={moveRightDisabled} type="button" icon={moveToTargetIcon} onClick={moveRight} pt={ptm('moveToTargetButton')} unstyled={unstyled}></Button>
-            <Button disabled={moveAllRightDisabled} type="button" icon={moveAllToTargetIcon} onClick={moveAllRight} pt={ptm('moveAllToTargetButton')} unstyled={unstyled}></Button>
-            <Button disabled={moveLeftDisabled} type="button" icon={moveToSourceIcon} onClick={moveLeft} pt={ptm('moveToSourceButton')} unstyled={unstyled}></Button>
-            <Button disabled={moveAllLeftDisabled} type="button" icon={moveAllToSourceIcon} onClick={moveAllLeft} pt={ptm('moveAllToSourceButton')} unstyled={unstyled}></Button>
+            <Button disabled={moveRightDisabled} type="button" icon={moveToTargetIcon} onClick={moveRight} pt={ptm('moveToTargetButton')} unstyled={unstyled} __parentMetadata={{ parent: props.metaData }}></Button>
+            <Button disabled={moveAllRightDisabled} type="button" icon={moveAllToTargetIcon} onClick={moveAllRight} pt={ptm('moveAllToTargetButton')} unstyled={unstyled} __parentMetadata={{ parent: props.metaData }}></Button>
+            <Button disabled={moveLeftDisabled} type="button" icon={moveToSourceIcon} onClick={moveLeft} pt={ptm('moveToSourceButton')} unstyled={unstyled} __parentMetadata={{ parent: props.metaData }}></Button>
+            <Button disabled={moveAllLeftDisabled} type="button" icon={moveAllToSourceIcon} onClick={moveAllLeft} pt={ptm('moveAllToSourceButton')} unstyled={unstyled} __parentMetadata={{ parent: props.metaData }}></Button>
         </div>
     );
 });
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index 10cc6ba0c4..a802bf9de5 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -9,7 +9,8 @@ export const ProgressBar = React.memo(
         const context = React.useContext(PrimeReactContext);
         const props = ProgressBarBase.getProps(inProps, context);
         const { ptm, cx, isUnstyled } = ProgressBarBase.setMetaData({
-            props
+            props,
+            ...props.__parentMetadata
         });
 
         useHandleStyle(ProgressBarBase.css.styles, isUnstyled, { name: 'progressbar' });
diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js
index 810028f2aa..09573f3581 100644
--- a/components/lib/progressbar/ProgressBarBase.js
+++ b/components/lib/progressbar/ProgressBarBase.js
@@ -119,6 +119,7 @@ const inlineStyles = {
 export const ProgressBarBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'ProgressBar',
+        __parentMetadata: null,
         id: null,
         value: null,
         showValue: true,
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index 67b4d1e080..3a8142b121 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
 import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useEventListener, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { MinusIcon } from '../icons/minus';
 import { PlusIcon } from '../icons/plus';
 import { Ripple } from '../ripple/Ripple';
 import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { SpeedDialBase } from './SpeedDialBase';
-import { PrimeReactContext } from '../api/Api';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const SpeedDial = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -15,13 +15,13 @@ export const SpeedDial = React.memo(
         const context = React.useContext(PrimeReactContext);
         const props = SpeedDialBase.getProps(inProps, context);
         const visible = props.onVisibleChange ? props.visible : visibleState;
-        const metadata = {
+        const metaData = {
             props,
             state: {
                 visible
             }
         };
-        const { ptm, cx, sx, isUnstyled } = SpeedDialBase.setMetaData(metadata);
+        const { ptm, cx, sx, isUnstyled } = SpeedDialBase.setMetaData(metaData);
 
         useHandleStyle(SpeedDialBase.css.styles, isUnstyled, { name: 'speeddial' });
         const isItemClicked = React.useRef(false);
@@ -272,7 +272,7 @@ export const SpeedDial = React.memo(
                 pt: ptm('button'),
                 unstyled: props.unstyled,
                 __parentMetadata: {
-                    parent: metadata
+                    parent: metaData
                 }
             });
             const content = <Button {...buttonProps} />;
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
index 99017899a2..45c8850fe6 100644
--- a/components/lib/splitbutton/SplitButton.js
+++ b/components/lib/splitbutton/SplitButton.js
@@ -21,7 +21,7 @@ export const SplitButton = React.memo(
         const elementRef = React.useRef(null);
         const defaultButtonRef = React.useRef(null);
         const overlayRef = React.useRef(null);
-        const metadata = {
+        const metaData = {
             props,
             state: {
                 id: idState,
@@ -29,7 +29,7 @@ export const SplitButton = React.memo(
             }
         };
 
-        const { ptm, cx, isUnstyled } = SplitButtonBase.setMetaData(metadata);
+        const { ptm, cx, isUnstyled } = SplitButtonBase.setMetaData(metaData);
 
         useHandleStyle(SplitButtonBase.css.styles, isUnstyled, { name: 'splitbutton' });
 
@@ -177,7 +177,7 @@ export const SplitButton = React.memo(
                         {...props.buttonProps}
                         pt={ptm('button')}
                         __parentMetadata={{
-                            parent: metadata
+                            parent: metaData
                         }}
                         unstyled={props.unstyled}
                     >
@@ -196,7 +196,7 @@ export const SplitButton = React.memo(
                         size={props.size}
                         pt={ptm('menuButton')}
                         __parentMetadata={{
-                            parent: metadata
+                            parent: metaData
                         }}
                         unstyled={props.unstyled}
                     />
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index 2300b6603b..59714f40c8 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -967,6 +967,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
                 dropdownAppendTo={props.paginatorDropdownAppendTo}
                 pt={ptCallbacks.ptm('paginator')}
                 unstyled={props.unstyled}
+                __parentMetadata={{ parent: metaData }}
             />
         );
     };
diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js
index 45eb5053b6..ac4837fd7d 100644
--- a/components/lib/treetable/TreeTableHeader.js
+++ b/components/lib/treetable/TreeTableHeader.js
@@ -242,6 +242,7 @@ export const TreeTableHeader = React.memo((props) => {
                     maxLength={getColumnProp(column, 'filterMaxLength')}
                     pt={getColumnPTOptions(column, 'filterInput')}
                     unstyled={props.unstyled}
+                    __parentMetadata={{ parent: props.metaData }}
                 />
             );
         }