From 8af5416effeb0642bc48abfd7e8e05b7a6087a9d Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 25 Sep 2023 16:53:11 +0300 Subject: [PATCH 01/26] feat(react-drawer): make dialog slot to be used for composition only --- ...wer-840c300d-046b-4ec7-b733-f88067df7dea.json | 7 +++++++ .../react-drawer/etc/react-drawer.api.md | 7 +++---- .../DrawerOverlay/DrawerOverlay.types.ts | 15 +++++++++++++-- .../DrawerOverlay/renderDrawerOverlay.tsx | 4 ++-- .../components/DrawerOverlay/useDrawerOverlay.ts | 16 +++++++++++----- .../useDrawerOverlayStyles.styles.ts | 2 +- 6 files changed, 37 insertions(+), 14 deletions(-) create mode 100644 change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json diff --git a/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json b/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json new file mode 100644 index 00000000000000..91d5c3da6c5214 --- /dev/null +++ b/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: make dialog slot internal to be used for composition only", + "packageName": "@fluentui/react-drawer", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index a361dd76f951ac..7d90c3c33e5ea8 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -131,19 +131,18 @@ export type DrawerInlineState = Required & Dra export const DrawerOverlay: ForwardRefComponent; // @public (undocumented) -export const drawerOverlayClassNames: Omit, 'dialog'>; +export const drawerOverlayClassNames: SlotClassNames; // @public export type DrawerOverlayProps = ComponentProps & Pick & DrawerBaseProps; -// @public (undocumented) +// @public export type DrawerOverlaySlots = DialogSurfaceSlots & { root: Slot; - dialog?: Slot; }; // @public -export type DrawerOverlayState = Omit, 'backdrop'> & Required, 'backdrop'> & Required; }>; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts index 3f8080b0de4469..8b9ae1b0e6bba3 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts @@ -4,13 +4,24 @@ import type { MotionState } from '@fluentui/react-motion-preview'; import type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types'; +/** + * DrawerOverlay slots + */ export type DrawerOverlaySlots = DialogSurfaceSlots & { + /** + * Slot for the root element. + */ root: Slot; +}; +/** + * DrawerOverlay internal slots for when using with composition API + */ +export type DrawerOverlayInternalSlots = DrawerOverlaySlots & { /** * Slot for the dialog component that wraps the drawer. */ - dialog?: Slot; + dialog: Slot; }; /** @@ -23,7 +34,7 @@ export type DrawerOverlayProps = ComponentProps & /** * State used in rendering DrawerOverlay */ -export type DrawerOverlayState = Omit, 'backdrop'> & +export type DrawerOverlayState = Omit, 'backdrop'> & Required< DrawerBaseState & { backdropMotion: MotionState; 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 b799726ae5d3ff..5cf31a07ecacf7 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx @@ -2,7 +2,7 @@ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { assertSlots } from '@fluentui/react-utilities'; -import type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types'; +import type { DrawerOverlayState, DrawerOverlayInternalSlots } from './DrawerOverlay.types'; /** * Render the final JSX of DrawerOverlay @@ -12,7 +12,7 @@ export const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => { return null; } - assertSlots(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 a7223c94c89d0d..5df5c29305cbfd 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts @@ -46,17 +46,23 @@ export const useDrawerOverlay_unstable = ( }, ); - const dialog = slot.optional(props.dialog, { - elementType: Dialog, - renderByDefault: true, - defaultProps: { + const dialog = slot.always( + { open: true, defaultOpen, onOpenChange, inertTrapFocus, modalType, + /* + * children is not needed here because we construct the children in the render function, + * but it's required by DialogProps + */ + children: null as unknown as JSX.Element, + }, + { + elementType: Dialog, }, - }); + ); return { components: { diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 35e7430cb5958f..74bd6230e0678b 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -11,7 +11,7 @@ import { useDrawerDurationStyles, } from '../../shared/useDrawerBaseStyles.styles'; -export const drawerOverlayClassNames: Omit, 'dialog'> = { +export const drawerOverlayClassNames: SlotClassNames = { root: 'fui-DrawerOverlay', backdrop: 'fui-DrawerOverlay__backdrop', }; From 322eb4bccd9318d83d570cbeaea56ac4a620b044 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 25 Sep 2023 16:53:33 +0300 Subject: [PATCH 02/26] fix: change type --- ...entui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json b/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json index 91d5c3da6c5214..f31ef092cb0bcf 100644 --- a/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json +++ b/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "fix: make dialog slot internal to be used for composition only", + "comment": "feat: make dialog slot internal to be used for composition only", "packageName": "@fluentui/react-drawer", "email": "marcosvmmoura@gmail.com", "dependentChangeType": "patch" From 770b9986dd9d38e21b79b7b9babcbf6bbfcd2574 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 26 Sep 2023 01:03:55 +0300 Subject: [PATCH 03/26] feat: create abstraction over DialogSurface --- .../src/components/DialogSurface/index.ts | 1 + .../react-dialog/src/index.ts | 9 +++- .../DrawerOverlay/DrawerOverlay.types.ts | 19 +++++-- .../DrawerOverlay/renderDrawerOverlay.tsx | 2 +- .../DrawerOverlay/useDrawerOverlay.ts | 22 ++++---- .../useDrawerOverlayStyles.styles.ts | 26 +++++----- .../DrawerOverlaySurface.tsx | 21 ++++++++ .../DrawerOverlaySurface.types.ts | 28 +++++++++++ .../components/DrawerOverlaySurface/index.ts | 5 ++ .../renderDrawerOverlaySurface.tsx | 15 ++++++ .../useDrawerOverlaySurface.ts | 32 ++++++++++++ .../useDrawerOverlaySurfaceStyles.styles.ts | 45 +++++++++++++++++ .../src/shared/useDrawerBaseStyles.styles.ts | 5 +- .../Drawer/DrawerMotionCustom.stories.tsx | 50 +++++++------------ 14 files changed, 217 insertions(+), 63 deletions(-) create mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/index.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/renderDrawerOverlaySurface.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurface.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts index 15d5efe48eeec0..e9b10abd4ef36d 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts @@ -3,3 +3,4 @@ export * from './DialogSurface.types'; export * from './renderDialogSurface'; export * from './useDialogSurface'; export * from './useDialogSurfaceStyles.styles'; +export * from './useDialogSurfaceContextValues'; diff --git a/packages/react-components/react-dialog/src/index.ts b/packages/react-components/react-dialog/src/index.ts index 8b6933da4c6896..60dad1028e4b4c 100644 --- a/packages/react-components/react-dialog/src/index.ts +++ b/packages/react-components/react-dialog/src/index.ts @@ -54,8 +54,15 @@ export { useDialogSurface_unstable, useDialogSurfaceStyles_unstable, renderDialogSurface_unstable, + useDialogSurfaceContextValues_unstable, +} from './DialogSurface'; +export type { + DialogSurfaceProps, + DialogSurfaceSlots, + DialogSurfaceState, + DialogSurfaceElement, + DialogSurfaceContextValues, } from './DialogSurface'; -export type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState, DialogSurfaceElement } from './DialogSurface'; export { DialogContent, diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts index 8b9ae1b0e6bba3..23b738b80aa4fd 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts @@ -1,17 +1,27 @@ -import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog'; +import type { DialogProps } from '@fluentui/react-dialog'; import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; import type { MotionState } from '@fluentui/react-motion-preview'; import type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types'; +import { DrawerOverlaySurfaceProps } from '../DrawerOverlaySurface/DrawerOverlaySurface.types'; /** * DrawerOverlay slots */ -export type DrawerOverlaySlots = DialogSurfaceSlots & { +export type DrawerOverlaySlots = { /** * Slot for the root element. */ - root: Slot; + root: Slot; + + /** + * Dimmed background of drawer. + * The default backdrop is rendered as a `
` with styling. + * This slot expects a `
` element which will replace the default backdrop. + * The backdrop should have `aria-hidden="true"`. + * + */ + backdrop?: Slot<'div'>; }; /** @@ -37,6 +47,9 @@ export type DrawerOverlayProps = ComponentProps & export type DrawerOverlayState = Omit, 'backdrop'> & Required< DrawerBaseState & { + /** + * Motion state for the drawer backdrop. + */ backdropMotion: MotionState; } >; 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 5cf31a07ecacf7..5fcf9addfa8eb3 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx @@ -8,7 +8,7 @@ import type { DrawerOverlayState, DrawerOverlayInternalSlots } from './DrawerOve * Render the final JSX of DrawerOverlay */ export const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => { - if (!state.dialog || !state.motion.canRender) { + if (!state.motion.canRender) { return null; } 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 5df5c29305cbfd..8184e4df3a747f 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts @@ -1,10 +1,11 @@ import * as React from 'react'; import { slot, useMergedRefs } from '@fluentui/react-utilities'; -import { Dialog, DialogSurface } from '@fluentui/react-dialog'; +import { Dialog } from '@fluentui/react-dialog'; import { useMotion } from '@fluentui/react-motion-preview'; import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps'; import type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types'; +import { DrawerOverlaySurface } from '../DrawerOverlaySurface/DrawerOverlaySurface'; /** * Create the state required to render DrawerOverlay. @@ -30,18 +31,17 @@ export const useDrawerOverlay_unstable = ( const root = slot.always( { ...props, - ref: useMergedRefs(ref, drawerMotion.ref), + backdrop: hasCustomBackdrop + ? { + ...slot.resolveShorthand(props.backdrop), + ref: backdropMotion.ref, + } + : null, }, { - elementType: DialogSurface, + elementType: DrawerOverlaySurface, defaultProps: { - backdrop: slot.optional(props.backdrop, { - elementType: 'div', - renderByDefault: hasCustomBackdrop, - defaultProps: { - ref: backdropMotion.ref, - }, - }), + ref: useMergedRefs(ref, drawerMotion.ref), }, }, ); @@ -66,7 +66,7 @@ export const useDrawerOverlay_unstable = ( return { components: { - root: DialogSurface, + root: DrawerOverlaySurface, dialog: Dialog, backdrop: 'div', }, diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 74bd6230e0678b..78eddebf65081e 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles, mergeClasses } from '@griffel/react'; +import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -19,18 +19,17 @@ export const drawerOverlayClassNames: SlotClassNames = { /** * Styles for the root slot */ +const useDrawerResetStyles = makeResetStyles({ + ...drawerDefaultStyles, + position: 'fixed', + top: 0, + bottom: 0, + opacity: 0, + boxShadow: '0px transparent', + transitionProperty: 'transform, box-shadow, opacity', + willChange: 'transform, box-shadow, opacity', +}); const useDrawerRootStyles = makeStyles({ - root: { - ...drawerDefaultStyles, - position: 'fixed', - top: 0, - bottom: 0, - opacity: 0, - boxShadow: '0px transparent', - transitionProperty: 'transform, box-shadow, opacity', - willChange: 'transform, box-shadow, opacity', - }, - /* Positioning */ start: { transform: `translate3D(calc(var(${drawerCSSVars.drawerSizeVar}) * -1), 0, 0)`, @@ -68,6 +67,7 @@ const useBackdropMotionStyles = makeStyles({ */ export const useDrawerOverlayStyles_unstable = (state: DrawerOverlayState): DrawerOverlayState => { const baseClassNames = useDrawerBaseClassNames(state); + const resetStyles = useDrawerResetStyles(); const rootStyles = useDrawerRootStyles(); const backdropMotionStyles = useBackdropMotionStyles(); const durationStyles = useDrawerDurationStyles(); @@ -77,7 +77,7 @@ export const useDrawerOverlayStyles_unstable = (state: DrawerOverlayState): Draw state.root.className = mergeClasses( drawerOverlayClassNames.root, baseClassNames, - rootStyles.root, + resetStyles, rootStyles[state.position], state.motion.active && rootStyles.visible, state.root.className, diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.tsx new file mode 100644 index 00000000000000..c3996bdbd0edeb --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +import { useDrawerOverlaySurface_unstable } from './useDrawerOverlaySurface'; +import { renderDrawerOverlaySurface_unstable } from './renderDrawerOverlaySurface'; +import { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles'; +import type { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface.types'; + +/** + * @internal + * DrawerOverlaySurface is a proxy for DialogSurface as is only meant to be used internally for Drawer. + */ +export const DrawerOverlaySurface: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useDrawerOverlaySurface_unstable(props, ref); + + useDrawerOverlaySurfaceStyles_unstable(state); + + return renderDrawerOverlaySurface_unstable(state); +}); + +DrawerOverlaySurface.displayName = 'DrawerOverlaySurface'; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts new file mode 100644 index 00000000000000..441860f5562b08 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts @@ -0,0 +1,28 @@ +import type { DialogSurfaceContextValues, DialogSurfaceSlots } from '@fluentui/react-dialog'; +import type { ComponentProps, ComponentState } from '@fluentui/react-utilities'; + +/** + * DrawerOverlaySurface slots + */ +export type DrawerOverlaySurfaceSlots = DialogSurfaceSlots; + +/** + * DrawerOverlaySurface Props + */ +export type DrawerOverlaySurfaceProps = ComponentProps; + +/** + * State used in rendering DrawerOverlaySurface + */ +export type DrawerOverlaySurfaceState = ComponentState & { + /** + * Dialog surface context values. + * This is used to pass context values to the dialog surface. + */ + dialogSurfaceContextValues: DialogSurfaceContextValues; + + /** + * Whether the drawer is nested inside another drawer. + */ + isNestedDrawer: boolean; +}; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/index.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/index.ts new file mode 100644 index 00000000000000..66e3e040ef7fbf --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/index.ts @@ -0,0 +1,5 @@ +export * from './DrawerOverlaySurface'; +export * from './DrawerOverlaySurface.types'; +export * from './renderDrawerOverlaySurface'; +export * from './useDrawerOverlaySurface'; +export * from './useDrawerOverlaySurfaceStyles.styles'; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/renderDrawerOverlaySurface.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/renderDrawerOverlaySurface.tsx new file mode 100644 index 00000000000000..734a13d11f351e --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/renderDrawerOverlaySurface.tsx @@ -0,0 +1,15 @@ +/** @jsxRuntime automatic */ +/** @jsxImportSource @fluentui/react-jsx-runtime */ +import { assertSlots } from '@fluentui/react-utilities'; +import { renderDialogSurface_unstable } from '@fluentui/react-dialog'; + +import type { DrawerOverlaySurfaceState, DrawerOverlaySurfaceSlots } from './DrawerOverlaySurface.types'; + +/** + * Render the final JSX of DrawerOverlaySurface + */ +export const renderDrawerOverlaySurface_unstable = (state: DrawerOverlaySurfaceState) => { + assertSlots(state); + + return renderDialogSurface_unstable(state, state.dialogSurfaceContextValues); +}; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurface.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurface.ts new file mode 100644 index 00000000000000..cfa138ecd6c563 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurface.ts @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { + useDialogSurface_unstable, + useDialogSurfaceContextValues_unstable, + useDialogContext_unstable, +} from '@fluentui/react-dialog'; + +import type { DrawerOverlaySurfaceProps, DrawerOverlaySurfaceState } from './DrawerOverlaySurface.types'; + +/** + * Create the state required to render DrawerOverlaySurface. + * + * The returned state can be modified with hooks such as useDrawerOverlaySurfaceStyles_unstable, + * before being passed to renderDrawerOverlaySurface_unstable. + * + * @param props - props from this instance of DrawerOverlaySurface + * @param ref - reference to root HTMLDivElement of DrawerOverlaySurface + */ +export const useDrawerOverlaySurface_unstable = ( + props: DrawerOverlaySurfaceProps, + ref: React.Ref, +): DrawerOverlaySurfaceState => { + const dialogSurfaceState = useDialogSurface_unstable(props, ref); + const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState); + const isNestedDrawer = useDialogContext_unstable(ctx => ctx.isNestedDialog); + + return { + ...dialogSurfaceState, + dialogSurfaceContextValues, + isNestedDrawer, + }; +}; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts new file mode 100644 index 00000000000000..f6dde26f69f279 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts @@ -0,0 +1,45 @@ +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +import type { DrawerOverlaySurfaceSlots, DrawerOverlaySurfaceState } from './DrawerOverlaySurface.types'; + +export const drawerOverlaySurfaceClassNames: SlotClassNames = { + root: 'fui-DrawerOverlaySurface', + backdrop: 'fui-DrawerOverlaySurface__backdrop', +}; + +/** + * Styles for the backdrop slot + */ +const useBackdropResetStyles = makeResetStyles({ + ...shorthands.inset('0px'), + position: 'fixed', + backgroundColor: 'rgba(0, 0, 0, 0.4)', +}); + +const useBackdropStyles = makeStyles({ + nested: { + backgroundColor: 'transparent', + }, +}); + +/** + * Apply styling to the DrawerOverlaySurface slots based on the state + */ +export const useDrawerOverlaySurfaceStyles_unstable = (state: DrawerOverlaySurfaceState): DrawerOverlaySurfaceState => { + const backdropResetStyles = useBackdropResetStyles(); + const backdropStyles = useBackdropStyles(); + + state.root.className = mergeClasses(drawerOverlaySurfaceClassNames.root, state.root.className); + + if (state.backdrop) { + state.backdrop.className = mergeClasses( + drawerOverlaySurfaceClassNames.backdrop, + backdropResetStyles, + state.isNestedDrawer && backdropStyles.nested, + state.backdrop.className, + ); + } + + return state; +}; diff --git a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts index 85e96d626dcbc8..40fec51ab36a06 100644 --- a/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts +++ b/packages/react-components/react-drawer/src/shared/useDrawerBaseStyles.styles.ts @@ -14,20 +14,19 @@ export const drawerCSSVars = { * Default shared styles for the Drawer component */ export const drawerDefaultStyles: GriffelStyle = { - ...shorthands.padding(0), ...shorthands.overflow('hidden'), - ...shorthands.borderRadius(0), - ...shorthands.border(0), width: `var(${drawerCSSVars.drawerSizeVar})`, maxWidth: '100vw', height: 'auto', + maxHeight: '100vh', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', backgroundColor: tokens.colorNeutralBackground1, + color: tokens.colorNeutralForeground1, }; /** diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx index e2945107876a86..8900ff3e847282 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerMotionCustom.stories.tsx @@ -4,18 +4,6 @@ import { Button, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/ import { Dismiss24Regular } from '@fluentui/react-icons'; import { useMotion } from '@fluentui/react-motion-preview'; -const visibleKeyframe = { - ...shorthands.borderRadius(0), - opacity: 1, - transform: 'translate3D(0, 0, 0) scale(1)', -}; - -const hiddenKeyframe = { - ...shorthands.borderRadius('36px'), - opacity: 0, - transform: 'translate3D(-100%, 0, 0) scale(0.5)', -}; - const useStyles = makeStyles({ root: { ...shorthands.border('2px', 'solid', '#ccc'), @@ -27,24 +15,23 @@ const useStyles = makeStyles({ }, drawer: { - animationDuration: tokens.durationGentle, - willChange: 'opacity, transform, border-radius', + opacity: 0, + transform: 'translate3D(-100%, 0, 0)', + transitionDuration: tokens.durationGentle, + willChange: 'opacity, transform', + }, + + drawerVisible: { + opacity: 1, + transform: 'translate3D(0, 0, 0)', }, drawerEntering: { - animationTimingFunction: tokens.curveDecelerateMid, - animationName: { - from: hiddenKeyframe, - to: visibleKeyframe, - }, + transitionTimingFunction: tokens.curveDecelerateMid, }, drawerExiting: { - animationTimingFunction: tokens.curveAccelerateMin, - animationName: { - from: visibleKeyframe, - to: hiddenKeyframe, - }, + transitionTimingFunction: tokens.curveAccelerateMin, }, content: { @@ -80,8 +67,8 @@ const useStyles = makeStyles({ export const MotionCustom = () => { const styles = useStyles(); - const [isOpen, setIsOpen] = React.useState(false); - const motion = useMotion(isOpen); + const [open, setOpen] = React.useState(false); + const motion = useMotion(open); return (
@@ -90,6 +77,7 @@ export const MotionCustom = () => { open={motion} className={mergeClasses( styles.drawer, + motion.active && styles.drawerVisible, motion.type === 'entering' && styles.drawerEntering, motion.type === 'exiting' && styles.drawerExiting, )} @@ -101,7 +89,7 @@ export const MotionCustom = () => { appearance="subtle" aria-label="Close" icon={} - onClick={() => setIsOpen(false)} + onClick={() => setOpen(false)} /> } > @@ -123,8 +111,8 @@ export const MotionCustom = () => { motion.type === 'idle' && styles.contentIdle, )} > - {Array.from({ length: 50 }, (_, i) => ( @@ -143,9 +131,9 @@ MotionCustom.parameters = { docs: { description: { story: [ - 'Drawer components have transition animations built-in. However, you can customize the animation by using the `useMotion` hook.', + 'Drawer components have motion built-in. However, you can customize the animation by using the `useMotion` hook.', 'The hook returns properties that can be used to determine the state of the animation, and can be passed to the `open` prop of the drawer.', - 'With this, you can create your own custom CSS animation and apply it to the drawer.', + 'With this, you can create your own custom CSS animation/transition and apply it to the drawer.', ].join('\n'), }, }, From a2a52bf1e19e58a53d1c4b52da3e941360d141eb Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 26 Sep 2023 01:07:42 +0300 Subject: [PATCH 04/26] fix: merge backdrop refs --- .../src/components/DrawerOverlay/useDrawerOverlay.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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 8184e4df3a747f..9f6f4db16b7875 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts @@ -26,15 +26,17 @@ export const useDrawerOverlay_unstable = ( const drawerMotion = useMotion(open); const backdropMotion = useMotion(open); - const hasCustomBackdrop = modalType !== 'non-modal' && props.backdrop !== null; + const backdropProps = slot.resolveShorthand(props.backdrop); + const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null; + const backdropRefs = useMergedRefs(backdropMotion.ref, backdropProps?.ref); const root = slot.always( { ...props, backdrop: hasCustomBackdrop ? { - ...slot.resolveShorthand(props.backdrop), - ref: backdropMotion.ref, + ...backdropProps, + ref: backdropRefs, } : null, }, From 6f6329d1c80043c68b16ce33e24425868be8f5d8 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 26 Sep 2023 01:09:07 +0300 Subject: [PATCH 05/26] fix: generate API --- .../react-dialog/etc/react-dialog.api.md | 8 ++++++++ .../react-drawer/etc/react-drawer.api.md | 10 +++++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-dialog/etc/react-dialog.api.md b/packages/react-components/react-dialog/etc/react-dialog.api.md index c12aa430a27f7a..36a39ba203a219 100644 --- a/packages/react-components/react-dialog/etc/react-dialog.api.md +++ b/packages/react-components/react-dialog/etc/react-dialog.api.md @@ -145,6 +145,11 @@ export const dialogSurfaceClassNames: SlotClassNames; // @public (undocumented) export type DialogSurfaceContextValue = boolean; +// @public (undocumented) +export type DialogSurfaceContextValues = { + dialogSurface: DialogSurfaceContextValue; +}; + // @public export type DialogSurfaceElement = HTMLElement; @@ -254,6 +259,9 @@ export const useDialogSurface_unstable: (props: DialogSurfaceProps, ref: React_2 // @public (undocumented) export const useDialogSurfaceContext_unstable: () => boolean; +// @public (undocumented) +export function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues; + // @public export const useDialogSurfaceStyles_unstable: (state: DialogSurfaceState) => DialogSurfaceState; diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index 7d90c3c33e5ea8..b1906a6bb73a2c 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -8,9 +8,8 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; -import { DialogProps } from '@fluentui/react-dialog'; -import { DialogSurfaceProps } from '@fluentui/react-dialog'; -import { DialogSurfaceSlots } from '@fluentui/react-dialog'; +import type { DialogProps } from '@fluentui/react-dialog'; +import type { DialogSurfaceSlots } from '@fluentui/react-dialog'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { MotionShorthand } from '@fluentui/react-motion-preview'; import { MotionState } from '@fluentui/react-motion-preview'; @@ -137,8 +136,9 @@ export const drawerOverlayClassNames: SlotClassNames; export type DrawerOverlayProps = ComponentProps & Pick & DrawerBaseProps; // @public -export type DrawerOverlaySlots = DialogSurfaceSlots & { - root: Slot; +export type DrawerOverlaySlots = { + root: Slot; + backdrop?: Slot<'div'>; }; // @public From 7593b147af62f0b03c13872597e81d0bcf3b82f5 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 26 Sep 2023 01:22:59 +0300 Subject: [PATCH 06/26] fix: add outline styles --- .../DialogSurface/useDialogSurfaceStyles.styles.ts | 13 ++----------- packages/react-components/react-drawer/package.json | 1 + .../useDrawerOverlaySurfaceStyles.styles.ts | 12 ++++++++++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts index 3ae582ff31e78d..1dfc5bd47c45ab 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts @@ -31,9 +31,6 @@ const useStyles = makeStyles({ ...shorthands.margin('auto'), ...shorthands.borderStyle('none'), ...shorthands.overflow('unset'), - '&::backdrop': { - backgroundColor: 'rgba(0, 0, 0, 0.4)', - }, position: 'fixed', height: 'fit-content', maxWidth: '600px', @@ -53,14 +50,9 @@ const useStyles = makeStyles({ backgroundColor: 'rgba(0, 0, 0, 0.4)', ...shorthands.inset('0px'), }, - nestedDialogBackdrop: { + nested: { backgroundColor: 'transparent', }, - nestedNativeDialogBackdrop: { - '&::backdrop': { - backgroundColor: 'transparent', - }, - }, }); /** @@ -74,14 +66,13 @@ export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): Dial dialogSurfaceClassNames.root, styles.root, styles.focusOutline, - isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className, ); if (state.backdrop) { state.backdrop.className = mergeClasses( dialogSurfaceClassNames.backdrop, styles.backdrop, - isNestedDialog && styles.nestedDialogBackdrop, + isNestedDialog && styles.nested, state.backdrop.className, ); } diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json index 3d8ab62c946ee3..84035396e701b9 100644 --- a/packages/react-components/react-drawer/package.json +++ b/packages/react-components/react-drawer/package.json @@ -39,6 +39,7 @@ "@fluentui/react-jsx-runtime": "^9.0.10", "@fluentui/react-motion-preview": "^0.2.6", "@fluentui/react-shared-contexts": "^9.8.1", + "@fluentui/react-tabster": "^9.12.11", "@fluentui/react-theme": "^9.1.12", "@fluentui/react-utilities": "^9.13.3", "@griffel/react": "^1.5.14", diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts index f6dde26f69f279..ad61606c2a23ca 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts @@ -1,4 +1,5 @@ import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import type { SlotClassNames } from '@fluentui/react-utilities'; import type { DrawerOverlaySurfaceSlots, DrawerOverlaySurfaceState } from './DrawerOverlaySurface.types'; @@ -8,6 +9,13 @@ export const drawerOverlaySurfaceClassNames: SlotClassNames { + const rootStyles = useRootStyles(); const backdropResetStyles = useBackdropResetStyles(); const backdropStyles = useBackdropStyles(); - state.root.className = mergeClasses(drawerOverlaySurfaceClassNames.root, state.root.className); + state.root.className = mergeClasses(rootStyles.focusOutline, state.root.className); if (state.backdrop) { state.backdrop.className = mergeClasses( - drawerOverlaySurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDrawer && backdropStyles.nested, state.backdrop.className, From e7e16604d489d8b30a9392e4cade5f1bb60cda01 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 26 Sep 2023 01:25:04 +0300 Subject: [PATCH 07/26] fix: rename nested var --- .../DrawerOverlaySurface/DrawerOverlaySurface.types.ts | 2 +- .../DrawerOverlaySurface/useDrawerOverlaySurface.ts | 4 ++-- .../useDrawerOverlaySurfaceStyles.styles.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts index 441860f5562b08..c3249ab3f43d9b 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts @@ -24,5 +24,5 @@ export type DrawerOverlaySurfaceState = ComponentState { const dialogSurfaceState = useDialogSurface_unstable(props, ref); const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState); - const isNestedDrawer = useDialogContext_unstable(ctx => ctx.isNestedDialog); + const nested = useDialogContext_unstable(ctx => ctx.isNestedDialog); return { ...dialogSurfaceState, dialogSurfaceContextValues, - isNestedDrawer, + nested, }; }; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts index ad61606c2a23ca..dc4de836f23299 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts @@ -44,7 +44,7 @@ export const useDrawerOverlaySurfaceStyles_unstable = (state: DrawerOverlaySurfa if (state.backdrop) { state.backdrop.className = mergeClasses( backdropResetStyles, - state.isNestedDrawer && backdropStyles.nested, + state.nested && backdropStyles.nested, state.backdrop.className, ); } From b3701aa927cfd11101b6d39634a803c52c62f866 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 4 Oct 2023 15:26:33 +0300 Subject: [PATCH 08/26] fix: unify component, state and renderization --- .../DrawerOverlaySurface.tsx | 20 +++++++++--- .../DrawerOverlaySurface.types.ts | 0 .../DrawerOverlaySurface/index.ts | 2 ++ .../useDrawerOverlaySurfaceStyles.styles.ts | 0 .../DrawerOverlay/useDrawerOverlay.ts | 18 +++++------ .../components/DrawerOverlaySurface/index.ts | 5 --- .../renderDrawerOverlaySurface.tsx | 15 --------- .../useDrawerOverlaySurface.ts | 32 ------------------- 8 files changed, 26 insertions(+), 66 deletions(-) rename packages/react-components/react-drawer/src/components/{ => DrawerOverlay}/DrawerOverlaySurface/DrawerOverlaySurface.tsx (52%) rename packages/react-components/react-drawer/src/components/{ => DrawerOverlay}/DrawerOverlaySurface/DrawerOverlaySurface.types.ts (100%) create mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/index.ts rename packages/react-components/react-drawer/src/components/{ => DrawerOverlay}/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts (100%) delete mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/index.ts delete mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/renderDrawerOverlaySurface.tsx delete mode 100644 packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurface.ts diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx similarity index 52% rename from packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.tsx rename to packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx index c3996bdbd0edeb..89c3cdcd86c613 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx @@ -1,8 +1,12 @@ import * as React from 'react'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { + useDialogContext_unstable, + useDialogSurface_unstable, + useDialogSurfaceContextValues_unstable, + renderDialogSurface_unstable, +} from '@fluentui/react-dialog'; -import { useDrawerOverlaySurface_unstable } from './useDrawerOverlaySurface'; -import { renderDrawerOverlaySurface_unstable } from './renderDrawerOverlaySurface'; import { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles'; import type { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface.types'; @@ -11,11 +15,19 @@ import type { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface.types'; * DrawerOverlaySurface is a proxy for DialogSurface as is only meant to be used internally for Drawer. */ export const DrawerOverlaySurface: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useDrawerOverlaySurface_unstable(props, ref); + const dialogSurfaceState = useDialogSurface_unstable(props, ref); + const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState); + const nested = useDialogContext_unstable(ctx => ctx.isNestedDialog); + + const state = { + ...dialogSurfaceState, + dialogSurfaceContextValues, + nested, + }; useDrawerOverlaySurfaceStyles_unstable(state); - return renderDrawerOverlaySurface_unstable(state); + return renderDialogSurface_unstable(state, state.dialogSurfaceContextValues); }); DrawerOverlaySurface.displayName = 'DrawerOverlaySurface'; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts similarity index 100% rename from packages/react-components/react-drawer/src/components/DrawerOverlaySurface/DrawerOverlaySurface.types.ts rename to packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/index.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/index.ts new file mode 100644 index 00000000000000..f6fa0574cb404a --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/index.ts @@ -0,0 +1,2 @@ +export * from './DrawerOverlaySurface'; +export * from './DrawerOverlaySurface.types'; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts similarity index 100% rename from packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts rename to packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts 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 9f6f4db16b7875..7ebd441e3b1ac0 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts @@ -5,7 +5,7 @@ import { useMotion } from '@fluentui/react-motion-preview'; import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps'; import type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types'; -import { DrawerOverlaySurface } from '../DrawerOverlaySurface/DrawerOverlaySurface'; +import { DrawerOverlaySurface } from './DrawerOverlaySurface'; /** * Create the state required to render DrawerOverlay. @@ -26,19 +26,17 @@ export const useDrawerOverlay_unstable = ( const drawerMotion = useMotion(open); const backdropMotion = useMotion(open); - const backdropProps = slot.resolveShorthand(props.backdrop); - const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null; - const backdropRefs = useMergedRefs(backdropMotion.ref, backdropProps?.ref); + const backdropInnerProps = slot.resolveShorthand(props.backdrop); + const hasCustomBackdrop = modalType !== 'non-modal' && backdropInnerProps !== null; + const backdropProps = { + ...backdropInnerProps, + ref: useMergedRefs(backdropMotion.ref, backdropInnerProps?.ref), + }; const root = slot.always( { ...props, - backdrop: hasCustomBackdrop - ? { - ...backdropProps, - ref: backdropRefs, - } - : null, + backdrop: hasCustomBackdrop ? backdropProps : null, }, { elementType: DrawerOverlaySurface, diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/index.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/index.ts deleted file mode 100644 index 66e3e040ef7fbf..00000000000000 --- a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './DrawerOverlaySurface'; -export * from './DrawerOverlaySurface.types'; -export * from './renderDrawerOverlaySurface'; -export * from './useDrawerOverlaySurface'; -export * from './useDrawerOverlaySurfaceStyles.styles'; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/renderDrawerOverlaySurface.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/renderDrawerOverlaySurface.tsx deleted file mode 100644 index 734a13d11f351e..00000000000000 --- a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/renderDrawerOverlaySurface.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/** @jsxRuntime automatic */ -/** @jsxImportSource @fluentui/react-jsx-runtime */ -import { assertSlots } from '@fluentui/react-utilities'; -import { renderDialogSurface_unstable } from '@fluentui/react-dialog'; - -import type { DrawerOverlaySurfaceState, DrawerOverlaySurfaceSlots } from './DrawerOverlaySurface.types'; - -/** - * Render the final JSX of DrawerOverlaySurface - */ -export const renderDrawerOverlaySurface_unstable = (state: DrawerOverlaySurfaceState) => { - assertSlots(state); - - return renderDialogSurface_unstable(state, state.dialogSurfaceContextValues); -}; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurface.ts b/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurface.ts deleted file mode 100644 index 038e5514296854..00000000000000 --- a/packages/react-components/react-drawer/src/components/DrawerOverlaySurface/useDrawerOverlaySurface.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import { - useDialogSurface_unstable, - useDialogSurfaceContextValues_unstable, - useDialogContext_unstable, -} from '@fluentui/react-dialog'; - -import type { DrawerOverlaySurfaceProps, DrawerOverlaySurfaceState } from './DrawerOverlaySurface.types'; - -/** - * Create the state required to render DrawerOverlaySurface. - * - * The returned state can be modified with hooks such as useDrawerOverlaySurfaceStyles_unstable, - * before being passed to renderDrawerOverlaySurface_unstable. - * - * @param props - props from this instance of DrawerOverlaySurface - * @param ref - reference to root HTMLDivElement of DrawerOverlaySurface - */ -export const useDrawerOverlaySurface_unstable = ( - props: DrawerOverlaySurfaceProps, - ref: React.Ref, -): DrawerOverlaySurfaceState => { - const dialogSurfaceState = useDialogSurface_unstable(props, ref); - const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState); - const nested = useDialogContext_unstable(ctx => ctx.isNestedDialog); - - return { - ...dialogSurfaceState, - dialogSurfaceContextValues, - nested, - }; -}; From dfbfaf0bd5d54f6344a951f55cebaede6e5fbe38 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 4 Oct 2023 16:01:40 +0300 Subject: [PATCH 09/26] fix: rename variable --- .../DrawerOverlay/useDrawerOverlayStyles.styles.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 78eddebf65081e..fb74e4a346508b 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -29,6 +29,7 @@ const useDrawerResetStyles = makeResetStyles({ transitionProperty: 'transform, box-shadow, opacity', willChange: 'transform, box-shadow, opacity', }); + const useDrawerRootStyles = makeStyles({ /* Positioning */ start: { @@ -49,7 +50,7 @@ const useDrawerRootStyles = makeStyles({ /** * Styles for the backdrop slot */ -const useBackdropMotionStyles = makeStyles({ +const useBackdropStyles = makeStyles({ backdrop: { opacity: 0, transitionProperty: 'opacity', @@ -69,7 +70,7 @@ export const useDrawerOverlayStyles_unstable = (state: DrawerOverlayState): Draw const baseClassNames = useDrawerBaseClassNames(state); const resetStyles = useDrawerResetStyles(); const rootStyles = useDrawerRootStyles(); - const backdropMotionStyles = useBackdropMotionStyles(); + const backdropStyles = useBackdropStyles(); const durationStyles = useDrawerDurationStyles(); const backdrop = state.root.backdrop as React.HTMLAttributes | undefined; @@ -86,9 +87,9 @@ export const useDrawerOverlayStyles_unstable = (state: DrawerOverlayState): Draw if (backdrop) { backdrop.className = mergeClasses( drawerOverlayClassNames.backdrop, - backdropMotionStyles.backdrop, + backdropStyles.backdrop, durationStyles[state.size], - state.backdropMotion.active && backdropMotionStyles.visible, + state.backdropMotion.active && backdropStyles.visible, backdrop.className, ); } From 166130acf2a8367ae834f4ee58b32e90e664e91a Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 4 Oct 2023 16:10:38 +0300 Subject: [PATCH 10/26] fix: wrong imports and types --- .../components/DrawerOverlay/DrawerOverlay.types.ts | 2 +- .../DrawerOverlaySurface/DrawerOverlaySurface.tsx | 11 ++++------- .../DrawerOverlaySurface.types.ts | 8 +------- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts index 23b738b80aa4fd..b6d04675f4c4c9 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts @@ -3,7 +3,7 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili import type { MotionState } from '@fluentui/react-motion-preview'; import type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types'; -import { DrawerOverlaySurfaceProps } from '../DrawerOverlaySurface/DrawerOverlaySurface.types'; +import { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface'; /** * DrawerOverlay slots diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx index 89c3cdcd86c613..adf43d276c5912 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx @@ -8,7 +8,7 @@ import { } from '@fluentui/react-dialog'; import { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles'; -import type { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface.types'; +import type { DrawerOverlaySurfaceProps, DrawerOverlaySurfaceState } from './DrawerOverlaySurface.types'; /** * @internal @@ -17,17 +17,14 @@ import type { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface.types'; export const DrawerOverlaySurface: ForwardRefComponent = React.forwardRef((props, ref) => { const dialogSurfaceState = useDialogSurface_unstable(props, ref); const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState); - const nested = useDialogContext_unstable(ctx => ctx.isNestedDialog); - - const state = { + const state: DrawerOverlaySurfaceState = { ...dialogSurfaceState, - dialogSurfaceContextValues, - nested, + nested: useDialogContext_unstable(ctx => ctx.isNestedDialog), }; useDrawerOverlaySurfaceStyles_unstable(state); - return renderDialogSurface_unstable(state, state.dialogSurfaceContextValues); + return renderDialogSurface_unstable(state, dialogSurfaceContextValues); }); DrawerOverlaySurface.displayName = 'DrawerOverlaySurface'; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts index c3249ab3f43d9b..29cf90608bb87c 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts @@ -1,4 +1,4 @@ -import type { DialogSurfaceContextValues, DialogSurfaceSlots } from '@fluentui/react-dialog'; +import type { DialogSurfaceSlots } from '@fluentui/react-dialog'; import type { ComponentProps, ComponentState } from '@fluentui/react-utilities'; /** @@ -15,12 +15,6 @@ export type DrawerOverlaySurfaceProps = ComponentProps & { - /** - * Dialog surface context values. - * This is used to pass context values to the dialog surface. - */ - dialogSurfaceContextValues: DialogSurfaceContextValues; - /** * Whether the drawer is nested inside another drawer. */ From ce59ebf9d53044730311d5b25e31f54c77465d75 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 4 Oct 2023 16:13:35 +0300 Subject: [PATCH 11/26] fix: add changefile --- ...-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json diff --git a/change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json b/change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json new file mode 100644 index 00000000000000..7c19a01270cc6c --- /dev/null +++ b/change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: expose dialog surface context values", + "packageName": "@fluentui/react-dialog", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} From 48344c28f66045379b97dc0556c4a05cbb7e77e2 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 4 Oct 2023 18:05:46 +0300 Subject: [PATCH 12/26] fix: use token instead of hardcoded style --- .../components/DialogSurface/useDialogSurfaceStyles.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts index 6d4887ebaa071c..55f6b9d3024236 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts @@ -56,7 +56,7 @@ const useRootResetStyles = makeResetStyles({ const useStyles = makeStyles({ nestedDialogBackdrop: { - backgroundColor: 'transparent', + backgroundColor: tokens.colorTransparentBackground, }, }); From 9e28ae6255d9d33a1bb3e094c82764eb17423c3e Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 11:33:39 +0300 Subject: [PATCH 13/26] Discard changes to packages/react-components/react-dialog/src/components/DialogSurface/index.ts --- .../react-dialog/src/components/DialogSurface/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts index e9b10abd4ef36d..15d5efe48eeec0 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/index.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/index.ts @@ -3,4 +3,3 @@ export * from './DialogSurface.types'; export * from './renderDialogSurface'; export * from './useDialogSurface'; export * from './useDialogSurfaceStyles.styles'; -export * from './useDialogSurfaceContextValues'; From fcfd86dd7b818b2b784978d2de48873197d9f064 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 11:34:17 +0300 Subject: [PATCH 14/26] Discard changes to packages/react-components/react-dialog/src/index.ts --- packages/react-components/react-dialog/src/index.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/react-components/react-dialog/src/index.ts b/packages/react-components/react-dialog/src/index.ts index 60dad1028e4b4c..8b6933da4c6896 100644 --- a/packages/react-components/react-dialog/src/index.ts +++ b/packages/react-components/react-dialog/src/index.ts @@ -54,15 +54,8 @@ export { useDialogSurface_unstable, useDialogSurfaceStyles_unstable, renderDialogSurface_unstable, - useDialogSurfaceContextValues_unstable, -} from './DialogSurface'; -export type { - DialogSurfaceProps, - DialogSurfaceSlots, - DialogSurfaceState, - DialogSurfaceElement, - DialogSurfaceContextValues, } from './DialogSurface'; +export type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState, DialogSurfaceElement } from './DialogSurface'; export { DialogContent, From 3ffc170609c3fcc842e146e01d53b344fa312681 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 11:36:26 +0300 Subject: [PATCH 15/26] Discard changes to packages/react-components/react-dialog/etc/react-dialog.api.md --- .../react-components/react-dialog/etc/react-dialog.api.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/react-components/react-dialog/etc/react-dialog.api.md b/packages/react-components/react-dialog/etc/react-dialog.api.md index 36a39ba203a219..c12aa430a27f7a 100644 --- a/packages/react-components/react-dialog/etc/react-dialog.api.md +++ b/packages/react-components/react-dialog/etc/react-dialog.api.md @@ -145,11 +145,6 @@ export const dialogSurfaceClassNames: SlotClassNames; // @public (undocumented) export type DialogSurfaceContextValue = boolean; -// @public (undocumented) -export type DialogSurfaceContextValues = { - dialogSurface: DialogSurfaceContextValue; -}; - // @public export type DialogSurfaceElement = HTMLElement; @@ -259,9 +254,6 @@ export const useDialogSurface_unstable: (props: DialogSurfaceProps, ref: React_2 // @public (undocumented) export const useDialogSurfaceContext_unstable: () => boolean; -// @public (undocumented) -export function useDialogSurfaceContextValues_unstable(state: DialogSurfaceState): DialogSurfaceContextValues; - // @public export const useDialogSurfaceStyles_unstable: (state: DialogSurfaceState) => DialogSurfaceState; From dbfedaafaf20b30711ffafbecedcd669918cb536 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 11:36:18 +0300 Subject: [PATCH 16/26] Discard changes to packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts --- .../useDialogSurfaceStyles.styles.ts | 27 +++++-------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts index 55f6b9d3024236..7fa3fa225927c1 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts @@ -1,13 +1,8 @@ -import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; -import { - MEDIA_QUERY_BREAKPOINT_SELECTOR, - SURFACE_BORDER_WIDTH, - SURFACE_PADDING, - useDialogContext_unstable, -} from '../../contexts'; +import { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts'; import type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types'; export const dialogSurfaceClassNames: SlotClassNames = { @@ -15,13 +10,6 @@ export const dialogSurfaceClassNames: SlotClassNames = { backdrop: 'fui-DialogSurface__backdrop', }; -/** - * Generic reusable backdrop styles - */ -export const backdropStyles: GriffelStyle = { - backgroundColor: 'rgba(0, 0, 0, 0.4)', -}; - /** * Styles for the root slot */ @@ -54,9 +42,9 @@ const useRootResetStyles = makeResetStyles({ }, }); -const useStyles = makeStyles({ +const useBackdropStyles = makeStyles({ nestedDialogBackdrop: { - backgroundColor: tokens.colorTransparentBackground, + backgroundColor: 'transparent', }, }); @@ -65,7 +53,7 @@ const useStyles = makeStyles({ */ const useBackdropResetStyles = makeResetStyles({ ...shorthands.inset('0px'), - ...backdropStyles, + backgroundColor: 'rgba(0, 0, 0, 0.4)', position: 'fixed', }); @@ -74,9 +62,8 @@ const useBackdropResetStyles = makeResetStyles({ */ export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => { const surfaceResetStyles = useRootResetStyles(); - const styles = useStyles(); + const styles = useBackdropStyles(); const backdropResetStyles = useBackdropResetStyles(); - const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog); state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className); @@ -84,7 +71,7 @@ export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): Dial state.backdrop.className = mergeClasses( dialogSurfaceClassNames.backdrop, backdropResetStyles, - isNestedDialog && styles.nestedDialogBackdrop, + state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className, ); } From 5d87fbfab3fa05fa9b90c549410555dc605ece0b Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 11:51:15 +0300 Subject: [PATCH 17/26] fix: use values already present on dialog state --- .../DrawerOverlaySurface/DrawerOverlaySurface.tsx | 11 +++-------- .../DrawerOverlaySurface.types.ts | 9 ++------- .../useDrawerOverlaySurfaceStyles.styles.ts | 2 +- 3 files changed, 6 insertions(+), 16 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx index adf43d276c5912..aa254c250f1db6 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { - useDialogContext_unstable, useDialogSurface_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable, } from '@fluentui/react-dialog'; import { useDrawerOverlaySurfaceStyles_unstable } from './useDrawerOverlaySurfaceStyles.styles'; -import type { DrawerOverlaySurfaceProps, DrawerOverlaySurfaceState } from './DrawerOverlaySurface.types'; +import type { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface.types'; /** * @internal @@ -17,14 +16,10 @@ import type { DrawerOverlaySurfaceProps, DrawerOverlaySurfaceState } from './Dra export const DrawerOverlaySurface: ForwardRefComponent = React.forwardRef((props, ref) => { const dialogSurfaceState = useDialogSurface_unstable(props, ref); const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState); - const state: DrawerOverlaySurfaceState = { - ...dialogSurfaceState, - nested: useDialogContext_unstable(ctx => ctx.isNestedDialog), - }; - useDrawerOverlaySurfaceStyles_unstable(state); + useDrawerOverlaySurfaceStyles_unstable(dialogSurfaceState); - return renderDialogSurface_unstable(state, dialogSurfaceContextValues); + return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues); }); DrawerOverlaySurface.displayName = 'DrawerOverlaySurface'; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts index 29cf90608bb87c..26334a1e95bca4 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/DrawerOverlaySurface.types.ts @@ -1,4 +1,4 @@ -import type { DialogSurfaceSlots } from '@fluentui/react-dialog'; +import type { DialogSurfaceSlots, DialogSurfaceState } from '@fluentui/react-dialog'; import type { ComponentProps, ComponentState } from '@fluentui/react-utilities'; /** @@ -14,9 +14,4 @@ export type DrawerOverlaySurfaceProps = ComponentProps & { - /** - * Whether the drawer is nested inside another drawer. - */ - nested: boolean; -}; +export type DrawerOverlaySurfaceState = ComponentState & DialogSurfaceState; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts index dc4de836f23299..9aab397f99d32e 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts @@ -44,7 +44,7 @@ export const useDrawerOverlaySurfaceStyles_unstable = (state: DrawerOverlaySurfa if (state.backdrop) { state.backdrop.className = mergeClasses( backdropResetStyles, - state.nested && backdropStyles.nested, + state.isNestedDialog && backdropStyles.nested, state.backdrop.className, ); } From 1477140d957a60f715ee0360b5aaae8d6cdcdc81 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 11:51:37 +0300 Subject: [PATCH 18/26] fix: remove duplicated backdrop class name --- .../src/components/DrawerOverlay/DrawerOverlay.types.ts | 9 --------- .../src/components/DrawerOverlay/useDrawerOverlay.ts | 1 - .../DrawerOverlay/useDrawerOverlayStyles.styles.ts | 2 -- 3 files changed, 12 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts index b6d04675f4c4c9..4adfc8cfdac998 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts @@ -13,15 +13,6 @@ export type DrawerOverlaySlots = { * Slot for the root element. */ root: Slot; - - /** - * Dimmed background of drawer. - * The default backdrop is rendered as a `
` with styling. - * This slot expects a `
` element which will replace the default backdrop. - * The backdrop should have `aria-hidden="true"`. - * - */ - backdrop?: Slot<'div'>; }; /** 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 7ebd441e3b1ac0..da080996b9ba9b 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts @@ -68,7 +68,6 @@ export const useDrawerOverlay_unstable = ( components: { root: DrawerOverlaySurface, dialog: Dialog, - backdrop: 'div', }, root, diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index fb74e4a346508b..996d27c731b3e2 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -13,7 +13,6 @@ import { export const drawerOverlayClassNames: SlotClassNames = { root: 'fui-DrawerOverlay', - backdrop: 'fui-DrawerOverlay__backdrop', }; /** @@ -86,7 +85,6 @@ export const useDrawerOverlayStyles_unstable = (state: DrawerOverlayState): Draw if (backdrop) { backdrop.className = mergeClasses( - drawerOverlayClassNames.backdrop, backdropStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropStyles.visible, From 13a20d688fa75ae20a35ed36a08d7550937eee82 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 11:53:03 +0300 Subject: [PATCH 19/26] Discard changes to change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json --- ...-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json diff --git a/change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json b/change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json deleted file mode 100644 index 7c19a01270cc6c..00000000000000 --- a/change/@fluentui-react-dialog-04ca4ed5-a856-4939-b505-9951b07b9816.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "feat: expose dialog surface context values", - "packageName": "@fluentui/react-dialog", - "email": "marcosvmmoura@gmail.com", - "dependentChangeType": "patch" -} From e0af5edce7c41638ad3bb2ca65355e3abe594a70 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 11:57:51 +0300 Subject: [PATCH 20/26] fix: dependency mismatch --- packages/react-components/react-drawer/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json index a04c77413bfb74..77b721bcf52ee6 100644 --- a/packages/react-components/react-drawer/package.json +++ b/packages/react-components/react-drawer/package.json @@ -39,7 +39,7 @@ "@fluentui/react-jsx-runtime": "^9.0.13", "@fluentui/react-motion-preview": "^0.2.10", "@fluentui/react-shared-contexts": "^9.9.2", - "@fluentui/react-tabster": "^9.12.11", + "@fluentui/react-tabster": "^9.13.3", "@fluentui/react-theme": "^9.1.14", "@fluentui/react-utilities": "^9.14.0", "@griffel/react": "^1.5.14", From 8960a4977576042aed11cbbdd59430b24ed4dc74 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 5 Oct 2023 14:27:58 +0300 Subject: [PATCH 21/26] fix: generate API --- packages/react-components/react-drawer/etc/react-drawer.api.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index b1906a6bb73a2c..5c88788c0ecb86 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -138,7 +138,6 @@ export type DrawerOverlayProps = ComponentProps & Pick; - backdrop?: Slot<'div'>; }; // @public From 325e42d4868d076f7759737287ca2c25472276f6 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 6 Oct 2023 13:57:25 +0300 Subject: [PATCH 22/26] fix: use tokens for transparent colors --- .../useDrawerOverlaySurfaceStyles.styles.ts | 3 ++- .../components/DrawerOverlay/useDrawerOverlayStyles.styles.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts index 9aab397f99d32e..e89158e541c8cd 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts @@ -1,6 +1,7 @@ import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import { tokens } from '@fluentui/react-theme'; import type { DrawerOverlaySurfaceSlots, DrawerOverlaySurfaceState } from './DrawerOverlaySurface.types'; @@ -27,7 +28,7 @@ const useBackdropResetStyles = makeResetStyles({ const useBackdropStyles = makeStyles({ nested: { - backgroundColor: 'transparent', + backgroundColor: tokens.colorTransparentBackground, }, }); diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 996d27c731b3e2..16e3fe1d809bd1 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -24,7 +24,7 @@ const useDrawerResetStyles = makeResetStyles({ top: 0, bottom: 0, opacity: 0, - boxShadow: '0px transparent', + boxShadow: `0px ${tokens.colorTransparentBackground}`, transitionProperty: 'transform, box-shadow, opacity', willChange: 'transform, box-shadow, opacity', }); From 5f4991398ad3a8c196f438023a96cb6d7bc8e4f9 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 6 Oct 2023 14:05:23 +0300 Subject: [PATCH 23/26] fix: unify style in order to minimize atomic classes --- .../components/DrawerOverlay/DrawerOverlay.types.ts | 5 +++++ .../useDrawerOverlaySurfaceStyles.styles.ts | 11 ----------- .../DrawerOverlay/useDrawerOverlayStyles.styles.ts | 4 ++++ 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts index 4adfc8cfdac998..5350947abcc0c4 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts @@ -13,6 +13,11 @@ export type DrawerOverlaySlots = { * Slot for the root element. */ root: Slot; + + /** + * Slot for the backdrop element. + */ + backdrop: Slot<'div'>; }; /** diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts index e89158e541c8cd..b688cb64a65490 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlaySurface/useDrawerOverlaySurfaceStyles.styles.ts @@ -1,5 +1,4 @@ import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; -import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; @@ -10,13 +9,6 @@ export const drawerOverlaySurfaceClassNames: SlotClassNames { - const rootStyles = useRootStyles(); const backdropResetStyles = useBackdropResetStyles(); const backdropStyles = useBackdropStyles(); - state.root.className = mergeClasses(rootStyles.focusOutline, state.root.className); - if (state.backdrop) { state.backdrop.className = mergeClasses( backdropResetStyles, diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 16e3fe1d809bd1..5c408a938d35ad 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; +import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import type { DrawerOverlaySlots, DrawerOverlayState } from './DrawerOverlay.types'; import { @@ -13,12 +14,14 @@ import { export const drawerOverlayClassNames: SlotClassNames = { root: 'fui-DrawerOverlay', + backdrop: 'fui-DrawerOverlay__backdrop', }; /** * Styles for the root slot */ const useDrawerResetStyles = makeResetStyles({ + ...createFocusOutlineStyle(), ...drawerDefaultStyles, position: 'fixed', top: 0, @@ -85,6 +88,7 @@ export const useDrawerOverlayStyles_unstable = (state: DrawerOverlayState): Draw if (backdrop) { backdrop.className = mergeClasses( + drawerOverlayClassNames.backdrop, backdropStyles.backdrop, durationStyles[state.size], state.backdropMotion.active && backdropStyles.visible, From f298094f058def53872963359da59921911e9045 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 6 Oct 2023 14:41:55 +0300 Subject: [PATCH 24/26] fix: cypress tests --- .../src/components/Drawer/useDrawer.ts | 4 +--- .../components/DrawerOverlay/DrawerOverlay.cy.tsx | 12 ++++++------ .../DrawerOverlay/DrawerOverlay.types.ts | 14 ++------------ 3 files changed, 9 insertions(+), 21 deletions(-) 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 3255bc909f8816..459d4cf7f77ebf 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts @@ -15,9 +15,7 @@ import { DrawerInline } from '../DrawerInline'; * @param ref - reference to root HTMLElement of Drawer */ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref): DrawerState => { - const { type = 'overlay' } = props; - - const elementType = type === 'overlay' ? DrawerOverlay : DrawerInline; + const elementType = props.type === 'inline' ? DrawerInline : DrawerOverlay; return { components: { diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.cy.tsx index 5c280f10ca0fc9..290e4c7cfdcedf 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.cy.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import { mount } from '@cypress/react'; import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme } from '@fluentui/react-theme'; -import { dialogSurfaceClassNames } from '@fluentui/react-dialog'; import { testDrawerBaseScenarios } from '../../e2e/DrawerShared'; import { DrawerOverlay } from './DrawerOverlay'; import { DrawerOverlayProps } from './DrawerOverlay.types'; +import { drawerOverlayClassNames } from './useDrawerOverlayStyles.styles'; const mountFluent = (element: JSX.Element) => { mount({element}); @@ -28,14 +28,14 @@ describe('DrawerOverlay', () => { it('should render backdrop', () => { mountFluent(); - cy.get(`.${dialogSurfaceClassNames.backdrop}`).should('exist'); + cy.get(`.${drawerOverlayClassNames.backdrop}`).should('exist'); }); it('should close when backdrop is clicked', () => { mountFluent(); cy.get('#drawer').should('exist'); - cy.get(`.${dialogSurfaceClassNames.backdrop}`).click({ force: true }); + cy.get(`.${drawerOverlayClassNames.backdrop}`).click({ force: true }); cy.get('#drawer').should('not.exist'); }); }); @@ -44,14 +44,14 @@ describe('DrawerOverlay', () => { it('should render backdrop', () => { mountFluent(); - cy.get(`.${dialogSurfaceClassNames.backdrop}`).should('exist'); + cy.get(`.${drawerOverlayClassNames.backdrop}`).should('exist'); }); it('should not close when backdrop is clicked', () => { mountFluent(); cy.get('#drawer').should('exist'); - cy.get(`.${dialogSurfaceClassNames.backdrop}`).click({ force: true }); + cy.get(`.${drawerOverlayClassNames.backdrop}`).click({ force: true }); cy.get('#drawer').should('exist'); }); }); @@ -60,7 +60,7 @@ describe('DrawerOverlay', () => { it('should not render backdrop when modalType is default', () => { mountFluent(); - cy.get(`.${dialogSurfaceClassNames.backdrop}`).should('not.exist'); + cy.get(`.${drawerOverlayClassNames.backdrop}`).should('not.exist'); }); }); }); diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts index 5350947abcc0c4..24fdc5c6fa9a4a 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts @@ -3,22 +3,12 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili import type { MotionState } from '@fluentui/react-motion-preview'; import type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types'; -import { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface'; +import { DrawerOverlaySurfaceSlots } from './DrawerOverlaySurface'; /** * DrawerOverlay slots */ -export type DrawerOverlaySlots = { - /** - * Slot for the root element. - */ - root: Slot; - - /** - * Slot for the backdrop element. - */ - backdrop: Slot<'div'>; -}; +export type DrawerOverlaySlots = DrawerOverlaySurfaceSlots; /** * DrawerOverlay internal slots for when using with composition API From 0183421880f1a3e532d9757aa38fe9d9b2448378 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 6 Oct 2023 15:11:06 +0300 Subject: [PATCH 25/26] fix: improve types and generate API file --- .../react-drawer/etc/react-drawer.api.md | 2 +- .../src/components/DrawerOverlay/DrawerOverlay.types.ts | 9 +++++++-- .../DrawerOverlay/useDrawerOverlayStyles.styles.ts | 5 +++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index 5c88788c0ecb86..5ea873e21df795 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -130,7 +130,7 @@ export type DrawerInlineState = Required & Dra export const DrawerOverlay: ForwardRefComponent; // @public (undocumented) -export const drawerOverlayClassNames: SlotClassNames; +export const drawerOverlayClassNames: SlotClassNames; // @public export type DrawerOverlayProps = ComponentProps & Pick & DrawerBaseProps; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts index 24fdc5c6fa9a4a..4adfc8cfdac998 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts @@ -3,12 +3,17 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili import type { MotionState } from '@fluentui/react-motion-preview'; import type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types'; -import { DrawerOverlaySurfaceSlots } from './DrawerOverlaySurface'; +import { DrawerOverlaySurfaceProps } from './DrawerOverlaySurface'; /** * DrawerOverlay slots */ -export type DrawerOverlaySlots = DrawerOverlaySurfaceSlots; +export type DrawerOverlaySlots = { + /** + * Slot for the root element. + */ + root: Slot; +}; /** * DrawerOverlay internal slots for when using with composition API diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 5c408a938d35ad..2ac2952e30e454 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -4,7 +4,8 @@ import { tokens } from '@fluentui/react-theme'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; -import type { DrawerOverlaySlots, DrawerOverlayState } from './DrawerOverlay.types'; +import type { DrawerOverlayState } from './DrawerOverlay.types'; +import { DrawerOverlaySurfaceSlots } from './DrawerOverlaySurface/DrawerOverlaySurface.types'; import { drawerCSSVars, drawerDefaultStyles, @@ -12,7 +13,7 @@ import { useDrawerDurationStyles, } from '../../shared/useDrawerBaseStyles.styles'; -export const drawerOverlayClassNames: SlotClassNames = { +export const drawerOverlayClassNames: SlotClassNames = { root: 'fui-DrawerOverlay', backdrop: 'fui-DrawerOverlay__backdrop', }; From 4d0a1029590906b207f1ef72bda8d9be2fd59c48 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 6 Oct 2023 15:16:05 +0300 Subject: [PATCH 26/26] fix: dependency mismatch --- packages/react-components/react-drawer/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json index 77b721bcf52ee6..df512d9a28b83a 100644 --- a/packages/react-components/react-drawer/package.json +++ b/packages/react-components/react-drawer/package.json @@ -35,13 +35,13 @@ "@fluentui/scripts-cypress": "*" }, "dependencies": { - "@fluentui/react-dialog": "^9.7.5", - "@fluentui/react-jsx-runtime": "^9.0.13", - "@fluentui/react-motion-preview": "^0.2.10", + "@fluentui/react-dialog": "^9.7.6", + "@fluentui/react-jsx-runtime": "^9.0.14", + "@fluentui/react-motion-preview": "^0.3.0", "@fluentui/react-shared-contexts": "^9.9.2", - "@fluentui/react-tabster": "^9.13.3", + "@fluentui/react-tabster": "^9.13.4", "@fluentui/react-theme": "^9.1.14", - "@fluentui/react-utilities": "^9.14.0", + "@fluentui/react-utilities": "^9.14.1", "@griffel/react": "^1.5.14", "@swc/helpers": "^0.5.1" },