microsoft · bsunderhus · Oct 4, 2023 · Oct 4, 2023
diff --git a/change/@fluentui-react-alert-b5f175b0-660c-40e1-877c-946d777ea861.json b/change/@fluentui-react-alert-b5f175b0-660c-40e1-877c-946d777ea861.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-alert",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-dialog-2bff76a3-77cd-42ce-890f-5f9d44ddba7e.json b/change/@fluentui-react-dialog-2bff76a3-77cd-42ce-890f-5f9d44ddba7e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-fa5baca7-6264-49f4-8f48-758f28624378.json b/change/@fluentui-react-menu-fa5baca7-6264-49f4-8f48-758f28624378.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-message-bar-preview-1d43edde-3f43-4e3b-a998-19e77918c3d3.json b/change/@fluentui-react-message-bar-preview-1d43edde-3f43-4e3b-a998-19e77918c3d3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-message-bar-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-migration-v0-v9-fc8df9a4-aa60-4f93-a66e-7f611757763b.json b/change/@fluentui-react-migration-v0-v9-fc8df9a4-aa60-4f93-a66e-7f611757763b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-820c0f25-dfe6-495a-a03a-25eb7cac17bd.json b/change/@fluentui-react-popover-820c0f25-dfe6-495a-a03a-25eb7cac17bd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-provider-b41a5c1b-b2f4-4358-83b5-261268772597.json b/change/@fluentui-react-provider-b41a5c1b-b2f4-4358-83b5-261268772597.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-447c32b8-7731-4fda-b176-b0c9b09e19bc.json b/change/@fluentui-react-table-447c32b8-7731-4fda-b176-b0c9b09e19bc.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tags-739e9037-f678-49d1-a096-c1dbe688c169.json b/change/@fluentui-react-tags-739e9037-f678-49d1-a096-c1dbe688c169.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-tags",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toast-b3f8099f-0f96-47a1-8fee-a825d6b6421e.json b/change/@fluentui-react-toast-b3f8099f-0f96-47a1-8fee-a825d6b6421e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toolbar-31f959e1-9905-4586-a43b-7bcb57bd05e6.json b/change/@fluentui-react-toolbar-31f959e1-9905-4586-a43b-7bcb57bd05e6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tree-4d836dca-3706-48a2-8eb1-22da9a2a82f3.json b/change/@fluentui-react-tree-4d836dca-3706-48a2-8eb1-22da9a2a82f3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Avatar } from '@fluentui/react-avatar';
 import { Button } from '@fluentui/react-button';
 import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { AlertProps, AlertState } from './Alert.types';
 
@@ -57,8 +57,11 @@ export const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>
     icon,
     intent,
     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>,
         role: defaultRole,
         children: props.children,
         ...props,

@@ -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 { DialogActionsProps, DialogActionsState } from './DialogActions.types';
 
 /**
@@ -21,8 +21,11 @@ export const useDialogActions_unstable = (
       root: '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' },

@@ -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 { DialogBodyProps, DialogBodyState } from './DialogBody.types';
 
 /**
@@ -17,8 +17,11 @@ export const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HT
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps(props.as ?? 'div', {
-        ref,
+      getIntrinsicElementProps(props.as ?? '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' },

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { DialogContentProps, DialogContentState } from './DialogContent.types';
 
 /**
@@ -20,8 +20,11 @@ export const useDialogContent_unstable = (
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps(props.as ?? 'div', {
-        ref,
+      getIntrinsicElementProps(props.as ?? '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' },

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-  getNativeElementProps,
   useEventCallback,
   useMergedRefs,
   isResolvedShorthand,
   slot,
+  getIntrinsicElementProps,
 } from '@fluentui/react-utilities';
 import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';
 import { useDialogContext_unstable } from '../../contexts';
@@ -73,15 +73,18 @@ export const useDialogSurface_unstable = (
     backdrop,
     mountNode: props.mountNode,
     root: slot.always(
-      getNativeElementProps(props.as ?? 'div', {
+      getIntrinsicElementProps('div', {
         tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150
         'aria-modal': modalType !== 'non-modal',
         role: modalType === 'alert' ? 'alertdialog' : 'dialog',
         'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
         ...props,
         ...modalAttributes,
         onKeyDown: handleKeyDown,
-        ref: useMergedRefs(ref, dialogRef),
+        // FIXME:
+        // `DialogSurfaceElement` 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: useMergedRefs(ref, dialogRef) as React.Ref<HTMLDivElement>,
       }),
       { elementType: 'div' },
     ),

@@ -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 { DialogTitleProps, DialogTitleState } from './DialogTitle.types';
 import { useDialogContext_unstable } from '../../contexts/dialogContext';
 import { Dismiss20Regular } from '@fluentui/react-icons';
@@ -16,7 +16,7 @@ import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
  * @param ref - reference to root HTMLElement of DialogTitle
  */
 export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {
-  const { as, action } = props;
+  const { action } = props;
   const modalType = useDialogContext_unstable(ctx => ctx.modalType);
   const internalStyles = useDialogTitleInternalStyles();
 
@@ -26,7 +26,7 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<
       action: 'div',
     },
     root: slot.always(
-      getNativeElementProps(as ?? 'h2', {
+      getIntrinsicElementProps('h2', {
         ref,
         id: useDialogContext_unstable(ctx => ctx.dialogTitleId),
         ...props,

@@ -1,4 +1,4 @@
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 import type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';
 
@@ -11,11 +11,14 @@ export const useMenuDivider_unstable = (props: MenuDividerProps, ref: React.Ref<
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         role: 'presentation',
         'aria-hidden': true,
         ...props,
-        ref,
+        // 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>,
       }),
       { elementType: 'div' },
     ),

@@ -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 { MenuGroupProps, MenuGroupState } from './MenuGroup.types';
 
 /**
@@ -13,8 +13,11 @@ export function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTML
       root: '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>,
         'aria-labelledby': headerId,
         role: 'group',
         ...props,

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';
 
 /**
@@ -17,8 +17,11 @@ export function useMenuGroupHeader_unstable(
       root: '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>,
         id,
         ...props,
       }),

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEventCallback, useMergedRefs, getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useCharacterSearch } from './useCharacterSearch';
 import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
@@ -13,7 +13,12 @@ import {
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import type { MenuItemProps, MenuItemState } from './MenuItem.types';
-import { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';
+import {
+  ARIAButtonElement,
+  ARIAButtonElementIntersection,
+  ARIAButtonProps,
+  useARIAButtonProps,
+} from '@fluentui/react-aria';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 
 const ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
@@ -47,9 +52,9 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
       secondaryContent: 'span',
     },
     root: slot.always(
-      getNativeElementProps(
+      getIntrinsicElementProps(
         as,
-        useARIAButtonProps(as, {
+        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {
           role: 'menuitem',
           ...props,
           disabled: false,

@@ -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 { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';
 import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
 import { MenuItemProps } from '../MenuItem/MenuItem.types';
@@ -26,7 +26,7 @@ export const useMenuItemLink_unstable = (
       root: 'a',
     },
     root: slot.always(
-      getNativeElementProps('a', {
+      getIntrinsicElementProps('a', {
         ref,
         role: 'menuitem',
         ...props,

@@ -3,7 +3,7 @@ import {
   useMergedRefs,
   useEventCallback,
   useControllableState,
-  getNativeElementProps,
+  getIntrinsicElementProps,
   slot,
 } from '@fluentui/react-utilities';
 import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
@@ -110,8 +110,11 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
-        ref: useMergedRefs(ref, innerRef),
+      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: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,
         role: 'menu',
         'aria-labelledby': menuContext.triggerId,
         ...focusAttributes,