fix(react-overflow): overflowMenuSize included in occupiedSize.

Author: ValentinaKozlova

change/@fluentui-priority-overflow-09409455-f841-4490-8f29-242e315804df.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: overflowMenuSize is included in occupiedSize",
+  "packageName": "@fluentui/priority-overflow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-overflow-9b148d37-5471-4fe4-8c62-6bd3775221c5.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix: overflowMenuSize included in occupiedSize",
+  "packageName": "@fluentui/react-overflow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -9,6 +9,7 @@ export function createOverflowManager(): OverflowManager;
 
 // @public (undocumented)
 export interface ObserveOptions {
+    hasHiddenItems?: boolean;
     minimumVisible?: number;
     onUpdateItemVisibility: OnUpdateItemVisibility;
     onUpdateOverflow: OnUpdateOverflow;

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

@@ -32,6 +32,7 @@ export function createOverflowManager(): OverflowManager {
     minimumVisible: 0,
     onUpdateItemVisibility: () => undefined,
     onUpdateOverflow: () => undefined,
+    hasHiddenItems: false,
   };
 
   const overflowItems: Record<string, OverflowItemEntry> = {};
@@ -103,7 +104,8 @@ export function createOverflowManager(): OverflowManager {
       0,
     );
 
-    const overflowMenuSize = invisibleItemQueue.size() > 0 && overflowMenu ? getOffsetSize(overflowMenu) : 0;
+    const overflowMenuSize =
+      (invisibleItemQueue.size() > 0 || options.hasHiddenItems) && overflowMenu ? getOffsetSize(overflowMenu) : 0;
 
     return totalItemSize + totalDividerSize + overflowMenuSize;
   }

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

@@ -83,6 +83,12 @@ export interface ObserveOptions {
    * Callback when item visibility is updated
    */
   onUpdateOverflow: OnUpdateOverflow;
+
+  /**
+   * When true, the overflow menu has default hidden items
+   * @default false
+   */
+  hasHiddenItems?: boolean;
 }
 
 /**

packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.stories.tsx

@@ -240,9 +240,11 @@ const BreadcrumbOverflowExample = () => {
       maxDisplayedItems: 5,
     });
 
+  const hasHiddenItems = overflowItems && overflowItems.length > 0;
+  
   return (
     <div className={styles.example}>
-      <Overflow>
+      <Overflow hasHiddenItems={hasHiddenItems}>
         <Breadcrumb>
           {startDisplayedItems.map((item: Item) => renderBreadcrumbItem(item, false))}
           <OverflowMenu

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

@@ -24,7 +24,7 @@ export interface OnOverflowChangeData extends OverflowState {}
  * Overflow Props
  */
 export type OverflowProps = Partial<
-  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>
+  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible' | 'hasHiddenItems'>
 > & {
   children: React.ReactElement;
 
@@ -39,7 +39,15 @@ export type OverflowProps = Partial<
 export const Overflow = React.forwardRef((props: OverflowProps, ref) => {
   const styles = useOverflowStyles();
 
-  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding, onOverflowChange } = props;
+  const {
+    children,
+    minimumVisible,
+    overflowAxis = 'horizontal',
+    overflowDirection,
+    padding,
+    onOverflowChange,
+    hasHiddenItems,
+  } = props;
 
   const [overflowState, setOverflowState] = React.useState<OverflowState>({
     hasOverflow: false,
@@ -73,6 +81,7 @@ export const Overflow = React.forwardRef((props: OverflowProps, ref) => {
       overflowAxis,
       padding,
       minimumVisible,
+      hasHiddenItems,
       onUpdateItemVisibility: updateVisibilityAttribute,
     },
   );

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

@@ -73,6 +73,7 @@ describe('useOverflowContainer', () => {
       Array [
         <div />,
         Object {
+          "hasHiddenItems": false,
           "minimumVisible": 0,
           "onUpdateItemVisibility": [Function],
           "onUpdateOverflow": [Function],

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

@@ -36,6 +36,7 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
     padding = 10,
     minimumVisible = 0,
     onUpdateItemVisibility = noop,
+    hasHiddenItems = false,
   } = options;
 
   const onUpdateOverflow = useEventCallback(update);
@@ -48,8 +49,17 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
       minimumVisible,
       onUpdateItemVisibility,
       onUpdateOverflow,
+      hasHiddenItems,
     }),
-    [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],
+    [
+      minimumVisible,
+      onUpdateItemVisibility,
+      overflowAxis,
+      overflowDirection,
+      padding,
+      onUpdateOverflow,
+      hasHiddenItems,
+    ],
   );
 
   const firstMount = useFirstMount();