bugfix(react-dialog): removes context hooks invocations from styles hook

change/@fluentui-react-dialog-67e3508e-a0a1-4259-9b49-c3a878d19d58.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: removes context hooks invocations from styles hook",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/etc/react-dialog.api.md

@@ -161,7 +161,7 @@ export type DialogSurfaceSlots = {
 };
 
 // @public
-export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
+export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Partial<Pick<DialogContextValue, 'isNestedDialog'>> & Pick<PortalProps, 'mountNode'>;
 
 // @public
 export const DialogTitle: ForwardRefComponent<DialogTitleProps>;

packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts

@@ -2,7 +2,6 @@ import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { DialogBodySlots, DialogBodyState } from './DialogBody.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';
-import { backdropStyles } from '../DialogSurface/useDialogSurfaceStyles.styles';
 
 export const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {
   root: 'fui-DialogBody',
@@ -20,8 +19,6 @@ const useResetStyles = makeResetStyles({
   gridTemplateRows: 'auto 1fr',
   gridTemplateColumns: '1fr 1fr auto',
 
-  '&::backdrop': backdropStyles,
-
   [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
     gridTemplateRows: 'auto 1fr auto',

packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import type { PortalProps } from '@fluentui/react-portal';
-import { DialogSurfaceContextValue } from '../../contexts';
+import { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';
 
 export type DialogSurfaceSlots = {
   /**
@@ -31,4 +31,7 @@ export type DialogSurfaceContextValues = {
 /**
  * State used in rendering DialogSurface
  */
-export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
+export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &
+  // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.
+  Partial<Pick<DialogContextValue, 'isNestedDialog'>> &
+  Pick<PortalProps, 'mountNode'>;

packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts

@@ -24,6 +24,7 @@ export const useDialogSurface_unstable = (
   ref: React.Ref<DialogSurfaceElement>,
 ): DialogSurfaceState => {
   const modalType = useDialogContext_unstable(ctx => ctx.modalType);
+  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);
   const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);
   const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);
   const open = useDialogContext_unstable(ctx => ctx.open);
@@ -71,6 +72,7 @@ export const useDialogSurface_unstable = (
   return {
     components: { backdrop: 'div', root: 'div' },
     backdrop,
+    isNestedDialog,
     mountNode: props.mountNode,
     root: slot.always(
       getIntrinsicElementProps('div', {

packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts

@@ -1,31 +1,15 @@
-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<DialogSurfaceSlots> = {
   root: 'fui-DialogSurface',
   backdrop: 'fui-DialogSurface__backdrop',
 };
 
-/**
- * Generic reusable backdrop styles
- */
-export const backdropStyles: GriffelStyle = {
-  backgroundColor: 'rgba(0, 0, 0, 0.4)',
-};
-
-const nestedDialogBackdropStyles: GriffelStyle = {
-  backgroundColor: 'transparent',
-};
-
 /**
  * Styles for the root slot
  */
@@ -53,17 +37,14 @@ const useRootResetStyles = makeResetStyles({
   backgroundColor: tokens.colorNeutralBackground1,
   color: tokens.colorNeutralForeground1,
 
-  '&::backdrop': backdropStyles,
-
   [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',
   },
 });
 
-const useStyles = makeStyles({
-  nestedDialogBackdrop: nestedDialogBackdropStyles,
-  nestedNativeDialogBackdrop: {
-    '&::backdrop': nestedDialogBackdropStyles,
+const useBackdropStyles = makeStyles({
+  nestedDialogBackdrop: {
+    backgroundColor: 'transparent',
   },
 });
 
@@ -72,7 +53,7 @@ const useStyles = makeStyles({
  */
 const useBackdropResetStyles = makeResetStyles({
   ...shorthands.inset('0px'),
-  ...backdropStyles,
+  backgroundColor: 'rgba(0, 0, 0, 0.4)',
   position: 'fixed',
 });
 
@@ -81,22 +62,16 @@ 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,
-    isNestedDialog && styles.nestedNativeDialogBackdrop,
-    state.root.className,
-  );
+  state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);
 
   if (state.backdrop) {
     state.backdrop.className = mergeClasses(
       dialogSurfaceClassNames.backdrop,
       backdropResetStyles,
-      isNestedDialog && styles.nestedDialogBackdrop,
+      state.isNestedDialog && styles.nestedDialogBackdrop,
       state.backdrop.className,
     );
   }