chore: migrate from getNativeElementProps to getIntrinsicElementProps

change/@fluentui-react-accordion-da96054b-7136-42a7-ac6d-414fea0b6b65.json

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

change/@fluentui-react-avatar-4ba7a74c-8fd9-44bb-842a-1dd69086c3ce.json

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

change/@fluentui-react-badge-d6fb089f-2386-424d-8ce1-027679d56a71.json

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

change/@fluentui-react-button-135115d3-b8e1-4480-b943-58134a7abc7e.json

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

change/@fluentui-react-combobox-e9f8e327-18b2-47c7-b98b-ba6b97f6c49a.json

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

change/@fluentui-react-divider-3c54f6d9-b3ba-440e-857b-c8a98694f6b0.json

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

change/@fluentui-react-field-dfb42534-33af-44e2-8b87-45c79ff3f2ea.json

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

change/@fluentui-react-infobutton-f34028f8-860a-4867-a737-9b01cd3ebd32.json

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

change/@fluentui-react-label-c4aabe5a-88e4-4190-8dd7-c53dbcee2a12.json

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

change/@fluentui-react-link-dff9f9ba-59f5-49e9-a035-2aaf6b0094a6.json

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

change/@fluentui-react-persona-95cb7b00-21a8-4ad7-bda2-73f1c1a72367.json

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

change/@fluentui-react-progress-035327cf-4f4c-4517-afa1-a772b600b45f.json

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

change/@fluentui-react-radio-28fde45f-831b-4515-8b37-74d2f84083fd.json

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

change/@fluentui-react-skeleton-85e30e6f-c1a8-452b-8f4b-07ce412ea7d7.json

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

change/@fluentui-react-spinner-ed893b27-4bbc-4df0-8f05-9c930c0b5f5e.json

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

change/@fluentui-react-tabs-9716ccb1-4434-4f71-a340-334312d84b0b.json

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

packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
 import type { AccordionProps, AccordionState } from './Accordion.types';
 import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
@@ -49,10 +49,13 @@ export const useAccordion_unstable = <Value = AccordionItemValue>(
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ...props,
         ...(navigation ? arrowNavigationProps : undefined),
-        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' },
     ),

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, isResolvedShorthand, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, isResolvedShorthand, useEventCallback, slot } from '@fluentui/react-utilities';
 import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';
 import type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
@@ -16,7 +16,7 @@ export const useAccordionHeader_unstable = (
   props: AccordionHeaderProps,
   ref: React.Ref<HTMLElement>,
 ): AccordionHeaderState => {
-  const { as, icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;
+  const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;
   const { value, disabled, open } = useAccordionItemContext_unstable();
   const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);
 
@@ -51,8 +51,11 @@ export const useAccordionHeader_unstable = (
       icon: 'div',
     },
     root: slot.always(
-      getNativeElementProps(as || '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-accordion/src/components/AccordionItem/useAccordionItem.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
 import type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';
 import type { AccordionToggleEvent } from '../Accordion/Accordion.types';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
@@ -27,6 +27,15 @@ export const useAccordionItem_unstable = (
     components: {
       root: 'div',
     },
-    root: slot.always(getNativeElementProps('div', { ref, ...props }), { elementType: 'div' }),
+    root: slot.always(
+      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-accordion/src/components/AccordionPanel/useAccordionPanel.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 { useTabsterAttributes } from '@fluentui/react-tabster';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 import type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';
@@ -24,8 +24,11 @@ export const useAccordionPanel_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,
         ...(navigation && focusableProps),
       }),

packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
 import { getInitials } from '../../utils/index';
 import type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';
 import { PersonRegular } from '@fluentui/react-icons';
@@ -33,7 +33,7 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElemen
   const baseId = useId('avatar-');
 
   const root: AvatarState['root'] = slot.always(
-    getNativeElementProps(
+    getIntrinsicElementProps(
       'span',
       {
         role: 'img',

packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.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 { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';
 
 /**
@@ -15,12 +15,15 @@ export const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<
   const { layout = 'spread', size = defaultAvatarGroupSize } = props;
 
   const root = slot.always(
-    getNativeElementProps(
+    getIntrinsicElementProps(
       'div',
       {
         role: 'group',
         ...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>,
       },
       ['size'],
     ),

packages/react-components/react-badge/src/components/Badge/useBadge.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 { BadgeProps, BadgeState } from './Badge.types';
 
 /**
@@ -25,8 +25,11 @@ export const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>
       icon: 'span',
     },
     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-button/etc/react-button.api.md

@@ -106,7 +106,7 @@ export const SplitButton: ForwardRefComponent<SplitButtonProps>;
 export const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
 
 // @public (undocumented)
-export type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
+export type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root' | 'as'> & Omit<MenuButtonProps, 'root' | 'as'>;
 
 // @public (undocumented)
 export type SplitButtonSlots = {

packages/react-components/react-button/src/components/Button/useButton.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useButtonContext } from '../../contexts/ButtonContext';
 import type { ButtonProps, ButtonState } from './Button.types';
 
@@ -36,7 +36,7 @@ export const useButton_unstable = (
     iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition
     components: { root: 'button', icon: 'span' },
     root: slot.always(
-      getNativeElementProps(
+      getIntrinsicElementProps(
         as,
         useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {
           required: true,

packages/react-components/react-button/src/components/SplitButton/SplitButton.types.ts

@@ -21,8 +21,8 @@ export type SplitButtonSlots = {
 };
 
 export type SplitButtonProps = ComponentProps<SplitButtonSlots> &
-  Omit<ButtonProps, 'root'> &
-  Omit<MenuButtonProps, 'root'>;
+  Omit<ButtonProps, 'root' | 'as'> &
+  Omit<MenuButtonProps, 'root' | 'as'>;
 
 export type SplitButtonState = ComponentState<SplitButtonSlots> &
   Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &

packages/react-components/react-button/src/components/SplitButton/useSplitButton.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 { Button } from '../Button/Button';
 import { MenuButton } from '../MenuButton/MenuButton';
 import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
@@ -26,7 +26,6 @@ export const useSplitButton_unstable = (
     shape = 'rounded',
     size = 'medium',
   } = props;
-
   const baseId = useId('splitButton-');
 
   const menuButtonShorthand = slot.optional(menuButton, {
@@ -77,7 +76,7 @@ export const useSplitButton_unstable = (
     shape,
     size, // Slots definition
     components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },
-    root: slot.always(getNativeElementProps('div', { ref, ...props }), { elementType: 'div' }),
+    root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),
     menuButton: menuButtonShorthand,
     primaryActionButton: primaryActionButtonShorthand,
   };

packages/react-components/react-combobox/src/components/Listbox/useListbox.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  getNativeElementProps,
+  getIntrinsicElementProps,
   mergeCallbacks,
   useEventCallback,
   useMergedRefs,
@@ -94,8 +94,11 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
       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>,
         role: multiselect ? 'menu' : 'listbox',
         'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,
         'aria-multiselectable': multiselect,

packages/react-components/react-combobox/src/components/Option/useOption.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useContextSelector } from '@fluentui/react-context-selector';
 import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
@@ -116,9 +116,12 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElemen
       checkIcon: 'span',
     },
     root: slot.always(
-      getNativeElementProps('div', {
-        ref: useMergedRefs(ref, optionRef),
-        'aria-disabled': disabled ? 'true' : undefined,
+      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, optionRef) as React.Ref<HTMLDivElement>,
+        'aria-disabled': disabled ? ('true' as const) : undefined,
         id,
         ...semanticProps,
         ...props,