Revert "fix: MessageBar auto reflow should handle document reflow with min-content" (#33797)

Author: ling1726

change/@fluentui-react-message-bar-c11b8cce-0b38-48e0-9b98-757e7750e80f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Revert MessageBar auto reflow changes from #33409",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx

@@ -23,16 +23,6 @@ describe('MessageBar', () => {
         // do nothing
       }
     };
-
-    // @ts-expect-error https://github.com/jsdom/jsdom/issues/2032
-    global.IntersectionObserver = class IntersectionObserver {
-      public observe() {
-        // do nothing
-      }
-      public disconnect() {
-        // do nothing
-      }
-    };
   });
 
   beforeEach(() => {

packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBarReflow.ts

@@ -1,92 +1,91 @@
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { isHTMLElement } from '@fluentui/react-utilities';
 
 export function useMessageBarReflow(enabled: boolean = false) {
   const { targetDocument } = useFluent();
-  const prevInlineSizeRef = React.useRef(-1);
-  const messageBarRef = React.useRef<HTMLElement | null>(null);
-
-  const [reflowing, setReflowing] = React.useState(false);
+  const forceUpdate = React.useReducer(() => ({}), {})[1];
+  const reflowingRef = React.useRef(false);
+  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
 
-  // This layout effect 'sanity checks' what observers have done
-  // since DOM has not been flushed when observers run
-  useIsomorphicLayoutEffect(() => {
-    if (!messageBarRef.current) {
-      return;
-    }
+  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);
+  const prevInlineSizeRef = React.useRef(-1);
 
-    setReflowing(prevReflowing => {
-      if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {
-        return true;
+  const handleResize: ResizeObserverCallback = React.useCallback(
+    entries => {
+      // Resize observer is only owned by this component - one resize observer entry expected
+      // No need to support multiple fragments - one border box entry expected
+      if (process.env.NODE_ENV !== 'production' && entries.length > 1) {
+        // eslint-disable-next-line no-console
+        console.error(
+          [
+            'useMessageBarReflow: Resize observer should only have one entry. ',
+            'If multiple entries are observed, the first entry will be used.',
+            'This is a bug, please report it to the Fluent UI team.',
+          ].join(' '),
+        );
       }
 
-      return prevReflowing;
-    });
-  }, [reflowing]);
+      const entry = entries[0];
+      // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
+      const inlineSize = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.target.getBoundingClientRect().width;
 
-  const handleResize: ResizeObserverCallback = React.useCallback(() => {
-    if (!messageBarRef.current) {
-      return;
-    }
-
-    const inlineSize = messageBarRef.current.getBoundingClientRect().width;
-    const scrollWidth = messageBarRef.current.scrollWidth;
+      if (inlineSize === undefined || !entry) {
+        return;
+      }
 
-    const expanding = prevInlineSizeRef.current < inlineSize;
-    const overflowing = inlineSize < scrollWidth;
+      const { target } = entry;
 
-    setReflowing(!expanding || overflowing);
-  }, []);
+      if (!isHTMLElement(target)) {
+        return;
+      }
 
-  const handleIntersection: IntersectionObserverCallback = React.useCallback(entries => {
-    if (entries[0].intersectionRatio < 1) {
-      setReflowing(true);
-    }
-  }, []);
+      let nextReflowing: boolean | undefined;
+
+      // No easy way to really determine when the single line layout will fit
+      // Just keep try to set single line layout as long as the size is growing
+      // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
+      if (reflowingRef.current) {
+        if (prevInlineSizeRef.current < inlineSize) {
+          nextReflowing = false;
+        }
+      } else {
+        const scrollWidth = target.scrollWidth;
+        if (inlineSize < scrollWidth) {
+          nextReflowing = true;
+        }
+      }
 
-  const ref = React.useMemo(() => {
-    let resizeObserver: ResizeObserver | null = null;
-    let intersectionObserer: IntersectionObserver | null = null;
+      prevInlineSizeRef.current = inlineSize;
+      if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
+        reflowingRef.current = nextReflowing;
+        forceUpdate();
+      }
+    },
+    [forceUpdate],
+  );
 
-    return (el: HTMLElement | null) => {
+  const ref = React.useCallback(
+    (el: HTMLElement | null) => {
       if (!enabled || !el || !targetDocument?.defaultView) {
-        resizeObserver?.disconnect();
-        intersectionObserer?.disconnect();
         return;
       }
 
-      messageBarRef.current = el;
+      resizeObserverRef.current?.disconnect();
 
       const win = targetDocument.defaultView;
-      resizeObserver = new win.ResizeObserver(handleResize);
-      intersectionObserer = new win.IntersectionObserver(handleIntersection, { threshold: 1 });
-
-      intersectionObserer.observe(el);
+      const resizeObserver = new win.ResizeObserver(handleResize);
+      resizeObserverRef.current = resizeObserver;
       resizeObserver.observe(el, { box: 'border-box' });
+    },
+    [targetDocument, handleResize, enabled],
+  );
+
+  React.useEffect(() => {
+    return () => {
+      resizeObserverRef.current?.disconnect();
     };
-  }, [handleResize, handleIntersection, enabled, targetDocument]);
+  }, []);
 
-  return { ref, reflowing };
+  return { ref, reflowing: reflowingRef.current };
 }
-
-const isReflowing = (el: HTMLElement) => {
-  return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);
-};
-
-const isFullyInViewport = (el: HTMLElement) => {
-  const rect = el.getBoundingClientRect();
-  const doc = el.ownerDocument;
-  const win = doc.defaultView;
-
-  if (!win) {
-    return true;
-  }
-
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&
-    rect.right <= (win.innerWidth || doc.documentElement.clientWidth)
-  );
-};