fix(Label, Drawer): add ref forwarding

packages/react-core/src/components/Drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-import { createContext, useRef } from 'react';
+import { createContext, forwardRef, useImperativeHandle, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { useOUIAProps, OUIAProps } from '../../helpers';
@@ -31,6 +31,8 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -59,7 +61,7 @@ export const DrawerContext = createContext<Partial<DrawerContextProps>>({
   isViewport: false
 });
 
-export const Drawer: React.FunctionComponent<DrawerProps> = ({
+const DrawerBase: React.FunctionComponent<DrawerProps> = ({
   className = '',
   children,
   isExpanded = false,
@@ -69,13 +71,15 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isStatic = false,
   position = 'end',
   onExpand = () => {},
+  innerRef,
   ouiaId,
   ouiaSafe = true,
   ...props
 }: DrawerProps) => {
   const ouiaProps = useOUIAProps(Drawer.displayName, ouiaId, ouiaSafe);
   const drawerRef = useRef<HTMLDivElement>(undefined);
   const drawerContentRef = useRef<HTMLDivElement>(undefined);
+  useImperativeHandle(innerRef, () => drawerRef.current);
 
   return (
     <DrawerContext.Provider
@@ -102,4 +106,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
     </DrawerContext.Provider>
   );
 };
+export const Drawer = forwardRef((props: DrawerProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerBase innerRef={ref} {...props} />
+));
 Drawer.displayName = 'Drawer';

packages/react-core/src/components/Drawer/DrawerActions.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 
@@ -6,15 +7,21 @@ export interface DrawerActionsProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Actions to be rendered in the panel head. */
   children?: React.ReactNode;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const DrawerActions: React.FunctionComponent<DrawerActionsProps> = ({
+const DrawerActionsBase: React.FunctionComponent<DrawerActionsProps> = ({
   className = '',
   children,
+  innerRef,
   ...props
 }: DrawerActionsProps) => (
-  <div className={css(styles.drawerActions, className)} {...props}>
+  <div className={css(styles.drawerActions, className)} ref={innerRef} {...props}>
     {children}
   </div>
 );
+export const DrawerActions = forwardRef((props: DrawerActionsProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerActionsBase innerRef={ref} {...props} />
+));
 DrawerActions.displayName = 'DrawerActions';

packages/react-core/src/components/Drawer/DrawerCloseButton.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { Button, ButtonProps } from '../Button';
@@ -10,22 +11,25 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
   onClose?: () => void;
   /** Accessible label for the drawer close button */
   'aria-label'?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
   /** Additional properties spread to the close button */
   buttonProps?: Omit<ButtonProps, 'onClick'>;
 }
 
-export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
+const DrawerCloseButtonBase: React.FunctionComponent<DrawerCloseButtonProps> = ({
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = 'Close drawer panel',
   buttonProps,
+  innerRef,
   ...props
 }: DrawerCloseButtonProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { onClick: _onClick, ...restButtonProps } = (buttonProps ?? {}) as ButtonProps;
 
   return (
-    <div className={css(styles.drawerClose, className)} {...props}>
+    <div className={css(styles.drawerClose, className)} ref={innerRef} {...props}>
       <Button
         variant="plain"
         onClick={onClose}
@@ -36,4 +40,7 @@ export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps>
     </div>
   );
 };
+export const DrawerCloseButton = forwardRef((props: DrawerCloseButtonProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerCloseButtonBase innerRef={ref} {...props} />
+));
 DrawerCloseButton.displayName = 'DrawerCloseButton';

packages/react-core/src/components/Drawer/DrawerContent.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { forwardRef, useContext, useImperativeHandle } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerMain } from './DrawerMain';
@@ -19,16 +19,20 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
   colorVariant?: DrawerContentColorVariant | 'default' | 'primary' | 'secondary';
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
+const DrawerContentBase: React.FunctionComponent<DrawerContentProps> = ({
   className,
   children,
   panelContent,
   colorVariant = DrawerContentColorVariant.default,
+  innerRef,
   ...props
 }: DrawerContentProps) => {
   const { drawerContentRef } = useContext(DrawerContext);
+  useImperativeHandle(innerRef, () => drawerContentRef.current);
 
   return (
     <DrawerMain>
@@ -48,4 +52,7 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
     </DrawerMain>
   );
 };
+export const DrawerContent = forwardRef((props: DrawerContentProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerContentBase innerRef={ref} {...props} />
+));
 DrawerContent.displayName = 'DrawerContent';

packages/react-core/src/components/Drawer/DrawerContentBody.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 
@@ -8,16 +9,22 @@ export interface DrawerContentBodyProps extends React.HTMLProps<HTMLDivElement>
   children?: React.ReactNode;
   /** Indicates if there should be padding around the drawer content body */
   hasPadding?: boolean;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const DrawerContentBody: React.FunctionComponent<DrawerContentBodyProps> = ({
+const DrawerContentBodyBase: React.FunctionComponent<DrawerContentBodyProps> = ({
   className = '',
   children,
   hasPadding = false,
+  innerRef,
   ...props
 }: DrawerContentBodyProps) => (
-  <div className={css(styles.drawerBody, hasPadding && styles.modifiers.padding, className)} {...props}>
+  <div className={css(styles.drawerBody, hasPadding && styles.modifiers.padding, className)} ref={innerRef} {...props}>
     {children}
   </div>
 );
+export const DrawerContentBody = forwardRef((props: DrawerContentBodyProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerContentBodyBase innerRef={ref} {...props} />
+));
 DrawerContentBody.displayName = 'DrawerContentBody';

packages/react-core/src/components/Drawer/DrawerHead.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 
@@ -6,15 +7,21 @@ export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content to be rendered in the drawer head */
   children?: React.ReactNode;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
+const DrawerHeadBase: React.FunctionComponent<DrawerHeadProps> = ({
   className = '',
   children,
+  innerRef,
   ...props
 }: DrawerHeadProps) => (
-  <div className={css(styles.drawerHead, className)} {...props}>
+  <div className={css(styles.drawerHead, className)} ref={innerRef} {...props}>
     {children}
   </div>
 );
+export const DrawerHead = forwardRef((props: DrawerHeadProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerHeadBase innerRef={ref} {...props} />
+));
 DrawerHead.displayName = 'DrawerHead';

packages/react-core/src/components/Drawer/DrawerMain.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 
@@ -6,15 +7,21 @@ export interface DrawerMainProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content to be rendered in the drawer main wrapper*/
   children?: React.ReactNode;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const DrawerMain: React.FunctionComponent<DrawerMainProps> = ({
+const DrawerMainBase: React.FunctionComponent<DrawerMainProps> = ({
   className = '',
   children,
+  innerRef,
   ...props
 }: DrawerMainProps) => (
-  <div className={css(styles.drawerMain, className)} {...props}>
+  <div className={css(styles.drawerMain, className)} ref={innerRef} {...props}>
     {children}
   </div>
 );
+export const DrawerMain = forwardRef((props: DrawerMainProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerMainBase innerRef={ref} {...props} />
+));
 DrawerMain.displayName = 'DrawerMain';

packages/react-core/src/components/Drawer/DrawerPanelBody.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 
@@ -8,16 +9,26 @@ export interface DrawerPanelBodyProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Indicates if there should be no padding around the drawer panel body */
   hasNoPadding?: boolean;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const DrawerPanelBody: React.FunctionComponent<DrawerPanelBodyProps> = ({
+const DrawerPanelBodyBase: React.FunctionComponent<DrawerPanelBodyProps> = ({
   className = '',
   children,
   hasNoPadding = false,
+  innerRef,
   ...props
 }: DrawerPanelBodyProps) => (
-  <div className={css(styles.drawerBody, hasNoPadding && styles.modifiers.noPadding, className)} {...props}>
+  <div
+    className={css(styles.drawerBody, hasNoPadding && styles.modifiers.noPadding, className)}
+    ref={innerRef}
+    {...props}
+  >
     {children}
   </div>
 );
+export const DrawerPanelBody = forwardRef((props: DrawerPanelBodyProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerPanelBodyBase innerRef={ref} {...props} />
+));
 DrawerPanelBody.displayName = 'DrawerPanelBody';

packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { forwardRef, Fragment, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
@@ -70,11 +70,13 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
   /** Adds and customizes a focus trap on the drawer panel content. */
   focusTrap?: DrawerPanelFocusTrapObject;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 let isResizing: boolean = null;
 let newSize: number = 0;
 
-export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps> = ({
+const DrawerPanelContentBase: React.FunctionComponent<DrawerPanelContentProps> = ({
   className,
   id,
   children,
@@ -94,11 +96,13 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   colorVariant = DrawerColorVariant.default,
   focusTrap,
   style,
+  innerRef,
   ...props
 }: DrawerPanelContentProps) => {
   const panelId = useSSRSafeId('pf-drawer-panel-');
   const panel = useRef<HTMLDivElement>(undefined);
   const splitterRef = useRef<HTMLDivElement>(undefined);
+  useImperativeHandle(innerRef, () => panel.current);
   const [separatorValue, setSeparatorValue] = useState(0);
   const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline, isViewport } =
     useContext(DrawerContext);
@@ -443,4 +447,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     </Component>
   );
 };
+export const DrawerPanelContent = forwardRef((props: DrawerPanelContentProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerPanelContentBase innerRef={ref} {...props} />
+));
 DrawerPanelContent.displayName = 'DrawerPanelContent';

packages/react-core/src/components/Drawer/DrawerPanelDescription.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 
@@ -8,15 +9,23 @@ export interface DrawerPanelDescriptionProps extends React.HTMLProps<HTMLDivElem
   className?: string;
   /** Content to be rendered in the drawer description */
   children: React.ReactNode;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
-export const DrawerPanelDescription: React.FunctionComponent<DrawerPanelDescriptionProps> = ({
+const DrawerPanelDescriptionBase: React.FunctionComponent<DrawerPanelDescriptionProps> = ({
   className,
   children,
+  innerRef,
   ...props
 }: DrawerPanelDescriptionProps) => (
-  <div className={css(styles.drawerDescription, className)} {...props}>
+  <div className={css(styles.drawerDescription, className)} ref={innerRef} {...props}>
     {children}
   </div>
 );
+export const DrawerPanelDescription = forwardRef(
+  (props: DrawerPanelDescriptionProps, ref: React.Ref<HTMLDivElement>) => (
+    <DrawerPanelDescriptionBase innerRef={ref} {...props} />
+  )
+);
 DrawerPanelDescription.displayName = 'DrawerPanelDescription';

packages/react-core/src/components/Drawer/DrawerSection.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant } from './Drawer';
@@ -12,14 +13,17 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
    * The `no-background` value is deprecated; use the `isPlain` prop instead.
    */
   colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
   /** @beta Flag indicating that the drawer section should use plain styles. */
   isPlain?: boolean;
 }
 
-export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
+const DrawerSectionBase: React.FunctionComponent<DrawerSectionProps> = ({
   className = '',
   children,
   colorVariant = DrawerColorVariant.default,
+  innerRef,
   isPlain = false,
   ...props
 }: DrawerSectionProps) => (
@@ -31,9 +35,13 @@ export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
       colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
       className
     )}
+    ref={innerRef}
     {...props}
   >
     {children}
   </div>
 );
+export const DrawerSection = forwardRef((props: DrawerSectionProps, ref: React.Ref<HTMLDivElement>) => (
+  <DrawerSectionBase innerRef={ref} {...props} />
+));
 DrawerSection.displayName = 'DrawerSection';