react-accordion: Adjust signature to use ForwardRefComponent (#20080)

* Adds ForwardRefComponent to components declaration

* Change files

change/@fluentui-react-accordion-44b1db2e-1b65-415c-9339-a95e90fc3a8f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds ForwardRefComponent to components declaration",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-accordion/src/components/Accordion/Accordion.tsx

@@ -3,15 +3,18 @@ import { renderAccordion } from './renderAccordion';
 import { useAccordion } from './useAccordion';
 import { useAccordionContextValues } from './useAccordionContextValues';
 import type { AccordionProps } from './Accordion.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled Accordion, using the `useAccordion` and `useAccordionStyles` hooks.
  */
-export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {
-  const state = useAccordion(props, ref);
-  const contextValues = useAccordionContextValues(state);
+export const Accordion: ForwardRefComponent<AccordionProps> = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (props, ref) => {
+    const state = useAccordion(props, ref);
+    const contextValues = useAccordionContextValues(state);
 
-  return renderAccordion(state, contextValues);
-});
+    return renderAccordion(state, contextValues);
+  },
+);
 
 Accordion.displayName = 'Accordion';

packages/react-accordion/src/components/AccordionHeader/AccordionHeader.tsx

@@ -4,11 +4,12 @@ import { renderAccordionHeader } from './renderAccordionHeader';
 import { useAccordionHeaderStyles } from './useAccordionHeaderStyles';
 import { useAccordionHeaderContextValues } from './useAccordionHeaderContextValues';
 import type { AccordionHeaderProps } from './AccordionHeader.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled AccordionHeader, using the `useAccordionHeader` and `useAccordionHeaderStyles` hooks.
  */
-export const AccordionHeader = React.forwardRef<HTMLDivElement, AccordionHeaderProps>((props, ref) => {
+export const AccordionHeader: ForwardRefComponent<AccordionHeaderProps> = React.forwardRef((props, ref) => {
   const state = useAccordionHeader(props, ref);
   const contextValues = useAccordionHeaderContextValues(state);
 

packages/react-accordion/src/components/AccordionHeader/AccordionHeaderExpandIcon.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useAccordionHeaderContext } from './AccordionHeaderContext';
 import type { AccordionHeaderContextValue } from './AccordionHeader.types';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ForwardRefComponent, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 
 export type AccordionHeaderExpandIconProps = IntrinsicShorthandProps<'span'>;
 
-export const AccordionHeaderExpandIcon = React.forwardRef<HTMLSpanElement, AccordionHeaderExpandIconProps>(
+export const AccordionHeaderExpandIcon: ForwardRefComponent<AccordionHeaderExpandIconProps> = React.forwardRef(
   ({ children, ...rest }, ref) => {
     const { open, expandIconPosition } = useAccordionHeaderContext();
     return (

packages/react-accordion/src/components/AccordionItem/AccordionItem.tsx

@@ -3,11 +3,12 @@ import { useAccordionItem } from './useAccordionItem';
 import { useAccordionItemContextValues } from './useAccordionItemContextValues';
 import { renderAccordionItem } from './renderAccordionItem';
 import type { AccordionItemProps } from './AccordionItem.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled AccordionItem, using the `useAccordionItem` and `useAccordionItemStyles` hooks.
  */
-export const AccordionItem = React.forwardRef<HTMLElement, AccordionItemProps>((props, ref) => {
+export const AccordionItem: ForwardRefComponent<AccordionItemProps> = React.forwardRef((props, ref) => {
   const state = useAccordionItem(props, ref);
   const contextValues = useAccordionItemContextValues(state);
 

packages/react-accordion/src/components/AccordionPanel/AccordionPanel.tsx

@@ -3,11 +3,12 @@ import { useAccordionPanel } from './useAccordionPanel';
 import { renderAccordionPanel } from './renderAccordionPanel';
 import { useAccordionPanelStyles } from './useAccordionPanelStyles';
 import type { AccordionPanelProps } from './AccordionPanel.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
  * Define a styled AccordionPanel, using the `useAccordionPanel` and `useAccordionPanelStyles` hooks.
  */
-export const AccordionPanel = React.forwardRef<HTMLElement, AccordionPanelProps>((props, ref) => {
+export const AccordionPanel: ForwardRefComponent<AccordionPanelProps> = React.forwardRef((props, ref) => {
   const state = useAccordionPanel(props, ref);
 
   useAccordionPanelStyles(state);