From 1c81936a04abdfd1b6bae9b218eb34372928535c Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Mon, 7 Aug 2023 07:54:53 +0000 Subject: [PATCH] chore(cxe-prg): migrate to new slot API --- ...-e98823c8-6e0e-423a-84ec-1460903ed55c.json | 7 ++++ ...-e7457026-de8d-431e-8cfc-2a3090d613be.json | 7 ++++ ...-c779a059-cbcb-4524-a22f-cbead701d139.json | 7 ++++ ...-b85a2da6-d86f-457c-9b4d-51394fa66274.json | 7 ++++ ...-91815e90-f012-4dc0-9cc4-33f8140032e0.json | 7 ++++ .../Breadcrumb/renderBreadcrumb.tsx | 11 +++--- .../components/Breadcrumb/useBreadcrumb.ts | 19 +++++----- .../renderBreadcrumbDivider.tsx | 6 ++-- .../useBreadcrumbDivider.tsx | 17 +++++---- .../BreadcrumbItem/renderBreadcrumbItem.tsx | 12 +++---- .../BreadcrumbItem/useBreadcrumbItem.ts | 25 +++++++------ .../BreadcrumbLink/renderBreadcrumbLink.tsx | 12 +++---- .../BreadcrumbLink/useBreadcrumbLink.ts | 23 ++++++------ .../src/components/Card/renderCard.tsx | 14 ++++---- .../react-card/src/components/Card/useCard.ts | 19 +++++----- .../src/components/Card/useCardSelectable.ts | 8 +++-- .../CardFooter/renderCardFooter.tsx | 12 +++---- .../components/CardFooter/useCardFooter.ts | 15 ++++---- .../CardHeader/renderCardHeader.tsx | 16 ++++----- .../components/CardHeader/useCardHeader.ts | 36 ++++++++----------- .../CardPreview/renderCardPreview.tsx | 12 +++---- .../components/CardPreview/useCardPreview.ts | 15 ++++---- .../src/components/Drawer/renderDrawer.tsx | 6 ++-- .../src/components/Drawer/useDrawer.ts | 6 ++-- .../DrawerBody/renderDrawerBody.tsx | 11 +++--- .../components/DrawerBody/useDrawerBody.ts | 13 ++++--- .../DrawerFooter/renderDrawerFooter.tsx | 11 +++--- .../DrawerFooter/useDrawerFooter.ts | 13 ++++--- .../DrawerHeader/renderDrawerHeader.tsx | 11 +++--- .../DrawerHeader/useDrawerHeader.ts | 13 ++++--- .../renderDrawerHeaderNavigation.tsx | 11 +++--- .../useDrawerHeaderNavigation.ts | 13 ++++--- .../renderDrawerHeaderTitle.tsx | 17 +++++---- .../DrawerHeaderTitle/useDrawerHeaderTitle.ts | 21 ++++++----- .../DrawerInline/renderDrawerInline.tsx | 12 ++++--- .../DrawerInline/useDrawerInline.ts | 13 ++++--- .../DrawerOverlay/renderDrawerOverlay.tsx | 11 +++--- .../DrawerOverlay/useDrawerOverlay.ts | 13 ++++--- .../src/components/Image/renderImage.tsx | 6 ++-- .../src/components/Image/useImage.ts | 13 ++++--- .../src/components/Text/renderText.tsx | 6 ++-- .../react-text/src/components/Text/useText.ts | 15 ++++---- 42 files changed, 317 insertions(+), 225 deletions(-) create mode 100644 change/@fluentui-react-breadcrumb-preview-e98823c8-6e0e-423a-84ec-1460903ed55c.json create mode 100644 change/@fluentui-react-card-e7457026-de8d-431e-8cfc-2a3090d613be.json create mode 100644 change/@fluentui-react-drawer-c779a059-cbcb-4524-a22f-cbead701d139.json create mode 100644 change/@fluentui-react-image-b85a2da6-d86f-457c-9b4d-51394fa66274.json create mode 100644 change/@fluentui-react-text-91815e90-f012-4dc0-9cc4-33f8140032e0.json diff --git a/change/@fluentui-react-breadcrumb-preview-e98823c8-6e0e-423a-84ec-1460903ed55c.json b/change/@fluentui-react-breadcrumb-preview-e98823c8-6e0e-423a-84ec-1460903ed55c.json new file mode 100644 index 00000000000000..a8eaff3b9cb03f --- /dev/null +++ b/change/@fluentui-react-breadcrumb-preview-e98823c8-6e0e-423a-84ec-1460903ed55c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore(cxe-prg): migrate to new slot API", + "packageName": "@fluentui/react-breadcrumb-preview", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-card-e7457026-de8d-431e-8cfc-2a3090d613be.json b/change/@fluentui-react-card-e7457026-de8d-431e-8cfc-2a3090d613be.json new file mode 100644 index 00000000000000..c31b22ee20f36e --- /dev/null +++ b/change/@fluentui-react-card-e7457026-de8d-431e-8cfc-2a3090d613be.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore(cxe-prg): migrate to new slot API", + "packageName": "@fluentui/react-card", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-drawer-c779a059-cbcb-4524-a22f-cbead701d139.json b/change/@fluentui-react-drawer-c779a059-cbcb-4524-a22f-cbead701d139.json new file mode 100644 index 00000000000000..9be7628ec1e131 --- /dev/null +++ b/change/@fluentui-react-drawer-c779a059-cbcb-4524-a22f-cbead701d139.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore(cxe-prg): migrate to new slot API", + "packageName": "@fluentui/react-drawer", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-image-b85a2da6-d86f-457c-9b4d-51394fa66274.json b/change/@fluentui-react-image-b85a2da6-d86f-457c-9b4d-51394fa66274.json new file mode 100644 index 00000000000000..ce1e91dc90b651 --- /dev/null +++ b/change/@fluentui-react-image-b85a2da6-d86f-457c-9b4d-51394fa66274.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore(cxe-prg): migrate to new slot API", + "packageName": "@fluentui/react-image", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-text-91815e90-f012-4dc0-9cc4-33f8140032e0.json b/change/@fluentui-react-text-91815e90-f012-4dc0-9cc4-33f8140032e0.json new file mode 100644 index 00000000000000..16b359ce600e2d --- /dev/null +++ b/change/@fluentui-react-text-91815e90-f012-4dc0-9cc4-33f8140032e0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore(cxe-prg): migrate to new slot API", + "packageName": "@fluentui/react-text", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/renderBreadcrumb.tsx b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/renderBreadcrumb.tsx index f05de6ba2ab3b4..afd72b9bdfcad3 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/renderBreadcrumb.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/renderBreadcrumb.tsx @@ -3,20 +3,19 @@ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import { BreadcrumbProvider } from './BreadcrumbContext'; import type { BreadcrumbState, BreadcrumbSlots, BreadcrumbContextValues } from './Breadcrumb.types'; /** * Render the final JSX of Breadcrumb */ export const renderBreadcrumb_unstable = (state: BreadcrumbState, contextValues: BreadcrumbContextValues) => { - const { slots, slotProps } = getSlotsNext(state); - const { root, list } = slotProps; + assertSlots(state); return ( - + - {slots.list && {root.children}} + {state.list && {state.root.children}} - + ); }; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts index 79407c091d1a38..e68d77f5712d45 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import type { BreadcrumbProps, BreadcrumbState } from './Breadcrumb.types'; import { useArrowNavigationGroup } from '@fluentui/react-tabster'; @@ -34,13 +34,16 @@ export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx index 10a323b8befa88..e6e28c0d5cc519 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import type { BreadcrumbDividerProps, BreadcrumbDividerState } from './BreadcrumbDivider.types'; import { ChevronRight20Regular, @@ -34,12 +34,15 @@ export const useBreadcrumbDivider_unstable = ( components: { root: 'li', }, - root: getNativeElementProps('li', { - ref, - 'aria-hidden': true, - children: icon, - ...props, - }), + root: slot.always( + getNativeElementProps('li', { + ref, + 'aria-hidden': true, + children: icon, + ...props, + }), + { elementType: 'li' }, + ), }; }; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx index a805f7edd0e323..c157c4ae6a15fc 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx @@ -3,21 +3,21 @@ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.types'; /** * Render the final JSX of BreadcrumbItem */ export const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); const { iconOnly, iconPosition } = state; return ( - - {iconPosition !== 'after' && slots.icon && } + + {iconPosition !== 'after' && state.icon && } {!iconOnly && state.root.children} - {iconPosition === 'after' && slots.icon && } - + {iconPosition === 'after' && state.icon && } + ); }; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts index dcb87e36b791b5..e39b34a082984e 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import type { BreadcrumbItemProps, BreadcrumbItemState } from './BreadcrumbItem.types'; import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext'; @@ -19,21 +19,20 @@ export const useBreadcrumbItem_unstable = ( const { size, iconPosition } = useBreadcrumbContext_unstable(); const { current = false, icon } = props; - const iconShorthand = resolveShorthand(icon); - + const iconSlot = slot.optional(icon, { elementType: 'span' }); return { - components: { - root: 'li', - icon: 'span', - }, - root: getNativeElementProps('li', { - ref, - ...props, - }), + components: { root: 'li', icon: 'span' }, + root: slot.always( + getNativeElementProps('li', { + ref, + ...props, + }), + { elementType: 'li' }, + ), size, current, - icon: iconShorthand, - iconOnly: Boolean(iconShorthand?.children && !props.children), + icon: iconSlot, + iconOnly: Boolean(iconSlot?.children && !props.children), iconPosition: props.iconPosition || iconPosition, }; }; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/renderBreadcrumbLink.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/renderBreadcrumbLink.tsx index e2acf57c918adf..58201ca22e5ddd 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/renderBreadcrumbLink.tsx +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/renderBreadcrumbLink.tsx @@ -3,20 +3,20 @@ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { BreadcrumbLinkState, BreadcrumbLinkSlots } from './BreadcrumbLink.types'; /** * Render the final JSX of BreadcrumbLink */ export const renderBreadcrumbLink_unstable = (state: BreadcrumbLinkState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); const { iconOnly, iconPosition } = state; return ( - - {iconPosition !== 'after' && slots.icon && } + + {iconPosition !== 'after' && state.icon && } {!iconOnly && state.root.children} - {iconPosition === 'after' && slots.icon && } - + {iconPosition === 'after' && state.icon && } + ); }; diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/useBreadcrumbLink.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/useBreadcrumbLink.ts index b6097b6fa8c880..b640fdae32a55a 100644 --- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/useBreadcrumbLink.ts +++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/useBreadcrumbLink.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import type { BreadcrumbLinkProps, BreadcrumbLinkState } from './BreadcrumbLink.types'; import { Link } from '@fluentui/react-link'; import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext'; @@ -20,18 +20,17 @@ export const useBreadcrumbLink_unstable = ( const { current = false, disabled = false, icon, overflow = false, ...rest } = props; const linkAppearance = props.appearance || appearance; - const iconShorthand = resolveShorthand(icon); - + const iconShorthand = slot.optional(icon, { elementType: 'span' }); return { - components: { - root: Link, - icon: 'span', - }, - root: getNativeElementProps('a', { - 'aria-current': current ? props['aria-current'] ?? 'page' : undefined, - ref, - ...rest, - }), + components: { root: Link, icon: 'span' }, + root: slot.always( + getNativeElementProps('a', { + 'aria-current': current ? props['aria-current'] ?? 'page' : undefined, + ref, + ...rest, + }), + { elementType: Link }, + ), appearance: linkAppearance === 'subtle' ? 'subtle' : 'default', current, disabled, diff --git a/packages/react-components/react-card/src/components/Card/renderCard.tsx b/packages/react-components/react-card/src/components/Card/renderCard.tsx index 82efe6a178a756..414c378ec9d5a7 100644 --- a/packages/react-components/react-card/src/components/Card/renderCard.tsx +++ b/packages/react-components/react-card/src/components/Card/renderCard.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 { CardContextValue, CardSlots, CardState } from './Card.types'; import { CardProvider } from './CardContext'; @@ -11,15 +11,15 @@ import { CardProvider } from './CardContext'; * Render the final JSX of Card. */ export const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( - + - {slots.checkbox ? : null} - {slots.floatingAction ? : null} - {slotProps.root.children} + {state.checkbox ? : null} + {state.floatingAction ? : null} + {state.root.children} - + ); }; diff --git a/packages/react-components/react-card/src/components/Card/useCard.ts b/packages/react-components/react-card/src/components/Card/useCard.ts index 156b30200697d6..aa310ef8e14391 100644 --- a/packages/react-components/react-card/src/components/Card/useCard.ts +++ b/packages/react-components/react-card/src/components/Card/useCard.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 { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster'; import type { CardProps, CardState } from './Card.types'; @@ -96,13 +96,16 @@ export const useCard_unstable = (props: CardProps, ref: React.Ref setIsSelectFocused(false), ...selectableCheckboxProps, }, + elementType: 'input', }); }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]); @@ -107,10 +108,11 @@ export const useCardSelectable = ( return; } - return resolveShorthand(floatingAction, { + return slot.optional(floatingAction, { defaultProps: { ref: checkboxRef, }, + elementType: 'div', }); }, [floatingAction]); diff --git a/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx b/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx index 2e002dbc7ec8d7..07e9e7d2a1a0cb 100644 --- a/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx +++ b/packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx @@ -3,19 +3,19 @@ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { CardFooterSlots, CardFooterState } from './CardFooter.types'; /** * Render the final JSX of CardFooter. */ export const renderCardFooter_unstable = (state: CardFooterState) => { - 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-card/src/components/CardFooter/useCardFooter.ts b/packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts index da1670be343cbb..97183efce342d7 100644 --- a/packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts +++ b/packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import type { CardFooterProps, CardFooterState } from './CardFooter.types'; /** @@ -20,10 +20,13 @@ export const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( - - {slots.image && } - - {slots.description && } - {slots.action && } - + + {state.image && } + + {state.description && } + {state.action && } + ); }; diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts index a547e952d50840..48897b1aa25e28 100644 --- a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts +++ b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities'; +import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities'; import type { CardHeaderProps, CardHeaderState } from './CardHeader.types'; import { useCardContext_unstable } from '../Card/CardContext'; import { cardHeaderClassNames } from './useCardHeaderStyles.styles'; @@ -62,39 +62,33 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref { const headerId = !hasChildId.current ? headerRef.current?.id : undefined; const childWithId = getChildWithId(headerSlot?.children); - hasChildId.current = Boolean(childWithId); - setReferenceId(getReferenceId(headerId, childWithId, generatedId)); }, [generatedId, header, headerSlot, setReferenceId]); - return { - components: { - root: 'div', - image: 'div', - header: 'div', - description: 'div', - action: 'div', - }, + components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' }, - root: getNativeElementProps('div', { - ref, - ...props, - }), - image: resolveShorthand(image), + root: slot.always( + getNativeElementProps('div', { + ref, + ...props, + }), + { elementType: 'div' }, + ), + image: slot.optional(image, { elementType: 'div' }), header: headerSlot, - description: resolveShorthand(description), - action: resolveShorthand(action), + description: slot.optional(description, { elementType: 'div' }), + action: slot.optional(action, { elementType: 'div' }), }; }; diff --git a/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx b/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx index ce7491ba7af4da..ab5a4414b14145 100644 --- a/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx +++ b/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx @@ -3,19 +3,19 @@ import { createElement } from '@fluentui/react-jsx-runtime'; -import { getSlotsNext } from '@fluentui/react-utilities'; +import { assertSlots } from '@fluentui/react-utilities'; import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types'; /** * Render the final JSX of CardPreview. */ export const renderCardPreview_unstable = (state: CardPreviewState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); return ( - - {slotProps.root.children} - {slots.logo && } - + + {state.root.children} + {state.logo && } + ); }; diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts index 2f578992522092..66f6eee799791c 100644 --- a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts +++ b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities'; +import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities'; import type { CardPreviewProps, CardPreviewState } from './CardPreview.types'; import { useCardContext_unstable } from '../Card/CardContext'; import { cardPreviewClassNames } from './useCardPreviewStyles.styles'; @@ -50,10 +50,13 @@ export const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref< logo: 'div', }, - root: getNativeElementProps('div', { - ref: previewRef, - ...props, - }), - logo: resolveShorthand(logo), + root: slot.always( + getNativeElementProps('div', { + ref: previewRef, + ...props, + }), + { elementType: 'div' }, + ), + logo: slot.optional(logo, { elementType: 'div' }), }; }; diff --git a/packages/react-components/react-drawer/src/components/Drawer/renderDrawer.tsx b/packages/react-components/react-drawer/src/components/Drawer/renderDrawer.tsx index cc3d619644cd96..177d6aa8303b9e 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/renderDrawer.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/renderDrawer.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 { DrawerState, DrawerSlots } from './Drawer.types'; /** * Render the final JSX of Drawer */ export const renderDrawer_unstable = (state: DrawerState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts b/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts index 1e0c7ce6a6e24e..59f1284df97cd3 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { resolveShorthand } from '@fluentui/react-utilities'; +import { slot } from '@fluentui/react-utilities'; import type { DrawerProps, DrawerState } from './Drawer.types'; import { DrawerOverlay } from '../DrawerOverlay/DrawerOverlay'; @@ -22,11 +22,11 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref { - const { slots, slotProps } = getSlots(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts index 9ec54bd516fdd5..74a87b959f3689 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts +++ b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.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 { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types'; /** @@ -17,9 +17,12 @@ export const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref { - const { slots, slotProps } = getSlots(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts index a2181d5c138932..f4d20535db2d23 100644 --- a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.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 { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types'; /** @@ -17,9 +17,12 @@ export const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Re root: 'footer', }, - root: getNativeElementProps('footer', { - ref, - ...props, - }), + root: slot.always( + getNativeElementProps('footer', { + ref, + ...props, + }), + { elementType: 'footer' }, + ), }; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/renderDrawerHeader.tsx b/packages/react-components/react-drawer/src/components/DrawerHeader/renderDrawerHeader.tsx index abbad67ac71f59..4d32df95be0f31 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeader/renderDrawerHeader.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerHeader/renderDrawerHeader.tsx @@ -1,12 +1,15 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { assertSlots } from '@fluentui/react-utilities'; import type { DrawerHeaderState, DrawerHeaderSlots } from './DrawerHeader.types'; /** * Render the final JSX of DrawerHeader */ export const renderDrawerHeader_unstable = (state: DrawerHeaderState) => { - const { slots, slotProps } = getSlots(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts b/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts index 76eb8a39308422..158de67d38e4f1 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts +++ b/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.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 { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types'; /** @@ -17,9 +17,12 @@ export const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Re root: 'header', }, - root: getNativeElementProps('header', { - ref, - ...props, - }), + root: slot.always( + getNativeElementProps('header', { + ref, + ...props, + }), + { elementType: 'header' }, + ), }; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.tsx b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.tsx index 9f9d5bca765580..9a28e88bb55610 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/renderDrawerHeaderNavigation.tsx @@ -1,12 +1,15 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { assertSlots } from '@fluentui/react-utilities'; import type { DrawerHeaderNavigationState, DrawerHeaderNavigationSlots } from './DrawerHeaderNavigation.types'; /** * Render the final JSX of DrawerHeaderNavigation */ export const renderDrawerHeaderNavigation_unstable = (state: DrawerHeaderNavigationState) => { - const { slots, slotProps } = getSlots(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts index 4d8470d3d438cf..fb43f2adfec69e 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts +++ b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.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 { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types'; /** @@ -20,9 +20,12 @@ export const useDrawerHeaderNavigation_unstable = ( root: 'nav', }, - root: getNativeElementProps('nav', { - ref, - ...props, - }), + root: slot.always( + getNativeElementProps('nav', { + ref, + ...props, + }), + { elementType: 'nav' }, + ), }; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx index ddc27dbbc3628a..9cb34f46c0e55f 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/renderDrawerHeaderTitle.tsx @@ -1,17 +1,20 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { assertSlots } from '@fluentui/react-utilities'; import type { DrawerHeaderTitleState, DrawerHeaderTitleSlots } from './DrawerHeaderTitle.types'; /** * Render the final JSX of DrawerHeaderTitle */ export const renderDrawerHeaderTitle_unstable = (state: DrawerHeaderTitleState) => { - const { slots, slotProps } = getSlots(state); + assertSlots(state); return ( - - {slots.heading && } - {slots.action && } - + + {state.heading && } + {state.action && } + ); }; diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts index 71c7a5f761f645..e147958bf5f710 100644 --- a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts +++ b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; import type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types'; import { useDialogTitle_unstable } from '@fluentui/react-dialog'; @@ -25,19 +25,24 @@ export const useDrawerHeaderTitle_unstable = ( action: titleComponents.action, }, - root: getNativeElementProps('div', { - ref, - ...props, - }), - heading: resolveShorthand(props.heading, { - required: true, + root: slot.always( + getNativeElementProps('div', { + ref, + ...props, + }), + { elementType: 'div' }, + ), + heading: slot.optional(props.heading, { + renderByDefault: true, defaultProps: { ...heading, className: undefined, // remove className from heading }, + elementType: titleComponents.root, }), - action: resolveShorthand(props.action, { + action: slot.optional(props.action, { defaultProps: action, + elementType: titleComponents.action, }), }; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/renderDrawerInline.tsx b/packages/react-components/react-drawer/src/components/DrawerInline/renderDrawerInline.tsx index 22dc8d0a3c5099..287df0ecbe16d0 100644 --- a/packages/react-components/react-drawer/src/components/DrawerInline/renderDrawerInline.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerInline/renderDrawerInline.tsx @@ -1,16 +1,18 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { assertSlots } from '@fluentui/react-utilities'; import type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types'; /** * Render the final JSX of DrawerInline */ export const renderDrawerInline_unstable = (state: DrawerInlineState) => { - const { slots, slotProps } = getSlots(state); + assertSlots(state); if (!state.open) { return null; } - - return ; + return ; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts b/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts index 34ea024fe5fdd2..d4dd0c8ad86799 100644 --- a/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts +++ b/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, useControllableState } from '@fluentui/react-utilities'; +import { getNativeElementProps, useControllableState, slot } from '@fluentui/react-utilities'; import type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types'; import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps'; @@ -27,10 +27,13 @@ export const useDrawerInline_unstable = (props: DrawerInlineProps, ref: React.Re root: 'div', }, - root: getNativeElementProps('div', { - ref, - ...props, - }), + root: slot.always( + getNativeElementProps('div', { + ref, + ...props, + }), + { elementType: 'div' }, + ), size, position, diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx index 7638ecfa34b13a..22332028c23c3d 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx @@ -1,5 +1,8 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; +/** @jsxRuntime classic */ +/** @jsx createElement */ + +import { createElement } from '@fluentui/react-jsx-runtime'; +import { assertSlots } from '@fluentui/react-utilities'; import type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types'; import { Dialog } from '@fluentui/react-dialog'; @@ -7,11 +10,11 @@ import { Dialog } from '@fluentui/react-dialog'; * Render the final JSX of DrawerOverlay */ export const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => { - const { slots, slotProps } = getSlots(state); + assertSlots(state); return ( - + ); }; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts index fd18e686a9ae9e..7ca632f96c9011 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.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 { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types'; import { DialogProps, DialogSurface } from '@fluentui/react-dialog'; import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps'; @@ -26,10 +26,13 @@ export const useDrawerOverlay_unstable = ( backdrop: 'div', }, - root: getNativeElementProps('div', { - ref, - ...props, - }), + root: slot.always( + getNativeElementProps('div', { + ref, + ...props, + }), + { elementType: DialogSurface }, + ), dialog: { open, defaultOpen, diff --git a/packages/react-components/react-image/src/components/Image/renderImage.tsx b/packages/react-components/react-image/src/components/Image/renderImage.tsx index 5c2fb355842161..41ec1c32475759 100644 --- a/packages/react-components/react-image/src/components/Image/renderImage.tsx +++ b/packages/react-components/react-image/src/components/Image/renderImage.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 { ImageSlots, ImageState } from './Image.types'; /** @@ -11,7 +11,7 @@ import { ImageSlots, ImageState } from './Image.types'; * Given the state of an image, renders it. */ export const renderImage_unstable = (state: ImageState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-image/src/components/Image/useImage.ts b/packages/react-components/react-image/src/components/Image/useImage.ts index 0dfe16bd2e7294..1339c180a6096c 100644 --- a/packages/react-components/react-image/src/components/Image/useImage.ts +++ b/packages/react-components/react-image/src/components/Image/useImage.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 { ImageProps, ImageState } from './Image.types'; /** @@ -17,10 +17,13 @@ export const useImage_unstable = (props: ImageProps, ref: React.Ref('img', { + ref, + ...props, + }), + { elementType: 'img' }, + ), }; return state; diff --git a/packages/react-components/react-text/src/components/Text/renderText.tsx b/packages/react-components/react-text/src/components/Text/renderText.tsx index 27244293ca4c7b..f05a9e158c6f2a 100644 --- a/packages/react-components/react-text/src/components/Text/renderText.tsx +++ b/packages/react-components/react-text/src/components/Text/renderText.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 { TextSlots, TextState } from './Text.types'; /** * Render the final JSX of Text */ export const renderText_unstable = (state: TextState) => { - const { slots, slotProps } = getSlotsNext(state); + assertSlots(state); - return ; + return ; }; diff --git a/packages/react-components/react-text/src/components/Text/useText.ts b/packages/react-components/react-text/src/components/Text/useText.ts index 2a1aff79806b97..16cf5b256a37bc 100644 --- a/packages/react-components/react-text/src/components/Text/useText.ts +++ b/packages/react-components/react-text/src/components/Text/useText.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 { TextProps, TextState } from './Text.types'; /** @@ -29,11 +29,14 @@ export const useText_unstable = (props: TextProps, ref: React.Ref): components: { root: 'span' }, - root: getNativeElementProps(as, { - ref, - ...props, - as, - }), + root: slot.always( + getNativeElementProps(as, { + ref, + ...props, + as, + }), + { elementType: 'span' }, + ), }; return state;