chore: remove manager state from Overflow container

Author: bsunderhus

packages/react-components/priority-overflow/etc/priority-overflow.api.md

@@ -5,7 +5,7 @@
 ```ts
 
 // @internal (undocumented)
-export function createOverflowManager(): OverflowManager;
+export function createOverflowManager(initialOptions: Required<ObserveOptions>): OverflowManager;
 
 // @public (undocumented)
 export interface ObserveOptions {

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

@@ -16,7 +16,7 @@ import type {
  * @internal
  * @returns overflow manager instance
  */
-export function createOverflowManager(): OverflowManager {
+export function createOverflowManager(initialOptions: Required<ObserveOptions>): OverflowManager {
   // calls to `offsetWidth or offsetHeight` can happen multiple times in an update
   // Use a cache to avoid causing too many recalcs and avoid scripting time to meausure sizes
   const sizeCache = new Map<HTMLElement, number>();
@@ -27,16 +27,7 @@ export function createOverflowManager(): OverflowManager {
   // If true, next update will dispatch to onUpdateOverflow even if queue top states don't change
   // Initially true to force dispatch on first mount
   let forceDispatch = true;
-  const options: Required<ObserveOptions> = {
-    padding: 10,
-    overflowAxis: 'horizontal',
-    overflowDirection: 'end',
-    minimumVisible: 0,
-    onUpdateItemVisibility: () => undefined,
-    onUpdateOverflow: () => undefined,
-    hasHiddenItems: false,
-  };
-
+  const options: Required<ObserveOptions> = initialOptions;
   const overflowItems: Record<string, OverflowItemEntry> = {};
   const overflowDividers: Record<string, OverflowDividerEntry> = {};
   const listeners = new Set<() => void>();
@@ -255,6 +246,7 @@ export function createOverflowManager(): OverflowManager {
   };
 
   const setOptions: OverflowManager['setOptions'] = nextOptions => {
+    if (options === nextOptions) return;
     const previousAxis = options.overflowAxis;
     const previousDirection = options.overflowDirection;
     const previousPadding = options.padding;

packages/react-components/react-overflow/library/etc/react-overflow.api.md

@@ -4,13 +4,13 @@
 
 ```ts
 
-import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { ObserveOptions } from '@fluentui/priority-overflow';
 import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
 import type { OverflowDividerEntry } from '@fluentui/priority-overflow';
-import { OverflowGroupState } from '@fluentui/priority-overflow';
+import type { OverflowGroupState } from '@fluentui/priority-overflow';
 import type { OverflowItemEntry } from '@fluentui/priority-overflow';
 import type { OverflowManager } from '@fluentui/priority-overflow';
+import type { OverflowSnapshot } from '@fluentui/priority-overflow';
 import * as React_2 from 'react';
 
 // @public (undocumented)
@@ -79,7 +79,10 @@ export interface UseOverflowContainerReturn<TElement extends HTMLElement> extend
 }
 
 // @internal (undocumented)
-export const useOverflowContext: <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) => SelectedValue;
+export const useOverflowContext: {
+    <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>): SelectedValue;
+    (): OverflowContextValue;
+};
 
 // @public (undocumented)
 export const useOverflowCount: () => number;

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

@@ -2,15 +2,15 @@
 
 import * as React from 'react';
 import { mergeClasses } from '@griffel/react';
-import type { ObserveOptions, OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';
+import type { ObserveOptions, OnUpdateOverflow, OverflowGroupState } from '@fluentui/priority-overflow';
 import {
   applyTriggerPropsToChildren,
   getTriggerChild,
   getReactElementRef,
   useMergedRefs,
 } from '@fluentui/react-utilities';
 
-import { defaultOverflowManager, OverflowContext } from '../overflowContext';
+import { OverflowContext, type OverflowContextValue } from '../overflowContext';
 import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
 import { useOverflowStyles } from './useOverflowStyles.styles';
 
@@ -20,12 +20,6 @@ interface OverflowState {
   groupVisibility: Record<string, OverflowGroupState>;
 }
 
-const toOverflowState = (snapshot: OverflowSnapshot): OverflowState => ({
-  hasOverflow: snapshot.hasOverflow,
-  itemVisibility: snapshot.itemVisibility,
-  groupVisibility: snapshot.groupVisibility,
-});
-
 export interface OnOverflowChangeData extends OverflowState {}
 
 /**
@@ -57,8 +51,24 @@ export const Overflow = React.forwardRef((props: OverflowProps, ref) => {
     hasHiddenItems,
   } = props;
 
+  const update: OnUpdateOverflow = data => {
+    const { visibleItems, invisibleItems, groupVisibility } = data;
+
+    const itemVisibility: Record<string, boolean> = {};
+    visibleItems.forEach(item => {
+      itemVisibility[item.id] = true;
+    });
+    invisibleItems.forEach(x => (itemVisibility[x.id] = false));
+    const newState = {
+      hasOverflow: data.invisibleItems.length > 0,
+      itemVisibility,
+      groupVisibility,
+    };
+    onOverflowChange?.(null, { ...newState });
+  };
+
   const { containerRef, manager, registerItem, updateOverflow, registerOverflowMenu, registerDivider } =
-    useOverflowContainer(() => undefined, {
+    useOverflowContainer(update, {
       overflowDirection,
       overflowAxis,
       padding,
@@ -67,46 +77,26 @@ export const Overflow = React.forwardRef((props: OverflowProps, ref) => {
       onUpdateItemVisibility: updateVisibilityAttribute,
     });
 
-  const lastReportedState = React.useRef<OverflowState | null>(null);
-
-  React.useEffect(() => {
-    if (!manager || !onOverflowChange) {
-      return;
-    }
-
-    lastReportedState.current = null;
-
-    return manager.subscribe(() => {
-      const overflowState = toOverflowState(manager.getSnapshot());
-
-      if (lastReportedState.current === null) {
-        lastReportedState.current = overflowState;
-        return;
-      }
-
-      onOverflowChange(null, overflowState);
-      lastReportedState.current = overflowState;
-    });
-  }, [manager, onOverflowChange]);
-
   const child = getTriggerChild<HTMLElement>(children);
   const clonedChild = applyTriggerPropsToChildren(children, {
     ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),
     className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.props.className),
   });
 
-  return (
-    <OverflowContext.Provider
-      value={{
-        manager: manager ?? defaultOverflowManager,
-        registerItem,
-        updateOverflow,
-        registerOverflowMenu,
-        registerDivider,
-        containerRef,
-      }}
-    >
-      {clonedChild}
-    </OverflowContext.Provider>
+  const ctx: OverflowContextValue = React.useMemo(
+    () => ({
+      groupVisibility: {},
+      itemVisibility: {},
+      hasOverflow: false,
+      registerItem,
+      updateOverflow,
+      registerOverflowMenu,
+      registerDivider,
+      getSnapshot: manager!.getSnapshot,
+      subscribe: manager!.subscribe,
+    }),
+    [manager, registerItem, updateOverflow, registerOverflowMenu, registerDivider],
   );
+
+  return <OverflowContext.Provider value={ctx}>{clonedChild}</OverflowContext.Provider>;
 });

packages/react-components/react-overflow/library/src/overflowContext.ts

@@ -1,62 +1,73 @@
 'use client';
 
-import type * as React from 'react';
 import type {
   OverflowItemEntry,
   OverflowDividerEntry,
-  OverflowManager,
+  OverflowGroupState,
   OverflowSnapshot,
 } from '@fluentui/priority-overflow';
-import type { ContextSelector, Context } from '@fluentui/react-context-selector';
-import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-
-const defaultSnapshot: OverflowSnapshot = {
-  hasOverflow: false,
-  overflowCount: 0,
-  itemVisibility: {},
-  groupVisibility: {},
-};
-
-export const defaultOverflowManager: OverflowManager = {
-  setOptions: () => undefined,
-  observe: () => () => undefined,
-  registerItem: () => () => undefined,
-  removeItem: () => undefined,
-  update: () => undefined,
-  forceUpdate: () => undefined,
-  attachOverflowMenu: () => () => undefined,
-  registerDivider: () => () => undefined,
-  getSnapshot: () => defaultSnapshot,
-  subscribe: () => () => undefined,
-};
+import * as React from 'react';
 
 /**
  * @internal
  */
 export interface OverflowContextValue {
-  manager: OverflowManager;
+  /**
+   * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead
+   */
+  itemVisibility: Record<string, boolean>;
+  /**
+   * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead
+   */
+  groupVisibility: Record<string, OverflowGroupState>;
+  /**
+   * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead
+   */
+  hasOverflow: boolean;
   registerItem: (item: OverflowItemEntry) => () => void;
   registerOverflowMenu: (el: HTMLElement) => () => void;
   registerDivider: (divider: OverflowDividerEntry) => () => void;
   updateOverflow: (padding?: number) => void;
   containerRef?: React.RefObject<HTMLElement | null>;
+  getSnapshot: () => OverflowSnapshot;
+  subscribe: (listener: () => void) => () => void;
 }
 
-export const OverflowContext = createContext<OverflowContextValue | undefined>(
+export const OverflowContext = React.createContext<OverflowContextValue | undefined>(
   undefined,
-) as Context<OverflowContextValue>;
+) as React.Context<OverflowContextValue>;
 
 const overflowContextDefaultValue: OverflowContextValue = {
-  manager: defaultOverflowManager,
+  hasOverflow: false,
+  itemVisibility: {},
+  groupVisibility: {},
   registerItem: () => () => null,
   updateOverflow: () => null,
   registerOverflowMenu: () => () => null,
   registerDivider: () => () => null,
+  getSnapshot: () => ({
+    hasOverflow: false,
+    overflowCount: 0,
+    itemVisibility: {},
+    groupVisibility: {},
+  }),
+  subscribe: () => () => null,
 };
 
+type ContextSelector<TContext, TSelected> = (context: TContext) => TSelected;
+
 /**
  * @internal
  */
-export const useOverflowContext = <SelectedValue>(
-  selector: ContextSelector<OverflowContextValue, SelectedValue>,
-): SelectedValue => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));
+export const useOverflowContext: {
+  <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>): SelectedValue;
+  (): OverflowContextValue;
+} =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (selector?: ContextSelector<OverflowContextValue, any>): any => {
+    const context = React.useContext(OverflowContext) ?? overflowContextDefaultValue;
+    if (selector) {
+      return selector(context);
+    }
+    return context;
+  };

packages/react-components/react-overflow/library/src/useIsOverflowGroupVisible.ts

@@ -1,12 +1,12 @@
 'use client';
 
 import type { OverflowGroupState } from '@fluentui/priority-overflow';
-import { useOverflowSelector } from './useOverflowSelector';
+import { useOverflowSnapshot } from './useOverflowSnapshot';
 
 /**
  * @param id - unique identifier for a group of overflow items
  * @returns visibility state of the group
  */
 export function useIsOverflowGroupVisible(id: string): OverflowGroupState {
-  return useOverflowSelector(snapshot => snapshot.groupVisibility[id]);
+  return useOverflowSnapshot().groupVisibility[id];
 }

packages/react-components/react-overflow/library/src/useIsOverflowItemVisible.ts

@@ -1,11 +1,11 @@
 'use client';
 
-import { useOverflowSelector } from './useOverflowSelector';
+import { useOverflowSnapshot } from './useOverflowSnapshot';
 
 /**
  * @param id - unique identifier for the item used by the overflow manager
  * @returns visibility state of an overflow item
  */
 export function useIsOverflowItemVisible(id: string): boolean {
-  return !!useOverflowSelector(snapshot => snapshot.itemVisibility[id]);
+  return !!useOverflowSnapshot().itemVisibility[id];
 }

packages/react-components/react-overflow/library/src/useOverflowContainer.ts

@@ -14,7 +14,7 @@ import type {
   OverflowManager,
   ObserveOptions,
 } from '@fluentui/priority-overflow';
-import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { canUseDOM, useEventCallback } from '@fluentui/react-utilities';
 import type { UseOverflowContainerReturn } from './types';
 import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
 
@@ -44,7 +44,7 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
   const onUpdateOverflow = useEventCallback(update);
   const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);
 
-  const observeOptions = React.useMemo(
+  const observeOptions: Required<ObserveOptions> = React.useMemo(
     () => ({
       overflowAxis,
       overflowDirection,
@@ -69,8 +69,9 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
   const cleanupObservationRef = React.useRef<(() => void) | null>(null);
   const observedContainerRef = React.useRef<TElement | null>(null);
 
+  // eslint-disable-next-line react-hooks/refs
   if (!overflowManagerRef.current && canUseDOM()) {
-    overflowManagerRef.current = createOverflowManager();
+    overflowManagerRef.current = createOverflowManager(observeOptions);
   }
 
   const containerRef = React.useCallback<React.RefCallback<TElement>>(node => {
@@ -87,7 +88,7 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
     }
   }, []);
 
-  useIsomorphicLayoutEffect(() => {
+  React.useEffect(() => {
     overflowManagerRef.current?.setOptions(observeOptions);
   }, [observeOptions]);
 
@@ -133,6 +134,7 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
     registerOverflowMenu,
     updateOverflow,
     containerRef,
+    // eslint-disable-next-line react-hooks/refs
     manager: overflowManagerRef.current,
   };
 };

packages/react-components/react-overflow/library/src/useOverflowCount.ts

@@ -1,8 +1,8 @@
 'use client';
 
-import { useOverflowSelector } from './useOverflowSelector';
+import { useOverflowSnapshot } from './useOverflowSnapshot';
 
 /**
  * @returns Number of items that are overflowing
  */
-export const useOverflowCount = (): number => useOverflowSelector(snapshot => snapshot.overflowCount);
+export const useOverflowCount = (): number => useOverflowSnapshot().overflowCount;