From 81526767c4bd5c56fcc9e5802dfbff25308d0086 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Wed, 7 Sep 2022 16:56:27 -0700
Subject: [PATCH 1/3] To match v7 functionality, useOffsetHeight should cause
 re-render on each set state

---
 .../PositioningContainer/PositioningContainer.tsx    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
index 6a66378aaecd3c..1ffd48861a1a07 100644
--- a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
+++ b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
@@ -260,8 +260,10 @@ export function useHeightOffset(
   /**
    * Tracks the current height offset and updates during
    * the height animation when props.finalHeight is specified.
+   * State stored as object to ensure re-render even if the value does not change.
+   *  See https://github.com/microsoft/fluentui/issues/23545
    */
-  const [heightOffset, setHeightOffset] = React.useState<number>(0);
+  const [heightOffset, setHeightOffset] = React.useState<{ value: number }>({ value: 0 });
   const async = useAsync();
   const setHeightOffsetTimer = React.useRef<number>(0);
 
@@ -278,7 +280,7 @@ export function useHeightOffset(
         const cardCurrHeight: number = positioningContainerMainElem.offsetHeight;
         const scrollDiff: number = cardScrollHeight - cardCurrHeight;
 
-        setHeightOffset(heightOffset + scrollDiff);
+        setHeightOffset({ value: heightOffset.value + scrollDiff });
 
         if (positioningContainerMainElem.offsetHeight < finalHeight) {
           setHeightOffsetEveryFrame();
@@ -292,14 +294,14 @@ export function useHeightOffset(
   // eslint-disable-next-line react-hooks/exhaustive-deps -- should only re-run if finalHeight changes
   React.useEffect(setHeightOffsetEveryFrame, [finalHeight]);
 
-  return heightOffset;
+  return heightOffset.value;
 }
 
 export const PositioningContainer: React.FunctionComponent<IPositioningContainerProps> = React.forwardRef<
   HTMLDivElement,
   IPositioningContainerProps
 >((propsWithoutDefaults, forwardedRef) => {
-  const props = getPropsWithDefaults<IPositioningContainerProps>(DEFAULT_PROPS, propsWithoutDefaults);
+  const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
 
   // @TODO rename to reflect the name of this class
   const contentHost = React.useRef<HTMLDivElement>(null);
@@ -370,7 +372,7 @@ export const PositioningContainer: React.FunctionComponent<IPositioningContainer
     </div>
   );
 
-  return doNotLayer ? content : <Layer {...props.layerProps}>{content}</Layer>;
+  return doNotLayer ? content : <Layer>{content}</Layer>;
 });
 PositioningContainer.displayName = 'PositioningContainer';
 

From 5b43f2065df83daba839526f10ee48996cfb7202 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Wed, 7 Sep 2022 17:06:30 -0700
Subject: [PATCH 2/3] change file

---
 ...luentui-react-4050c913-450b-4833-a0a1-f59e28d3777b.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-4050c913-450b-4833-a0a1-f59e28d3777b.json

diff --git a/change/@fluentui-react-4050c913-450b-4833-a0a1-f59e28d3777b.json b/change/@fluentui-react-4050c913-450b-4833-a0a1-f59e28d3777b.json
new file mode 100644
index 00000000000000..8c100df509fbf7
--- /dev/null
+++ b/change/@fluentui-react-4050c913-450b-4833-a0a1-f59e28d3777b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Coachmarks now properly animate when used in any of the center positions",
+  "packageName": "@fluentui/react",
+  "email": "mgodbolt@microsoft.com",
+  "dependentChangeType": "patch"
+}

From d2d5f8912c95b4d8bd91e90b2fcf32b48e3bd153 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Wed, 7 Sep 2022 17:09:46 -0700
Subject: [PATCH 3/3] remove unnecessary changes

---
 .../Coachmark/PositioningContainer/PositioningContainer.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
index 1ffd48861a1a07..47bd5ade5b353a 100644
--- a/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
+++ b/packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
@@ -301,7 +301,7 @@ export const PositioningContainer: React.FunctionComponent<IPositioningContainer
   HTMLDivElement,
   IPositioningContainerProps
 >((propsWithoutDefaults, forwardedRef) => {
-  const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
+  const props = getPropsWithDefaults<IPositioningContainerProps>(DEFAULT_PROPS, propsWithoutDefaults);
 
   // @TODO rename to reflect the name of this class
   const contentHost = React.useRef<HTMLDivElement>(null);
@@ -372,7 +372,7 @@ export const PositioningContainer: React.FunctionComponent<IPositioningContainer
     </div>
   );
 
-  return doNotLayer ? content : <Layer>{content}</Layer>;
+  return doNotLayer ? content : <Layer {...props.layerProps}>{content}</Layer>;
 });
 PositioningContainer.displayName = 'PositioningContainer';