diff --git a/change/@fluentui-react-92e3b62a-42e0-401c-be50-be5ee1c7240e.json b/change/@fluentui-react-92e3b62a-42e0-401c-be50-be5ee1c7240e.json new file mode 100644 index 0000000000000..63df9eae1bf2f --- /dev/null +++ b/change/@fluentui-react-92e3b62a-42e0-401c-be50-be5ee1c7240e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Coachmark: re-render and re-calculate bounds when page resizes", + "packageName": "@fluentui/react", + "email": "mgodbolt@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/Coachmark/Coachmark.base.tsx b/packages/react/src/components/Coachmark/Coachmark.base.tsx index 5c80cc3b81516..4b4b72678011f 100644 --- a/packages/react/src/components/Coachmark/Coachmark.base.tsx +++ b/packages/react/src/components/Coachmark/Coachmark.base.tsx @@ -467,6 +467,16 @@ export const CoachmarkBase: React.FunctionComponent = React.for const finalHeight: number | undefined = isCollapsed ? COACHMARK_HEIGHT : entityInnerHostRect.height; + function useGetBounds(): IRectangle | undefined { + const async = useAsync(); + const [bounds, setBounds] = React.useState(); + const updateAsyncPosition = (): void => { + async.requestAnimationFrame(() => setBounds(getBounds(props))); + }; + React.useEffect(updateAsyncPosition); + return bounds; + } + return ( = React.for finalHeight={finalHeight} ref={forwardedRef} onPositioned={onPositioned} - bounds={getBounds(props)} + bounds={useGetBounds()} {...positioningContainerProps} >
diff --git a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx index 47bd5ade5b353..0bce232488344 100644 --- a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx +++ b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx @@ -34,30 +34,26 @@ const DEFAULT_PROPS = { directionalHint: DirectionalHint.bottomAutoEdge, }; -function useCachedBounds(props: IPositioningContainerProps, targetWindow: Window | undefined) { +function useBounds(props: IPositioningContainerProps, targetWindow: Window | undefined) { /** The bounds used when determining if and where the PositioningContainer should be placed. */ - const positioningBounds = React.useRef(); - - const getCachedBounds = (): IRectangle => { - if (!positioningBounds.current) { - let currentBounds = props.bounds; - - if (!currentBounds) { - currentBounds = { - top: 0 + props.minPagePadding!, - left: 0 + props.minPagePadding!, - right: targetWindow!.innerWidth - props.minPagePadding!, - bottom: targetWindow!.innerHeight - props.minPagePadding!, - width: targetWindow!.innerWidth - props.minPagePadding! * 2, - height: targetWindow!.innerHeight - props.minPagePadding! * 2, - }; - } - positioningBounds.current = currentBounds; + + const getBounds = (): IRectangle => { + let currentBounds = props.bounds; + + if (!currentBounds) { + currentBounds = { + top: 0 + props.minPagePadding!, + left: 0 + props.minPagePadding!, + right: targetWindow!.innerWidth - props.minPagePadding!, + bottom: targetWindow!.innerHeight - props.minPagePadding!, + width: targetWindow!.innerWidth - props.minPagePadding! * 2, + height: targetWindow!.innerHeight - props.minPagePadding! * 2, + }; } - return positioningBounds.current; + return currentBounds; }; - return getCachedBounds; + return getBounds; } function usePositionState( @@ -312,7 +308,7 @@ export const PositioningContainer: React.FunctionComponent