@fluentui/react-overflow 9.0.43 → 9.1.1

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Thu, 09 Nov 2023 17:23:08 GMT and should not be manually modified.
+This log was last generated on Mon, 20 Nov 2023 09:51:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.1)
+
+Mon, 20 Nov 2023 09:51:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.0..@fluentui/react-overflow_v9.1.1)
+
+### Patches
+
+- fix: register should happen again once observe options change ([PR #29375](https://github.com/microsoft/fluentui/pull/29375) by lingfan.gao@microsoft.com)
+- Bump @fluentui/priority-overflow to v9.1.10 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.0)
+
+Fri, 10 Nov 2023 13:46:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.43..@fluentui/react-overflow_v9.1.0)
+
+### Minor changes
+
+- feat: Implement useOverflowVisibility hook ([PR #29809](https://github.com/microsoft/fluentui/pull/29809) by lingfangao@hotmail.com)
+
 ## [9.0.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.43)
 
-Thu, 09 Nov 2023 17:23:08 GMT 
+Thu, 09 Nov 2023 17:29:38 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.42..@fluentui/react-overflow_v9.0.43)
 
 ### Patches

package/dist/index.d.ts

@@ -153,4 +153,18 @@ export declare function useOverflowMenu<TElement extends HTMLElement>(id?: strin
     isOverflowing: boolean;
 };
 
+/**
+ * A hook that returns the visibility status of all items and groups.
+ *
+ * ⚠️ Heads up!
+ *
+ * This hook will cause the component it is in to re-render for every single time an item overflows or becomes
+ * visible - use with caution
+ * @returns visibility status of all items and groups
+ */
+export declare function useOverflowVisibility(): {
+    itemVisibility: Record<string, boolean>;
+    groupVisibility: Record<string, OverflowGroupState>;
+};
+
 export { }

package/lib/index.js

@@ -7,6 +7,7 @@ export { useOverflowCount } from './useOverflowCount';
 export { useOverflowItem } from './useOverflowItem';
 export { useOverflowMenu } from './useOverflowMenu';
 export { useOverflowDivider } from './useOverflowDivider';
+export { useOverflowVisibility } from './useOverflowVisibility';
 export { useOverflowContext } from './overflowContext';
 export { OverflowItem } from './components/OverflowItem/OverflowItem';
 export { OverflowDivider } from './components/OverflowDivider/OverflowDivider';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,qBAAqB,QAAQ,0BAA0B;AAEhE,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}

package/lib/useOverflowContainer.js

@@ -1,43 +1,58 @@
 import * as React from 'react';
 import { createOverflowManager } from '@fluentui/priority-overflow';
-import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
+const noop = ()=>null;
 /**
  * @internal
  * @param update - Callback when overflow state changes
  * @param options - Options to configure the overflow container
  * @returns - ref to attach to an intrinsic HTML element and imperative functions
  */ export const useOverflowContainer = (update, options)=>{
-    const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;
+    const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;
+    const onUpdateOverflow = useEventCallback(update);
+    const overflowOptions = React.useMemo(()=>({
+            overflowAxis,
+            overflowDirection,
+            padding,
+            minimumVisible,
+            onUpdateItemVisibility,
+            onUpdateOverflow
+        }), [
+        minimumVisible,
+        onUpdateItemVisibility,
+        overflowAxis,
+        overflowDirection,
+        padding,
+        onUpdateOverflow
+    ]);
+    const firstMount = useFirstMount();
     // DOM ref to the overflow container element
     const containerRef = React.useRef(null);
-    const updateOverflowItems = useEventCallback(update);
-    const [overflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);
+    const [overflowManager, setOverflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);
+    // On first mount there is no need to create an overflow manager and re-render
     useIsomorphicLayoutEffect(()=>{
-        if (!containerRef.current) {
-            return;
-        }
-        if (overflowManager) {
-            overflowManager.observe(containerRef.current, {
-                overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
-                overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
-                padding: padding !== null && padding !== void 0 ? padding : 10,
-                minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
-                onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,
-                onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined
-            });
-            return ()=>{
-                overflowManager.disconnect();
-            };
+        if (firstMount && containerRef.current) {
+            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);
         }
     }, [
-        updateOverflowItems,
+        firstMount,
         overflowManager,
-        overflowDirection,
-        overflowAxis,
-        padding,
-        minimumVisible,
-        onUpdateItemVisibility
+        overflowOptions
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (!containerRef.current || !canUseDOM() || firstMount) {
+            return;
+        }
+        const newOverflowManager = createOverflowManager();
+        newOverflowManager.observe(containerRef.current, overflowOptions);
+        setOverflowManager(newOverflowManager);
+        return ()=>{
+            newOverflowManager.disconnect();
+        };
+    }, [
+        overflowOptions,
+        firstMount
     ]);
     const registerItem = React.useCallback((item)=>{
         overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
@@ -53,7 +68,7 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERF
     const registerDivider = React.useCallback((divider)=>{
         const el = divider.element;
         overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
-        el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');
+        el.setAttribute(DATA_OVERFLOW_DIVIDER, '');
         return ()=>{
             divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
             el.removeAttribute(DATA_OVERFLOW_DIVIDER);
@@ -61,11 +76,6 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERF
     }, [
         overflowManager
     ]);
-    const updateOverflow = React.useCallback(()=>{
-        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
-    }, [
-        overflowManager
-    ]);
     const registerOverflowMenu = React.useCallback((el)=>{
         overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
         el.setAttribute(DATA_OVERFLOW_MENU, '');
@@ -76,12 +86,17 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERF
     }, [
         overflowManager
     ]);
+    const updateOverflow = React.useCallback(()=>{
+        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
+    }, [
+        overflowManager
+    ]);
     return {
-        containerRef,
         registerItem,
-        updateOverflow,
+        registerDivider,
         registerOverflowMenu,
-        registerDivider
+        updateOverflow,
+        containerRef
     };
 };
 export const updateVisibilityAttribute = ({ item, visible })=>{

package/lib/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n  OnUpdateItemVisibility,\n  OnUpdateOverflow,\n  OverflowItemEntry,\n  OverflowDividerEntry,\n  OverflowManager,\n  ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n  update: OnUpdateOverflow,\n  options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n  const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n  // DOM ref to the overflow container element\n  const containerRef = React.useRef<TElement>(null);\n  const updateOverflowItems = useEventCallback(update);\n\n  const [overflowManager] = React.useState<OverflowManager | null>(() =>\n    canUseDOM() ? createOverflowManager() : null,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    if (overflowManager) {\n      overflowManager.observe(containerRef.current, {\n        overflowDirection: overflowDirection ?? 'end',\n        overflowAxis: overflowAxis ?? 'horizontal',\n        padding: padding ?? 10,\n        minimumVisible: minimumVisible ?? 0,\n        onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n        onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n      });\n\n      return () => {\n        overflowManager.disconnect();\n      };\n    }\n  }, [\n    updateOverflowItems,\n    overflowManager,\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    onUpdateItemVisibility,\n  ]);\n\n  const registerItem = React.useCallback(\n    (item: OverflowItemEntry) => {\n      overflowManager?.addItem(item);\n      item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n      return () => {\n        item.element.removeAttribute(DATA_OVERFLOWING);\n        item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n        overflowManager?.removeItem(item.id);\n      };\n    },\n    [overflowManager],\n  );\n\n  const registerDivider = React.useCallback(\n    (divider: OverflowDividerEntry) => {\n      const el = divider.element;\n      overflowManager?.addDivider(divider);\n      el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n      return () => {\n        divider.groupId && overflowManager?.removeDivider(divider.groupId);\n        el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n      };\n    },\n    [overflowManager],\n  );\n\n  const updateOverflow = React.useCallback(() => {\n    overflowManager?.update();\n  }, [overflowManager]);\n\n  const registerOverflowMenu = React.useCallback(\n    (el: HTMLElement) => {\n      overflowManager?.addOverflowMenu(el);\n      el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        overflowManager?.removeOverflowMenu();\n        el.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    },\n    [overflowManager],\n  );\n\n  return {\n    containerRef,\n    registerItem,\n    updateOverflow,\n    registerOverflowMenu,\n    registerDivider,\n  };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n  if (visible) {\n    item.element.removeAttribute(DATA_OVERFLOWING);\n  } else {\n    item.element.setAttribute(DATA_OVERFLOWING, '');\n  }\n};\n"],"names":["React","createOverflowManager","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","containerRef","useRef","updateOverflowItems","overflowManager","useState","current","observe","undefined","onUpdateOverflow","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","updateOverflow","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateVisibilityAttribute","visible"],"mappings":"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"}
+{"version":3,"sources":["useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n  OnUpdateItemVisibility,\n  OnUpdateOverflow,\n  OverflowItemEntry,\n  OverflowDividerEntry,\n  OverflowManager,\n  ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\nconst noop = () => null;\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n  update: OnUpdateOverflow,\n  options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n  const {\n    overflowAxis = 'horizontal',\n    overflowDirection = 'end',\n    padding = 10,\n    minimumVisible = 0,\n    onUpdateItemVisibility = noop,\n  } = options;\n\n  const onUpdateOverflow = useEventCallback(update);\n\n  const overflowOptions = React.useMemo(\n    () => ({\n      overflowAxis,\n      overflowDirection,\n      padding,\n      minimumVisible,\n      onUpdateItemVisibility,\n      onUpdateOverflow,\n    }),\n    [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],\n  );\n\n  const firstMount = useFirstMount();\n\n  // DOM ref to the overflow container element\n  const containerRef = React.useRef<TElement>(null);\n\n  const [overflowManager, setOverflowManager] = React.useState<OverflowManager | null>(() =>\n    canUseDOM() ? createOverflowManager() : null,\n  );\n\n  // On first mount there is no need to create an overflow manager and re-render\n  useIsomorphicLayoutEffect(() => {\n    if (firstMount && containerRef.current) {\n      overflowManager?.observe(containerRef.current, overflowOptions);\n    }\n  }, [firstMount, overflowManager, overflowOptions]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerRef.current || !canUseDOM() || firstMount) {\n      return;\n    }\n\n    const newOverflowManager = createOverflowManager();\n    newOverflowManager.observe(containerRef.current, overflowOptions);\n    setOverflowManager(newOverflowManager);\n\n    return () => {\n      newOverflowManager.disconnect();\n    };\n  }, [overflowOptions, firstMount]);\n\n  const registerItem = React.useCallback(\n    (item: OverflowItemEntry) => {\n      overflowManager?.addItem(item);\n      item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n      return () => {\n        item.element.removeAttribute(DATA_OVERFLOWING);\n        item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n        overflowManager?.removeItem(item.id);\n      };\n    },\n    [overflowManager],\n  );\n\n  const registerDivider = React.useCallback(\n    (divider: OverflowDividerEntry) => {\n      const el = divider.element;\n      overflowManager?.addDivider(divider);\n      el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n      return () => {\n        divider.groupId && overflowManager?.removeDivider(divider.groupId);\n        el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n      };\n    },\n    [overflowManager],\n  );\n\n  const registerOverflowMenu = React.useCallback(\n    (el: HTMLElement) => {\n      overflowManager?.addOverflowMenu(el);\n      el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        overflowManager?.removeOverflowMenu();\n        el.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    },\n    [overflowManager],\n  );\n\n  const updateOverflow = React.useCallback(() => {\n    overflowManager?.update();\n  }, [overflowManager]);\n\n  return {\n    registerItem,\n    registerDivider,\n    registerOverflowMenu,\n    updateOverflow,\n    containerRef,\n  };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n  if (visible) {\n    item.element.removeAttribute(DATA_OVERFLOWING);\n  } else {\n    item.element.setAttribute(DATA_OVERFLOWING, '');\n  }\n};\n"],"names":["React","createOverflowManager","canUseDOM","useEventCallback","useFirstMount","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","noop","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}

package/lib/useOverflowVisibility.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useOverflowContext } from './overflowContext';
+/**
+ * A hook that returns the visibility status of all items and groups.
+ *
+ * ⚠️ Heads up!
+ *
+ * This hook will cause the component it is in to re-render for every single time an item overflows or becomes
+ * visible - use with caution
+ * @returns visibility status of all items and groups
+ */ export function useOverflowVisibility() {
+    const itemVisibility = useOverflowContext((ctx)=>ctx.itemVisibility);
+    const groupVisibility = useOverflowContext((ctx)=>ctx.groupVisibility);
+    return React.useMemo(()=>({
+            itemVisibility,
+            groupVisibility
+        }), [
+        itemVisibility,
+        groupVisibility
+    ]);
+}

package/lib/useOverflowVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility() {\n  const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n  const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n  return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["React","useOverflowContext","useOverflowVisibility","itemVisibility","ctx","groupVisibility","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;CAQC,GACD,OAAO,SAASC;IACd,MAAMC,iBAAiBF,mBAAmBG,CAAAA,MAAOA,IAAID,cAAc;IACnE,MAAME,kBAAkBJ,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOL,MAAMM,OAAO,CAAC,IAAO,CAAA;YAAEH;YAAgBE;QAAgB,CAAA,GAAI;QAACF;QAAgBE;KAAgB;AACrG"}

package/lib-commonjs/index.js

@@ -45,6 +45,9 @@ _export(exports, {
     useOverflowDivider: function() {
         return _useOverflowDivider.useOverflowDivider;
     },
+    useOverflowVisibility: function() {
+        return _useOverflowVisibility.useOverflowVisibility;
+    },
     useOverflowContext: function() {
         return _overflowContext.useOverflowContext;
     },
@@ -64,6 +67,7 @@ const _useOverflowCount = require("./useOverflowCount");
 const _useOverflowItem = require("./useOverflowItem");
 const _useOverflowMenu = require("./useOverflowMenu");
 const _useOverflowDivider = require("./useOverflowDivider");
+const _useOverflowVisibility = require("./useOverflowVisibility");
 const _overflowContext = require("./overflowContext");
 const _OverflowItem = require("./components/OverflowItem/OverflowItem");
 const _OverflowDivider = require("./components/OverflowDivider/OverflowDivider");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IACRC,gBAAgB;eAAhBA,2BAAgB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAC/EC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IACpBC,gBAAgB;eAAhBA,kCAAgB;;IAChBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IACfC,kBAAkB;eAAlBA,sCAAkB;;IAClBC,kBAAkB;eAAlBA,mCAAkB;;IAClBC,YAAY;eAAZA,0BAAY;;IACZC,eAAe;eAAfA,gCAAe;;;0BAXC;2BACuE;2CACtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;iCACA;8BACN;iCACG"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IACRC,gBAAgB;eAAhBA,2BAAgB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAC/EC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IACpBC,gBAAgB;eAAhBA,kCAAgB;;IAChBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IACfC,kBAAkB;eAAlBA,sCAAkB;;IAClBC,qBAAqB;eAArBA,4CAAqB;;IACrBC,kBAAkB;eAAlBA,mCAAkB;;IAClBC,YAAY;eAAZA,0BAAY;;IACZC,eAAe;eAAfA,gCAAe;;;0BAZC;2BACuE;2CACtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;uCACG;iCACH;8BACN;iCACG"}

package/lib-commonjs/useOverflowContainer.js

@@ -21,37 +21,52 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _priorityoverflow = require("@fluentui/priority-overflow");
 const _reactutilities = require("@fluentui/react-utilities");
 const _constants = require("./constants");
+const noop = ()=>null;
 const useOverflowContainer = (update, options)=>{
-    const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;
+    const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;
+    const onUpdateOverflow = (0, _reactutilities.useEventCallback)(update);
+    const overflowOptions = _react.useMemo(()=>({
+            overflowAxis,
+            overflowDirection,
+            padding,
+            minimumVisible,
+            onUpdateItemVisibility,
+            onUpdateOverflow
+        }), [
+        minimumVisible,
+        onUpdateItemVisibility,
+        overflowAxis,
+        overflowDirection,
+        padding,
+        onUpdateOverflow
+    ]);
+    const firstMount = (0, _reactutilities.useFirstMount)();
     // DOM ref to the overflow container element
     const containerRef = _react.useRef(null);
-    const updateOverflowItems = (0, _reactutilities.useEventCallback)(update);
-    const [overflowManager] = _react.useState(()=>(0, _reactutilities.canUseDOM)() ? (0, _priorityoverflow.createOverflowManager)() : null);
+    const [overflowManager, setOverflowManager] = _react.useState(()=>(0, _reactutilities.canUseDOM)() ? (0, _priorityoverflow.createOverflowManager)() : null);
+    // On first mount there is no need to create an overflow manager and re-render
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
-        if (!containerRef.current) {
-            return;
-        }
-        if (overflowManager) {
-            overflowManager.observe(containerRef.current, {
-                overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
-                overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
-                padding: padding !== null && padding !== void 0 ? padding : 10,
-                minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
-                onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,
-                onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined
-            });
-            return ()=>{
-                overflowManager.disconnect();
-            };
+        if (firstMount && containerRef.current) {
+            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);
         }
     }, [
-        updateOverflowItems,
+        firstMount,
         overflowManager,
-        overflowDirection,
-        overflowAxis,
-        padding,
-        minimumVisible,
-        onUpdateItemVisibility
+        overflowOptions
+    ]);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (!containerRef.current || !(0, _reactutilities.canUseDOM)() || firstMount) {
+            return;
+        }
+        const newOverflowManager = (0, _priorityoverflow.createOverflowManager)();
+        newOverflowManager.observe(containerRef.current, overflowOptions);
+        setOverflowManager(newOverflowManager);
+        return ()=>{
+            newOverflowManager.disconnect();
+        };
+    }, [
+        overflowOptions,
+        firstMount
     ]);
     const registerItem = _react.useCallback((item)=>{
         overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
@@ -67,7 +82,7 @@ const useOverflowContainer = (update, options)=>{
     const registerDivider = _react.useCallback((divider)=>{
         const el = divider.element;
         overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
-        el && el.setAttribute(_constants.DATA_OVERFLOW_DIVIDER, '');
+        el.setAttribute(_constants.DATA_OVERFLOW_DIVIDER, '');
         return ()=>{
             divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
             el.removeAttribute(_constants.DATA_OVERFLOW_DIVIDER);
@@ -75,11 +90,6 @@ const useOverflowContainer = (update, options)=>{
     }, [
         overflowManager
     ]);
-    const updateOverflow = _react.useCallback(()=>{
-        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
-    }, [
-        overflowManager
-    ]);
     const registerOverflowMenu = _react.useCallback((el)=>{
         overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
         el.setAttribute(_constants.DATA_OVERFLOW_MENU, '');
@@ -90,12 +100,17 @@ const useOverflowContainer = (update, options)=>{
     }, [
         overflowManager
     ]);
+    const updateOverflow = _react.useCallback(()=>{
+        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
+    }, [
+        overflowManager
+    ]);
     return {
-        containerRef,
         registerItem,
-        updateOverflow,
+        registerDivider,
         registerOverflowMenu,
-        registerDivider
+        updateOverflow,
+        containerRef
     };
 };
 const updateVisibilityAttribute = ({ item, visible })=>{

package/lib-commonjs/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */ export const useOverflowContainer = (update, options)=>{\n    const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n    // DOM ref to the overflow container element\n    const containerRef = React.useRef(null);\n    const updateOverflowItems = useEventCallback(update);\n    const [overflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);\n    useIsomorphicLayoutEffect(()=>{\n        if (!containerRef.current) {\n            return;\n        }\n        if (overflowManager) {\n            overflowManager.observe(containerRef.current, {\n                overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',\n                overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',\n                padding: padding !== null && padding !== void 0 ? padding : 10,\n                minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,\n                onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,\n                onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined\n            });\n            return ()=>{\n                overflowManager.disconnect();\n            };\n        }\n    }, [\n        updateOverflowItems,\n        overflowManager,\n        overflowDirection,\n        overflowAxis,\n        padding,\n        minimumVisible,\n        onUpdateItemVisibility\n    ]);\n    const registerItem = React.useCallback((item)=>{\n        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);\n        item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n        return ()=>{\n            item.element.removeAttribute(DATA_OVERFLOWING);\n            item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);\n        };\n    }, [\n        overflowManager\n    ]);\n    const registerDivider = React.useCallback((divider)=>{\n        const el = divider.element;\n        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);\n        el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n        return ()=>{\n            divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));\n            el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n        };\n    }, [\n        overflowManager\n    ]);\n    const updateOverflow = React.useCallback(()=>{\n        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\n    }, [\n        overflowManager\n    ]);\n    const registerOverflowMenu = React.useCallback((el)=>{\n        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);\n        el.setAttribute(DATA_OVERFLOW_MENU, '');\n        return ()=>{\n            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();\n            el.removeAttribute(DATA_OVERFLOW_MENU);\n        };\n    }, [\n        overflowManager\n    ]);\n    return {\n        containerRef,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n        registerDivider\n    };\n};\nexport const updateVisibilityAttribute = ({ item, visible })=>{\n    if (visible) {\n        item.element.removeAttribute(DATA_OVERFLOWING);\n    } else {\n        item.element.setAttribute(DATA_OVERFLOWING, '');\n    }\n};\n"],"names":["useOverflowContainer","updateVisibilityAttribute","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","containerRef","React","useRef","updateOverflowItems","useEventCallback","overflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","undefined","onUpdateOverflow","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","registerDivider","divider","el","addDivider","DATA_OVERFLOW_DIVIDER","groupId","removeDivider","updateOverflow","registerOverflowMenu","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","visible"],"mappings":";;;;;;;;;;;IASiBA,oBAAoB;eAApBA;;IA6EJC,yBAAyB;eAAzBA;;;;iEAtFU;kCACe;gCACiC;2BACyB;AAMrF,MAAMD,uBAAuB,CAACE,QAAQC;IAC7C,MAAM,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAEC,cAAc,EAAEC,sBAAsB,EAAE,GAAGL;IAC7F,4CAA4C;IAC5C,MAAMM,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAMC,sBAAsBC,IAAAA,gCAAgB,EAACX;IAC7C,MAAM,CAACY,gBAAgB,GAAGJ,OAAMK,QAAQ,CAAC,IAAIC,IAAAA,yBAAS,MAAKC,IAAAA,uCAAqB,MAAK;IACrFC,IAAAA,yCAAyB,EAAC;QACtB,IAAI,CAACT,aAAaU,OAAO,EAAE;YACvB;QACJ;QACA,IAAIL,iBAAiB;YACjBA,gBAAgBM,OAAO,CAACX,aAAaU,OAAO,EAAE;gBAC1Cd,mBAAmBA,sBAAsB,QAAQA,sBAAsB,KAAK,IAAIA,oBAAoB;gBACpGD,cAAcA,iBAAiB,QAAQA,iBAAiB,KAAK,IAAIA,eAAe;gBAChFE,SAASA,YAAY,QAAQA,YAAY,KAAK,IAAIA,UAAU;gBAC5DC,gBAAgBA,mBAAmB,QAAQA,mBAAmB,KAAK,IAAIA,iBAAiB;gBACxFC,wBAAwBA,2BAA2B,QAAQA,2BAA2B,KAAK,IAAIA,yBAAyB,IAAIa;gBAC5HC,kBAAkBV,wBAAwB,QAAQA,wBAAwB,KAAK,IAAIA,sBAAsB,IAAIS;YACjH;YACA,OAAO;gBACHP,gBAAgBS,UAAU;YAC9B;QACJ;IACJ,GAAG;QACCX;QACAE;QACAT;QACAD;QACAE;QACAC;QACAC;KACH;IACD,MAAMgB,eAAed,OAAMe,WAAW,CAAC,CAACC;QACpCZ,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBa,OAAO,CAACD;QAC1FA,KAAKE,OAAO,CAACC,YAAY,CAACC,6BAAkB,EAAE;QAC9C,OAAO;YACHJ,KAAKE,OAAO,CAACG,eAAe,CAACC,2BAAgB;YAC7CN,KAAKE,OAAO,CAACG,eAAe,CAACD,6BAAkB;YAC/ChB,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBmB,UAAU,CAACP,KAAKQ,EAAE;QACxG;IACJ,GAAG;QACCpB;KACH;IACD,MAAMqB,kBAAkBzB,OAAMe,WAAW,CAAC,CAACW;QACvC,MAAMC,KAAKD,QAAQR,OAAO;QAC1Bd,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBwB,UAAU,CAACF;QAC7FC,MAAMA,GAAGR,YAAY,CAACU,gCAAqB,EAAE;QAC7C,OAAO;YACHH,QAAQI,OAAO,IAAK1B,CAAAA,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgB2B,aAAa,CAACL,QAAQI,OAAO,CAAA;YACnIH,GAAGN,eAAe,CAACQ,gCAAqB;QAC5C;IACJ,GAAG;QACCzB;KACH;IACD,MAAM4B,iBAAiBhC,OAAMe,WAAW,CAAC;QACrCX,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBZ,MAAM;IAC5F,GAAG;QACCY;KACH;IACD,MAAM6B,uBAAuBjC,OAAMe,WAAW,CAAC,CAACY;QAC5CvB,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgB8B,eAAe,CAACP;QAClGA,GAAGR,YAAY,CAACgB,6BAAkB,EAAE;QACpC,OAAO;YACH/B,oBAAoB,QAAQA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBgC,kBAAkB;YACpGT,GAAGN,eAAe,CAACc,6BAAkB;QACzC;IACJ,GAAG;QACC/B;KACH;IACD,OAAO;QACHL;QACAe;QACAkB;QACAC;QACAR;IACJ;AACJ;AACO,MAAMlC,4BAA4B,CAAC,EAAEyB,IAAI,EAAEqB,OAAO,EAAE;IACvD,IAAIA,SAAS;QACTrB,KAAKE,OAAO,CAACG,eAAe,CAACC,2BAAgB;IACjD,OAAO;QACHN,KAAKE,OAAO,CAACC,YAAY,CAACG,2BAAgB,EAAE;IAChD;AACJ"}
+{"version":3,"sources":["useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nconst noop = ()=>null;\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */ export const useOverflowContainer = (update, options)=>{\n    const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;\n    const onUpdateOverflow = useEventCallback(update);\n    const overflowOptions = React.useMemo(()=>({\n            overflowAxis,\n            overflowDirection,\n            padding,\n            minimumVisible,\n            onUpdateItemVisibility,\n            onUpdateOverflow\n        }), [\n        minimumVisible,\n        onUpdateItemVisibility,\n        overflowAxis,\n        overflowDirection,\n        padding,\n        onUpdateOverflow\n    ]);\n    const firstMount = useFirstMount();\n    // DOM ref to the overflow container element\n    const containerRef = React.useRef(null);\n    const [overflowManager, setOverflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);\n    // On first mount there is no need to create an overflow manager and re-render\n    useIsomorphicLayoutEffect(()=>{\n        if (firstMount && containerRef.current) {\n            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);\n        }\n    }, [\n        firstMount,\n        overflowManager,\n        overflowOptions\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        if (!containerRef.current || !canUseDOM() || firstMount) {\n            return;\n        }\n        const newOverflowManager = createOverflowManager();\n        newOverflowManager.observe(containerRef.current, overflowOptions);\n        setOverflowManager(newOverflowManager);\n        return ()=>{\n            newOverflowManager.disconnect();\n        };\n    }, [\n        overflowOptions,\n        firstMount\n    ]);\n    const registerItem = React.useCallback((item)=>{\n        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);\n        item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n        return ()=>{\n            item.element.removeAttribute(DATA_OVERFLOWING);\n            item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);\n        };\n    }, [\n        overflowManager\n    ]);\n    const registerDivider = React.useCallback((divider)=>{\n        const el = divider.element;\n        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);\n        el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n        return ()=>{\n            divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));\n            el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n        };\n    }, [\n        overflowManager\n    ]);\n    const registerOverflowMenu = React.useCallback((el)=>{\n        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);\n        el.setAttribute(DATA_OVERFLOW_MENU, '');\n        return ()=>{\n            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();\n            el.removeAttribute(DATA_OVERFLOW_MENU);\n        };\n    }, [\n        overflowManager\n    ]);\n    const updateOverflow = React.useCallback(()=>{\n        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\n    }, [\n        overflowManager\n    ]);\n    return {\n        registerItem,\n        registerDivider,\n        registerOverflowMenu,\n        updateOverflow,\n        containerRef\n    };\n};\nexport const updateVisibilityAttribute = ({ item, visible })=>{\n    if (visible) {\n        item.element.removeAttribute(DATA_OVERFLOWING);\n    } else {\n        item.element.setAttribute(DATA_OVERFLOWING, '');\n    }\n};\n"],"names":["useOverflowContainer","updateVisibilityAttribute","noop","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","useEventCallback","overflowOptions","React","useMemo","firstMount","useFirstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","newOverflowManager","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","registerDivider","divider","el","addDivider","DATA_OVERFLOW_DIVIDER","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","updateOverflow","visible"],"mappings":"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"}

package/lib-commonjs/useOverflowVisibility.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverflowVisibility", {
+    enumerable: true,
+    get: function() {
+        return useOverflowVisibility;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _overflowContext = require("./overflowContext");
+function useOverflowVisibility() {
+    const itemVisibility = (0, _overflowContext.useOverflowContext)((ctx)=>ctx.itemVisibility);
+    const groupVisibility = (0, _overflowContext.useOverflowContext)((ctx)=>ctx.groupVisibility);
+    return _react.useMemo(()=>({
+            itemVisibility,
+            groupVisibility
+        }), [
+        itemVisibility,
+        groupVisibility
+    ]);
+}

package/lib-commonjs/useOverflowVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowVisibility.js"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */ export function useOverflowVisibility() {\n    const itemVisibility = useOverflowContext((ctx)=>ctx.itemVisibility);\n    const groupVisibility = useOverflowContext((ctx)=>ctx.groupVisibility);\n    return React.useMemo(()=>({\n            itemVisibility,\n            groupVisibility\n        }), [\n        itemVisibility,\n        groupVisibility\n    ]);\n}\n"],"names":["useOverflowVisibility","itemVisibility","useOverflowContext","ctx","groupVisibility","React","useMemo"],"mappings":";;;;+BAUoBA;;;eAAAA;;;;iEAVG;iCACY;AASxB,SAASA;IAChB,MAAMC,iBAAiBC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIF,cAAc;IACnE,MAAMG,kBAAkBF,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,eAAe;IACrE,OAAOC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClBL;YACAG;QACJ,CAAA,GAAI;QACJH;QACAG;KACH;AACL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "9.0.43",
+  "version": "9.1.1",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,7 +34,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/priority-overflow": "^9.1.9",
+    "@fluentui/priority-overflow": "^9.1.10",
     "@fluentui/react-context-selector": "^9.1.42",
     "@fluentui/react-theme": "^9.1.16",
     "@fluentui/react-utilities": "^9.15.2",