diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 99d036e11219e..01d7985b6d58f 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix `Card` comoponent to properly pass ref to root slots @chpalac ([#20644](https://github.com/microsoft/fluentui/pull/20644)) - Fix `Dropdown` by conditionally adding `aria-expanded="true"` to the button trigger @chpalac ([#20671](https://github.com/microsoft/fluentui/pull/20671)) - Optimized `felaInvokeKeyframesPlugin` to not create new objects but reuse existing one in `reduce` @mbman ([#20649](https://github.com/microsoft/fluentui/pull/20649)) +- Fix `Embed` component to properly pass ref to root slots @chpalac ([#20703](https://github.com/microsoft/fluentui/pull/20703)) - Fix `Chat` components to properly pass ref to root slots @chpalac ([#20691](https://github.com/microsoft/fluentui/pull/20691)) ### Features diff --git a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx index 0667dcc5053ea..425621805e31e 100644 --- a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx +++ b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx @@ -11,7 +11,6 @@ import { Box, BoxProps } from '../Box/Box'; import { ComponentEventHandler, ShorthandValue, FluentComponentStaticProps } from '../../types'; import { Ref } from '@fluentui/react-component-ref'; import { - ComponentWithAs, getElementType, useUnhandledProps, useFluentContext, @@ -19,6 +18,7 @@ import { useAccessibility, useTelemetry, useStyles, + ForwardRefWithAs, } from '@fluentui/react-bindings'; export interface EmbedSlotClassNames { @@ -83,7 +83,7 @@ export type EmbedStylesProps = Required> & { iframeLo * A `placeholder` slot represents an [`Image`](/components/image/definition) component, please follow recommendations from its * accessibility section. */ -export const Embed: ComponentWithAs<'span', EmbedProps> & FluentComponentStaticProps = props => { +export const Embed = (React.forwardRef((props, ref) => { const context = useFluentContext(); const { setStart, setEnd } = useTelemetry(Embed.displayName, context.telemetry); setStart(); @@ -168,6 +168,7 @@ export const Embed: ComponentWithAs<'span', EmbedProps> & FluentComponentStaticP {...getA11yProps('root', { className: classes.root, onClick: handleClick, + ref, ...unhandledProps, })} > @@ -218,7 +219,7 @@ export const Embed: ComponentWithAs<'span', EmbedProps> & FluentComponentStaticP setEnd(); return element; -}; +}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, EmbedProps> & FluentComponentStaticProps; Embed.displayName = 'Embed'; @@ -238,7 +239,7 @@ Embed.propTypes = { }; Embed.defaultProps = { - as: 'span', + as: 'span' as const, accessibility: embedBehavior, control: {}, variables: {},