Fix #2963: Expose ref and element (#3047)

Co-authored-by: mertsincan <[email protected]>
primefaces · Jul 18, 2022 · 2587b62 · 2587b62
1 parent 53f4375
commit 2587b62
Show file tree

Hide file tree

Showing 174 changed files with 768 additions and 336 deletions.
diff --git a/components/lib/accordion/Accordion.d.ts b/components/lib/accordion/Accordion.d.ts
@@ -26,11 +26,8 @@ interface AccordionEventParams {
     index: number;
 }
 
-export interface AccordionProps {
-    id?: string;
+export interface AccordionProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
     activeIndex?: AccordionActiveIndexType;
-    className?: string;
-    style?: object;
     multiple?: boolean;
     expandIcon?: IconType<AccordionProps>;
     collapseIcon?: IconType<AccordionProps>;
@@ -42,4 +39,6 @@ export interface AccordionProps {
 }
 
 // tslint:disable-next-line:max-classes-per-file
-export declare class Accordion extends React.Component<AccordionProps, any> { }
+export declare class Accordion extends React.Component<AccordionProps, any> { 
+    public getElement(): HTMLDivElement;
+}
diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
@@ -8,6 +8,7 @@ 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';
@@ -46,6 +47,11 @@ 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());
@@ -123,7 +129,7 @@ export const Accordion = React.forwardRef((props, ref) => {
     const tabs = createTabs();
 
     return (
-        <div id={idState} className={className} style={props.style} {...otherProps}>
+        <div id={idState} ref={elementRef} className={className} style={props.style} {...otherProps}>
             {tabs}
         </div>
     )

diff --git 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 } from '../virtualscroller';
+import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller';
 import { CSSTransitionProps } from '../csstransition';
 import { IconType } from '../utils';
 
@@ -109,4 +109,8 @@ 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
@@ -455,6 +455,10 @@ 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
@@ -20,4 +20,6 @@ export interface AvatarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttr
     children?: React.ReactNode;
 }
 
-export declare class Avatar extends React.Component<AvatarProps, any> { }
+export declare class Avatar extends React.Component<AvatarProps, any> { 
+    public getElement(): HTMLDivElement;
+}
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
@@ -2,6 +2,7 @@ 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) {
@@ -17,6 +18,11 @@ 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,
@@ -29,7 +35,7 @@ export const Avatar = React.forwardRef((props, ref) => {
     const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
     return (
-        <div className={containerClassName} style={props.style} {...otherProps}>
+        <div ref={elementRef} 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
@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-export interface AvatarGroupProps {
-    style?: object;
-    className?: string;
+export interface AvatarGroupProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
     children?: React.ReactNode;
 }
 
-export declare class AvatarGroup extends React.Component<AvatarGroupProps, any> { }
+export declare class AvatarGroup extends React.Component<AvatarGroupProps, any> { 
+    public getElement(): HTMLDivElement;
+}
diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js
@@ -2,11 +2,17 @@ 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 className={className} style={props.style} {...otherProps}>
+        <div ref={elementRef} 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
@@ -11,4 +11,6 @@ export interface BadgeProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
     children?: React.ReactNode;
 }
 
-export declare class Badge extends React.Component<BadgeProps, any> { }
+export declare class Badge extends React.Component<BadgeProps, any> {
+    public getElement(): HTMLSpanElement;
+ }
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
@@ -2,6 +2,7 @@ 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,
@@ -11,8 +12,13 @@ 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 className={className} style={props.style} {...otherProps}>
+        <span ref={elementRef} 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
@@ -2,14 +2,11 @@ import * as React from 'react';
 
 type BlockUITemplateType = React.ReactNode | ((props: BlockUIProps) => React.ReactNode);
 
-export interface BlockUIProps {
-    id?: string;
+export interface BlockUIProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
     blocked?: boolean;
     fullScreen?: boolean;
     baseZIndex?: number;
     autoZIndex?: boolean;
-    style?: object;
-    className?: string;
     template?: BlockUITemplateType;
     onBlocked?(): void;
     onUnblocked?(): void;
@@ -19,4 +16,5 @@ export interface BlockUIProps {
 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
@@ -6,6 +6,7 @@ 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 = () => {
@@ -65,6 +66,7 @@ export const BlockUI = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         block,
         unblock,
+        getElement: () => elementRef.current,
         ...props
     }));
 
@@ -91,7 +93,7 @@ export const BlockUI = React.forwardRef((props, ref) => {
     const mask = createMask();
 
     return (
-        <div id={props.id} className="p-blockui-container" {...otherProps}>
+        <div id={props.id} ref={elementRef} 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
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { MenuItem } from '../menuitem';
 
-export interface BreadCrumbProps {
-    id?: string;
+export interface BreadCrumbProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'ref'> {
     model?: MenuItem[];
     home?: MenuItem;
-    style?: object;
-    className?: string;
     children?: React.ReactNode;
 }
 
-export declare class BreadCrumb extends React.Component<BreadCrumbProps, any> { }
+export declare class BreadCrumb extends React.Component<BreadCrumbProps, any> { 
+    public getElement(): HTMLElement;
+}
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
@@ -2,6 +2,7 @@ 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) {
@@ -110,14 +111,19 @@ 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} className={className} style={props.style} aria-label="Breadcrumb" {...otherProps}>
+        <nav id={props.id} ref={elementRef} 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
@@ -18,4 +18,6 @@ export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHT
     children?: React.ReactNode;
 }
 
-export declare class Button extends React.Component<ButtonProps, any> { }
+export declare class Button extends React.Component<ButtonProps, any> { 
+    public getElement(): HTMLButtonElement;
+}
diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -38,6 +38,11 @@ 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
@@ -165,5 +165,8 @@ 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
@@ -2491,6 +2491,9 @@ 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
@@ -1,12 +1,10 @@
 import * as React from 'react';
 
-export interface CaptchaProps {
-    id?: string;
+export interface CaptchaProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
     siteKey?: string;
     theme?: string;
     type?: string;
     size?: string;
-    tabIndex?: number;
     language?: string;
     onResponse?(response: any): void;
     onExpire?(): void;
@@ -16,4 +14,5 @@ export interface CaptchaProps {
 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
@@ -83,6 +83,7 @@ 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
@@ -12,14 +12,11 @@ interface CarouselPageChangeParams {
     page: number;
 }
 
-export interface CarouselProps {
-    id?: string;
+export interface CarouselProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
     value?: any[];
     page?: number;
     header?: React.ReactNode;
     footer?: React.ReactNode;
-    style?: object;
-    className?: string;
     itemTemplate?(item: any): React.ReactNode;
     circular?: boolean;
     autoplayInterval?: number;
@@ -35,4 +32,6 @@ export interface CarouselProps {
     children?: React.ReactNode;
 }
 
-export declare class Carousel extends React.Component<CarouselProps, any> { }
+export declare class Carousel extends React.Component<CarouselProps, any> {
+    public getElement(): HTMLDivElement;
+ }
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -286,6 +286,11 @@ 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
@@ -44,4 +44,9 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
     children?: React.ReactNode;
 }
 
-export declare class CascadeSelect extends React.Component<CascadeSelectProps, any> { }
+export declare class CascadeSelect extends React.Component<CascadeSelectProps, any> { 
+    public getElement(): HTMLDivElement;
+    public getInput(): HTMLInputElement;
+    public getOverlay(): HTMLElement;
+    public getLabel(): HTMLSpanElement;
+}