diff --git a/change/@fluentui-react-alert-61781af0-5ea0-4569-bd87-13d37f73869f.json b/change/@fluentui-react-alert-61781af0-5ea0-4569-bd87-13d37f73869f.json new file mode 100644 index 00000000000000..cd99f9a9bd5f99 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-aria-22a5f6b5-5e23-4f90-b7b6-3590b40786ff.json b/change/@fluentui-react-aria-22a5f6b5-5e23-4f90-b7b6-3590b40786ff.json new file mode 100644 index 00000000000000..683c0f48c5624c --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-dialog-178ce7cc-aeca-4d57-bae7-35afa80be528.json b/change/@fluentui-react-dialog-178ce7cc-aeca-4d57-bae7-35afa80be528.json new file mode 100644 index 00000000000000..20684594de3710 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-menu-eda9498a-ccb7-4559-9bbb-2b6ce1186669.json b/change/@fluentui-react-menu-eda9498a-ccb7-4559-9bbb-2b6ce1186669.json new file mode 100644 index 00000000000000..ad47966d708df1 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-popover-39fbdd73-bbb4-4898-9e25-6fa14d31f2a7.json b/change/@fluentui-react-popover-39fbdd73-bbb4-4898-9e25-6fa14d31f2a7.json new file mode 100644 index 00000000000000..c846d32b052d4c --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-provider-9db380cf-70fa-4d6f-aa83-dffdcae2bc9f.json b/change/@fluentui-react-provider-9db380cf-70fa-4d6f-aa83-dffdcae2bc9f.json new file mode 100644 index 00000000000000..47bd5bd26cde44 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-table-e881a772-74c4-4ad6-9d3d-b6b1e3ee7871.json b/change/@fluentui-react-table-e881a772-74c4-4ad6-9d3d-b6b1e3ee7871.json new file mode 100644 index 00000000000000..026f883c2b31c2 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-tags-preview-4dfc5e7a-82b9-4ac2-b311-b0f5fda34e8f.json b/change/@fluentui-react-tags-preview-4dfc5e7a-82b9-4ac2-b311-b0f5fda34e8f.json new file mode 100644 index 00000000000000..208f3594337fd1 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-toast-8c60c603-cb37-4d04-b4f4-95c56df68692.json b/change/@fluentui-react-toast-8c60c603-cb37-4d04-b4f4-95c56df68692.json new file mode 100644 index 00000000000000..8145376d131382 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-toolbar-09ddf89b-6fb5-4b88-b5d8-ddd13edcbb1d.json b/change/@fluentui-react-toolbar-09ddf89b-6fb5-4b88-b5d8-ddd13edcbb1d.json new file mode 100644 index 00000000000000..d17615b05b7011 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-tree-decc7a8b-7877-466c-b303-08df94b48d45.json b/change/@fluentui-react-tree-decc7a8b-7877-466c-b303-08df94b48d45.json new file mode 100644 index 00000000000000..2d688ef7055120 --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-alert/src/components/Alert/renderAlert.tsx b/packages/react-components/react-alert/src/components/Alert/renderAlert.tsx index f8554b51604c84..bb573f33b810fe 100644 --- a/packages/react-components/react-alert/src/components/Alert/renderAlert.tsx +++ b/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(state); + assertSlots(state); return ( - - {slots.icon && } - {slots.avatar && } - {slotProps.root.children} - {slots.action && } - + + {state.icon && } + {state.avatar && } + {state.root.children} + {state.action && } + ); }; diff --git a/packages/react-components/react-alert/src/components/Alert/useAlert.tsx b/packages/react-components/react-alert/src/components/Alert/useAlert.tsx index ef7e1f8724e1f1..e8f558ab75bce8 100644 --- a/packages/react-components/react-alert/src/components/Alert/useAlert.tsx +++ b/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 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' }, + ), }; }; diff --git a/packages/react-components/react-aria/src/button/useARIAButtonShorthand.ts b/packages/react-components/react-aria/src/button/useARIAButtonShorthand.ts index 2d42a7297148a9..ea60c2f988153a 100644 --- a/packages/react-components/react-aria/src/button/useARIAButtonShorthand.ts +++ b/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 = (slot, options) => { - const shorthand = resolveShorthand(slot, options); +export const useARIAButtonShorthand: ResolveShorthandFunction = (value, options) => { + const shorthand = resolveShorthand(value, options); const shorthandARIAButton = useARIAButtonProps(shorthand?.as ?? 'button', shorthand); return shorthand && shorthandARIAButton; }; diff --git a/packages/react-components/react-dialog/src/components/DialogActions/renderDialogActions.tsx b/packages/react-components/react-dialog/src/components/DialogActions/renderDialogActions.tsx index 570ad41b87a276..a489cf2c7811de 100644 --- a/packages/react-components/react-dialog/src/components/DialogActions/renderDialogActions.tsx +++ b/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(state); + assertSlots(state); // TODO Add additional slots in the appropriate place - return ; + return ; }; diff --git a/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts b/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts index e01526d61078da..6245322e1ec324 100644 --- a/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts +++ b/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, }; diff --git a/packages/react-components/react-dialog/src/components/DialogBody/renderDialogBody.tsx b/packages/react-components/react-dialog/src/components/DialogBody/renderDialogBody.tsx index df955d0229de25..93ccdbfd464ce5 100644 --- a/packages/react-components/react-dialog/src/components/DialogBody/renderDialogBody.tsx +++ b/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(state); + assertSlots(state); // TODO Add additional slots in the appropriate place - return ; + return ; }; diff --git a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts index d8f93a866b18a7..cdea33091a171d 100644 --- a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts +++ b/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 { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts index b188629898581a..602b0997b72861 100644 --- a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts +++ b/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' }, + ), }; }; diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx b/packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx index 76721af33f01a8..c217a9c15ea5ea 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx +++ b/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(state); + assertSlots(state); return ( - {slots.backdrop && } + {state.backdrop && } - + ); diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts index 964a8fc8df449c..ddfd5f4a8720a5 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { getNativeElementProps, - resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand, + slot, } from '@fluentui/react-utilities'; import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types'; import { useDialogContext_unstable } from '../../contexts'; @@ -58,32 +58,31 @@ export const useDialogSurface_unstable = ( } }); - const backdrop = resolveShorthand(props.backdrop, { - required: open && modalType !== 'non-modal', + const backdrop = slot.optional(props.backdrop, { + renderByDefault: open && modalType !== 'non-modal', defaultProps: { 'aria-hidden': 'true', }, + elementType: 'div', }); - if (backdrop) { backdrop.onClick = handledBackdropClick; } - return { - components: { - backdrop: 'div', - root: 'div', - }, + components: { backdrop: 'div', root: 'div' }, backdrop, - root: getNativeElementProps(props.as ?? '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), - }), + root: slot.always( + getNativeElementProps(props.as ?? '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), + }), + { elementType: 'div' }, + ), }; }; diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/renderDialogTitle.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/renderDialogTitle.tsx index bc592e6091c3b5..b10e3822fffdd9 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/renderDialogTitle.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTitle/renderDialogTitle.tsx @@ -4,19 +4,19 @@ import { createElement, Fragment } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { DialogTitleState, DialogTitleSlots } from './DialogTitle.types'; /** * Render the final JSX of DialogTitle */ export const renderDialogTitle_unstable = (state: DialogTitleState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( <> - {slotProps.root.children} - {slots.action && } + {state.root.children} + {state.action && } ); }; diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx index 8d9a7beb97c8f5..00142a713a75f9 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; -import { getNativeElementProps } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import type { DialogTitleProps, DialogTitleState } from './DialogTitle.types'; import { useDialogContext_unstable } from '../../contexts/dialogContext'; import { Dismiss20Regular } from '@fluentui/react-icons'; -import { resolveShorthand } from '@fluentui/react-utilities'; import { DialogTrigger } from '../DialogTrigger/DialogTrigger'; import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles'; @@ -26,13 +25,16 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref< root: 'h2', action: 'div', }, - root: getNativeElementProps(as ?? 'h2', { - ref, - id: useDialogContext_unstable(ctx => ctx.dialogTitleId), - ...props, - }), - action: resolveShorthand(action, { - required: modalType === 'non-modal', + root: slot.always( + getNativeElementProps(as ?? 'h2', { + ref, + id: useDialogContext_unstable(ctx => ctx.dialogTitleId), + ...props, + }), + { elementType: 'h2' }, + ), + action: slot.optional(action, { + renderByDefault: modalType === 'non-modal', defaultProps: { children: ( @@ -47,6 +49,7 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref< ), }, + elementType: 'div', }), }; }; diff --git a/packages/react-components/react-menu/src/components/MenuDivider/renderMenuDivider.tsx b/packages/react-components/react-menu/src/components/MenuDivider/renderMenuDivider.tsx index 97951142214664..d7b932668a1487 100644 --- a/packages/react-components/react-menu/src/components/MenuDivider/renderMenuDivider.tsx +++ b/packages/react-components/react-menu/src/components/MenuDivider/renderMenuDivider.tsx @@ -2,7 +2,7 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import { MenuDividerSlots, MenuDividerState } from './MenuDivider.types'; /** @@ -10,7 +10,7 @@ import { MenuDividerSlots, MenuDividerState } from './MenuDivider.types'; * slots to children. */ export const renderMenuDivider_unstable = (state: MenuDividerState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDivider.ts b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDivider.ts index 471b23d2870bfa..5a385e7b4aa3a6 100644 --- a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDivider.ts +++ b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDivider.ts @@ -1,4 +1,4 @@ -import { getNativeElementProps } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import * as React from 'react'; import type { MenuDividerProps, MenuDividerState } from './MenuDivider.types'; @@ -10,11 +10,14 @@ export const useMenuDivider_unstable = (props: MenuDividerProps, ref: React.Ref< components: { root: 'div', }, - root: getNativeElementProps('div', { - role: 'presentation', - 'aria-hidden': true, - ...props, - ref, - }), + root: slot.always( + getNativeElementProps('div', { + role: 'presentation', + 'aria-hidden': true, + ...props, + ref, + }), + { elementType: 'div' }, + ), }; }; diff --git a/packages/react-components/react-menu/src/components/MenuGroup/renderMenuGroup.tsx b/packages/react-components/react-menu/src/components/MenuGroup/renderMenuGroup.tsx index 0d8b3f998425a9..c794243732d692 100644 --- a/packages/react-components/react-menu/src/components/MenuGroup/renderMenuGroup.tsx +++ b/packages/react-components/react-menu/src/components/MenuGroup/renderMenuGroup.tsx @@ -2,7 +2,7 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import { MenuGroupContextValues, MenuGroupSlots, MenuGroupState } from './MenuGroup.types'; import { MenuGroupContextProvider } from '../../contexts/menuGroupContext'; @@ -11,11 +11,11 @@ import { MenuGroupContextProvider } from '../../contexts/menuGroupContext'; * slots to children. */ export const renderMenuGroup_unstable = (state: MenuGroupState, contextValues: MenuGroupContextValues) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( - + ); }; diff --git a/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts b/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts index 0cdc5999db0f66..e77a0216f5a281 100644 --- a/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts +++ b/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, useId } from '@fluentui/react-utilities'; +import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities'; import { MenuGroupProps, MenuGroupState } from './MenuGroup.types'; /** @@ -12,12 +12,15 @@ export function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts b/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts index 0419e65c8a1717..06d51cccc29348 100644 --- a/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts +++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext'; -import { getNativeElementProps } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types'; /** @@ -16,10 +16,13 @@ export function useMenuGroupHeader_unstable( components: { root: 'div', }, - root: getNativeElementProps('div', { - ref, - id, - ...props, - }), + root: slot.always( + getNativeElementProps('div', { + ref, + id, + ...props, + }), + { elementType: 'div' }, + ), }; } diff --git a/packages/react-components/react-menu/src/components/MenuItem/renderMenuItem.tsx b/packages/react-components/react-menu/src/components/MenuItem/renderMenuItem.tsx index d4f743b48d552b..d5af45c2aa9e9c 100644 --- a/packages/react-components/react-menu/src/components/MenuItem/renderMenuItem.tsx +++ b/packages/react-components/react-menu/src/components/MenuItem/renderMenuItem.tsx @@ -2,22 +2,22 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { MenuItemSlots, MenuItemState } from './MenuItem.types'; /** * Function that renders the final JSX of the component */ export const renderMenuItem_unstable = (state: MenuItemState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( - - {slots.checkmark && } - {slots.icon && } - {slots.content && } - {slots.secondaryContent && } - {slots.submenuIndicator && } - + + {state.checkmark && } + {state.icon && } + {state.content && } + {state.secondaryContent && } + {state.submenuIndicator && } + ); }; diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx index e3fd1488a9e62b..1d49514529cc85 100644 --- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx +++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities'; +import { useEventCallback, useMergedRefs, getNativeElementProps, 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'; @@ -46,54 +46,59 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref>, - onKeyDown: useEventCallback(event => { - props.onKeyDown?.(event); - if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) { - dismissedWithKeyboardRef.current = true; - } - }), - onMouseEnter: useEventCallback(event => { - innerRef.current?.focus(); + root: slot.always( + getNativeElementProps( + as, + useARIAButtonProps(as, { + role: 'menuitem', + ...props, + disabled: false, + disabledFocusable: disabled, + ref: useMergedRefs(ref, innerRef) as React.Ref>, + onKeyDown: useEventCallback(event => { + props.onKeyDown?.(event); + if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) { + dismissedWithKeyboardRef.current = true; + } + }), + onMouseEnter: useEventCallback(event => { + innerRef.current?.focus(); - props.onMouseEnter?.(event); - }), - onClick: useEventCallback(event => { - if (!hasSubmenu && !persistOnClick) { - setOpen(event, { - open: false, - keyboard: dismissedWithKeyboardRef.current, - bubble: true, - type: 'menuItemClick', - event, - }); - dismissedWithKeyboardRef.current = false; - } + props.onMouseEnter?.(event); + }), + onClick: useEventCallback(event => { + if (!hasSubmenu && !persistOnClick) { + setOpen(event, { + open: false, + keyboard: dismissedWithKeyboardRef.current, + bubble: true, + type: 'menuItemClick', + event, + }); + dismissedWithKeyboardRef.current = false; + } - props.onClick?.(event); + props.onClick?.(event); + }), }), - }), + ), + { elementType: 'div' }, ), - icon: resolveShorthand(props.icon, { required: hasIcons }), - checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }), - submenuIndicator: resolveShorthand(props.submenuIndicator, { - required: hasSubmenu, + icon: slot.optional(props.icon, { renderByDefault: hasIcons, elementType: 'span' }), + checkmark: slot.optional(props.checkmark, { renderByDefault: hasCheckmarks, elementType: 'span' }), + submenuIndicator: slot.optional(props.submenuIndicator, { + renderByDefault: hasSubmenu, defaultProps: { children: dir === 'ltr' ? : , }, + elementType: 'span', }), - content: resolveShorthand(props.content, { - required: !!props.children, + content: slot.optional(props.content, { + renderByDefault: !!props.children, defaultProps: { children: props.children }, + elementType: 'span', }), - secondaryContent: resolveShorthand(props.secondaryContent), + secondaryContent: slot.optional(props.secondaryContent, { elementType: 'span' }), }; useCharacterSearch(state, innerRef); return state; diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx b/packages/react-components/react-menu/src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx index edb8753e7f1bf3..9ee6774cb441b8 100644 --- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx @@ -2,20 +2,20 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { MenuItemCheckboxState } from './MenuItemCheckbox.types'; import type { MenuItemSlots } from '../MenuItem/MenuItem.types'; /** Function that renders the final JSX of the component */ export const renderMenuItemCheckbox_unstable = (state: MenuItemCheckboxState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( - - {slots.checkmark && } - {slots.icon && } - {slots.content && } - {slots.secondaryContent && } - + + {state.checkmark && } + {state.icon && } + {state.content && } + {state.secondaryContent && } + ); }; diff --git a/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx b/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx index 426ce40b6d1e81..33f6c33cd28499 100644 --- a/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { resolveShorthand } from '@fluentui/react-utilities'; +import { slot } from '@fluentui/react-utilities'; import { Checkmark16Filled } from '@fluentui/react-icons'; import { useMenuListContext_unstable } from '../../contexts/menuListContext'; import { useMenuItem_unstable } from '../MenuItem/useMenuItem'; @@ -26,9 +26,10 @@ export const useMenuItemCheckbox_unstable = ( persistOnClick: true, ...props, 'aria-checked': checked, - checkmark: resolveShorthand(props.checkmark, { + checkmark: slot.optional(props.checkmark, { defaultProps: { children: }, - required: true, + renderByDefault: true, + elementType: 'span', }), onClick: (e: React.MouseEvent>) => { toggleCheckbox?.(e, name, value, checked); diff --git a/packages/react-components/react-menu/src/components/MenuItemLink/renderMenuItemLink.tsx b/packages/react-components/react-menu/src/components/MenuItemLink/renderMenuItemLink.tsx index 38b798e11037d0..c5a51b26122ec9 100644 --- a/packages/react-components/react-menu/src/components/MenuItemLink/renderMenuItemLink.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemLink/renderMenuItemLink.tsx @@ -2,22 +2,22 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { MenuItemLinkState, MenuItemLinkSlots } from './MenuItemLink.types'; /** * Render the final JSX of MenuItemLink */ export const renderMenuItemLink_unstable = (state: MenuItemLinkState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); // TODO Add additional slots in the appropriate place return ( - - {slots.checkmark && } - {slots.icon && } - {slots.content && } - {slots.secondaryContent && } - + + {state.checkmark && } + {state.icon && } + {state.content && } + {state.secondaryContent && } + ); }; diff --git a/packages/react-components/react-menu/src/components/MenuItemLink/useMenuItemLink.ts b/packages/react-components/react-menu/src/components/MenuItemLink/useMenuItemLink.ts index c6ac32038e876a..aa346dc2167f2d 100644 --- a/packages/react-components/react-menu/src/components/MenuItemLink/useMenuItemLink.ts +++ b/packages/react-components/react-menu/src/components/MenuItemLink/useMenuItemLink.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 { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types'; import { useMenuItem_unstable } from '../MenuItem/useMenuItem'; import { MenuItemProps } from '../MenuItem/MenuItem.types'; @@ -25,10 +25,13 @@ export const useMenuItemLink_unstable = ( ...baseState.components, root: 'a', }, - root: getNativeElementProps('a', { - ref, - role: 'menuitem', - ...props, - }), + root: slot.always( + getNativeElementProps('a', { + ref, + role: 'menuitem', + ...props, + }), + { elementType: 'a' }, + ), }; }; diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/renderMenuItemRadio.tsx b/packages/react-components/react-menu/src/components/MenuItemRadio/renderMenuItemRadio.tsx index 2b6eb72c823027..170f9d0be0310e 100644 --- a/packages/react-components/react-menu/src/components/MenuItemRadio/renderMenuItemRadio.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemRadio/renderMenuItemRadio.tsx @@ -2,7 +2,7 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { MenuItemRadioState } from './MenuItemRadio.types'; import type { MenuItemSlots } from '../MenuItem/MenuItem.types'; @@ -11,14 +11,14 @@ import type { MenuItemSlots } from '../MenuItem/MenuItem.types'; * slots to children. */ export const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( - - {slots.checkmark && } - {slots.icon && } - {slots.content && } - {slots.secondaryContent && } - + + {state.checkmark && } + {state.icon && } + {state.content && } + {state.secondaryContent && } + ); }; diff --git a/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadio.tsx b/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadio.tsx index b8e89dc42ce230..7f5b10636b7534 100644 --- a/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadio.tsx +++ b/packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadio.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { resolveShorthand } from '@fluentui/react-utilities'; +import { slot } from '@fluentui/react-utilities'; import { Checkmark16Filled } from '@fluentui/react-icons'; import { useMenuListContext_unstable } from '../../contexts/menuListContext'; import { useMenuItem_unstable } from '../MenuItem/useMenuItem'; @@ -28,9 +28,10 @@ export const useMenuItemRadio_unstable = ( ...props, role: 'menuitemradio', 'aria-checked': checked, - checkmark: resolveShorthand(props.checkmark, { + checkmark: slot.optional(props.checkmark, { defaultProps: { children: }, - required: true, + renderByDefault: true, + elementType: 'span', }), onClick: (e: React.MouseEvent>) => { selectRadio?.(e, name, value, checked); diff --git a/packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx b/packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx index 9eaf5f74ac0094..a7b365ffe70383 100644 --- a/packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx +++ b/packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx @@ -2,7 +2,7 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types'; import { MenuListProvider } from '../../contexts/menuListContext'; @@ -10,11 +10,11 @@ import { MenuListProvider } from '../../contexts/menuListContext'; * Function that renders the final JSX of the component */ export const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( - + ); }; diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts index 4def0247772bbe..69e1185d56677f 100644 --- a/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts +++ b/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts @@ -4,6 +4,7 @@ import { useEventCallback, useControllableState, getNativeElementProps, + slot, } from '@fluentui/react-utilities'; import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster'; import { useHasParentContext } from '@fluentui/react-context-selector'; @@ -108,13 +109,16 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); if (state.inline) { - return ; + return ; } return ( - + ); }; diff --git a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts index 7208d05e85107d..513684dbdf9de2 100644 --- a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts +++ b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys'; -import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities'; +import { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities'; import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types'; import { useMenuContext_unstable } from '../../contexts/menuContext'; import { dispatchMenuEnterEvent } from '../../utils/index'; @@ -60,26 +60,24 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref< const inline = useMenuContext_unstable(context => context.inline) ?? false; const mountNode = useMenuContext_unstable(context => context.mountNode); - const rootProps = getNativeElementProps('div', { - role: 'presentation', - ...restoreFocusSourceAttributes, - ...props, - ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef), - }); - + const rootProps = slot.always( + getNativeElementProps('div', { + role: 'presentation', + ...restoreFocusSourceAttributes, + ...props, + ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef), + }), + { elementType: 'div' }, + ); const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps; - rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent) => { if (openOnHover) { setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event }); } - onMouseEnterOriginal?.(event); }); - rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent) => { const key = event.key; - if (key === Escape || (isSubmenu && key === CloseArrowKey)) { if (open && popoverRef.current?.contains(event.target as HTMLElement)) { setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event }); @@ -88,23 +86,13 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref< event.stopPropagation(); } } - if (key === Tab) { setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event }); if (!isSubmenu) { triggerRef.current?.focus(); } } - onKeyDownOriginal?.(event); }); - - return { - inline, - mountNode, - components: { - root: 'div', - }, - root: rootProps, - }; + return { inline, mountNode, components: { root: 'div' }, root: rootProps }; }; diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/renderMenuSplitGroup.tsx b/packages/react-components/react-menu/src/components/MenuSplitGroup/renderMenuSplitGroup.tsx index 8ab8854ebb731d..2f203e4f5545dd 100644 --- a/packages/react-components/react-menu/src/components/MenuSplitGroup/renderMenuSplitGroup.tsx +++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/renderMenuSplitGroup.tsx @@ -2,14 +2,14 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { MenuSplitGroupState, MenuSplitGroupSlots } from './MenuSplitGroup.types'; /** * Render the final JSX of MenuSplitGroup */ export const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts index 2aece5d09c2a2c..26281b77077fbf 100644 --- a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts +++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities'; +import { getNativeElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities'; import { useFocusFinders } from '@fluentui/react-tabster'; import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; import type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types'; @@ -54,11 +54,14 @@ export const useMenuSplitGroup_unstable = ( components: { root: 'div', }, - root: getNativeElementProps('div', { - role: 'group', - ref: useMergedRefs(ref, innerRef), - onKeyDown, - ...props, - }), + root: slot.always( + getNativeElementProps('div', { + role: 'group', + ref: useMergedRefs(ref, innerRef), + onKeyDown, + ...props, + }), + { elementType: 'div' }, + ), }; }; diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/renderPopoverSurface.tsx b/packages/react-components/react-popover/src/components/PopoverSurface/renderPopoverSurface.tsx index e21d97ae8bb8d2..2b4a4bc773cb2f 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/renderPopoverSurface.tsx +++ b/packages/react-components/react-popover/src/components/PopoverSurface/renderPopoverSurface.tsx @@ -2,7 +2,7 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import { Portal } from '@fluentui/react-portal'; import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types'; @@ -10,13 +10,13 @@ import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface. * Render the final JSX of PopoverSurface */ export const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); const surface = ( - + {state.withArrow &&
} - {slotProps.root.children} - + {state.root.children} + ); if (state.inline) { diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts index 425f6fec93691b..690121577c0f87 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts +++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities'; +import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities'; import { useModalAttributes } from '@fluentui/react-tabster'; import { usePopoverContext_unstable } from '../../popoverContext'; import type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types'; @@ -44,13 +44,16 @@ export const usePopoverSurface_unstable = ( components: { root: 'div', }, - root: getNativeElementProps('div', { - ref: useMergedRefs(ref, contentRef), - role: trapFocus ? 'dialog' : 'group', - 'aria-modal': trapFocus ? true : undefined, - ...modalAttributes, - ...props, - }), + root: slot.always( + getNativeElementProps('div', { + ref: useMergedRefs(ref, contentRef), + role: trapFocus ? 'dialog' : 'group', + 'aria-modal': trapFocus ? true : undefined, + ...modalAttributes, + ...props, + }), + { elementType: 'div' }, + ), }; const { diff --git a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx index 919c49d34f4c9b..3596d45e0bc028 100644 --- a/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx +++ b/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx @@ -2,7 +2,7 @@ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime'; -import { canUseDOM, getSlotsNext } from '@fluentui/react-utilities'; +import { canUseDOM, assertSlots } from '@fluentui/react-utilities'; import { TextDirectionProvider } from '@griffel/react'; import { OverridesProvider_unstable as OverridesProvider, @@ -22,7 +22,7 @@ export const renderFluentProvider_unstable = ( state: FluentProviderState, contextValues: FluentProviderContextValues, ) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is @@ -38,7 +38,7 @@ export const renderFluentProvider_unstable = ( - + {canUseDOM() ? null : (