fix(Coachmark): Remove positioning regression and update bounds on resize

apps/vr-tests/src/stories/Coachmark.stories.tsx

@@ -6,7 +6,28 @@ import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from '@flue
 import { useId } from '@fluentui/react-hooks';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 
-const CoachmarkUsage = ({ isCollapsed = true }: { isCollapsed?: boolean }) => {
+const directionalHints = [
+  DirectionalHint.topLeftEdge,
+  DirectionalHint.topCenter,
+  DirectionalHint.topRightEdge,
+  DirectionalHint.bottomLeftEdge,
+  DirectionalHint.bottomCenter,
+  DirectionalHint.bottomRightEdge,
+  DirectionalHint.leftTopEdge,
+  DirectionalHint.leftCenter,
+  DirectionalHint.leftBottomEdge,
+  DirectionalHint.rightTopEdge,
+  DirectionalHint.rightCenter,
+  DirectionalHint.rightBottomEdge,
+];
+
+const CoachmarkUsage = ({
+  isCollapsed = true,
+  directionalHint = DirectionalHint.rightTopEdge,
+}: {
+  isCollapsed?: boolean;
+  directionalHint?: DirectionalHint;
+}) => {
   const targetId = useId();
   return (
     <>
@@ -16,7 +37,7 @@ const CoachmarkUsage = ({ isCollapsed = true }: { isCollapsed?: boolean }) => {
       <Coachmark
         target={`#${targetId}`}
         positioningContainerProps={{
-          directionalHint: DirectionalHint.rightTopEdge,
+          directionalHint,
           doNotLayer: false,
         }}
         ariaAlertText="A Coachmark has appeared"
@@ -86,4 +107,13 @@ storiesOf('Coachmark', module)
         <Coachmark target={rectangle} positioningContainerProps={positioningContainerProps} />
       </>
     );
+  })
+  .addStory('Positioning', () => {
+    return (
+      <div>
+        {directionalHints.map((directionalHint, index) => (
+          <CoachmarkUsage isCollapsed={false} directionalHint={directionalHint} key={index} />
+        ))}
+      </div>
+    );
   });

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"
+}

packages/react/src/components/Coachmark/Coachmark.base.tsx

@@ -247,6 +247,7 @@ function useProximityHandlers(
   props: ICoachmarkProps,
   translateAnimationContainer: React.RefObject<HTMLDivElement>,
   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<IRectangle | undefined>();
-  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<ICoachmarkProps> = React.forwardRef<
@@ -426,14 +419,21 @@ export const CoachmarkBase: React.FunctionComponent<ICoachmarkProps> = 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<IRectangle | undefined>(
+    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<ICoachmarkProps> = React.for
       finalHeight={finalHeight}
       ref={forwardedRef}
       onPositioned={onPositioned}
-      bounds={useGetBounds(props)}
+      bounds={bounds}
       {...positioningContainerProps}
     >
       <div className={classNames.root}>