fix(useOverflowContainer): Removes double overflowManager creation

change/@fluentui-react-overflow-f9979cd2-b20b-4857-97e8-4e9436f5353d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(useOverflowContainer): Removes double overflowManager creation",
+  "packageName": "@fluentui/react-overflow",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -28,6 +28,8 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
   update: OnUpdateOverflow,
   options: Omit<ObserveOptions, 'onUpdateOverflow'>,
 ): UseOverflowContainerReturn<TElement> => {
+  'use no memo';
+
   const {
     overflowAxis = 'horizontal',
     overflowDirection = 'end',
@@ -74,7 +76,9 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
     const newOverflowManager = createOverflowManager();
     newOverflowManager.observe(containerRef.current, overflowOptions);
     setOverflowManager(newOverflowManager);
-  }, [overflowOptions, firstMount]);
+    // We don't want to re-create the overflow manager when the first mount flag changes from true to false
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overflowOptions]);
 
   /* Clean up overflow manager on unmount */
   React.useEffect(

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

@@ -1,22 +1,42 @@
 import * as React from 'react';
+
 import {
-  makeStyles,
-  Button,
   Menu,
   MenuTrigger,
   MenuPopover,
   MenuList,
   MenuItem,
-  MenuButton,
-  tokens,
+  ForwardRefComponent,
+  makeStyles,
   mergeClasses,
+  tokens,
+  MenuDivider,
+  Toolbar,
+  ToolbarButton,
+  //--------
   Overflow,
   OverflowItem,
-  OverflowItemProps,
   useIsOverflowItemVisible,
-  useOverflowMenu,
 } from '@fluentui/react-components';
 
+import {
+  MoreHorizontalRegular,
+  MoreHorizontalFilled,
+  CallRegular,
+  CallFilled,
+  bundleIcon,
+} from '@fluentui/react-icons';
+
+const Call = bundleIcon(CallRegular, CallFilled);
+const MoreHorizontal = bundleIcon(MoreHorizontalRegular, MoreHorizontalFilled);
+
+/* noop mocks for overflow - used for perf profiling */
+// const Overflow = ({ children }) => children;
+// const OverflowItem = ({ children }) => children;
+// const useIsOverflowItemVisible = () => true;
+
+Overflow.displayName = 'Overflow';
+
 const useStyles = makeStyles({
   container: {
     display: 'flex',
@@ -25,8 +45,23 @@ const useStyles = makeStyles({
     overflow: 'hidden',
   },
 
+  leftItems: {
+    width: '200px',
+    flex: '0 0 auto',
+    alignSelf: 'center',
+    background: 'salmon',
+  },
+
+  toolbar: {
+    // minWidth: 0, // to allow shrinking, but does not leave enough space for the items, which do not overflow
+    minWidth: '32px', // allow shrinking but keep space for single button
+    flexGrow: 1, // to re-grow after shrinking
+    // marginLeft: 'auto', // to push the toolbar to the right - does not work with flex-grow
+    justifyContent: 'flex-end', // push to the right, instead of the marginLeft: auto
+  },
+
   resizableArea: {
-    minWidth: '200px',
+    minWidth: '160px',
     maxWidth: '800px',
     border: `2px solid ${tokens.colorBrandBackground}`,
     padding: '20px 10px 10px 10px',
@@ -49,57 +84,121 @@ const useStyles = makeStyles({
   },
 });
 
-export const Default = () => {
-  const styles = useStyles();
+/** Render an item either in the main area or in the overflow */
+const ToolbarItem: ForwardRefComponent<{
+  appId: string;
+  isInOverflow?: boolean;
+}> = React.forwardRef(({ appId, isInOverflow }, ref) => {
+  console.log(`Item ${appId} render ${isInOverflow ? '' : 'NOT '}in overflow`);
 
-  const itemIds = new Array(8).fill(0).map((_, i) => i.toString());
+  if (isInOverflow) {
+    return <MenuItem>Item {appId} (in overflow)</MenuItem>;
+  }
+
+  return <ToolbarButton icon={<Call />} ref={ref} />;
+});
+ToolbarItem.displayName = 'ToolbarItem';
+
+const ToolbarItemMemo = React.memo(ToolbarItem);
+
+// ----------------------------------------------------------------------------------------
+
+type ToolbarItems = {
+  id: string;
+  component: React.ReactElement;
+  overflowComponent: React.ReactElement;
+  priority?: number;
+}[];
+
+const toolbarItems: ToolbarItems = [
+  {
+    id: '1',
+    component: <ToolbarItemMemo appId="1" />,
+    overflowComponent: <ToolbarItemMemo appId="1" isInOverflow />,
+  },
+  {
+    id: '2',
+    component: null, // <ToolbarItemMemo appId="2" />,
+    overflowComponent: null, // <ToolbarItemMemo appId="2" isInOverflow />,
+    priority: 1,
+  },
+  {
+    id: '3',
+    component: <ToolbarItemMemo appId="3" />,
+    overflowComponent: <ToolbarItemMemo appId="3" isInOverflow />,
+  },
+];
+
+/**
+ * Requirements:
+ * - overflow menu is always visible as there are items which are always in overflow
+ * - overflow in custom order (priority overflow)
+ * - custom order of items in overflow?
+ * ? how can I push the toolbar to the right?
+ */
+export const Default = () => {
+  const classes = useStyles();
 
   return (
-    <Overflow>
-      <div className={mergeClasses(styles.container, styles.resizableArea)}>
-        {itemIds.map(i => (
-          <OverflowItem key={i} id={i}>
-            <Button>Item {i}</Button>
+    <div className={mergeClasses(classes.container, classes.resizableArea)}>
+      <div className={classes.leftItems}>Spacer</div>
+      <Overflow minimumVisible={1}>
+        <Toolbar className={classes.toolbar}>
+          {toolbarItems.map(toolbarItem => (
+            <OverflowItem key={toolbarItem.id} id={toolbarItem.id} priority={toolbarItem.priority}>
+              {toolbarItem.component}
+            </OverflowItem>
+          ))}
+          <OverflowItem id="overflow" priority={1000}>
+            <OverflowMenu items={toolbarItems} />
           </OverflowItem>
-        ))}
-        <OverflowMenu itemIds={itemIds} />
-      </div>
-    </Overflow>
+        </Toolbar>
+      </Overflow>
+    </div>
   );
 };
 
-const OverflowMenuItem: React.FC<Pick<OverflowItemProps, 'id'>> = props => {
-  const { id } = props;
+const OverflowItemWrapper: React.FC<{
+  id: string;
+  children: React.ReactElement;
+}> = props => {
+  const { id, children } = props;
   const isVisible = useIsOverflowItemVisible(id);
 
   if (isVisible) {
     return null;
   }
 
-  // As an union between button props and div props may be conflicting, casting is required
-  return <MenuItem>Item {id}</MenuItem>;
+  return children;
 };
 
-const OverflowMenu: React.FC<{ itemIds: string[] }> = ({ itemIds }) => {
-  const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();
+const OverflowMenu = React.forwardRef<HTMLButtonElement, { items: ToolbarItems }>((props, ref) => {
+  const { items } = props;
+  // const { overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();
 
-  if (!isOverflowing) {
-    return null;
-  }
+  // if (!isOverflowing) {
+  //   return null;
+  // }
 
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
-        <MenuButton ref={ref}>+{overflowCount} items</MenuButton>
+        <ToolbarButton icon={<MoreHorizontal />} ref={ref} />
       </MenuTrigger>
 
       <MenuPopover>
         <MenuList>
-          {itemIds.map(i => {
-            return <OverflowMenuItem key={i} id={i} />;
-          })}
+          <MenuItem>Item above</MenuItem>
+          <MenuDivider />
+          {items.map(item => (
+            <OverflowItemWrapper key={item.id} id={item.id}>
+              {item.overflowComponent}
+            </OverflowItemWrapper>
+          ))}
+          <MenuDivider />
+          <MenuItem>Item below</MenuItem>
         </MenuList>
       </MenuPopover>
     </Menu>
   );
-};
+});