Revert "Fix #2963: Expose ref and element (#3047)" (#3075)

This reverts commit 2587b62.

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> { }

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>
     )

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;
 }

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
     }));
 

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> { }

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>

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> { }

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>
     )

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> { }

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>
     )

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;
 }

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>

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> { }

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,19 +110,14 @@ 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();
     const items = createMenuitems();
     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}

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> { }

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);

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;
 }

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
     }));
 

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;
 }

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
     }));
 

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> { }

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();

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> { }