diff --git a/change/@fluentui-react-b4e5742f-312c-4c83-93ad-7da95b6de7d9.json b/change/@fluentui-react-b4e5742f-312c-4c83-93ad-7da95b6de7d9.json new file mode 100644 index 00000000000000..c5c96e2a42f2bd --- /dev/null +++ b/change/@fluentui-react-b4e5742f-312c-4c83-93ad-7da95b6de7d9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "@fluentui/react: allowing Popup configuration on Modal component", + "packageName": "@fluentui/react", + "email": "gasramirez@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index cec44a35208fad..23bb124baa264e 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -6977,6 +6977,7 @@ export interface IModalProps extends React_2.RefAttributes, IAcc // @deprecated onLayerDidMount?: () => void; overlay?: IOverlayProps; + popupProps?: IPopupProps; responsiveMode?: ResponsiveMode; scrollableContentClassName?: string; styles?: IStyleFunctionOrObject; diff --git a/packages/react/src/components/Modal/Modal.base.tsx b/packages/react/src/components/Modal/Modal.base.tsx index 40f9e408191829..dc3fa8ecf74b48 100644 --- a/packages/react/src/components/Modal/Modal.base.tsx +++ b/packages/react/src/components/Modal/Modal.base.tsx @@ -128,6 +128,7 @@ export const ModalBase: React.FunctionComponent = React.forwardRef< onDismissed, // eslint-disable-next-line deprecation/deprecation enableAriaHiddenSiblings, + popupProps, } = props; const rootRef = React.useRef(null); @@ -477,6 +478,7 @@ export const ModalBase: React.FunctionComponent = React.forwardRef< // Popup will automatically handle this based on the aria-modal setting. enableAriaHiddenSiblings={enableAriaHiddenSiblings} aria-modal={!isModeless} + {...popupProps} >
{!isModeless && ( diff --git a/packages/react/src/components/Modal/Modal.types.ts b/packages/react/src/components/Modal/Modal.types.ts index 43fd0c2b8c79db..019c77278cd375 100644 --- a/packages/react/src/components/Modal/Modal.types.ts +++ b/packages/react/src/components/Modal/Modal.types.ts @@ -8,6 +8,7 @@ import type { ILayerProps } from '../../Layer'; import type { IOverlayProps } from '../../Overlay'; import type { IStyle, ITheme } from '../../Styling'; import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities'; +import { IPopupProps } from '../Popup/Popup.types'; export interface IDragOptions { /** @@ -195,6 +196,11 @@ export interface IModalProps extends React.RefAttributes, IAcces * @default `{}` */ focusTrapZoneProps?: IFocusTrapZoneProps; + + /** + * Props to be passed through to Popup + */ + popupProps?: IPopupProps; } /**