diff --git a/components/lib/accordion/Accordion.d.ts b/components/lib/accordion/Accordion.d.ts
index 5993a05c10..b9becca91e 100644
--- a/components/lib/accordion/Accordion.d.ts
+++ b/components/lib/accordion/Accordion.d.ts
@@ -26,8 +26,11 @@ interface AccordionEventParams {
     index: number;
 }
 
-export interface AccordionProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface AccordionProps {
+    id?: string;
     activeIndex?: AccordionActiveIndexType;
+    className?: string;
+    style?: object;
     multiple?: boolean;
     expandIcon?: IconType<AccordionProps>;
     collapseIcon?: IconType<AccordionProps>;
@@ -39,6 +42,4 @@ export interface AccordionProps extends Omit<React.DetailedHTMLProps<React.HTMLA
 }
 
 // tslint:disable-next-line:max-classes-per-file
-export declare class Accordion extends React.Component<AccordionProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Accordion extends React.Component<AccordionProps, any> { }
diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
index 2cb976eb25..9fa26b5769 100644
--- a/components/lib/accordion/Accordion.js
+++ b/components/lib/accordion/Accordion.js
@@ -8,7 +8,6 @@ export const AccordionTab = () => { }
 export const Accordion = React.forwardRef((props, ref) => {
     const [idState, setIdState] = React.useState(props.id);
     const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
-    const elementRef = React.useRef(null);
     const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
 
     const shouldUseTab = (tab) => tab && tab.props.__TYPE === 'AccordionTab';
@@ -47,11 +46,6 @@ export const Accordion = React.forwardRef((props, ref) => {
         return props.multiple ? (activeIndex && activeIndex.some(i => i === index)) : activeIndex === index;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         if (!idState) {
             setIdState(UniqueComponentId());
@@ -129,7 +123,7 @@ export const Accordion = React.forwardRef((props, ref) => {
     const tabs = createTabs();
 
     return (
-        <div id={idState} ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <div id={idState} className={className} style={props.style} {...otherProps}>
             {tabs}
         </div>
     )
diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts
index 5c86434bf7..934b486cb6 100755
--- a/components/lib/autocomplete/AutoComplete.d.ts
+++ b/components/lib/autocomplete/AutoComplete.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
-import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller';
+import { VirtualScrollerProps } from '../virtualscroller';
 import { CSSTransitionProps } from '../csstransition';
 import { IconType } from '../utils';
 
@@ -109,8 +109,4 @@ export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.In
 
 export declare class AutoComplete extends React.Component<AutoCompleteProps, any> {
     public search(event:React.SyntheticEvent, query:string, source: AutoCompleteSourceType): void;
-    public getElement(): HTMLSpanElement;
-    public getInput(): HTMLInputElement;
-    public getOverlay(): HTMLElement;
-    public getVirtualScroller(): VirtualScroller;
 }
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index 0c5acbb3ac..c64ce2feac 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -455,10 +455,6 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         search,
-        getElement: () => elementRef.current,
-        getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        getVirtualScroller: () => virtualScrollerRef.current,
         ...props
     }));
 
diff --git a/components/lib/avatar/Avatar.d.ts b/components/lib/avatar/Avatar.d.ts
index ead9dca3f8..f7bfade70b 100644
--- a/components/lib/avatar/Avatar.d.ts
+++ b/components/lib/avatar/Avatar.d.ts
@@ -20,6 +20,4 @@ export interface AvatarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttr
     children?: React.ReactNode;
 }
 
-export declare class Avatar extends React.Component<AvatarProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Avatar extends React.Component<AvatarProps, any> { }
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
index 1af08d0207..6bc3ee1271 100644
--- a/components/lib/avatar/Avatar.js
+++ b/components/lib/avatar/Avatar.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Avatar = React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
 
     const createContent = () => {
         if (props.image) {
@@ -18,11 +17,6 @@ export const Avatar = React.forwardRef((props, ref) => {
         return null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Avatar.defaultProps);
     const containerClassName = classNames('p-avatar p-component', {
         'p-avatar-image': props.image != null,
@@ -35,7 +29,7 @@ export const Avatar = React.forwardRef((props, ref) => {
     const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
     return (
-        <div ref={elementRef} className={containerClassName} style={props.style} {...otherProps}>
+        <div className={containerClassName} style={props.style} {...otherProps}>
             {content}
             {props.children}
         </div>
diff --git a/components/lib/avatargroup/AvatarGroup.d.ts b/components/lib/avatargroup/AvatarGroup.d.ts
index 7bf1b26767..e3a39efeae 100644
--- a/components/lib/avatargroup/AvatarGroup.d.ts
+++ b/components/lib/avatargroup/AvatarGroup.d.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-export interface AvatarGroupProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface AvatarGroupProps {
+    style?: object;
+    className?: string;
     children?: React.ReactNode;
 }
 
-export declare class AvatarGroup extends React.Component<AvatarGroupProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class AvatarGroup extends React.Component<AvatarGroupProps, any> { }
diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js
index 0bcc00b03b..57d391869c 100644
--- a/components/lib/avatargroup/AvatarGroup.js
+++ b/components/lib/avatargroup/AvatarGroup.js
@@ -2,17 +2,11 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const AvatarGroup = React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const otherProps = ObjectUtils.findDiffKeys(props, AvatarGroup.defaultProps);
     const className = classNames('p-avatar-group p-component', props.className);
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     return (
-        <div ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <div className={className} style={props.style} {...otherProps}>
             {props.children}
         </div>
     )
diff --git a/components/lib/badge/Badge.d.ts b/components/lib/badge/Badge.d.ts
index a4ff0d4e05..5046d65a4e 100644
--- a/components/lib/badge/Badge.d.ts
+++ b/components/lib/badge/Badge.d.ts
@@ -11,6 +11,4 @@ export interface BadgeProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
     children?: React.ReactNode;
 }
 
-export declare class Badge extends React.Component<BadgeProps, any> {
-    public getElement(): HTMLSpanElement;
- }
+export declare class Badge extends React.Component<BadgeProps, any> { }
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
index c6b8e84409..67fba161b2 100644
--- a/components/lib/badge/Badge.js
+++ b/components/lib/badge/Badge.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Badge = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const otherProps = ObjectUtils.findDiffKeys(props, Badge.defaultProps);
     const className = classNames('p-badge p-component', {
         'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
@@ -12,13 +11,8 @@ export const Badge = React.memo(React.forwardRef((props, ref) => {
         [`p-badge-${props.severity}`]: props.severity !== null
     }, props.className);
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     return (
-        <span ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <span className={className} style={props.style} {...otherProps}>
             {props.value}
         </span>
     )
diff --git a/components/lib/blockui/BlockUI.d.ts b/components/lib/blockui/BlockUI.d.ts
index 785c04ff61..e808fe06ca 100644
--- a/components/lib/blockui/BlockUI.d.ts
+++ b/components/lib/blockui/BlockUI.d.ts
@@ -2,11 +2,14 @@ import * as React from 'react';
 
 type BlockUITemplateType = React.ReactNode | ((props: BlockUIProps) => React.ReactNode);
 
-export interface BlockUIProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface BlockUIProps {
+    id?: string;
     blocked?: boolean;
     fullScreen?: boolean;
     baseZIndex?: number;
     autoZIndex?: boolean;
+    style?: object;
+    className?: string;
     template?: BlockUITemplateType;
     onBlocked?(): void;
     onUnblocked?(): void;
@@ -16,5 +19,4 @@ export interface BlockUIProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
 export declare class BlockUI extends React.Component<BlockUIProps, any> {
     public block(): void;
     public unblock(): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
index 488ad5de6b..7a4d1c9bf4 100644
--- a/components/lib/blockui/BlockUI.js
+++ b/components/lib/blockui/BlockUI.js
@@ -6,7 +6,6 @@ import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils
 
 export const BlockUI = React.forwardRef((props, ref) => {
     const [visibleState, setVisibleState] = React.useState(props.blocked);
-    const elementRef = React.useRef(null);
     const maskRef = React.useRef(null);
 
     const block = () => {
@@ -66,7 +65,6 @@ export const BlockUI = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         block,
         unblock,
-        getElement: () => elementRef.current,
         ...props
     }));
 
@@ -93,7 +91,7 @@ export const BlockUI = React.forwardRef((props, ref) => {
     const mask = createMask();
 
     return (
-        <div id={props.id} ref={elementRef} className="p-blockui-container" {...otherProps}>
+        <div id={props.id} className="p-blockui-container" {...otherProps}>
             {props.children}
             {mask}
         </div>
diff --git a/components/lib/breadcrumb/BreadCrumb.d.ts b/components/lib/breadcrumb/BreadCrumb.d.ts
index b1f446ef53..32163e6b6f 100644
--- a/components/lib/breadcrumb/BreadCrumb.d.ts
+++ b/components/lib/breadcrumb/BreadCrumb.d.ts
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { MenuItem } from '../menuitem';
 
-export interface BreadCrumbProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'ref'> {
+export interface BreadCrumbProps {
+    id?: string;
     model?: MenuItem[];
     home?: MenuItem;
+    style?: object;
+    className?: string;
     children?: React.ReactNode;
 }
 
-export declare class BreadCrumb extends React.Component<BreadCrumbProps, any> { 
-    public getElement(): HTMLElement;
-}
+export declare class BreadCrumb extends React.Component<BreadCrumbProps, any> { }
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index a085b0327e..586d93c5e8 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const BreadCrumb = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
 
     const itemClick = (event, item) => {
         if (item.disabled) {
@@ -111,11 +110,6 @@ export const BreadCrumb = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, BreadCrumb.defaultProps);
     const className = classNames('p-breadcrumb p-component', props.className);
     const home = createHome();
@@ -123,7 +117,7 @@ export const BreadCrumb = React.memo(React.forwardRef((props, ref) => {
     const separator = createSeparator();
 
     return (
-        <nav id={props.id} ref={elementRef} className={className} style={props.style} aria-label="Breadcrumb" {...otherProps}>
+        <nav id={props.id} className={className} style={props.style} aria-label="Breadcrumb" {...otherProps}>
             <ul>
                 {home}
                 {separator}
diff --git a/components/lib/button/Button.d.ts b/components/lib/button/Button.d.ts
index 81a6020fda..7deaa769cd 100644
--- a/components/lib/button/Button.d.ts
+++ b/components/lib/button/Button.d.ts
@@ -18,6 +18,4 @@ export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHT
     children?: React.ReactNode;
 }
 
-export declare class Button extends React.Component<ButtonProps, any> { 
-    public getElement(): HTMLButtonElement;
-}
+export declare class Button extends React.Component<ButtonProps, any> { }
diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
index 8d86f43684..1ef9947809 100644
--- a/components/lib/button/Button.js
+++ b/components/lib/button/Button.js
@@ -38,11 +38,6 @@ export const Button = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const disabled = props.disabled || props.loading;
     const otherProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
index d5fca7169d..6101443891 100644
--- a/components/lib/calendar/Calendar.d.ts
+++ b/components/lib/calendar/Calendar.d.ts
@@ -165,8 +165,5 @@ export declare class Calendar extends React.Component<CalendarProps, any> {
     public hide(): void;
     public getCurrentDateTime(): Date | Date[];
     public getViewDate(): Date | Date[];
-    public getElement(): HTMLSpanElement;
-    public getInput(): HTMLInputElement;
-    public getOverlay(): HTMLElement;
     public updateViewDate(event: CalendarEventType, value: Date | Date[]): void;
 }
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index fb649d3593..49f3c22ba2 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -2491,9 +2491,6 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
         getCurrentDateTime,
         getViewDate,
         updateViewDate,
-        getElement: () => elementRef.current,
-        getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
         ...props
     }));
 
diff --git a/components/lib/captcha/Captcha.d.ts b/components/lib/captcha/Captcha.d.ts
index 991765ac43..5e40bf452e 100644
--- a/components/lib/captcha/Captcha.d.ts
+++ b/components/lib/captcha/Captcha.d.ts
@@ -1,10 +1,12 @@
 import * as React from 'react';
 
-export interface CaptchaProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface CaptchaProps {
+    id?: string;
     siteKey?: string;
     theme?: string;
     type?: string;
     size?: string;
+    tabIndex?: number;
     language?: string;
     onResponse?(response: any): void;
     onExpire?(): void;
@@ -14,5 +16,4 @@ export interface CaptchaProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
 export declare class Captcha extends React.Component<CaptchaProps, any> {
     public reset(): void;
     public getResponse(): any;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/captcha/Captcha.js b/components/lib/captcha/Captcha.js
index f6393dd157..2c337083cc 100644
--- a/components/lib/captcha/Captcha.js
+++ b/components/lib/captcha/Captcha.js
@@ -83,7 +83,6 @@ export const Captcha = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         reset,
         getResponse,
-        getElement: () => elementRef.current,
         ...props
     }));
 
diff --git a/components/lib/carousel/Carousel.d.ts b/components/lib/carousel/Carousel.d.ts
index af68560cd4..9e5d64aa14 100644
--- a/components/lib/carousel/Carousel.d.ts
+++ b/components/lib/carousel/Carousel.d.ts
@@ -12,11 +12,14 @@ interface CarouselPageChangeParams {
     page: number;
 }
 
-export interface CarouselProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface CarouselProps {
+    id?: string;
     value?: any[];
     page?: number;
     header?: React.ReactNode;
     footer?: React.ReactNode;
+    style?: object;
+    className?: string;
     itemTemplate?(item: any): React.ReactNode;
     circular?: boolean;
     autoplayInterval?: number;
@@ -32,6 +35,4 @@ export interface CarouselProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
     children?: React.ReactNode;
 }
 
-export declare class Carousel extends React.Component<CarouselProps, any> {
-    public getElement(): HTMLDivElement;
- }
+export declare class Carousel extends React.Component<CarouselProps, any> { }
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index dd4e8adbe9..982436d8d4 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -286,11 +286,6 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         if (elementRef.current) {
             attributeSelector.current = UniqueComponentId();
diff --git a/components/lib/cascadeselect/CascadeSelect.d.ts b/components/lib/cascadeselect/CascadeSelect.d.ts
index 36fbd84aaf..9cb8589118 100644
--- a/components/lib/cascadeselect/CascadeSelect.d.ts
+++ b/components/lib/cascadeselect/CascadeSelect.d.ts
@@ -44,9 +44,4 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
     children?: React.ReactNode;
 }
 
-export declare class CascadeSelect extends React.Component<CascadeSelectProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getInput(): HTMLInputElement;
-    public getOverlay(): HTMLElement;
-    public getLabel(): HTMLSpanElement;
-}
+export declare class CascadeSelect extends React.Component<CascadeSelectProps, any> { }
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
index ea670ddfe8..36144f57e9 100644
--- a/components/lib/cascadeselect/CascadeSelect.js
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -182,14 +182,6 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
         DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        getLabel: () => labelRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/chart/Chart.d.ts b/components/lib/chart/Chart.d.ts
index 7328e08a40..290f53e24a 100644
--- a/components/lib/chart/Chart.d.ts
+++ b/components/lib/chart/Chart.d.ts
@@ -19,5 +19,4 @@ export declare class Chart extends React.Component<ChartProps, any> {
     public getBase64Image(): any;
     public generateLegend(): string;
     public refresh(): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
index 224ce00645..84642d6813 100644
--- a/components/lib/chart/Chart.js
+++ b/components/lib/chart/Chart.js
@@ -6,7 +6,6 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 const ChartJS = function() {try {return Chart;} catch {return null;}}();
 
 const PrimeReactChart = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const chartRef = React.useRef(null);
     const canvasRef = React.useRef(null);
 
@@ -50,7 +49,6 @@ const PrimeReactChart = React.memo(React.forwardRef((props, ref) => {
         getCanvas: () => canvasRef.current,
         getChart: () => chartRef.current,
         getBase64Image: () => chartRef.current.toBase64Image(),
-        getElement: () => elementRef.current,
         generateLegend: () => chartRef.current && chartRef.current.generateLegend(),
         refresh: () => chartRef.current && chartRef.current.update(),
         ...props
@@ -69,7 +67,7 @@ const PrimeReactChart = React.memo(React.forwardRef((props, ref) => {
     const style = Object.assign({ width: props.width, height: props.height }, props.style);
 
     return (
-        <div id={props.id} ref={elementRef} style={style} className={className} {...otherProps}>
+        <div id={props.id} style={style} className={className} {...otherProps}>
             <canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
         </div>
     );
diff --git a/components/lib/checkbox/Checkbox.d.ts b/components/lib/checkbox/Checkbox.d.ts
index 91986f9eff..ad9335eba1 100644
--- a/components/lib/checkbox/Checkbox.d.ts
+++ b/components/lib/checkbox/Checkbox.d.ts
@@ -43,7 +43,4 @@ export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputH
     children?: React.ReactNode;
 }
 
-export declare class Checkbox extends React.Component<CheckboxProps, any> {
-    public getElement(): HTMLDivElement;
-    public getInput(): HTMLInputElement;
- }
+export declare class Checkbox extends React.Component<CheckboxProps, any> { }
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index bd0f4ea28e..4c3c570f84 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -46,12 +46,6 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
         return props.checked === props.trueValue;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getInput: () => inputRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/chip/Chip.d.ts b/components/lib/chip/Chip.d.ts
index d70a123fa5..2bfc4abeb4 100644
--- a/components/lib/chip/Chip.d.ts
+++ b/components/lib/chip/Chip.d.ts
@@ -14,6 +14,4 @@ export interface ChipProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
     children?: React.ReactNode;
 }
 
-export declare class Chip extends React.Component<ChipProps, any> {
-    public getElement(): HTMLDivElement;
- }
+export declare class Chip extends React.Component<ChipProps, any> { }
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index b2eeabcb86..aee62401e3 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Chip = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const [visibleState, setVisibleState] = React.useState(true);
 
     const onKeyDown = (event) => {
@@ -49,17 +48,12 @@ export const Chip = React.memo(React.forwardRef((props, ref) => {
         const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
         return (
-            <div ref={elementRef} className={className} style={props.style} {...otherProps}>
+            <div className={className} style={props.style} {...otherProps}>
                 {content}
             </div>
         )
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     return visibleState && createElement();
 }));
 
diff --git a/components/lib/chips/Chips.d.ts b/components/lib/chips/Chips.d.ts
index 8fcd8204f1..f33163c556 100755
--- a/components/lib/chips/Chips.d.ts
+++ b/components/lib/chips/Chips.d.ts
@@ -31,7 +31,8 @@ interface ChipsChangeParams {
     target: ChipsChangeTargetOptions;
 }
 
-export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' |'ref'> {
+export interface ChipsProps {
+    id?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     inputId?: string;
     name?: string;
@@ -41,6 +42,8 @@ export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTML
     disabled?: boolean;
     readOnly?: boolean;
     removable?: ChipsRemovableType;
+    style?: object;
+    className?: string;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     ariaLabelledBy?: string;
@@ -58,7 +61,4 @@ export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTML
     children?: React.ReactNode;
 }
 
-export declare class Chips extends React.Component<ChipsProps, any> {
-    public getElement(): HTMLDivElement;
-    public getInput(): HTMLInputElement;
- }
+export declare class Chips extends React.Component<ChipsProps, any> { }
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index c2eeaf6d5f..be8e07f81d 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -177,12 +177,6 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
         return ObjectUtils.getPropValue(props.removable, { value, index, props });
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getInput: () => inputRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/colorpicker/ColorPicker.d.ts b/components/lib/colorpicker/ColorPicker.d.ts
index e8de3b607d..01abfe5604 100644
--- a/components/lib/colorpicker/ColorPicker.d.ts
+++ b/components/lib/colorpicker/ColorPicker.d.ts
@@ -50,10 +50,4 @@ export interface ColorPickerProps extends Omit<React.DetailedHTMLProps<React.Inp
     children?: React.ReactNode;
 }
 
-export declare class ColorPicker extends React.Component<ColorPickerProps, any> {
-    public show(): void;
-    public hide(): void;
-    public getElement(): HTMLDivElement;
-    public getInput(): HTMLInputElement;
-    public getOverlay(): HTMLElement;
- }
+export declare class ColorPicker extends React.Component<ColorPickerProps, any> { }
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
index 98f7a46734..0b0e74978c 100644
--- a/components/lib/colorpicker/ColorPicker.js
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -437,15 +437,6 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        show,
-        hide,
-        getElement: () => elementRef.current,
-        getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/contextmenu/ContextMenu.d.ts b/components/lib/contextmenu/ContextMenu.d.ts
index a154130aaa..c8a3618b8d 100644
--- a/components/lib/contextmenu/ContextMenu.d.ts
+++ b/components/lib/contextmenu/ContextMenu.d.ts
@@ -4,8 +4,11 @@ import { CSSTransitionProps } from '../csstransition';
 
 type ContextMenuAppendToType = 'self' | HTMLElement | undefined | null;
 
-export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface ContextMenuProps {
+    id?: string;
     model?: MenuItem[];
+    style?: object;
+    className?: string;
     global?: boolean;
     autoZIndex?: boolean;
     baseZIndex?: number;
@@ -19,5 +22,4 @@ export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTM
 export declare class ContextMenu extends React.Component<ContextMenuProps, any> {
     public show(event: React.SyntheticEvent): void;
     public hide(event: React.SyntheticEvent): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
index 3a304c4c1a..4275d6a1e0 100644
--- a/components/lib/contextmenu/ContextMenu.js
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -166,7 +166,6 @@ export const ContextMenu = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         show,
         hide,
-        getElement: () => menuRef.current,
         ...props
     }));
 
diff --git a/components/lib/datascroller/DataScroller.d.ts b/components/lib/datascroller/DataScroller.d.ts
index 7a6ff19868..d08c85a4b4 100644
--- a/components/lib/datascroller/DataScroller.d.ts
+++ b/components/lib/datascroller/DataScroller.d.ts
@@ -7,13 +7,16 @@ interface DataScrollerLazyLoadParams {
     rows: number;
 }
 
-export interface DataScrollerProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface DataScrollerProps {
+    id?: string;
     value?: any[];
     rows?: number;
     inline?: boolean;
     scrollHeight?: string;
     loader?: boolean;
     buffer?: number;
+    style?: object;
+    className?: string;
     header?: React.ReactNode;
     footer?: React.ReactNode;
     lazy?: boolean;
@@ -25,5 +28,4 @@ export interface DataScrollerProps extends Omit<React.DetailedHTMLProps<React.HT
 
 export declare class DataScroller extends React.Component<DataScrollerProps, any> {
     public load(): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js
index 09c8685d11..1fb68f3114 100644
--- a/components/lib/datascroller/DataScroller.js
+++ b/components/lib/datascroller/DataScroller.js
@@ -5,7 +5,6 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const DataScroller = React.memo(React.forwardRef((props, ref) => {
     const [dataToRenderState, setDataToRenderState] = React.useState([]);
-    const elementRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const value = React.useRef(props.value);
     const dataToRender = React.useRef([]);
@@ -144,8 +143,6 @@ export const DataScroller = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         load,
         reset,
-        getElement: () => elementRef.current,
-        getContent: () => contentRef.current,
         ...props
     }));
 
@@ -203,7 +200,7 @@ export const DataScroller = React.memo(React.forwardRef((props, ref) => {
     const content = createContent();
 
     return (
-        <div id={props.id} ref={elementRef} className={className} {...otherProps}>
+        <div id={props.id} className={className} {...otherProps}>
             {header}
             {content}
             {footer}
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index 3a1cee53fe..a505ba1423 100644
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Column } from '../column';
 import { PaginatorTemplate } from '../paginator';
-import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller/virtualscroller';
+import { VirtualScrollerProps } from '../virtualscroller/virtualscroller';
 
 type DataTableHeaderTemplateType = React.ReactNode | ((options: DataTableHeaderTemplateOptions) => React.ReactNode);
 
@@ -372,7 +372,4 @@ export declare class DataTable extends React.Component<DataTableProps, any> {
     public closeEditingCell(): void;
     public restoreTableState(state: any): void;
     public clearState(): void;
-    public getElement(): HTMLDivElement;
-    public getTable(): HTMLTableElement;
-    public getVirtualScroller(): VirtualScroller;
 }
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 7a827b98bb..339402e422 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -1332,9 +1332,6 @@ export const DataTable = React.forwardRef((props, ref) => {
         closeEditingCell,
         restoreTableState,
         clearState,
-        getElement: () => elementRef.current,
-        getTable: () => tableRef.current,
-        getVirtualScroller: () => virtualScrollerRef.current,
         ...props
     }));
 
diff --git a/components/lib/dataview/DataView.d.ts b/components/lib/dataview/DataView.d.ts
index 00caf98fdf..12811a6fa7 100755
--- a/components/lib/dataview/DataView.d.ts
+++ b/components/lib/dataview/DataView.d.ts
@@ -32,7 +32,8 @@ export interface DataViewLayoutOptionsProps {
 
 export declare class DataViewLayoutOptions extends React.Component<DataViewLayoutOptionsProps, any> { }
 
-export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface DataViewProps {
+    id?: string;
     header?: React.ReactNode;
     footer?: React.ReactNode;
     value?: any[];
@@ -55,6 +56,8 @@ export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
     emptyMessage?: string;
     sortField?: string;
     sortOrder?: DataViewSortOrderType;
+    style?: object;
+    className?: string;
     lazy?: boolean;
     loading?: boolean;
     loadingIcon?: string;
@@ -65,6 +68,4 @@ export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
 }
 
 // tslint:disable-next-line:max-classes-per-file
-export declare class DataView extends React.Component<DataViewProps, any> {
-    public getElement(): HTMLDivElement;
-}
+export declare class DataView extends React.Component<DataViewProps, any> { }
diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
index 2f3cacc407..cedf0d1d8d 100644
--- a/components/lib/dataview/DataView.js
+++ b/components/lib/dataview/DataView.js
@@ -40,7 +40,6 @@ export const DataViewItem = React.memo((props) => {
 export const DataView = React.memo(React.forwardRef((props, ref) => {
     const [firstState, setFirstState] = React.useState(props.first);
     const [rowsState, setRowsState] = React.useState(props.rows);
-    const elementRef = React.useRef(null);
     const first = props.onPage ? props.first : firstState;
     const rows = props.onPage ? props.rows : rowsState;
 
@@ -196,11 +195,6 @@ export const DataView = React.memo(React.forwardRef((props, ref) => {
         return data;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const data = processData();
 
     const otherProps = ObjectUtils.findDiffKeys(props, DataView.defaultProps);
@@ -216,7 +210,7 @@ export const DataView = React.memo(React.forwardRef((props, ref) => {
     const content = createContent(data);
 
     return (
-        <div id={props.id} ref={elementRef} style={props.style} className={className} {...otherProps}>
+        <div id={props.id} style={props.style} className={className} {...otherProps}>
             {loader}
             {header}
             {topPaginator}
diff --git a/components/lib/deferredcontent/DeferredContent.d.ts b/components/lib/deferredcontent/DeferredContent.d.ts
index 22287c44d1..aaba3fa113 100644
--- a/components/lib/deferredcontent/DeferredContent.d.ts
+++ b/components/lib/deferredcontent/DeferredContent.d.ts
@@ -1,10 +1,8 @@
 import * as React from 'react';
 
-export interface DeferredContentProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface DeferredContentProps {
     onLoad?(event: React.SyntheticEvent): void;
     children?: React.ReactNode;
 }
 
-export declare class DeferredContent extends React.Component<DeferredContentProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class DeferredContent extends React.Component<DeferredContentProps, any> { }
diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js
index bec870f19a..4ed0039b03 100644
--- a/components/lib/deferredcontent/DeferredContent.js
+++ b/components/lib/deferredcontent/DeferredContent.js
@@ -32,11 +32,6 @@ export const DeferredContent = React.forwardRef((props, ref) => {
         props.onLoad && props.onLoad(event);
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         if (!loadedState) {
             shouldLoad() ? load() : bindScrollListener();
diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts
index 5d971f4f08..da94954ff5 100644
--- a/components/lib/dialog/Dialog.d.ts
+++ b/components/lib/dialog/Dialog.d.ts
@@ -67,10 +67,4 @@ export interface DialogProps {
 
 export declare class Dialog extends React.Component<DialogProps, any> {
     public resetPosition(): void;
-    public getElement(): HTMLDivElement;
-    public getMask(): HTMLDivElement;
-    public getContent(): HTMLDivElement;
-    public getHeader(): HTMLDivElement;
-    public getFooter(): HTMLDivElement;
-    public getCloseButton(): HTMLButtonElement;
 }
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index 3df545697d..5daf7933d7 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -400,12 +400,6 @@ export const Dialog = React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         resetPosition,
-        getElement: () => dialogRef.current,
-        getMask: () => maskRef.current,
-        getContent: () => contentRef.current,
-        getHeader: () => headerRef.current,
-        getFooter: () => footerRef.current,
-        getCloseButton: () => closeRef.current,
         ...props
     }));
 
diff --git a/components/lib/divider/Divider.d.ts b/components/lib/divider/Divider.d.ts
index 28afe527d2..a7e0d2afeb 100644
--- a/components/lib/divider/Divider.d.ts
+++ b/components/lib/divider/Divider.d.ts
@@ -6,13 +6,13 @@ type DividerLayoutType = 'vertical' | 'horizontal';
 
 type DividerBorderType = 'solid' | 'dashed' | 'dotted';
 
-export interface DividerProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface DividerProps {
     align?: DividerAlignType;
     layout?: DividerLayoutType;
     type?: DividerBorderType;
+    style?: object;
+    className?: string;
     children?: React.ReactNode;
 }
 
-export declare class Divider extends React.Component<DividerProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Divider extends React.Component<DividerProps, any> { }
diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js
index 4325788e4f..635f2d079b 100644
--- a/components/lib/divider/Divider.js
+++ b/components/lib/divider/Divider.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Divider = React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const horizontal = props.layout === 'horizontal';
     const vertical = props.layout === 'vertical';
     const otherProps = ObjectUtils.findDiffKeys(props, Divider.defaultProps);
@@ -14,13 +13,8 @@ export const Divider = React.forwardRef((props, ref) => {
         'p-divider-bottom': vertical && props.align === 'bottom',
     }, props.className);
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     return (
-        <div ref={elementRef} className={className} style={props.style} role="separator" {...otherProps}>
+        <div className={className} style={props.style} role="separator" {...otherProps}>
             <div className="p-divider-content">
                 {props.children}
             </div>
diff --git a/components/lib/dock/Dock.d.ts b/components/lib/dock/Dock.d.ts
index c616a39649..83b8057809 100644
--- a/components/lib/dock/Dock.d.ts
+++ b/components/lib/dock/Dock.d.ts
@@ -13,7 +13,10 @@ interface DockHeaderTemplateOptions {
 
 interface DockFooterTemplateOptions extends DockHeaderTemplateOptions {}
 
-export interface DockProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface DockProps {
+    id?: string;
+    style?: object;
+    className?: string;
     model?: MenuItem[];
     position?: DockPositionType;
     magnification?: boolean;
@@ -22,6 +25,4 @@ export interface DockProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
     children?: React.ReactNode;
 }
 
-export declare class Dock extends React.Component<DockProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Dock extends React.Component<DockProps, any> { }
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index cac2c1a2b7..45555d679f 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -4,7 +4,6 @@ import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Dock = React.memo(React.forwardRef((props, ref) => {
     const [currentIndexState, setCurrentIndexState] = React.useState(-3);
-    const elementRef = React.useRef(null);
 
     const onListMouseLeave = () => {
         setCurrentIndexState(-3);
@@ -102,11 +101,6 @@ export const Dock = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Dock.defaultProps);
     const className = classNames(`p-dock p-component p-dock-${props.position}`, {
         'p-dock-magnification': props.magnification
@@ -116,7 +110,7 @@ export const Dock = React.memo(React.forwardRef((props, ref) => {
     const footer = createFooter();
 
     return (
-        <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             <div className="p-dock-container">
                 {header}
                 {list}
diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts
index b463818d56..3c688eb9a6 100755
--- a/components/lib/dropdown/Dropdown.d.ts
+++ b/components/lib/dropdown/Dropdown.d.ts
@@ -104,9 +104,4 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
     children?: React.ReactNode;
 }
 
-export declare class Dropdown extends React.Component<DropdownProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getInput(): HTMLInputElement;
-    public getFocusInput(): HTMLInputElement;
-    public getOverlay(): HTMLElement;
-}
+export declare class Dropdown extends React.Component<DropdownProps, any> { }
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 4ec0d5fc4d..24f8c1eb39 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -548,16 +548,6 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {
         return index !== -1 ? (props.optionGroupLabel ? getOptionGroupChildren(props.options[index.group])[index.option] : props.options[index]) : null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        show,
-        hide,
-        getElement: () => elementRef.current,
-        getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        getFocusInput: () => focusInputRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/editor/Editor.d.ts b/components/lib/editor/Editor.d.ts
index 50ca1f7d06..5000e81420 100644
--- a/components/lib/editor/Editor.d.ts
+++ b/components/lib/editor/Editor.d.ts
@@ -33,7 +33,4 @@ export interface EditorProps extends React.DetailedHTMLProps<React.InputHTMLAttr
 
 export declare class Editor extends React.Component<EditorProps, any> {
     public getQuill(): any;
-    public getElement(): HTMLDivElement;
-    public getContent(): HTMLDivElement;
-    public getToolbar(): HTMLDivElement;
 }
diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
index 3dee079913..96c56c7e8d 100644
--- a/components/lib/editor/Editor.js
+++ b/components/lib/editor/Editor.js
@@ -3,12 +3,15 @@ import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 
 export const Editor = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const toolbarRef = React.useRef(null);
     const quill = React.useRef(null);
     const isQuillLoaded = React.useRef(false);
 
+    const getQuill = () => {
+        return quill.current;
+    }
+
     useMountEffect(() => {
         if (!isQuillLoaded.current) {
             import('quill').then((module) => {
@@ -83,10 +86,7 @@ export const Editor = React.memo(React.forwardRef((props, ref) => {
     }, [props.value]);
 
     React.useImperativeHandle(ref, () => ({
-        getQuill: () => quill.current,
-        getElement: () => elementRef.current,
-        getContent: () => contentRef.current,
-        getToolbar: () => toolbarRef.current,
+        getQuill,
         ...props
     }));
 
@@ -154,7 +154,7 @@ export const Editor = React.memo(React.forwardRef((props, ref) => {
     const content = <div ref={contentRef} className="p-editor-content" style={props.style}></div>
 
     return (
-        <div id={props.id} ref={elementRef} className={className} {...otherProps}>
+        <div id={props.id} className={className} {...otherProps}>
             {header}
             {content}
         </div>
diff --git a/components/lib/fieldset/Fieldset.d.ts b/components/lib/fieldset/Fieldset.d.ts
index 0000b294de..3b4ee95435 100644
--- a/components/lib/fieldset/Fieldset.d.ts
+++ b/components/lib/fieldset/Fieldset.d.ts
@@ -6,8 +6,11 @@ interface FieldsetToggleParams {
     value: boolean;
 }
 
-export interface FieldsetProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, 'ref'> {
+export interface FieldsetProps {
+    id?: string;
     legend?: React.ReactNode;
+    className?: string;
+    style?: object;
     toggleable?: boolean;
     collapsed?: boolean;
     transitionOptions?: CSSTransitionProps;
@@ -18,7 +21,4 @@ export interface FieldsetProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
     children?: React.ReactNode;
 }
 
-export declare class Fieldset extends React.Component<FieldsetProps, any> { 
-    public getElement(): HTMLFieldSetElement;
-    public getContent(): HTMLDivElement;
-}
+export declare class Fieldset extends React.Component<FieldsetProps, any> { }
diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js
index 071cd07cea..9247d38630 100644
--- a/components/lib/fieldset/Fieldset.js
+++ b/components/lib/fieldset/Fieldset.js
@@ -8,7 +8,6 @@ export const Fieldset = React.forwardRef((props, ref) => {
     const [idState, setIdState] = React.useState(props.id);
     const [collapsedState, setCollapsedState] = React.useState(props.collapsed);
     const collapsed = props.toggleable ? (props.onToggle ? props.collapsed : collapsedState) : false;
-    const elementRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const headerId = idState + '_header';
     const contentId = idState + '_content';
@@ -103,12 +102,6 @@ export const Fieldset = React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getContent: () => contentRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Fieldset.defaultProps);
     const className = classNames('p-fieldset p-component', {
         'p-fieldset-toggleable': props.toggleable
@@ -117,7 +110,7 @@ export const Fieldset = React.forwardRef((props, ref) => {
     const content = createContent();
 
     return (
-        <fieldset id={idState} ref={elementRef} className={className} style={props.style} {...otherProps} onClick={props.onClick}>
+        <fieldset id={idState} className={className} style={props.style} {...otherProps} onClick={props.onClick}>
             {legend}
             {content}
         </fieldset>
diff --git a/components/lib/fileupload/FileUpload.d.ts b/components/lib/fileupload/FileUpload.d.ts
index a4f2a67995..dbddb7be13 100644
--- a/components/lib/fileupload/FileUpload.d.ts
+++ b/components/lib/fileupload/FileUpload.d.ts
@@ -130,6 +130,4 @@ export declare class FileUpload extends React.Component<FileUploadProps, any> {
     public upload(): void;
     public clear(): void;
     public formatSize(bytes: number): number;
-    public getElement(): HTMLElement;
-    public getInput(): HTMLInputElement;
 }
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index fc69a99ba0..85e2772765 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -316,8 +316,6 @@ export const FileUpload = React.memo(React.forwardRef((props, ref) => {
         upload,
         clear,
         formatSize,
-        getInput: () => fileInputRef.current,
-        getContent: () => contentRef.current,
         ...props
     }));
 
diff --git a/components/lib/fullcalendar/FullCalendar.d.ts b/components/lib/fullcalendar/FullCalendar.d.ts
index 02247ce98c..641bb5eda4 100644
--- a/components/lib/fullcalendar/FullCalendar.d.ts
+++ b/components/lib/fullcalendar/FullCalendar.d.ts
@@ -9,6 +9,4 @@ export interface FullCalendarProps {
     children?: React.ReactNode;
 }
 
-export declare class FullCalendar extends React.Component<FullCalendarProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class FullCalendar extends React.Component<FullCalendarProps, any> { }
diff --git a/components/lib/fullcalendar/FullCalendar.js b/components/lib/fullcalendar/FullCalendar.js
index e4626836cf..ad3c1584f1 100644
--- a/components/lib/fullcalendar/FullCalendar.js
+++ b/components/lib/fullcalendar/FullCalendar.js
@@ -23,11 +23,6 @@ export const FullCalendar = React.memo(React.forwardRef((props, ref) => {
         });
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         // eslint-disable-next-line no-console
         console.warn("FullCalendar component is deprecated. Use FullCalendar component of '@fullcalendar/react' package.");
diff --git a/components/lib/galleria/Galleria.d.ts b/components/lib/galleria/Galleria.d.ts
index 53a3ae69f8..08e8ae9b10 100644
--- a/components/lib/galleria/Galleria.d.ts
+++ b/components/lib/galleria/Galleria.d.ts
@@ -12,13 +12,16 @@ interface GalleriaItemChangeParams {
     index: number;
 }
 
-export interface GalleriaProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface GalleriaProps {
+    id?: string;
     value?: any[];
     activeIndex?: number;
     fullScreen?: boolean;
     item?(item: any): React.ReactNode;
     thumbnail?(item: any): React.ReactNode;
     indicator?(index: number): React.ReactNode;
+    className?: string;
+    style?: object;
     header?: React.ReactNode;
     footer?: React.ReactNode;
     numVisible?: number;
@@ -50,5 +53,4 @@ export declare class Galleria extends React.Component<GalleriaProps, any> {
     public isAutoPlayActive(): boolean;
     public startSlideShow(): void;
     public stopSlideShow(): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
index 05d35b78e2..9725328b97 100644
--- a/components/lib/galleria/Galleria.js
+++ b/components/lib/galleria/Galleria.js
@@ -107,8 +107,6 @@ export const Galleria = React.memo(React.forwardRef((props, ref) => {
         isAutoPlayActive,
         startSlideShow,
         stopSlideShow,
-        getElement: () => elementRef.current,
-        getPreviewContent: () => previewContentRef.current,
         ...props
     }));
 
diff --git a/components/lib/gmap/GMap.d.ts b/components/lib/gmap/GMap.d.ts
index a4f85ae62c..52b0412214 100644
--- a/components/lib/gmap/GMap.d.ts
+++ b/components/lib/gmap/GMap.d.ts
@@ -6,9 +6,11 @@ interface GMapEventParams {
     map: any;
 }
 
-export interface GMapProps  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface GMapProps {
     options?: object;
     overlays?: any[];
+    style?: object;
+    className?: string;
     onMapReady?(map: any): void;
     onMapClick?(event: React.SyntheticEvent): void;
     onMapDragEnd?(): void;
@@ -20,7 +22,4 @@ export interface GMapProps  extends Omit<React.DetailedHTMLProps<React.HTMLAttri
     children?: React.ReactNode;
 }
 
-export declare class GMap extends React.Component<GMapProps, any> { 
-    public getMap(): any;
-    public getElement(): HTMLDivElement;
-}
+export declare class GMap extends React.Component<GMapProps, any> { }
diff --git a/components/lib/gmap/GMap.js b/components/lib/gmap/GMap.js
index c4e102eda5..0fa25f6411 100644
--- a/components/lib/gmap/GMap.js
+++ b/components/lib/gmap/GMap.js
@@ -112,7 +112,6 @@ export const GMap = React.memo(React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         getMap,
-        getElement: () => elementRef.current,
         ...props
     }));
 
diff --git a/components/lib/image/Image.d.ts b/components/lib/image/Image.d.ts
index dbf1ea617c..86903e05b4 100644
--- a/components/lib/image/Image.d.ts
+++ b/components/lib/image/Image.d.ts
@@ -15,7 +15,4 @@ export interface ImageProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
     children?: React.ReactNode;
 }
 
-export declare class Image extends React.Component<ImageProps, any> { 
-    public getElement(): HTMLSpanElement;
-    public getImage(): HTMLImageElement;
-}
+export declare class Image extends React.Component<ImageProps, any> { }
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
index c7c210d491..a2d07875b9 100644
--- a/components/lib/image/Image.js
+++ b/components/lib/image/Image.js
@@ -11,7 +11,6 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
     const [rotateState, setRotateState] = React.useState(0);
     const [scaleState, setScaleState] = React.useState(1);
     const elementRef = React.useRef(null);
-    const imageRef = React.useRef(null);
     const maskRef = React.useRef(null);
     const previewRef = React.useRef(null);
     const previewClick = React.useRef(false);
@@ -145,12 +144,6 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getImage: () => imageRef.current,
-        ...props
-    }));
-
     const { src, alt, width, height } = props;
     const otherProps = ObjectUtils.findDiffKeys(props, Image.defaultProps);
     const containerClassName = classNames('p-image p-component', props.className, {
@@ -159,7 +152,7 @@ export const Image = React.memo(React.forwardRef((props, ref) => {
     const element = createElement();
     const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : <i className="p-image-preview-icon pi pi-eye"></i>;
     const preview = createPreview();
-    const image = <img ref={imageRef} src={src} className={props.imageClassName} width={width} height={height} style={props.imageStyle} alt={alt} onError={props.onError} />;
+    const image = <img src={src} className={props.imageClassName} width={width} height={height} style={props.imageStyle} alt={alt} onError={props.onError} />;
 
     return (
         <span ref={elementRef} className={containerClassName} {...otherProps}>
diff --git a/components/lib/inplace/Inplace.d.ts b/components/lib/inplace/Inplace.d.ts
index 3c594b7806..8806f594e8 100644
--- a/components/lib/inplace/Inplace.d.ts
+++ b/components/lib/inplace/Inplace.d.ts
@@ -5,10 +5,13 @@ interface InplaceToggleParams {
     value: boolean;
 }
 
-export interface InplaceProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface InplaceProps {
+    style?: object;
+    className?: string;
     active?: boolean;
     closable?: boolean;
     disabled?: boolean;
+    tabIndex?: number;
     ariaLabel?: string;
     onOpen?(event: React.MouseEvent<HTMLElement>): void;
     onClose?(event: React.MouseEvent<HTMLElement>): void;
@@ -16,9 +19,7 @@ export interface InplaceProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
     children?: React.ReactNode;
 }
 
-export declare class Inplace extends React.Component<InplaceProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Inplace extends React.Component<InplaceProps, any> { }
 
 // tslint:disable-next-line:max-classes-per-file
 export declare class InplaceDisplay extends React.Component {
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
index 4ae6d486a8..b6e1ca91ed 100644
--- a/components/lib/inplace/Inplace.js
+++ b/components/lib/inplace/Inplace.js
@@ -7,7 +7,6 @@ export const InplaceContent = (props) => props.children;
 
 export const Inplace = React.forwardRef((props, ref) => {
     const [activeState, setActiveState] = React.useState(props.active);
-    const elementRef = React.useRef(null);
     const active = props.onToggle ? props.active : activeState;
 
     const shouldUseInplaceContent = (child) => child && child.props.__TYPE === 'InplaceContent';
@@ -98,11 +97,6 @@ export const Inplace = React.forwardRef((props, ref) => {
         );
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Inplace.defaultProps);
     const children = createChildren();
     const className = classNames('p-inplace p-component', {
@@ -110,7 +104,7 @@ export const Inplace = React.forwardRef((props, ref) => {
     }, props.className);
 
     return (
-        <div ref={elementRef} className={className} {...otherProps}>
+        <div className={className} {...otherProps}>
             {children}
         </div>
     )
diff --git a/components/lib/inputmask/InputMask.d.ts b/components/lib/inputmask/InputMask.d.ts
index c3174c000e..f9cd09287c 100644
--- a/components/lib/inputmask/InputMask.d.ts
+++ b/components/lib/inputmask/InputMask.d.ts
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { InputText, InputTextProps } from '../inputtext';
 import TooltipOptions from '../tooltip/tooltipoptions';
 
 interface InputMaskCompleteParams {
@@ -21,13 +20,23 @@ interface InputMaskChangeParams {
     target: InputMaskChangeTargetOptions;
 }
 
-export interface InputMaskProps extends InputTextProps {
+export interface InputMaskProps {
+    id?: string;
+    value?: string;
+    type?: string;
     mask?: string;
     slotChar?: string;
     autoClear?: boolean;
     unmask?: boolean;
+    style?: object;
+    className?: string;
+    placeholder?: string;
+    size?: number;
+    maxLength?: number;
+    tabIndex?: number;
     disabled?: boolean;
     readOnly?: boolean;
+    name?: string;
     required?: boolean;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
@@ -38,6 +47,4 @@ export interface InputMaskProps extends InputTextProps {
     children?: React.ReactNode;
 }
 
-export declare class InputMask extends React.Component<InputMaskProps, any> { 
-    public getElement(): InputText;
-}
+export declare class InputMask extends React.Component<InputMaskProps, any> { }
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
index 34e0430a79..6e4d55e87a 100644
--- a/components/lib/inputmask/InputMask.js
+++ b/components/lib/inputmask/InputMask.js
@@ -505,11 +505,6 @@ export const InputMask = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts
index e75c81b608..bc9236934f 100644
--- a/components/lib/inputnumber/InputNumber.d.ts
+++ b/components/lib/inputnumber/InputNumber.d.ts
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { InputText } from '../inputtext/inputtext';
 import TooltipOptions from '../tooltip/tooltipoptions';
 
 interface InputNumberValueChangeTargetOptions {
@@ -21,7 +20,7 @@ interface InputNumberChangeParams {
     value: number | null;
 }
 
-export interface InputNumberProps  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'ref'> {
+export interface InputNumberProps {
     value?: number | null;
     inputRef?: React.Ref<HTMLInputElement>;
     format?: boolean;
@@ -41,6 +40,7 @@ export interface InputNumberProps  extends Omit<React.DetailedHTMLProps<React.HT
     useGrouping?: boolean;
     minFractionDigits?: number;
     maxFractionDigits?: number;
+    id?: string;
     name?: string;
     type?: string;
     allowEmpty?: boolean;
@@ -55,6 +55,8 @@ export interface InputNumberProps  extends Omit<React.DetailedHTMLProps<React.HT
     placeholder?: string;
     readOnly?: boolean;
     size?: number;
+    style?: object;
+    className?: string;
     inputId?: string;
     autoFocus?: boolean;
     inputStyle?: object;
@@ -72,6 +74,4 @@ export interface InputNumberProps  extends Omit<React.DetailedHTMLProps<React.HT
 
 export declare class InputNumber extends React.Component<InputNumberProps, any> {
     public getFormatter(): any;
-    public getElement(): HTMLSpanElement;
-    public getInput(): InputText;
 }
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index de545499e9..d1b02b0d5f 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -935,8 +935,6 @@ export const InputNumber = React.memo(React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         getFormatter,
-        getElement: () => elementRef.current,
-        getInput: () => elementRef.current,
         ...props
     }));
 
diff --git a/components/lib/inputswitch/InputSwitch.d.ts b/components/lib/inputswitch/InputSwitch.d.ts
index 8633c137c4..2cdfe31820 100644
--- a/components/lib/inputswitch/InputSwitch.d.ts
+++ b/components/lib/inputswitch/InputSwitch.d.ts
@@ -35,7 +35,4 @@ export interface InputSwitchProps extends Omit<React.DetailedHTMLProps<React.Inp
     children?: React.ReactNode;
 }
 
-export declare class InputSwitch extends React.Component<InputSwitchProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getInput(): HTMLInputElement;
-}
+export declare class InputSwitch extends React.Component<InputSwitchProps, any> { }
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
index fdbe715c7e..f8e326f0d5 100644
--- a/components/lib/inputswitch/InputSwitch.js
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -47,12 +47,6 @@ export const InputSwitch = React.memo(React.forwardRef((props, ref) => {
         props.onBlur && props.onBlur(event);
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getInput: () => elementRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/inputtext/InputText.d.ts b/components/lib/inputtext/InputText.d.ts
index 55db8c0079..cbfdfc4a55 100644
--- a/components/lib/inputtext/InputText.d.ts
+++ b/components/lib/inputtext/InputText.d.ts
@@ -11,7 +11,4 @@ export interface InputTextProps extends Omit<React.DetailedHTMLProps<React.Input
     children?: React.ReactNode;
 }
 
-export declare class InputText extends React.Component<InputTextProps, any> { 
-    public getElement(): HTMLInputElement;
-    public getInput(): HTMLInputElement;
-}
+export declare class InputText extends React.Component<InputTextProps, any> { }
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
index 625b8fd326..9349b4687a 100644
--- a/components/lib/inputtext/InputText.js
+++ b/components/lib/inputtext/InputText.js
@@ -40,12 +40,6 @@ export const InputText = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || (elementRef.current && ObjectUtils.isNotEmpty(elementRef.current.value))
     ), [props.value, props.defaultValue]);
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getInput: () => elementRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
diff --git a/components/lib/inputtextarea/InputTextarea.d.ts b/components/lib/inputtextarea/InputTextarea.d.ts
index f200a4b8ab..4943b52323 100644
--- a/components/lib/inputtextarea/InputTextarea.d.ts
+++ b/components/lib/inputtextarea/InputTextarea.d.ts
@@ -8,7 +8,4 @@ export interface InputTextareaProps extends Omit<React.DetailedHTMLProps<React.T
     children?: React.ReactNode;
 }
 
-export declare class InputTextarea extends React.Component<InputTextareaProps, any> { 
-    public getElement(): HTMLTextAreaElement;
-    public getInput(): HTMLTextAreaElement;
-}
+export declare class InputTextarea extends React.Component<InputTextareaProps, any> { }
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
index d93daa09da..d5fe0e5ceb 100644
--- a/components/lib/inputtextarea/InputTextarea.js
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -71,12 +71,6 @@ export const InputTextarea = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || (elementRef.current && ObjectUtils.isNotEmpty(elementRef.current.value))
     ), [props.value, props.defaultValue]);
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getInput: () => elementRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
index ab639e29b6..9791f52c19 100644
--- a/components/lib/knob/Knob.d.ts
+++ b/components/lib/knob/Knob.d.ts
@@ -26,6 +26,4 @@ export interface KnobProps extends Omit<React.DetailedHTMLProps<React.InputHTMLA
     children?: React.ReactNode;
 }
 
-export declare class Knob extends React.Component<KnobProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Knob extends React.Component<KnobProps, any> { }
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index 2a6ada1ea4..a007038079 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -130,11 +130,6 @@ export const Knob = React.memo(React.forwardRef((props, ref) => {
         unbindWindowTouchEndListener();
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Knob.defaultProps);
     const className = classNames('p-knob p-component', {
         'p-disabled': props.disabled,
diff --git a/components/lib/listbox/ListBox.d.ts b/components/lib/listbox/ListBox.d.ts
index 816d926afd..8c547d8742 100755
--- a/components/lib/listbox/ListBox.d.ts
+++ b/components/lib/listbox/ListBox.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SelectItemOptionsType } from '../selectitem/selectitem';
 import TooltipOptions from '../tooltip/tooltipoptions';
-import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller';
+import { VirtualScrollerProps } from '../virtualscroller';
 
 
 type ListBoxOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
@@ -37,6 +37,7 @@ interface ListBoxFilterOptions {
 }
 
 export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    id?: string;
     value?: any;
     options?: SelectItemOptionsType;
     optionLabel?: string;
@@ -47,8 +48,10 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
     optionGroupTemplate?: ListBoxOptionGroupTemplateType;
     itemTemplate?: ListBoxItemTemplateType;
     filterTemplate?: ListBoxFilterTemplateType;
+    style?: object;
     listStyle?: object;
     listClassName?: string;
+    className?: string;
     virtualScrollerOptions?: VirtualScrollerProps;
     disabled?: boolean;
     dataKey?: string;
@@ -61,6 +64,7 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
     filterPlaceholder?: string;
     filterLocale?: string;
     filterInputProps?: any;
+    tabIndex?: number;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     ariaLabelledBy?: string;
@@ -69,7 +73,4 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
     children?: React.ReactNode;
 }
 
-export declare class ListBox extends React.Component<ListBoxProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getVirtualScroller(): VirtualScroller;
-}
+export declare class ListBox extends React.Component<ListBoxProps, any> { }
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 67964a98b1..e7e907bf15 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -255,12 +255,6 @@ export const ListBox = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getVirtualScroller: () => virtualScrollerRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         scrollToSelectedIndex();
     });
diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
index 8d4398bc04..5651bde880 100644
--- a/components/lib/megamenu/MegaMenu.d.ts
+++ b/components/lib/megamenu/MegaMenu.d.ts
@@ -8,14 +8,15 @@ type MegaMenuStartTemplate = React.ReactNode | ((props: MegaMenuProps) => React.
 type MegaMenuEndTemplate = React.ReactNode | ((props: MegaMenuProps) => React.ReactNode);
 
 
-export interface MegaMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface MegaMenuProps {
+    id?: string;
     model?: MenuItem[];
+    style?: object;
+    className?: string;
     orientation?: MegaMenuOrientationType;
     start?: MegaMenuStartTemplate;
     end?: MegaMenuEndTemplate;
     children?: React.ReactNode;
 }
 
-export declare class MegaMenu extends React.Component<MegaMenuProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class MegaMenu extends React.Component<MegaMenuProps, any> { }
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
index ccb3343ae0..9c1b6f964c 100644
--- a/components/lib/megamenu/MegaMenu.js
+++ b/components/lib/megamenu/MegaMenu.js
@@ -167,11 +167,6 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
         return columnClass;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         bindDocumentClickListener();
     });
diff --git a/components/lib/mention/Mention.d.ts b/components/lib/mention/Mention.d.ts
index 4556414cd1..0f5d783468 100644
--- a/components/lib/mention/Mention.d.ts
+++ b/components/lib/mention/Mention.d.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
-import { InputTextarea } from '../inputtextarea';
 
 type MentionTriggerType = string | string[];
 
@@ -28,9 +27,12 @@ interface MentionSelectParams {
     suggestion: any;
 }
 
-export interface MentionProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'ref'> {
+export interface MentionProps {
+    id?: string;
     inputId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
+    style?: object;
+    className?: string;
     trigger?: MentionTriggerType;
     suggestions?: any[];
     field?: MentionFieldType;
@@ -56,8 +58,4 @@ export interface MentionProps extends Omit<React.DetailedHTMLProps<React.InputHT
     children?: React.ReactNode;
 }
 
-export declare class Mention extends React.Component<MentionProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getInput(): InputTextarea;
-    public getOverlay(): HTMLElement;
-}
+export declare class Mention extends React.Component<MentionProps, any> { }
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
index acd8aa36c4..f63a087b82 100644
--- a/components/lib/mention/Mention.js
+++ b/components/lib/mention/Mention.js
@@ -312,15 +312,6 @@ export const Mention = React.memo(React.forwardRef((props, ref) => {
         ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || (inputRef.current && ObjectUtils.isNotEmpty(inputRef.current.value))
     ), [props.value, props.defaultValue, inputRef]);
 
-    React.useImperativeHandle(ref, () => ({
-        show,
-        hide,
-        getElement: () => elementRef.current,
-        getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/menu/Menu.d.ts b/components/lib/menu/Menu.d.ts
index 4098ef182d..812539aaca 100644
--- a/components/lib/menu/Menu.d.ts
+++ b/components/lib/menu/Menu.d.ts
@@ -4,9 +4,12 @@ import { CSSTransitionProps } from '../csstransition';
 
 type MenuAppendToType = 'self' | HTMLElement | undefined | null;
 
-export interface MenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface MenuProps {
+    id?: string;
     model?: MenuItem[];
     popup?: boolean;
+    style?: object;
+    className?: string;
     autoZIndex?: boolean;
     baseZIndex?: number;
     appendTo?: MenuAppendToType;
@@ -20,6 +23,4 @@ export declare class Menu extends React.Component<MenuProps, any> {
     public toggle(event: React.SyntheticEvent): void;
     public show(event: React.SyntheticEvent): void;
     public hide(event: React.SyntheticEvent): void;
-    public getElement(): HTMLDivElement;
-    public getTarget(): EventTarget | null;
 }
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index 92aae8c342..e986fe0c69 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -125,8 +125,6 @@ export const Menu = React.memo(React.forwardRef((props, ref) => {
         toggle,
         show,
         hide,
-        getElement: () => menuRef.current,
-        getTarget: () => targetRef.current,
         ...props
     }));
 
diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
index 16784830f4..1c35d2209a 100644
--- a/components/lib/menubar/Menubar.d.ts
+++ b/components/lib/menubar/Menubar.d.ts
@@ -5,15 +5,14 @@ type MenubarStartTemplate = React.ReactNode | ((props: MenubarProps) => React.Re
 
 type MenubarEndTemplate = React.ReactNode | ((props: MenubarProps) => React.ReactNode);
 
-export interface MenubarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface MenubarProps {
+    id?: string;
     model?: MenuItem[];
+    style?: object;
+    className?: string;
     start?: MenubarStartTemplate;
     end?: MenubarEndTemplate;
     children?: React.ReactNode;
 }
 
-export declare class Menubar extends React.Component<MenubarProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getRootMenu(): HTMLElement;
-    public getMenuButton(): HTMLElement;
-}
+export declare class Menubar extends React.Component<MenubarProps, any> { }
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index 8d4ef42809..9b237c6d67 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -6,7 +6,6 @@ import { MenubarSub } from './MenubarSub';
 
 export const Menubar = React.memo(React.forwardRef((props, ref) => {
     const [mobileActiveState, setMobileActiveState] = React.useState(false);
-    const elementRef = React.useRef(null);
     const rootMenuRef = React.useRef(null);
     const menuButtonRef = React.useRef(null);
 
@@ -51,9 +50,6 @@ export const Menubar = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         toggle,
         useCustomContent,
-        getElement: () => elementRef.current,
-        getRootMenu: () => rootMenuRef.current,
-        getMenuButton: () => menuButtonRef.current,
         ...props
     }));
 
diff --git a/components/lib/message/Message.d.ts b/components/lib/message/Message.d.ts
index 90b4be5a32..b6591f8ae0 100644
--- a/components/lib/message/Message.d.ts
+++ b/components/lib/message/Message.d.ts
@@ -6,13 +6,14 @@ type MessageContentType = React.ReactNode | ((props: MessageProps) => React.Reac
 
 type MessageTextType = React.ReactNode | ((props: MessageProps) => React.ReactNode);
 
-export interface MessageProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface MessageProps {
+    id?: string;
+    className?: string;
+    style?: object;
     text?: MessageTextType;
     severity?: MessageSeverityType;
     content?: MessageContentType;
     children?: React.ReactNode;
 }
 
-export declare class Message extends React.Component<MessageProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Message extends React.Component<MessageProps, any> { }
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index c83e50f9ce..aad5c09395 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Message = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
 
     const createContent = () => {
         if (props.content) {
@@ -25,11 +24,6 @@ export const Message = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Message.defaultProps);
     const className = classNames('p-inline-message p-component', {
         'p-inline-message-info': props.severity === 'info',
@@ -41,7 +35,7 @@ export const Message = React.memo(React.forwardRef((props, ref) => {
     const content = createContent();
 
     return (
-        <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps} role="alert" aria-live="polite">
+        <div id={props.id} className={className} style={props.style} {...otherProps} role="alert" aria-live="polite">
             {content}
         </div>
     )
diff --git a/components/lib/messages/Messages.d.ts b/components/lib/messages/Messages.d.ts
index 15adc00139..47700070d1 100644
--- a/components/lib/messages/Messages.d.ts
+++ b/components/lib/messages/Messages.d.ts
@@ -15,7 +15,10 @@ export interface MessagesMessage {
     life?: number;
 }
 
-export interface MessagesProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface MessagesProps {
+    id?: string;
+    className?: string;
+    style?: object;
     transitionOptions?: CSSTransitionProps;
     onRemove?(message: MessagesMessage): void;
     onClick?(message: MessagesMessage): void;
@@ -26,5 +29,4 @@ export declare class Messages extends React.Component<MessagesProps, any> {
     public show(message: MessagesMessageType): void;
     public clear(): void;
     public replace(message: MessagesMessageType): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
index bfb49a5f5c..f1cbec846e 100644
--- a/components/lib/messages/Messages.js
+++ b/components/lib/messages/Messages.js
@@ -8,7 +8,6 @@ let messageIdx = 0;
 
 export const Messages = React.memo(React.forwardRef((props, ref) => {
     const [messagesState, setMessagesState] = React.useState([]);
-    const elementRef = React.useRef(null);
 
     const show = (value) => {
         if (value) {
@@ -47,14 +46,13 @@ export const Messages = React.memo(React.forwardRef((props, ref) => {
         show,
         replace,
         clear,
-        getElement: () => elementRef.current,
         ...props
     }));
 
     const otherProps = ObjectUtils.findDiffKeys(props, Messages.defaultProps);
 
     return (
-        <div id={props.id} ref={elementRef} className={props.className} style={props.style} {...otherProps}>
+        <div id={props.id} className={props.className} style={props.style} {...otherProps}>
             <TransitionGroup>
                 {
                     messagesState.map((message) => {
diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts
index 0d686035d8..b192e45afe 100755
--- a/components/lib/multiselect/MultiSelect.d.ts
+++ b/components/lib/multiselect/MultiSelect.d.ts
@@ -133,10 +133,4 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
     children?: React.ReactNode;
 }
 
-export declare class MultiSelect extends React.Component<MultiSelectProps, any> { 
-    public show(): void;
-    public hide(): void;
-    public getElement(): HTMLDivElement;
-    public getInput(): HTMLInputElement;
-    public getOverlay(): HTMLElement;
-}
+export declare class MultiSelect extends React.Component<MultiSelectProps, any> { }
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index e4f5654b34..692d11cd0d 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -499,15 +499,6 @@ export const MultiSelect = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        show,
-        hide,
-        getElement: () => elementRef.current,
-        getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.d.ts b/components/lib/multistatecheckbox/MultiStateCheckbox.d.ts
index 20bbf9ccaa..2e208351bc 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.d.ts
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.d.ts
@@ -34,15 +34,19 @@ interface MultiStateCheckboxChangeParams {
     target: MultiStateCheckboxChangeTargetOptions;
 }
 
-export interface MultiStateCheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface MultiStateCheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
+    id?: string;
     value?: any;
     options?: MultiStateCheckboxOptionsType;
     optionValue?: string;
     optionLabel?: string;
     iconTemplate?: MultiStateCheckboxIconTemplateType;
     dataKey?: string;
+    style?: object;
+    className?: string;
     disabled?: boolean;
     readOnly?: boolean;
+    tabIndex?: number;
     empty?: boolean;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
@@ -50,6 +54,4 @@ export interface MultiStateCheckboxProps extends Omit<React.DetailedHTMLProps<Re
     children?: React.ReactNode;
 }
 
-export declare class MultiStateCheckbox extends React.Component<MultiStateCheckboxProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class MultiStateCheckbox extends React.Component<MultiStateCheckboxProps, any> { }
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
index ad4283e08f..ed557e8510 100644
--- a/components/lib/multistatecheckbox/MultiStateCheckbox.js
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -76,11 +76,6 @@ export const MultiStateCheckbox = React.memo(React.forwardRef((props, ref) => {
         return { option, index };
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         if (!props.empty && props.value === null) {
             toggle();
diff --git a/components/lib/orderlist/OrderList.d.ts b/components/lib/orderlist/OrderList.d.ts
index 2d38cc72c5..c95d32c714 100755
--- a/components/lib/orderlist/OrderList.d.ts
+++ b/components/lib/orderlist/OrderList.d.ts
@@ -12,11 +12,15 @@ interface OrderListFilterOptions {
     reset?: () => void;
 }
 
-export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface OrderListProps {
+    id?: string;
     value?: any[];
     header?: React.ReactNode;
+    style?: object;
+    className?: string;
     listStyle?: object;
     dragdrop?: boolean;
+    tabIndex?: number;
     dataKey?: string;
     filter?: boolean;
     filterBy?: string;
@@ -29,6 +33,4 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
     children?: React.ReactNode;
 }
 
-export declare class OrderList extends React.Component<OrderListProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class OrderList extends React.Component<OrderListProps, any> { }
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 75946681ba..0dede56021 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -146,11 +146,6 @@ export const OrderList = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useUpdateEffect(() => {
         if (reorderDirection.current) {
             updateListScroll();
diff --git a/components/lib/organizationchart/OrganizationChart.d.ts b/components/lib/organizationchart/OrganizationChart.d.ts
index 7bb0c38c12..b8624d30a4 100644
--- a/components/lib/organizationchart/OrganizationChart.d.ts
+++ b/components/lib/organizationchart/OrganizationChart.d.ts
@@ -21,8 +21,11 @@ interface OrganizationChartNodeData {
     label?: string;
 }
 
-export interface OrganizationChartProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface OrganizationChartProps {
+    id?: string;
     value?: OrganizationChartNodeData[];
+    style?: object;
+    className?: string;
     selectionMode?: OrganizationChartSelectionModeType;
     selection?: OrganizationChartSelectionNodeDataType;
     nodeTemplate?(node: OrganizationChartNodeData): React.ReactNode;
@@ -32,6 +35,4 @@ export interface OrganizationChartProps extends Omit<React.DetailedHTMLProps<Rea
     children?: React.ReactNode;
 }
 
-export declare class OrganizationChart extends React.Component<OrganizationChartProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class OrganizationChart extends React.Component<OrganizationChartProps, any> { }
diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js
index cf5bedcec9..5b192c03fa 100644
--- a/components/lib/organizationchart/OrganizationChart.js
+++ b/components/lib/organizationchart/OrganizationChart.js
@@ -3,7 +3,6 @@ import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { OrganizationChartNode } from './OrganizationChartNode';
 
 export const OrganizationChart = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const root = props.value && props.value.length ? props.value[0] : null;
 
     const onNodeClick = (event, node) => {
@@ -62,16 +61,11 @@ export const OrganizationChart = React.memo(React.forwardRef((props, ref) => {
         return findIndexInSelection(node) !== -1;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, OrganizationChart.defaultProps);
     const className = classNames('p-organizationchart p-component', props.className);
 
     return (
-        <div id={props.id} ref={elementRef} style={props.style} className={className} {...otherProps}>
+        <div id={props.id} style={props.style} className={className} {...otherProps}>
             <OrganizationChartNode node={root} nodeTemplate={props.nodeTemplate} selectionMode={props.selectionMode} onNodeClick={onNodeClick} isSelected={isSelected} />
         </div>
     )
diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
index af97b5bf4f..d21cda4907 100644
--- a/components/lib/overlaypanel/OverlayPanel.d.ts
+++ b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -11,9 +11,12 @@ interface OverlayPanelBreakpoints {
     [key: string]: string;
 }
 
-export interface OverlayPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface OverlayPanelProps {
+    id?: string;
     dismissable?: boolean;
     showCloseIcon?: boolean;
+    style?: object;
+    className?: string;
     appendTo?: OverlayPanelAppendToType;
     ariaCloseLabel?: string;
     breakpoints?: OverlayPanelBreakpoints;
@@ -27,5 +30,4 @@ export declare class OverlayPanel extends React.Component<OverlayPanelProps, any
     public toggle(event: OverlayPanelEventType, target?: OverlayPanelTargetType): void;
     public show(event: OverlayPanelEventType, target: OverlayPanelTargetType): void;
     public hide(): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
index 9824add5bd..cc23328023 100644
--- a/components/lib/overlaypanel/OverlayPanel.js
+++ b/components/lib/overlaypanel/OverlayPanel.js
@@ -177,7 +177,6 @@ export const OverlayPanel = React.forwardRef((props, ref) => {
         toggle,
         show,
         hide,
-        getElement: () => overlayRef.current,
         ...props
     }));
 
diff --git a/components/lib/paginator/Paginator.d.ts b/components/lib/paginator/Paginator.d.ts
index d0500563c9..dae19889d2 100644
--- a/components/lib/paginator/Paginator.d.ts
+++ b/components/lib/paginator/Paginator.d.ts
@@ -138,13 +138,15 @@ interface PaginatorTemplateOptions {
 
 export type PaginatorTemplate = string | PaginatorTemplateOptions;
 
-export interface PaginatorProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface PaginatorProps {
     totalRecords?: number;
     rows?: number;
     first?: number;
     pageLinkSize?: number;
     rowsPerPageOptions?: number[];
     alwaysShow?: boolean;
+    style?: object;
+    className?: string;
     template?: PaginatorTemplate;
     leftContent?: React.ReactNode;
     rightContent?: React.ReactNode;
@@ -154,6 +156,4 @@ export interface PaginatorProps extends Omit<React.DetailedHTMLProps<React.HTMLA
     children?: React.ReactNode;
 }
 
-export declare class Paginator extends React.Component<PaginatorProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Paginator extends React.Component<PaginatorProps, any> { }
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
index 6e734832b7..7e4b091848 100644
--- a/components/lib/paginator/Paginator.js
+++ b/components/lib/paginator/Paginator.js
@@ -11,7 +11,6 @@ import { PrevPageLink } from './PrevPageLink';
 import { RowsPerPageDropdown } from './RowsPerPageDropdown';
 
 export const Paginator = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const rppChanged = React.useRef(false);
     const page = Math.floor(props.first / props.rows);
     const pageCount = Math.ceil(props.totalRecords / props.rows);
@@ -96,11 +95,6 @@ export const Paginator = React.memo(React.forwardRef((props, ref) => {
         changePage(0, rows);
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useUpdateEffect(() => {
         if (!rppChanged.current) {
             changePage(0, props.rows);
@@ -197,7 +191,7 @@ export const Paginator = React.memo(React.forwardRef((props, ref) => {
         const rightElement = rightContent && <div className="p-paginator-right-content">{rightContent}</div>;
 
         return (
-            <div ref={elementRef} className={className} style={props.style} {...otherProps}>
+            <div className={className} style={props.style} {...otherProps}>
                 {leftElement}
                 {elements}
                 {rightElement}
diff --git a/components/lib/panel/Panel.d.ts b/components/lib/panel/Panel.d.ts
index cdb000e71a..1728e9e900 100644
--- a/components/lib/panel/Panel.d.ts
+++ b/components/lib/panel/Panel.d.ts
@@ -26,10 +26,13 @@ interface PanelToggleParams {
     value: boolean;
 }
 
-export interface PanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface PanelProps {
+    id?: string;
     header?: React.ReactNode;
     headerTemplate?: PanelHeaderTemplateType;
     toggleable?: boolean;
+    style?: object;
+    className?: string;
     collapsed?: boolean;
     expandIcon?: IconType<PanelProps>;
     collapseIcon?: IconType<PanelProps>;
@@ -41,7 +44,4 @@ export interface PanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
     children?: React.ReactNode;
 }
 
-export declare class Panel extends React.Component<PanelProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getContent(): HTMLDivElement;
-}
+export declare class Panel extends React.Component<PanelProps, any> { }
diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
index 8f696d20e8..64d82f87cf 100644
--- a/components/lib/panel/Panel.js
+++ b/components/lib/panel/Panel.js
@@ -44,12 +44,6 @@ export const Panel = React.forwardRef((props, ref) => {
         props.onCollapse && props.onCollapse(event);
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getContent: () => contentRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts
index 65f686d546..49516475a3 100644
--- a/components/lib/panelmenu/PanelMenu.d.ts
+++ b/components/lib/panelmenu/PanelMenu.d.ts
@@ -2,13 +2,14 @@ import * as React from 'react';
 import { MenuItem } from '../menuitem';
 import { CSSTransitionProps } from '../csstransition';
 
-export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface PanelMenuProps {
+    id?: string;
     model?: MenuItem[];
+    style?: object;
+    className?: string;
     multiple?: boolean;
     transitionOptions?: CSSTransitionProps;
     children?: React.ReactNode;
 }
 
-export declare class PanelMenu extends React.Component<PanelMenuProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class PanelMenu extends React.Component<PanelMenuProps, any> { }
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 27e096daca..a5aee3660e 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -8,7 +8,6 @@ export const PanelMenu = React.memo(React.forwardRef((props, ref) => {
     const [idState, setIdState] = React.useState(props.id);
     const [activeItemState, setActiveItemState] = React.useState(null);
     const [animationDisabled, setAnimationDisabled] = React.useState(false);
-    const elementRef = React.useRef(null);
     const headerId = idState + '_header';
     const contentId = idState + '_content';
 
@@ -73,11 +72,6 @@ export const PanelMenu = React.memo(React.forwardRef((props, ref) => {
         return activeItemState && (props.multiple ? activeItemState.indexOf(item) > -1 : activeItemState === item);
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         if (!idState) {
             setIdState(UniqueComponentId());
@@ -157,7 +151,7 @@ export const PanelMenu = React.memo(React.forwardRef((props, ref) => {
     const panels = createPanels();
 
     return (
-        <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {panels}
         </div>
     )
diff --git a/components/lib/password/Password.d.ts b/components/lib/password/Password.d.ts
index 20a07658ed..231d3f0a4e 100644
--- a/components/lib/password/Password.d.ts
+++ b/components/lib/password/Password.d.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
 import { CSSTransitionProps } from '../csstransition';
-import { InputText } from '../inputtext';
 
 type PasswordHeaderType = React.ReactNode | ((props: PasswordProps) => React.ReactNode);
 
@@ -21,6 +20,7 @@ type PasswordIconType = React.ReactNode | ((e: PasswordIconParams) => React.Reac
 type PasswordAppendToType = 'self' | HTMLElement | undefined | null;
 
 export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput'|'ref'> {
+    id?: string;
     inputId?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     promptLabel?: string;
@@ -38,6 +38,8 @@ export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputH
     icon?: PasswordIconType;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
+    style?: object;
+    className?: string;
     inputStyle?: object;
     inputClassName?: string;
     panelStyle?: object;
@@ -49,8 +51,4 @@ export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputH
     children?: React.ReactNode;
 }
 
-export declare class Password extends React.Component<PasswordProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getInput(): InputText;
-    public getOverlay(): HTMLElement;
-}
+export declare class Password extends React.Component<PasswordProps, any> { }
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
index ef06e67184..8531635995 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -208,13 +208,6 @@ export const Password = React.memo(React.forwardRef((props, ref) => {
         return 0;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getOverlay: () => overlayRef.current,
-        getInput: () => inputRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts
index 25b0c9206f..0ba49a1b63 100755
--- a/components/lib/picklist/PickList.d.ts
+++ b/components/lib/picklist/PickList.d.ts
@@ -72,6 +72,4 @@ export interface PickListProps {
     children?: React.ReactNode;
 }
 
-export declare class PickList extends React.Component<PickListProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class PickList extends React.Component<PickListProps, any> { }
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
index b676cb90fb..dfb48b396f 100644
--- a/components/lib/picklist/PickList.js
+++ b/components/lib/picklist/PickList.js
@@ -11,7 +11,6 @@ export const PickList = React.memo(React.forwardRef((props, ref) => {
     const [targetSelectionState, setTargetSelectionState] = React.useState([]);
     const [sourceFilterValueState, setSourceFilterValueState] = React.useState('');
     const [targetFilterValueState, setTargetFilterValueState] = React.useState('');
-    const elementRef = React.useRef(null);
     const sourceListElementRef = React.useRef(null);
     const targetListElementRef = React.useRef(null);
     const reorderedListElementRef = React.useRef(null);
@@ -182,11 +181,6 @@ export const PickList = React.memo(React.forwardRef((props, ref) => {
         return FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useUpdateEffect(() => {
         if (reorderedListElementRef.current) {
             handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
@@ -203,7 +197,7 @@ export const PickList = React.memo(React.forwardRef((props, ref) => {
     const targetList = getVisibleList(props.target, 'target');
 
     return (
-        <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {props.showSourceControls && <PickListControls list={props.source} selection={sourceSelection} onReorder={onSourceReorder} className="p-picklist-source-controls" dataKey={props.dataKey} />}
 
             <PickListSubList ref={sourceListElementRef} type="source" list={sourceList} selection={sourceSelection} onSelectionChange={(e) => onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange)} itemTemplate={sourceItemTemplate}
diff --git a/components/lib/progressbar/ProgressBar.d.ts b/components/lib/progressbar/ProgressBar.d.ts
index 3b0363c9b7..56bc98f323 100644
--- a/components/lib/progressbar/ProgressBar.d.ts
+++ b/components/lib/progressbar/ProgressBar.d.ts
@@ -4,16 +4,17 @@ type ProgressBarModeType = 'determinate' | 'indeterminate';
 
 type ProgressBarValueType = string | number | undefined | null;
 
-export interface ProgressBarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface ProgressBarProps {
+    id?: string;
     value?: ProgressBarValueType;
     showValue?: boolean;
     unit?: string;
+    style?: object;
+    className?: string;
     mode?: ProgressBarModeType;
     color?: string;
     displayValueTemplate?(value: ProgressBarValueType): React.ReactNode;
     children?: React.ReactNode;
 }
 
-export declare class ProgressBar extends React.Component<ProgressBarProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class ProgressBar extends React.Component<ProgressBarProps, any> { }
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index 6737c94997..e15ce6de89 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const ProgressBar = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
 
     const createLabel = () => {
         if (props.showValue && props.value != null) {
@@ -19,7 +18,7 @@ export const ProgressBar = React.memo(React.forwardRef((props, ref) => {
         const label = createLabel();
 
         return (
-            <div role="progressbar" id={props.id} ref={elementRef} className={className} style={props.style} aria-valuemin="0" aria-valuenow={props.value} aria-valuemax="100" {...otherProps}>
+            <div role="progressbar" id={props.id} className={className} style={props.style} aria-valuemin="0" aria-valuenow={props.value} aria-valuemax="100" {...otherProps}>
                 <div className="p-progressbar-value p-progressbar-value-animate" style={{ width: props.value + '%', display: 'block', backgroundColor: props.color }}></div>
                 {label}
             </div>
@@ -31,7 +30,7 @@ export const ProgressBar = React.memo(React.forwardRef((props, ref) => {
         const className = classNames('p-progressbar p-component p-progressbar-indeterminate', props.className);
 
         return (
-            <div role="progressbar" id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
+            <div role="progressbar" id={props.id} className={className} style={props.style} {...otherProps}>
                 <div className="p-progressbar-indeterminate-container">
                     <div className="p-progressbar-value p-progressbar-value-animate" style={{ backgroundColor: props.color }}></div>
                 </div>
@@ -39,11 +38,6 @@ export const ProgressBar = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     if (props.mode === 'determinate')
         return createDeterminate();
     else if (props.mode === 'indeterminate')
diff --git a/components/lib/progressspinner/ProgressSpinner.d.ts b/components/lib/progressspinner/ProgressSpinner.d.ts
index 3291df20f0..86ed5dd649 100644
--- a/components/lib/progressspinner/ProgressSpinner.d.ts
+++ b/components/lib/progressspinner/ProgressSpinner.d.ts
@@ -1,12 +1,13 @@
 import * as React from 'react';
 
-export interface ProgressSpinnerProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface ProgressSpinnerProps {
+    id?: string;
+    style?: object;
+    className?: string;
     strokeWidth?: string;
     fill?: string;
     animationDuration?: string;
     children?: React.ReactNode;
 }
 
-export declare class ProgressSpinner extends React.Component<ProgressSpinnerProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class ProgressSpinner extends React.Component<ProgressSpinnerProps, any> { }
diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js
index b01c1a054f..86dec7ac3c 100644
--- a/components/lib/progressspinner/ProgressSpinner.js
+++ b/components/lib/progressspinner/ProgressSpinner.js
@@ -2,17 +2,11 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const ProgressSpinner = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const otherProps = ObjectUtils.findDiffKeys(props, ProgressSpinner.defaultProps);
     const className = classNames('p-progress-spinner', props.className);
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     return (
-        <div id={props.id} ref={elementRef} style={props.style} className={className} role="alert" aria-busy {...otherProps}>
+        <div id={props.id} style={props.style} className={className} role="alert" aria-busy {...otherProps}>
             <svg className="p-progress-spinner-svg" viewBox="25 25 50 50" style={{ animationDuration: props.animationDuration }}>
                 <circle className="p-progress-spinner-circle" cx="50" cy="50" r="20" fill={props.fill} strokeWidth={props.strokeWidth} strokeMiterlimit="10" />
             </svg>
diff --git a/components/lib/radiobutton/RadioButton.d.ts b/components/lib/radiobutton/RadioButton.d.ts
index 8b6911bddd..1be297fe82 100644
--- a/components/lib/radiobutton/RadioButton.d.ts
+++ b/components/lib/radiobutton/RadioButton.d.ts
@@ -18,13 +18,17 @@ interface RadioButtonChangeParams {
 }
 
 export interface RadioButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    id?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     inputId?: string;
     name?: string;
     value?: any;
     checked?: boolean;
+    style?: object;
+    className?: string;
     disabled?: boolean;
     required?: boolean;
+    tabIndex?: number;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     onChange?(e: RadioButtonChangeParams): void;
@@ -33,6 +37,4 @@ export interface RadioButtonProps extends Omit<React.DetailedHTMLProps<React.Inp
 
 export declare class RadioButton extends React.Component<RadioButtonProps, any> {
     public select(e?: React.SyntheticEvent): void;
-    public getElement(): HTMLDivElement;
-    public getInput(): HTMLInputElement;
 }
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
index ff2bf24f71..37ecb5304d 100644
--- a/components/lib/radiobutton/RadioButton.js
+++ b/components/lib/radiobutton/RadioButton.js
@@ -54,8 +54,6 @@ export const RadioButton = React.memo(React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         select,
-        getElement: () => elementRef.current,
-        getInput: () => inputRef.current,
         ...props
     }));
 
diff --git a/components/lib/rating/Rating.d.ts b/components/lib/rating/Rating.d.ts
index 806a185d40..b1d10e63d2 100644
--- a/components/lib/rating/Rating.d.ts
+++ b/components/lib/rating/Rating.d.ts
@@ -16,17 +16,18 @@ interface RatingChangeParams {
 }
 
 export interface RatingProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
+    id?: string;
     value?: number;
     disabled?: boolean;
     readOnly?: boolean;
     stars?: number;
     cancel?: boolean;
+    style?: object;
+    className?: string;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     onChange?(e: RatingChangeParams): void;
     children?: React.ReactNode;
 }
 
-export declare class Rating extends React.Component<RatingProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Rating extends React.Component<RatingProps, any> { }
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 890e772bc1..2a744e121d 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -76,11 +76,6 @@ export const Rating = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const otherProps = ObjectUtils.findDiffKeys(props, Rating.defaultProps);
     const className = classNames('p-rating', {
diff --git a/components/lib/scrollpanel/ScrollPanel.d.ts b/components/lib/scrollpanel/ScrollPanel.d.ts
index 508c6a7471..d01ec9eb5e 100644
--- a/components/lib/scrollpanel/ScrollPanel.d.ts
+++ b/components/lib/scrollpanel/ScrollPanel.d.ts
@@ -1,12 +1,10 @@
 import * as React from 'react';
 
-export interface ScrollPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface ScrollPanelProps {
+    id?: string;
+    style?: object;
+    className?: string;
     children?: React.ReactNode;
 }
 
-export declare class ScrollPanel extends React.Component<ScrollPanelProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getContent(): HTMLDivElement;
-    public getXBar(): HTMLDivElement;
-    public getYBar(): HTMLDivElement;
-}
+export declare class ScrollPanel extends React.Component<ScrollPanelProps, any> { }
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
index 31da721b50..b4e4458080 100644
--- a/components/lib/scrollpanel/ScrollPanel.js
+++ b/components/lib/scrollpanel/ScrollPanel.js
@@ -150,10 +150,6 @@ export const ScrollPanel = React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         refresh,
-        getElement: () => containerRef.current,
-        getContent: () => contentRef.current,
-        getXBar: () => xBarRef.current,
-        getYBar: () => yBarRef.current,
         ...props
     }));
 
diff --git a/components/lib/scrolltop/ScrollTop.d.ts b/components/lib/scrolltop/ScrollTop.d.ts
index 3167ce9407..7689a599bc 100644
--- a/components/lib/scrolltop/ScrollTop.d.ts
+++ b/components/lib/scrolltop/ScrollTop.d.ts
@@ -19,6 +19,4 @@ export interface ScrollTopProps {
     children?: React.ReactNode;
 }
 
-export declare class ScrollTop extends React.Component<ScrollTopProps, any> { 
-    public getElement(): HTMLButtonElement;
-}
+export declare class ScrollTop extends React.Component<ScrollTopProps, any> { }
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
index 039b605748..21f56b50ab 100644
--- a/components/lib/scrolltop/ScrollTop.js
+++ b/components/lib/scrolltop/ScrollTop.js
@@ -49,11 +49,6 @@ export const ScrollTop = React.memo(React.forwardRef((props, ref) => {
         props.onHide && props.onHide();
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => scrollElementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         if (props.target === 'window')
             bindDocumentScrollListener();
diff --git a/components/lib/selectbutton/SelectButton.d.ts b/components/lib/selectbutton/SelectButton.d.ts
index 2e847b9858..956fda43cf 100644
--- a/components/lib/selectbutton/SelectButton.d.ts
+++ b/components/lib/selectbutton/SelectButton.d.ts
@@ -19,6 +19,7 @@ interface SelectButtonChangeParams {
 }
 
 export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'unselectable' | 'onChange' | 'ref'> {
+    id?: string;
     value?: any;
     options?: SelectItemOptionsType;
     optionLabel?: string;
@@ -28,6 +29,8 @@ export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.In
     multiple?: boolean;
     unselectable?: boolean;
     disabled?: boolean;
+    style?: object;
+    className?: string;
     dataKey?: string;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
@@ -37,6 +40,4 @@ export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.In
     children?: React.ReactNode;
 }
 
-export declare class SelectButton extends React.Component<SelectButtonProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class SelectButton extends React.Component<SelectButtonProps, any> { }
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index 122ae1cd56..58cc9564ae 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -90,11 +90,6 @@ export const SelectButton = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const otherProps = ObjectUtils.findDiffKeys(props, SelectButton.defaultProps);
     const className = classNames('p-selectbutton p-buttonset p-component', props.className);
diff --git a/components/lib/sidebar/Sidebar.d.ts b/components/lib/sidebar/Sidebar.d.ts
index 802fc575f9..ba0327bc43 100644
--- a/components/lib/sidebar/Sidebar.d.ts
+++ b/components/lib/sidebar/Sidebar.d.ts
@@ -7,7 +7,10 @@ type SidebarTemplateType = React.ReactNode | ((props: SidebarProps) => React.Rea
 
 type SidebarAppendToType = 'self' | HTMLElement | undefined | null;
 
-export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface SidebarProps {
+    id?: string;
+    style?: object;
+    className?: string;
     maskStyle?: object;
     maskClassName?: string;
     visible?: boolean;
@@ -28,8 +31,4 @@ export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
     children?: React.ReactNode;
 }
 
-export declare class Sidebar extends React.Component<SidebarProps, any> { 
-    public getElement(): HTMLDivElement;
-    public getMask(): HTMLElement;
-    public getCloseIcon(): HTMLButtonElement;
-}
+export declare class Sidebar extends React.Component<SidebarProps, any> { }
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
index 9af0831106..eb2a864854 100644
--- a/components/lib/sidebar/Sidebar.js
+++ b/components/lib/sidebar/Sidebar.js
@@ -85,13 +85,6 @@ export const Sidebar = React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => sidebarRef.current,
-        gteMask: () => maskRef.current,
-        getCloseIcon: () => closeIconRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         if (props.visible) {
             setMaskVisibleState(true);
diff --git a/components/lib/skeleton/Skeleton.d.ts b/components/lib/skeleton/Skeleton.d.ts
index b626c01d21..d9624bf88e 100644
--- a/components/lib/skeleton/Skeleton.d.ts
+++ b/components/lib/skeleton/Skeleton.d.ts
@@ -4,16 +4,16 @@ type SkeletonShapeType = 'rectangle' | 'circle';
 
 type SkeletonAnimationType = 'wave' | 'none';
 
-export interface SkeletonProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface SkeletonProps {
     shape?: SkeletonShapeType;
     size?: string;
     width?: string;
     height?: string;
     borderRadius?: string;
     animation?: SkeletonAnimationType;
+    style?: object;
+    className?: string;
     children?: React.ReactNode;
 }
 
-export declare class Skeleton extends React.Component<SkeletonProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Skeleton extends React.Component<SkeletonProps, any> { }
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
index 80cebc69e9..7ed47f2e96 100644
--- a/components/lib/skeleton/Skeleton.js
+++ b/components/lib/skeleton/Skeleton.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Skeleton = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const otherProps = ObjectUtils.findDiffKeys(props, Skeleton.defaultProps);
     const style = props.size ?
         { width: props.size, height: props.size, borderRadius: props.borderRadius } :
@@ -12,12 +11,7 @@ export const Skeleton = React.memo(React.forwardRef((props, ref) => {
         'p-skeleton-none': props.animation === 'none'
     }, props.className);
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
-    return <div ref={elementRef} style={style} className={className} {...otherProps}></div>
+    return <div style={style} className={className} {...otherProps}></div>
 }));
 
 Skeleton.displayName = 'Skeleton';
diff --git a/components/lib/slidemenu/SlideMenu.d.ts b/components/lib/slidemenu/SlideMenu.d.ts
index aeba7f4950..a521b75976 100644
--- a/components/lib/slidemenu/SlideMenu.d.ts
+++ b/components/lib/slidemenu/SlideMenu.d.ts
@@ -4,9 +4,12 @@ import { CSSTransitionProps } from '../csstransition';
 
 type SlideMenuAppendToType = 'self' | HTMLElement | undefined | null;
 
-export interface SlideMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface SlideMenuProps {
+    id?: string;
     model?: MenuItem[];
     popup?: boolean;
+    style?: object;
+    className?: string;
     easing?: string;
     effectDuration?: number;
     backLabel?: string;
@@ -25,5 +28,4 @@ export declare class SlideMenu extends React.Component<SlideMenuProps, any> {
     public show(event: React.SyntheticEvent): void;
     public hide(event: React.SyntheticEvent): void;
     public toggle(event: React.SyntheticEvent): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
index eca98d65a3..c263236ff0 100644
--- a/components/lib/slidemenu/SlideMenu.js
+++ b/components/lib/slidemenu/SlideMenu.js
@@ -89,7 +89,6 @@ export const SlideMenu = React.memo(React.forwardRef((props, ref) => {
         toggle,
         show,
         hide,
-        getElement: () => menuRef.current,
         ...props
     }));
 
diff --git a/components/lib/slider/Slider.d.ts b/components/lib/slider/Slider.d.ts
index 145a28d67b..baabe9f405 100644
--- a/components/lib/slider/Slider.d.ts
+++ b/components/lib/slider/Slider.d.ts
@@ -12,19 +12,21 @@ interface SliderChangeParams {
 interface SliderSlideEndParams extends SliderChangeParams { }
 
 export interface SliderProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref'> {
+    id?: string;
     value?: SliderValueType;
     min?: number;
     max?: number;
     orientation?: SliderOrientationType;
     step?: number;
     range?: boolean;
+    style?: object;
+    className?: string;
     disabled?: boolean;
+    tabIndex?: number;
     ariaLabelledBy?: string;
     onChange?(e: SliderChangeParams): void;
     onSlideEnd?(e: SliderSlideEndParams): void;
     children?: React.ReactNode;
 }
 
-export declare class Slider extends React.Component<SliderProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Slider extends React.Component<SliderProps, any> { }
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
index 675f1b835f..bae2feb530 100644
--- a/components/lib/slider/Slider.js
+++ b/components/lib/slider/Slider.js
@@ -243,11 +243,6 @@ export const Slider = React.memo(React.forwardRef((props, ref) => {
         )
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Slider.defaultProps);
     const className = classNames('p-slider p-component', props.className, {
         'p-disabled': props.disabled,
diff --git a/components/lib/speeddial/SpeedDial.d.ts b/components/lib/speeddial/SpeedDial.d.ts
index 5b62d4a43f..816af3ae3c 100644
--- a/components/lib/speeddial/SpeedDial.d.ts
+++ b/components/lib/speeddial/SpeedDial.d.ts
@@ -17,9 +17,12 @@ interface SpeedDialButtonOptions {
     visible: boolean;
 }
 
-export interface SpeedDialProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface SpeedDialProps {
+    id?: string;
     model?: MenuItem[];
     visible?: boolean;
+    style?: object;
+    className?: string;
     direction?: SpeedDialDirectionType;
     transitionDelay?: number;
     type?: SpeedDialType;
@@ -45,5 +48,4 @@ export interface SpeedDialProps extends Omit<React.DetailedHTMLProps<React.HTMLA
 export declare class SpeedDial extends React.Component<SpeedDialProps, any> {
     public show(): void;
     public hide(): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index 4675211a9a..b326176885 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -148,7 +148,6 @@ export const SpeedDial = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         show,
         hide,
-        getElement: () => elementRef.current,
         ...props
     }));
 
diff --git a/components/lib/splitbutton/SplitButton.d.ts b/components/lib/splitbutton/SplitButton.d.ts
index fba6d74c05..28f295cf0d 100644
--- a/components/lib/splitbutton/SplitButton.d.ts
+++ b/components/lib/splitbutton/SplitButton.d.ts
@@ -6,19 +6,23 @@ import { IconType, TemplateType } from '../utils';
 
 type SplitButtonAppendToType = 'self' | HTMLElement | undefined | null;
 
-export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface SplitButtonProps {
+    id?: string;
     label?: string;
     icon?: IconType<SplitButtonProps>;
     loading?: boolean;
     loadingIcon?: IconType<SplitButtonProps>;
     model?: MenuItem[];
     disabled?: boolean;
+    style?: object;
+    className?: string;
     buttonClassName?: string;
     menuStyle?: object;
     menuClassName?: string;
     menuButtonClassName?: string;
     buttonProps?: any;
     menuButtonProps?: any;
+    tabIndex?: number;
     appendTo?: SplitButtonAppendToType;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
@@ -34,5 +38,4 @@ export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTM
 export declare class SplitButton extends React.Component<SplitButtonProps, any> {
     public show(): void;
     public hide(): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
index b56e5e842e..bf716b157a 100644
--- a/components/lib/splitbutton/SplitButton.js
+++ b/components/lib/splitbutton/SplitButton.js
@@ -82,7 +82,6 @@ export const SplitButton = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         show,
         hide,
-        getElement: () => elementRef.current,
         ...props
     }));
 
diff --git a/components/lib/splitter/Splitter.d.ts b/components/lib/splitter/Splitter.d.ts
index 3334eb0dc8..71fd1354a0 100644
--- a/components/lib/splitter/Splitter.d.ts
+++ b/components/lib/splitter/Splitter.d.ts
@@ -19,7 +19,10 @@ interface SplitterPanelProps {
 
 export declare class SplitterPanel extends React.Component<SplitterPanelProps, any> { }
 
-export interface SplitterProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface SplitterProps {
+    id?: string;
+    className?: string;
+    style?: object;
     layout?: SplitterLayoutType;
     gutterSize?: number;
     stateKey?: string;
@@ -28,6 +31,4 @@ export interface SplitterProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
     children?: React.ReactNode;
 }
 
-export declare class Splitter extends React.Component<SplitterProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Splitter extends React.Component<SplitterProps, any> { }
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index 7dfc079829..82a1de5a15 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -171,11 +171,6 @@ export const Splitter = React.memo(React.forwardRef((props, ref) => {
         window.removeEventListener('touchend', onGutterTouchEnd);
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         let panelElements = [...elementRef.current.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel'));
         panelElements.map(panelElement => {
diff --git a/components/lib/steps/Steps.d.ts b/components/lib/steps/Steps.d.ts
index 1cdc5e57fd..67bb4155c5 100644
--- a/components/lib/steps/Steps.d.ts
+++ b/components/lib/steps/Steps.d.ts
@@ -7,14 +7,15 @@ interface StepsSelectParams {
     index: number;
 }
 
-export interface StepsProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface StepsProps {
+    id?: string;
     model: MenuItem[];
     activeIndex?: number;
     readOnly?: boolean;
+    style?: object;
+    className?: string;
     onSelect?(e: StepsSelectParams): void;
     children?: React.ReactNode;
 }
 
-export declare class Steps extends React.Component<StepsProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Steps extends React.Component<StepsProps, any> { }
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index 67e97846bb..617a94f8a5 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Steps = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
 
     const itemClick = (event, item, index) => {
         if (props.readOnly || item.disabled) {
@@ -89,11 +88,6 @@ export const Steps = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Steps.defaultProps);
     const className = classNames('p-steps p-component', {
         'p-readonly': props.readOnly
@@ -101,7 +95,7 @@ export const Steps = React.memo(React.forwardRef((props, ref) => {
     const items = createItems();
 
     return (
-        <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {items}
         </div>
     )
diff --git a/components/lib/styleclass/StyleClass.d.ts b/components/lib/styleclass/StyleClass.d.ts
index 4538a3f318..13da89f298 100644
--- a/components/lib/styleclass/StyleClass.d.ts
+++ b/components/lib/styleclass/StyleClass.d.ts
@@ -16,7 +16,4 @@ export interface StyleClassProps {
     children?: React.ReactNode;
 }
 
-export declare class StyleClass extends React.Component<StyleClassProps, any> { 
-    public getElement(): HTMLElement;
-    public getTarget(): HTMLElement;
-}
+export declare class StyleClass extends React.Component<StyleClassProps, any> { }
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
index 4f6f5ea1a2..0edaf26152 100644
--- a/components/lib/styleclass/StyleClass.js
+++ b/components/lib/styleclass/StyleClass.js
@@ -166,12 +166,6 @@ export const StyleClass = React.forwardRef((props, ref) => {
         return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target)
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        getTarget: () => targetRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         init();
     });
diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
index 954ade2571..ec9c233257 100644
--- a/components/lib/tabmenu/TabMenu.d.ts
+++ b/components/lib/tabmenu/TabMenu.d.ts
@@ -7,13 +7,14 @@ interface TabMenuTabChangeParams {
     index: number;
 }
 
-export interface TabMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface TabMenuProps {
+    id?: string;
     model?: MenuItem[];
     activeIndex?: number;
+    style?: object;
+    className?: string;
     onTabChange?(e: TabMenuTabChangeParams): void;
     children?: React.ReactNode;
 }
 
-export declare class TabMenu extends React.Component<TabMenuProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class TabMenu extends React.Component<TabMenuProps, any> { }
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index de215e6b0c..92cb68340f 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -4,7 +4,6 @@ import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const TabMenu = React.memo(React.forwardRef((props, ref) => {
     const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
-    const elementRef = React.useRef(null);
     const inkbarRef = React.useRef(null);
     const navRef = React.useRef(null);
     const tabsRef = React.useRef({});
@@ -50,11 +49,6 @@ export const TabMenu = React.memo(React.forwardRef((props, ref) => {
         inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px';
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         updateInkBar();
     });
@@ -110,7 +104,7 @@ export const TabMenu = React.memo(React.forwardRef((props, ref) => {
         const items = createItems();
 
         return (
-            <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
+            <div id={props.id} className={className} style={props.style} {...otherProps}>
                 <ul ref={navRef} className="p-tabmenu-nav p-reset" role="tablist">
                     {items}
                     <li ref={inkbarRef} className="p-tabmenu-ink-bar"></li>
diff --git a/components/lib/tabview/TabView.d.ts b/components/lib/tabview/TabView.d.ts
index 9a9406577b..ab64b487b5 100644
--- a/components/lib/tabview/TabView.d.ts
+++ b/components/lib/tabview/TabView.d.ts
@@ -44,8 +44,11 @@ interface TabViewTabCloseParams {
     index: number;
 }
 
-export interface TabViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface TabViewProps {
+    id?: string;
     activeIndex?: number;
+    style?: object;
+    className?: string;
     renderActiveOnly?: boolean;
     scrollable?: boolean;
     panelContainerStyle?: object;
@@ -58,5 +61,4 @@ export interface TabViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
 // tslint:disable-next-line:max-classes-per-file
 export declare class TabView extends React.Component<TabViewProps, any> {
     public reset(): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
index fc8531ccca..02329daab6 100644
--- a/components/lib/tabview/TabView.js
+++ b/components/lib/tabview/TabView.js
@@ -11,7 +11,6 @@ export const TabView = React.forwardRef((props, ref) => {
     const [forwardIsDisabledState, setForwardIsDisabledState] = React.useState(false);
     const [hiddenTabsState, setHiddenTabsState] = React.useState([]);
     const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
-    const elementRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const navRef = React.useRef(null);
     const inkbarRef = React.useRef(null);
@@ -148,7 +147,6 @@ export const TabView = React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         reset,
-        getElement: () => elementRef.current,
         ...props
     }));
 
@@ -287,7 +285,7 @@ export const TabView = React.forwardRef((props, ref) => {
     const nextButton = createNextButton();
 
     return (
-        <div ref={elementRef} className={className} {...otherProps}>
+        <div className={className} {...otherProps}>
             <div className="p-tabview-nav-container">
                 {prevButton}
                 {navigator}
diff --git a/components/lib/tag/Tag.d.ts b/components/lib/tag/Tag.d.ts
index 507ed59e7a..ba2f216306 100644
--- a/components/lib/tag/Tag.d.ts
+++ b/components/lib/tag/Tag.d.ts
@@ -3,14 +3,14 @@ import { IconType } from '../utils';
 
 type TagSeverityType = 'success' | 'info' | 'warning' | 'danger';
 
-export interface TagProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'ref'> {
+export interface TagProps {
     value?: React.ReactNode;
     severity?: TagSeverityType;
     rounded?: boolean;
     icon?: IconType<TagProps>;
+    style?: object;
+    className?: string;
     children?: React.ReactNode;
 }
 
-export declare class Tag extends React.Component<TagProps, any> { 
-    public getElement(): HTMLSpanElement;
-}
+export declare class Tag extends React.Component<TagProps, any> { }
diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js
index b88adc2d04..6e56c0bdec 100644
--- a/components/lib/tag/Tag.js
+++ b/components/lib/tag/Tag.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Tag = React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const otherProps = ObjectUtils.findDiffKeys(props, Tag.defaultProps);
     const className = classNames('p-tag p-component', {
         [`p-tag-${props.severity}`]: props.severity !== null,
@@ -10,13 +9,8 @@ export const Tag = React.forwardRef((props, ref) => {
     }, props.className);
     const icon = IconUtils.getJSXIcon(props.icon, { className: 'p-tag-icon' }, { props });
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     return (
-        <span ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <span className={className} style={props.style} {...otherProps}>
             {icon}
             <span className="p-tag-value">{props.value}</span>
             <span>{props.children}</span>
diff --git a/components/lib/terminal/Terminal.d.ts b/components/lib/terminal/Terminal.d.ts
index d67f8d3b04..cf0a4b4d0a 100644
--- a/components/lib/terminal/Terminal.d.ts
+++ b/components/lib/terminal/Terminal.d.ts
@@ -1,11 +1,12 @@
 import * as React from 'react';
 
-export interface TerminalProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface TerminalProps {
+    id?: string;
+    style?: object;
+    className?: string;
     welcomeMessage?: string;
     prompt?: string;
     children?: React.ReactNode;
 }
 
-export declare class Terminal extends React.Component<TerminalProps, any> {
-    public getElement(): HTMLDivElement;
-}
+export declare class Terminal extends React.Component<TerminalProps, any> {}
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
index a0673b0366..949b194255 100644
--- a/components/lib/terminal/Terminal.js
+++ b/components/lib/terminal/Terminal.js
@@ -54,11 +54,6 @@ export const Terminal = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     React.useEffect(() => {
         const response = (res) => {
             if (commandsState && commandsState.length > 0) {
diff --git a/components/lib/tieredmenu/TieredMenu.d.ts b/components/lib/tieredmenu/TieredMenu.d.ts
index 9fef6f53c9..f91a430e33 100644
--- a/components/lib/tieredmenu/TieredMenu.d.ts
+++ b/components/lib/tieredmenu/TieredMenu.d.ts
@@ -4,9 +4,12 @@ import { CSSTransitionProps } from '../csstransition';
 
 type TieredMenuAppendToType = 'self' | HTMLElement | undefined | null;
 
-export interface TieredMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface TieredMenuProps {
+    id?: string;
     model?: MenuItem[];
     popup?: boolean;
+    style?: object;
+    className?: string;
     autoZIndex?: boolean;
     baseZIndex?: number;
     appendTo?: TieredMenuAppendToType;
@@ -18,5 +21,4 @@ export interface TieredMenuProps extends Omit<React.DetailedHTMLProps<React.HTML
 
 export declare class TieredMenu extends React.Component<TieredMenuProps, any> {
     public toggle(event: React.SyntheticEvent): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index d1c65f95b2..c0bdd6ac65 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -74,7 +74,6 @@ export const TieredMenu = React.memo(React.forwardRef((props, ref) => {
         toggle,
         show,
         hide,
-        getElement: () => menuRef.current,
         ...props
     }));
 
diff --git a/components/lib/timeline/Timeline.d.ts b/components/lib/timeline/Timeline.d.ts
index 538c006f19..4250ecf577 100644
--- a/components/lib/timeline/Timeline.d.ts
+++ b/components/lib/timeline/Timeline.d.ts
@@ -6,17 +6,18 @@ type TimelineLayoutType = 'vertical' | 'horizontal';
 
 type TimelineTemplateType = React.ReactNode | ((item: any, index: number) => React.ReactNode);
 
-export interface TimelineProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface TimelineProps {
+    id?: string;
     value?: any[];
     align?: TimelineAlignType;
     layout?: TimelineLayoutType;
     dataKey?: string;
+    className?: string;
+    style?: object;
     opposite?: TimelineTemplateType;
     marker?: TimelineTemplateType;
     content?: TimelineTemplateType;
     children?: React.ReactNode;
 }
 
-export declare class Timeline extends React.Component<TimelineProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Timeline extends React.Component<TimelineProps, any> { }
diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js
index d916688f03..268d6d179d 100644
--- a/components/lib/timeline/Timeline.js
+++ b/components/lib/timeline/Timeline.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Timeline = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
 
     const getKey = (item, index) => {
         return props.dataKey ? ObjectUtils.resolveFieldData(item, props.dataKey) : `pr_id__${index}`;
@@ -32,11 +31,6 @@ export const Timeline = React.memo(React.forwardRef((props, ref) => {
         });
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const otherProps = ObjectUtils.findDiffKeys(props, Timeline.defaultProps);
     const className = classNames('p-timeline p-component', {
         [`p-timeline-${props.align}`]: true,
@@ -46,7 +40,7 @@ export const Timeline = React.memo(React.forwardRef((props, ref) => {
     const events = createEvents();
 
     return (
-        <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {events}
         </div>
     )
diff --git a/components/lib/toast/Toast.d.ts b/components/lib/toast/Toast.d.ts
index 71f1c56ba6..0b106e3791 100644
--- a/components/lib/toast/Toast.d.ts
+++ b/components/lib/toast/Toast.d.ts
@@ -23,7 +23,10 @@ export interface ToastMessage {
     contentStyle?: object;
 }
 
-export interface ToastProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface ToastProps {
+    id?: string;
+    className?: string;
+    style?: object;
     baseZIndex?: number;
     position?: ToastPositionType;
     transitionOptions?: CSSTransitionProps;
@@ -39,5 +42,4 @@ export declare class Toast extends React.Component<ToastProps, any> {
     public show(message: ToastMessageType): void;
     public clear(): void;
     public replace(message: ToastMessageType): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
index db26b4aac7..804ef44f73 100644
--- a/components/lib/toast/Toast.js
+++ b/components/lib/toast/Toast.js
@@ -69,7 +69,6 @@ export const Toast = React.memo(React.forwardRef((props, ref) => {
         show,
         replace,
         clear,
-        getElement: () => containerRef.current,
         ...props
     }));
 
diff --git a/components/lib/togglebutton/ToggleButton.d.ts b/components/lib/togglebutton/ToggleButton.d.ts
index ecb1f722b2..6edd1210f4 100644
--- a/components/lib/togglebutton/ToggleButton.d.ts
+++ b/components/lib/togglebutton/ToggleButton.d.ts
@@ -18,13 +18,17 @@ interface ToggleButtonChangeParams {
     target: ToggleButtonChangeTargetOptions;
 }
 
-export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
+    id?: string;
     onIcon?: IconType<ToggleButtonProps>;
     offIcon?: IconType<ToggleButtonProps>;
     onLabel?: string;
     offLabel?: string;
     iconPos?: ToggleButtonIconPositionType;
+    style?: object;
+    className?: string;
     checked?: boolean;
+    tabIndex?: number;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     onChange?(e: ToggleButtonChangeParams): void;
@@ -33,6 +37,4 @@ export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.In
     children?: React.ReactNode;
 }
 
-export declare class ToggleButton extends React.Component<ToggleButtonProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class ToggleButton extends React.Component<ToggleButtonProps, any> { }
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index 04bc2edbb7..292a689a5e 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -46,11 +46,6 @@ export const ToggleButton = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const tabIndex = !props.disabled && props.tabIndex;
     const otherProps = ObjectUtils.findDiffKeys(props, ToggleButton.defaultProps);
diff --git a/components/lib/toolbar/Toolbar.d.ts b/components/lib/toolbar/Toolbar.d.ts
index 1e360b60b0..6e8e1adfb7 100644
--- a/components/lib/toolbar/Toolbar.d.ts
+++ b/components/lib/toolbar/Toolbar.d.ts
@@ -2,12 +2,13 @@ import * as React from 'react';
 
 type ToolbarTemplateType = React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
 
-export interface ToolbarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+export interface ToolbarProps {
+    id?: string;
+    style?: object;
+    className?: string;
     left?: ToolbarTemplateType;
     right?: ToolbarTemplateType;
     children?: React.ReactNode;
 }
 
-export declare class Toolbar extends React.Component<ToolbarProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class Toolbar extends React.Component<ToolbarProps, any> { }
diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js
index db59bc7f7f..1e161c6d4e 100644
--- a/components/lib/toolbar/Toolbar.js
+++ b/components/lib/toolbar/Toolbar.js
@@ -2,19 +2,13 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Toolbar = React.memo(React.forwardRef((props, ref) => {
-    const elementRef = React.useRef(null);
     const otherProps = ObjectUtils.findDiffKeys(props, Toolbar.defaultProps);
     const toolbarClass = classNames('p-toolbar p-component', props.className);
     const left = ObjectUtils.getJSXElement(props.left, props);
     const right = ObjectUtils.getJSXElement(props.right, props);
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     return (
-        <div id={props.id} ref={elementRef} className={toolbarClass} style={props.style} role="toolbar" {...otherProps}>
+        <div id={props.id} className={toolbarClass} style={props.style} role="toolbar" {...otherProps}>
             <div className="p-toolbar-group-left">
                 {left}
             </div>
diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts
index 612f1139b3..5891dfd7ca 100644
--- a/components/lib/tooltip/Tooltip.d.ts
+++ b/components/lib/tooltip/Tooltip.d.ts
@@ -14,6 +14,4 @@ export declare class Tooltip extends React.Component<TooltipProps, any> {
     public updateTargetEvents(target: HTMLElement): void;
     public loadTargetEvents(target: HTMLElement): void;
     public unloadTargetEvents(target: HTMLElement): void;
-    public getElement(): HTMLElement;
-    public getTarget(): HTMLElement | null;
 }
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index aeec3e974e..9d3a8768df 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -440,8 +440,6 @@ export const Tooltip = React.memo(React.forwardRef((props, ref) => {
         updateTargetEvents,
         loadTargetEvents,
         unloadTargetEvents,
-        getElement: () => elementRef.current,
-        getTarget: () => currentTargetRef.current,
         ...props
     }));
 
diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index 3f1ca899cd..4071bdd11e 100644
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -155,5 +155,4 @@ export interface TreeProps {
 
 export declare class Tree extends React.Component<TreeProps, any> {
     public filter<T>(value: T): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 83bb5a179d..6dfcbea173 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -5,7 +5,6 @@ import { UITreeNode } from './UITreeNode';
 export const Tree = React.memo(React.forwardRef((props, ref) => {
     const [filterValueState, setFilterValueState] = React.useState('');
     const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys);
-    const elementRef = React.useRef(null);
     const filteredNodes = React.useRef([]);
     const dragState = React.useRef(null);
     const filterChanged = React.useRef(false);
@@ -296,7 +295,6 @@ export const Tree = React.memo(React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         filter,
-        getElement: () => elementRef.current,
         ...props
     }));
 
@@ -444,7 +442,7 @@ export const Tree = React.memo(React.forwardRef((props, ref) => {
     const footer = createFooter();
 
     return (
-        <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
+        <div id={props.id} className={className} style={props.style} {...otherProps}>
             {loader}
             {header}
             {content}
diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index fb3ff450d0..e09f6f70d9 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -71,12 +71,16 @@ interface TreeSelectFilterOptions {
 }
 
 export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'|'value' | 'ref'> {
+    id?: string;
     value?: TreeSelectSelectionKeys;
     name?: string;
+    style?: object;
+    className?: string;
     disabled?: boolean;
     options?: TreeNode[];
     scrollHeight?: string;
     placeholder?: string;
+    tabIndex?: number;
     inputId?: string;
     ariaLabel?: string;
     ariaLabelledBy?: string;
@@ -112,6 +116,4 @@ export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.Inpu
     children?: React.ReactNode;
 }
 
-export declare class TreeSelect extends React.Component<TreeSelectProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class TreeSelect extends React.Component<TreeSelectProps, any> { }
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
index b86db4f131..df64fef581 100644
--- a/components/lib/treeselect/TreeSelect.js
+++ b/components/lib/treeselect/TreeSelect.js
@@ -281,11 +281,6 @@ export const TreeSelect = React.memo(React.forwardRef((props, ref) => {
         return selectedNodes;
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     useMountEffect(() => {
         updateTreeState();
     });
diff --git a/components/lib/treetable/TreeTable.d.ts b/components/lib/treetable/TreeTable.d.ts
index e71d1d2de9..b8270523e9 100644
--- a/components/lib/treetable/TreeTable.d.ts
+++ b/components/lib/treetable/TreeTable.d.ts
@@ -176,5 +176,4 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
 
 export declare class TreeTable extends React.Component<TreeTableProps, any> {
     public filter<T>(value: T, field: string, mode: TreeTableFilterMatchModeType): void;
-    public getElement(): HTMLDivElement;
 }
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
index 05d5177ba9..0357a78d74 100644
--- a/components/lib/treetable/TreeTable.js
+++ b/components/lib/treetable/TreeTable.js
@@ -792,7 +792,6 @@ export const TreeTable = React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         filter,
-        getElement: () => elementRef.current,
         ...props
     }));
 
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
index 78d8e10dc5..5857118d17 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
@@ -16,15 +16,17 @@ interface TriStateCheckboxChangeParams {
 }
 
 export interface TriStateCheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value'> {
+    id?: string;
     value?: boolean | undefined | null;
+    style?: object;
+    className?: string;
     disabled?: boolean;
     readOnly?: boolean;
+    tabIndex?: number;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     onChange?(e: TriStateCheckboxChangeParams): void;
     children?: React.ReactNode;
 }
 
-export declare class TriStateCheckbox extends React.Component<TriStateCheckboxProps, any> { 
-    public getElement(): HTMLDivElement;
-}
+export declare class TriStateCheckbox extends React.Component<TriStateCheckboxProps, any> { }
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 85d6a77c0e..546344ff8d 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -52,11 +52,6 @@ export const TriStateCheckbox = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
-    React.useImperativeHandle(ref, () => ({
-        getElement: () => elementRef.current,
-        ...props
-    }));
-
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const otherProps = ObjectUtils.findDiffKeys(props, TriStateCheckbox.defaultProps);
     const className = classNames('p-tristatecheckbox p-checkbox p-component', props.className);