diff --git a/change/@fluentui-react-832db8c4-2962-4daf-bf3b-81e8e5b8dd48.json b/change/@fluentui-react-832db8c4-2962-4daf-bf3b-81e8e5b8dd48.json new file mode 100644 index 0000000000000..f1059f31391f9 --- /dev/null +++ b/change/@fluentui-react-832db8c4-2962-4daf-bf3b-81e8e5b8dd48.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(Coachmark): Fix positioning regression and update bounds on resize.", + "packageName": "@fluentui/react", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/Coachmark/Coachmark.base.tsx b/packages/react/src/components/Coachmark/Coachmark.base.tsx index 6ffe5df171362..d79fed83bb199 100644 --- a/packages/react/src/components/Coachmark/Coachmark.base.tsx +++ b/packages/react/src/components/Coachmark/Coachmark.base.tsx @@ -247,6 +247,7 @@ function useProximityHandlers( props: ICoachmarkProps, translateAnimationContainer: React.RefObject, openCoachmark: () => void, + setBounds: (bounds: IRectangle | undefined) => void, ) { const { setTimeout, clearTimeout } = useSetTimeout(); @@ -285,6 +286,7 @@ function useProximityHandlers( timeoutIds.push( setTimeout((): void => { setTargetElementRect(); + setBounds(getBounds(props.isPositionForced, props.positioningContainerProps)); }, 100), ); }); @@ -402,15 +404,6 @@ function useDeprecationWarning(props: ICoachmarkProps) { } } -function useGetBounds(props: ICoachmarkProps): IRectangle | undefined { - const async = useAsync(); - const [bounds, setBounds] = React.useState(); - React.useEffect(() => { - async.requestAnimationFrame(() => setBounds(getBounds(props.isPositionForced, props.positioningContainerProps))); - }, [async, props.isPositionForced, props.positioningContainerProps]); - return bounds; -} - const COMPONENT_NAME = 'CoachmarkBase'; export const CoachmarkBase: React.FunctionComponent = React.forwardRef< @@ -426,14 +419,21 @@ export const CoachmarkBase: React.FunctionComponent = React.for const [isCollapsed, openCoachmark] = useCollapsedState(props, entityInnerHostElementRef); const [beakPositioningProps, transformOrigin] = useBeakPosition(props, targetAlignment, targetPosition); const [isMeasuring, entityInnerHostRect] = useEntityHostMeasurements(props, entityInnerHostElementRef); + const [bounds, setBounds] = React.useState( + getBounds(props.isPositionForced, props.positioningContainerProps), + ); const alertText = useAriaAlert(props); const entityHost = useAutoFocus(props); useListeners(props, translateAnimationContainer, openCoachmark); useComponentRef(props); - useProximityHandlers(props, translateAnimationContainer, openCoachmark); + useProximityHandlers(props, translateAnimationContainer, openCoachmark, setBounds); useDeprecationWarning(props); + React.useEffect(() => { + setBounds(getBounds(props.isPositionForced, props.positioningContainerProps)); + }, [props.isPositionForced, props.positioningContainerProps]); + const { beaconColorOne, beaconColorTwo, @@ -484,7 +484,7 @@ export const CoachmarkBase: React.FunctionComponent = React.for finalHeight={finalHeight} ref={forwardedRef} onPositioned={onPositioned} - bounds={useGetBounds(props)} + bounds={bounds} {...positioningContainerProps} >