chore(teams-prg): migrate to new slot API

change/@fluentui-react-alert-61781af0-5ea0-4569-bd87-13d37f73869f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-alert",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-aria-22a5f6b5-5e23-4f90-b7b6-3590b40786ff.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-aria",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-178ce7cc-aeca-4d57-bae7-35afa80be528.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-eda9498a-ccb7-4559-9bbb-2b6ce1186669.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-menu",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-39fbdd73-bbb4-4898-9e25-6fa14d31f2a7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-popover",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-provider-9db380cf-70fa-4d6f-aa83-dffdcae2bc9f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-provider",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-e881a772-74c4-4ad6-9d3d-b6b1e3ee7871.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-table",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tags-preview-4dfc5e7a-82b9-4ac2-b311-b0f5fda34e8f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-8c60c603-cb37-4d04-b4f4-95c56df68692.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-toast",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toolbar-09ddf89b-6fb5-4b88-b5d8-ddd13edcbb1d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-decc7a8b-7877-466c-b303-08df94b48d45.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore(teams-prg): migrate to new slot API",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-alert/src/components/Alert/renderAlert.tsx

@@ -2,19 +2,19 @@
 /** @jsx createElement */
 
 import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 
 import type { AlertState, AlertSlots } from './Alert.types';
 
 export const renderAlert_unstable = (state: AlertState) => {
-  const { slots, slotProps } = getSlotsNext<AlertSlots>(state);
+  assertSlots<AlertSlots>(state);
 
   return (
-    <slots.root {...slotProps.root}>
-      {slots.icon && <slots.icon {...slotProps.icon} />}
-      {slots.avatar && <slots.avatar {...slotProps.avatar} />}
-      {slotProps.root.children}
-      {slots.action && <slots.action {...slotProps.action} />}
-    </slots.root>
+    <state.root>
+      {state.icon && <state.icon />}
+      {state.avatar && <state.avatar />}
+      {state.root.children}
+      {state.action && <state.action />}
+    </state.root>
   );
 };

packages/react-components/react-alert/src/components/Alert/useAlert.tsx

@@ -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, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 
 import type { AlertProps, AlertState } from './Alert.types';
 
@@ -39,36 +39,31 @@ export const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>
       break;
   }
 
-  const action = resolveShorthand(props.action, { defaultProps: { appearance: 'transparent' } });
-  const avatar = resolveShorthand(props.avatar);
+  const action = slot.optional(props.action, { defaultProps: { appearance: 'transparent' }, elementType: Button });
+  const avatar = slot.optional(props.avatar, { elementType: Avatar });
   let icon;
-  /** Avatar prop takes precedence over the icon or intent prop */
-  if (!avatar) {
-    icon = resolveShorthand(props.icon, {
-      defaultProps: {
-        children: defaultIcon,
-      },
-      required: !!props.intent,
+  /** Avatar prop takes precedence over the icon or intent prop */ if (!avatar) {
+    icon = slot.optional(props.icon, {
+      defaultProps: { children: defaultIcon },
+      renderByDefault: !!props.intent,
+      elementType: 'span',
     });
   }
-
   return {
     action,
     appearance,
     avatar,
-    components: {
-      root: 'div',
-      icon: 'span',
-      action: Button,
-      avatar: Avatar,
-    },
+    components: { root: 'div', icon: 'span', action: Button, avatar: Avatar },
     icon,
     intent,
-    root: getNativeElementProps('div', {
-      ref,
-      role: defaultRole,
-      children: props.children,
-      ...props,
-    }),
+    root: slot.always(
+      getNativeElementProps('div', {
+        ref,
+        role: defaultRole,
+        children: props.children,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
   };
 };

packages/react-components/react-aria/src/button/useARIAButtonShorthand.ts

@@ -12,8 +12,8 @@ import type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './typ
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
  * where no attribute addition is required.
  */
-export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (slot, options) => {
-  const shorthand = resolveShorthand(slot, options);
+export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (value, options) => {
+  const shorthand = resolveShorthand(value, options);
   const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);
   return shorthand && shorthandARIAButton;
 };

packages/react-components/react-dialog/src/components/DialogActions/renderDialogActions.tsx

@@ -3,15 +3,15 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';
 
 /**
  * Render the final JSX of DialogActions
  */
 export const renderDialogActions_unstable = (state: DialogActionsState) => {
-  const { slots, slotProps } = getSlotsNext<DialogActionsSlots>(state);
+  assertSlots<DialogActionsSlots>(state);
 
   // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  return <state.root />;
 };

packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import type { DialogActionsProps, DialogActionsState } from './DialogActions.types';
 
 /**
@@ -20,10 +20,13 @@ export const useDialogActions_unstable = (
     components: {
       root: 'div',
     },
-    root: getNativeElementProps('div', {
-      ref,
-      ...props,
-    }),
+    root: slot.always(
+      getNativeElementProps('div', {
+        ref,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
     position,
     fluid,
   };

packages/react-components/react-dialog/src/components/DialogBody/renderDialogBody.tsx

@@ -3,15 +3,15 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import type { DialogBodyState, DialogBodySlots } from './DialogBody.types';
 
 /**
  * Render the final JSX of DialogBody
  */
 export const renderDialogBody_unstable = (state: DialogBodyState) => {
-  const { slots, slotProps } = getSlotsNext<DialogBodySlots>(state);
+  assertSlots<DialogBodySlots>(state);
 
   // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  return <state.root />;
 };

packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import type { DialogBodyProps, DialogBodyState } from './DialogBody.types';
 
 /**
@@ -16,9 +16,12 @@ export const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HT
     components: {
       root: 'div',
     },
-    root: getNativeElementProps(props.as ?? 'div', {
-      ref,
-      ...props,
-    }),
+    root: slot.always(
+      getNativeElementProps(props.as ?? 'div', {
+        ref,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
   };
 };

packages/react-components/react-dialog/src/components/DialogContent/renderDialogContent.tsx

@@ -3,14 +3,14 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import type { DialogContentState, DialogContentSlots } from './DialogContent.types';
 
 /**
  * Render the final JSX of DialogContent
  */
 export const renderDialogContent_unstable = (state: DialogContentState) => {
-  const { slots, slotProps } = getSlotsNext<DialogContentSlots>(state);
+  assertSlots<DialogContentSlots>(state);
 
-  return <slots.root {...slotProps.root} />;
+  return <state.root />;
 };

packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { DialogContentProps, DialogContentState } from './DialogContent.types';
 
 /**
@@ -19,9 +19,12 @@ export const useDialogContent_unstable = (
     components: {
       root: 'div',
     },
-    root: getNativeElementProps(props.as ?? 'div', {
-      ref,
-      ...props,
-    }),
+    root: slot.always(
+      getNativeElementProps(props.as ?? 'div', {
+        ref,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
   };
 };

packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx

@@ -3,7 +3,7 @@
 
 import { createElement } from '@fluentui/react-jsx-runtime';
 
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';
 import { DialogSurfaceProvider } from '../../contexts';
 import { Portal } from '@fluentui/react-portal';
@@ -12,13 +12,13 @@ import { Portal } from '@fluentui/react-portal';
  * Render the final JSX of DialogSurface
  */
 export const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {
-  const { slots, slotProps } = getSlotsNext<DialogSurfaceSlots>(state);
+  assertSlots<DialogSurfaceSlots>(state);
 
   return (
     <Portal>
-      {slots.backdrop && <slots.backdrop {...slotProps.backdrop} />}
+      {state.backdrop && <state.backdrop />}
       <DialogSurfaceProvider value={contextValues.dialogSurface}>
-        <slots.root {...slotProps.root} />
+        <state.root />
       </DialogSurfaceProvider>
     </Portal>
   );