chore: migrate from getNativeElementProps for getIntrinsicElementProps

change/@fluentui-react-breadcrumb-preview-11c3318a-f80b-434c-b1ae-56c133b98a7c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-card-77a7f4d8-bb8a-4180-8267-0f8ea01e3090.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-47bfdeab-adf5-4f47-8213-763737c1449f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-image-289ea7be-5325-4e6e-919e-2d79e9eeea3e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-text-e3797009-3912-4e9f-ab2e-c87aedf186da.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md

@@ -164,7 +164,7 @@ export const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref:
 export const useBreadcrumbDividerStyles_unstable: (state: BreadcrumbDividerState) => BreadcrumbDividerState;
 
 // @public
-export const useBreadcrumbItem_unstable: (props: BreadcrumbItemProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbItemState;
+export const useBreadcrumbItem_unstable: (props: BreadcrumbItemProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbItemState;
 
 // @public
 export const useBreadcrumbItemStyles_unstable: (state: BreadcrumbItemState) => BreadcrumbItemState;

packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { BreadcrumbProps, BreadcrumbState } from './Breadcrumb.types';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 
@@ -34,7 +34,7 @@ export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref<HT
       list: 'ol',
     },
     root: slot.always(
-      getNativeElementProps('nav', {
+      getIntrinsicElementProps('nav', {
         ref,
         'aria-label': props['aria-label'] ?? 'breadcrumb',
         ...(focusMode === 'arrow' ? focusAttributes : {}),

packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { BreadcrumbDividerProps, BreadcrumbDividerState } from './BreadcrumbDivider.types';
 import {
   ChevronRight20Regular,
@@ -35,7 +35,7 @@ export const useBreadcrumbDivider_unstable = (
       root: 'li',
     },
     root: slot.always(
-      getNativeElementProps('li', {
+      getIntrinsicElementProps('li', {
         ref,
         'aria-hidden': true,
         children: icon,

packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { BreadcrumbItemProps, BreadcrumbItemState } from './BreadcrumbItem.types';
 import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
 
@@ -14,7 +14,7 @@ import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
  */
 export const useBreadcrumbItem_unstable = (
   props: BreadcrumbItemProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLLIElement>,
 ): BreadcrumbItemState => {
   const { size, hasInteractiveItems } = useBreadcrumbContext_unstable();
   const { current = false, icon } = props;
@@ -25,7 +25,7 @@ export const useBreadcrumbItem_unstable = (
   return {
     components: { root: 'li', icon: 'span' },
     root: slot.always(
-      getNativeElementProps('li', {
+      getIntrinsicElementProps('li', {
         ref,
         ...props,
       }),

packages/react-components/react-card/src/components/Card/useCard.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
 
 import type { CardProps, CardState } from './Card.types';
@@ -97,7 +97,7 @@ export const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref: cardRef,
         role: 'group',
         ...focusAttributes,

packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { CardFooterProps, CardFooterState } from './CardFooter.types';
 
 /**
@@ -21,8 +21,11 @@ export const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HT
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
-        ref,
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        ref: ref as React.Ref<HTMLDivElement>,
         ...props,
       }),
       { elementType: 'div' },

packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
 import type { CardHeaderProps, CardHeaderState } from './CardHeader.types';
 import { useCardContext_unstable } from '../Card/CardContext';
 import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
@@ -80,8 +80,11 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
     components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },
 
     root: slot.always(
-      getNativeElementProps('div', {
-        ref,
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        ref: ref as React.Ref<HTMLDivElement>,
         ...props,
       }),
       { elementType: 'div' },

packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
 import { useCardContext_unstable } from '../Card/CardContext';
 import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
@@ -19,7 +19,10 @@ export const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<
   const {
     selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },
   } = useCardContext_unstable();
-  const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));
+  // FIXME:
+  // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+  // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+  const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, React.useRef<HTMLDivElement>(null));
 
   React.useEffect(() => {
     if (referenceLabel && referenceId) {
@@ -51,7 +54,7 @@ export const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref: previewRef,
         ...props,
       }),

packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';
 
@@ -19,8 +19,11 @@ export const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HT
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
-        ref,
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        ref: ref as React.Ref<HTMLDivElement>,
         ...props,
       }),
       { elementType: 'div' },

packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';
 
@@ -19,7 +19,7 @@ export const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Re
     },
 
     root: slot.always(
-      getNativeElementProps('footer', {
+      getIntrinsicElementProps('footer', {
         ref,
         ...props,
       }),

packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';
 
@@ -19,7 +19,7 @@ export const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Re
     },
 
     root: slot.always(
-      getNativeElementProps('header', {
+      getIntrinsicElementProps('header', {
         ref,
         ...props,
       }),

packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';
 
@@ -22,7 +22,7 @@ export const useDrawerHeaderNavigation_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('nav', {
+      getIntrinsicElementProps('nav', {
         ref,
         ...props,
       }),

packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '@fluentui/react-dialog';
 
 import type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';
@@ -45,7 +45,7 @@ export const useDrawerHeaderTitle_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref,
         ...props,
       }),

packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
 import { useMotion } from '@fluentui/react-motion-preview';
 
 import type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';
@@ -29,7 +29,7 @@ export const useDrawerInline_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ...props,
         ref: useMergedRefs(ref, motion.ref),
       }),

packages/react-components/react-image/src/components/Image/useImage.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { ImageProps, ImageState } from './Image.types';
 
 /**
@@ -18,7 +18,7 @@ export const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageEle
       root: 'img',
     },
     root: slot.always(
-      getNativeElementProps<ImageProps>('img', {
+      getIntrinsicElementProps('img', {
         ref,
         ...props,
       }),

packages/react-components/react-text/src/components/Text/useText.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { TextProps, TextState } from './Text.types';
 
 /**
@@ -13,7 +13,6 @@ import type { TextProps, TextState } from './Text.types';
  */
 export const useText_unstable = (props: TextProps, ref: React.Ref<HTMLElement>): TextState => {
   const { wrap, truncate, block, italic, underline, strikethrough, size, font, weight, align } = props;
-  const as = props.as ?? 'span';
 
   const state: TextState = {
     align: align ?? 'start',
@@ -30,10 +29,12 @@ export const useText_unstable = (props: TextProps, ref: React.Ref<HTMLElement>):
     components: { root: 'span' },
 
     root: slot.always(
-      getNativeElementProps(as, {
-        ref,
+      getIntrinsicElementProps('span', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLHeadingElement & HTMLPreElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        ref: ref as React.Ref<HTMLHeadingElement & HTMLPreElement>,
         ...props,
-        as,
       }),
       { elementType: 'span' },
     ),