fix: overflowManager should always dispatch initial state (#27756)

* fix: overflowManager should always dispatch initial state

Fixes #27656 which was caused by a priority queue edge case.

On initial mount the resize observer will always run. If there is
already overflow then the tops of the visibility queues will be
different from the initial state (all items are considered visible by
default).

In the cause where there is no overflow initially the queue tops will
not change, which does not trigger a dispatch to the react bindings so
the `useIsOverflowItemVisible` hook will always return `false` until
overflow occurs.

The fix is quite simple: set the initial value of flag `forceDispatch`
to be `true` which will always trigger a dispatch for initial mount.

* changefile

Author: ling1726

change/@fluentui-priority-overflow-a6802865-2d8b-43e0-8ac7-09dcca1570c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: overflowManager should always dispatch initial state",
+  "packageName": "@fluentui/priority-overflow",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-overflow-3a8651a5-c348-403c-a0a7-eaab0b660b52.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor: Consolidate all overflow state into one object",
+  "packageName": "@fluentui/react-overflow",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/priority-overflow/src/overflowManager.ts

@@ -12,7 +12,8 @@ export function createOverflowManager(): OverflowManager {
   // Set as true when resize observer is observing
   let observing = false;
   // If true, next update will dispatch to onUpdateOverflow even if queue top states don't change
-  let forceDispatch = false;
+  // Initially true to force dispatch on first mount
+  let forceDispatch = true;
   const options: Required<ObserveOptions> = {
     padding: 10,
     overflowAxis: 'horizontal',

packages/react-components/react-overflow/src/Overflow.cy.tsx

@@ -8,6 +8,7 @@ import {
   useIsOverflowGroupVisible,
   useOverflowMenu,
   useOverflowContext,
+  useIsOverflowItemVisible,
 } from '@fluentui/react-overflow';
 import { Portal } from '@fluentui/react-portal';
 
@@ -539,4 +540,35 @@ describe('Overflow', () => {
     setContainerSize(500);
     cy.contains('Update priority').click().get('#foo-visibility').should('have.text', 'visible');
   });
+
+  it('Should have correct initial visibility state', () => {
+    const mapHelper = new Array(10).fill(0).map((_, i) => i);
+    const Assert = () => {
+      const isVisible = mapHelper.map(i => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useIsOverflowItemVisible(i.toString());
+      });
+
+      if (isVisible.every(x => x)) {
+        return <span data-passed="true" />;
+      }
+
+      return null;
+    };
+
+    mount(
+      <Container minimumVisible={5}>
+        {mapHelper.map(i => (
+          <Item key={i} id={i.toString()}>
+            {i}
+          </Item>
+        ))}
+        <Menu />
+        <Assert />
+      </Container>,
+    );
+
+    setContainerSize(500);
+    cy.get('[data-passed="true"]').should('exist');
+  });
 });

packages/react-components/react-overflow/src/components/Overflow.tsx

@@ -7,6 +7,12 @@ import { OverflowContext } from '../overflowContext';
 import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
 import { useOverflowStyles } from './useOverflowStyles.styles';
 
+interface OverflowState {
+  hasOverflow: boolean;
+  itemVisibility: Record<string, boolean>;
+  groupVisibility: Record<string, OverflowGroupState>;
+}
+
 /**
  * Overflow Props
  */
@@ -24,21 +30,27 @@ export const Overflow = React.forwardRef((props: OverflowProps, ref) => {
 
   const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;
 
-  const [hasOverflow, setHasOverflow] = React.useState(false);
-  const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});
-  const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});
+  const [overflowState, setOverflowState] = React.useState<OverflowState>({
+    hasOverflow: false,
+    itemVisibility: {},
+    groupVisibility: {},
+  });
 
   // useOverflowContainer wraps this method in a useEventCallback.
-  // TODO: Do we need a useEventCallback here too?
   const update: OnUpdateOverflow = data => {
-    setHasOverflow(() => data.invisibleItems.length > 0);
-    setItemVisibility(() => {
-      const newState: Record<string, boolean> = {};
-      data.visibleItems.forEach(x => (newState[x.id] = true));
-      data.invisibleItems.forEach(x => (newState[x.id] = false));
-      return newState;
+    const { visibleItems, invisibleItems, groupVisibility } = data;
+
+    const itemVisibility: Record<string, boolean> = {};
+    visibleItems.forEach(x => (itemVisibility[x.id] = true));
+    invisibleItems.forEach(x => (itemVisibility[x.id] = false));
+
+    setOverflowState(() => {
+      return {
+        hasOverflow: data.invisibleItems.length > 0,
+        itemVisibility,
+        groupVisibility,
+      };
     });
-    setGroupVisibility(data.groupVisibility);
   };
 
   const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {
@@ -57,9 +69,9 @@ export const Overflow = React.forwardRef((props: OverflowProps, ref) => {
   return (
     <OverflowContext.Provider
       value={{
-        itemVisibility,
-        groupVisibility,
-        hasOverflow,
+        itemVisibility: overflowState.itemVisibility,
+        groupVisibility: overflowState.groupVisibility,
+        hasOverflow: overflowState.hasOverflow,
         registerItem,
         updateOverflow,
         registerOverflowMenu,