Re-add a forwardRef to EuiHeaderSectionItemButton

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Fixed visual bug in drag&drop sections when nested in an popover ([#4590](https://github.com/elastic/eui/pull/4590))
 - Fixed an errant export of `EuiSideNavProps` type from JS code ([#4604](https://github.com/elastic/eui/pull/4604))
 - Fixed misaligned `EuiComboBox` options list ([#4607](https://github.com/elastic/eui/pull/4607))
+- Fixed missing `forwardRef` on `EuiHeaderSectionItemButton` ([#4631](https://github.com/elastic/eui/pull/4631))
 
 ## [`31.9.1`](https://github.com/elastic/eui/tree/v31.9.1)
 

src/components/button/button_empty/button_empty.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, Ref } from 'react';
 import classNames from 'classnames';
 
 import {
@@ -76,7 +76,9 @@ export const FLUSH_TYPES = keysOf(flushTypeToClassNameMap);
  * Extends EuiButtonContentProps which provides
  * `iconType`, `iconSide`, and `textProps`
  */
-interface CommonEuiButtonEmptyProps extends EuiButtonContentProps, CommonProps {
+export interface CommonEuiButtonEmptyProps
+  extends EuiButtonContentProps,
+    CommonProps {
   /**
    * Any of our named colors
    */
@@ -103,7 +105,7 @@ interface CommonEuiButtonEmptyProps extends EuiButtonContentProps, CommonProps {
   target?: string;
   rel?: string;
   type?: 'button' | 'submit';
-  buttonRef?: (ref: HTMLButtonElement | HTMLAnchorElement | null) => void;
+  buttonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
   /**
    * Object of props passed to the <span/> wrapping the button's content
    */
@@ -192,7 +194,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
         href={href}
         target={target}
         rel={secureRel}
-        ref={buttonRef}
+        ref={buttonRef as Ref<HTMLAnchorElement>}
         {...(rest as EuiButtonEmptyPropsForAnchor)}>
         {innerNode}
       </a>
@@ -204,7 +206,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
       disabled={buttonIsDisabled}
       className={classes}
       type={type}
-      ref={buttonRef}
+      ref={buttonRef as Ref<HTMLButtonElement>}
       aria-pressed={isSelected}
       {...(rest as EuiButtonEmptyPropsForButton)}>
       {innerNode}

src/components/header/header_section/header_section_item_button.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent } from 'react';
+import React, { forwardRef, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
 import {
@@ -39,43 +39,55 @@ export type EuiHeaderSectionItemButtonProps = EuiButtonEmptyProps & {
   notificationColor?: EuiNotificationBadgeProps['color'];
 };
 
-export const EuiHeaderSectionItemButton: FunctionComponent<EuiHeaderSectionItemButtonProps> = ({
-  children,
-  className,
-  notification,
-  notificationColor = 'accent',
-  ...rest
-}) => {
-  const classes = classNames('euiHeaderSectionItem__button', className);
+export const EuiHeaderSectionItemButton = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  PropsWithChildren<EuiHeaderSectionItemButtonProps>
+>(
+  (
+    {
+      children,
+      className,
+      notification,
+      notificationColor = 'accent',
+      ...rest
+    },
+    ref
+  ) => {
+    const classes = classNames('euiHeaderSectionItem__button', className);
 
-  let notificationBadge;
-  if (notification) {
-    if (notification === true) {
-      notificationBadge = (
-        <EuiIcon
-          className="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot"
-          color={notificationColor}
-          type="dot"
-          size="l"
-        />
-      );
-    } else {
-      notificationBadge = (
-        <EuiNotificationBadge
-          className="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
-          color={notificationColor}>
-          {notification}
-        </EuiNotificationBadge>
-      );
+    let notificationBadge;
+    if (notification) {
+      if (notification === true) {
+        notificationBadge = (
+          <EuiIcon
+            className="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot"
+            color={notificationColor}
+            type="dot"
+            size="l"
+          />
+        );
+      } else {
+        notificationBadge = (
+          <EuiNotificationBadge
+            className="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
+            color={notificationColor}>
+            {notification}
+          </EuiNotificationBadge>
+        );
+      }
     }
-  }
 
-  return (
-    <EuiButtonEmpty className={classes} color="text" {...rest}>
-      {children}
-      {notificationBadge}
-    </EuiButtonEmpty>
-  );
-};
+    return (
+      <EuiButtonEmpty
+        buttonRef={ref}
+        className={classes}
+        color="text"
+        {...rest}>
+        {children}
+        {notificationBadge}
+      </EuiButtonEmpty>
+    );
+  }
+);
 
 EuiHeaderSectionItemButton.displayName = 'EuiHeaderSectionItemButton';