@fluentui/react-overflow 9.8.0 → 9.9.0

package/lib/useOverflowContainer.js

@@ -1,111 +1,120 @@
 'use client';
 import * as React from 'react';
-import { createOverflowManager } from '@fluentui/priority-overflow';
-import { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { createOverflowManager, EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';
+import { canUseDOM, useEventCallback, 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)=>{
-    'use no memo';
     const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop, hasHiddenItems = false } = options;
-    const onUpdateOverflow = useEventCallback(update);
-    const overflowOptions = React.useMemo(()=>({
+    const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);
+    const observeOptions = React.useMemo(()=>({
             overflowAxis,
             overflowDirection,
             padding,
             minimumVisible,
-            onUpdateItemVisibility,
-            onUpdateOverflow,
+            onUpdateItemVisibility: onUpdateItemVisibilityCallback,
+            onUpdateOverflow: update,
             hasHiddenItems
         }), [
         minimumVisible,
-        onUpdateItemVisibility,
+        onUpdateItemVisibilityCallback,
         overflowAxis,
         overflowDirection,
         padding,
-        onUpdateOverflow,
+        update,
         hasHiddenItems
     ]);
-    const firstMount = useFirstMount();
-    // DOM ref to the overflow container element
     const containerRef = React.useRef(null);
-    const [overflowManager, setOverflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);
-    // On first mount there is no need to create an overflow manager and re-render
+    const managerRef = React.useRef(null);
+    if (managerRef.current === null) {
+        managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;
+    }
     useIsomorphicLayoutEffect(()=>{
-        if (firstMount && containerRef.current) {
-            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);
+        if (managerRef.current && containerRef.current) {
+            // forceUpdate resolves overflow synchronously for a correct first paint; the manager guards it
+            // on the container being measured.
+            managerRef.current.observe(containerRef.current, {
+                forceUpdate: true
+            });
+            return ()=>{
+                var _managerRef_current;
+                return (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.disconnect();
+            };
         }
-    }, [
-        firstMount,
-        overflowManager,
-        overflowOptions
-    ]);
+    }, []);
     useIsomorphicLayoutEffect(()=>{
-        if (!containerRef.current || !canUseDOM() || firstMount) {
-            return;
-        }
-        const newOverflowManager = createOverflowManager();
-        newOverflowManager.observe(containerRef.current, overflowOptions);
-        setOverflowManager(newOverflowManager);
-    // 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
+        var _managerRef_current;
+        (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.setOptions(observeOptions);
     }, [
-        overflowOptions
-    ]);
-    /* Clean up overflow manager on unmount */ React.useEffect(()=>()=>{
-            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.disconnect();
-        }, [
-        overflowManager
+        observeOptions
     ]);
     const registerItem = React.useCallback((item)=>{
-        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
+        var _managerRef_current;
+        (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.addItem(item);
         item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
         return ()=>{
+            var _managerRef_current;
             item.element.removeAttribute(DATA_OVERFLOWING);
             item.element.removeAttribute(DATA_OVERFLOW_ITEM);
-            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
+            (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.removeItem(item.id);
         };
-    }, [
-        overflowManager
-    ]);
+    }, []);
     const registerDivider = React.useCallback((divider)=>{
+        var _managerRef_current;
         const el = divider.element;
-        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
+        (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.addDivider(divider);
         el.setAttribute(DATA_OVERFLOW_DIVIDER, '');
         return ()=>{
-            divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
+            var _managerRef_current;
+            (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.removeDivider(divider.groupId);
             el.removeAttribute(DATA_OVERFLOW_DIVIDER);
         };
-    }, [
-        overflowManager
-    ]);
+    }, []);
     const registerOverflowMenu = React.useCallback((el)=>{
-        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
+        var _managerRef_current;
+        (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.addOverflowMenu(el);
         el.setAttribute(DATA_OVERFLOW_MENU, '');
         return ()=>{
-            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
+            var _managerRef_current;
+            (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.removeOverflowMenu();
             el.removeAttribute(DATA_OVERFLOW_MENU);
         };
-    }, [
-        overflowManager
-    ]);
+    }, []);
     const updateOverflow = React.useCallback(()=>{
-        overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
-    }, [
-        overflowManager
-    ]);
+        var _managerRef_current;
+        (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.update();
+    }, []);
+    const getSnapshot = React.useCallback(()=>{
+        var _managerRef_current;
+        var _managerRef_current_getSnapshot;
+        return (_managerRef_current_getSnapshot = (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.getSnapshot()) !== null && _managerRef_current_getSnapshot !== void 0 ? _managerRef_current_getSnapshot : EMPTY_SNAPSHOT;
+    }, []);
+    const subscribe = React.useCallback((listener)=>{
+        var _managerRef_current;
+        var _managerRef_current_subscribe;
+        return (_managerRef_current_subscribe = (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.subscribe(listener)) !== null && _managerRef_current_subscribe !== void 0 ? _managerRef_current_subscribe : noop;
+    }, []);
+    const forceUpdateOverflow = React.useCallback(()=>{
+        var _managerRef_current;
+        (_managerRef_current = managerRef.current) === null || _managerRef_current === void 0 ? void 0 : _managerRef_current.forceUpdate();
+    }, []);
     return {
         registerItem,
         registerDivider,
         registerOverflowMenu,
         updateOverflow,
-        containerRef
+        forceUpdateOverflow,
+        containerRef,
+        getSnapshot,
+        subscribe
     };
 };
+const noop = ()=>{
+/* noop */ };
 export const updateVisibilityAttribute = ({ item, visible })=>{
     if (visible) {
         item.element.removeAttribute(DATA_OVERFLOWING);

package/lib/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * 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 type { 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  'use no memo';\n\n  const {\n    overflowAxis = 'horizontal',\n    overflowDirection = 'end',\n    padding = 10,\n    minimumVisible = 0,\n    onUpdateItemVisibility = noop,\n    hasHiddenItems = false,\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      hasHiddenItems,\n    }),\n    [\n      minimumVisible,\n      onUpdateItemVisibility,\n      overflowAxis,\n      overflowDirection,\n      padding,\n      onUpdateOverflow,\n      hasHiddenItems,\n    ],\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    // We don't want to re-create the overflow manager when the first mount flag changes from true to false\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [overflowOptions]);\n\n  /* Clean up overflow manager on unmount */\n  React.useEffect(\n    () => () => {\n      overflowManager?.disconnect();\n    },\n    [overflowManager],\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.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","hasHiddenItems","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","useEffect","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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"}
+{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createOverflowManager, EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n  OnUpdateItemVisibility,\n  OnUpdateOverflow,\n  OverflowItemEntry,\n  OverflowDividerEntry,\n  OverflowManager,\n  OverflowOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { 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<OverflowOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n  const {\n    overflowAxis = 'horizontal',\n    overflowDirection = 'end',\n    padding = 10,\n    minimumVisible = 0,\n    onUpdateItemVisibility = noop,\n    hasHiddenItems = false,\n  } = options;\n\n  const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);\n\n  const observeOptions: Required<OverflowOptions> = React.useMemo(\n    () => ({\n      overflowAxis,\n      overflowDirection,\n      padding,\n      minimumVisible,\n      onUpdateItemVisibility: onUpdateItemVisibilityCallback,\n      onUpdateOverflow: update,\n      hasHiddenItems,\n    }),\n    [minimumVisible, onUpdateItemVisibilityCallback, overflowAxis, overflowDirection, padding, update, hasHiddenItems],\n  );\n\n  const containerRef = React.useRef<TElement>(null);\n\n  const managerRef = React.useRef<OverflowManager | null>(null);\n\n  if (managerRef.current === null) {\n    managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    if (managerRef.current && containerRef.current) {\n      // forceUpdate resolves overflow synchronously for a correct first paint; the manager guards it\n      // on the container being measured.\n      managerRef.current.observe(containerRef.current, { forceUpdate: true });\n      return () => managerRef.current?.disconnect();\n    }\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    managerRef.current?.setOptions(observeOptions);\n  }, [observeOptions]);\n\n  const registerItem = React.useCallback((item: OverflowItemEntry) => {\n    managerRef.current?.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      managerRef.current?.removeItem(item.id);\n    };\n  }, []);\n\n  const registerDivider = React.useCallback((divider: OverflowDividerEntry) => {\n    const el = divider.element;\n    managerRef.current?.addDivider(divider);\n    el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n    return () => {\n      managerRef.current?.removeDivider(divider.groupId);\n      el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n    };\n  }, []);\n\n  const registerOverflowMenu = React.useCallback((el: HTMLElement) => {\n    managerRef.current?.addOverflowMenu(el);\n    el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n    return () => {\n      managerRef.current?.removeOverflowMenu();\n      el.removeAttribute(DATA_OVERFLOW_MENU);\n    };\n  }, []);\n\n  const updateOverflow = React.useCallback(() => {\n    managerRef.current?.update();\n  }, []);\n\n  const getSnapshot = React.useCallback<OverflowManager['getSnapshot']>(\n    () => managerRef.current?.getSnapshot() ?? EMPTY_SNAPSHOT,\n    [],\n  );\n\n  const subscribe = React.useCallback<OverflowManager['subscribe']>(\n    listener => managerRef.current?.subscribe(listener) ?? noop,\n    [],\n  );\n\n  const forceUpdateOverflow = React.useCallback(() => {\n    managerRef.current?.forceUpdate();\n  }, []);\n\n  return {\n    registerItem,\n    registerDivider,\n    registerOverflowMenu,\n    updateOverflow,\n    forceUpdateOverflow,\n    containerRef,\n    getSnapshot,\n    subscribe,\n  };\n};\n\nconst noop = () => {\n  /* noop */\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","EMPTY_SNAPSHOT","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","noop","hasHiddenItems","onUpdateItemVisibilityCallback","observeOptions","useMemo","onUpdateOverflow","containerRef","useRef","managerRef","current","observe","forceUpdate","disconnect","setOptions","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","removeDivider","groupId","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","getSnapshot","subscribe","listener","forceUpdateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}

package/lib/useOverflowContextValues.js

@@ -0,0 +1,35 @@
+'use client';
+import * as React from 'react';
+/**
+ * Assembles the overflow context values provided to descendants, from the state returned by
+ * {@link useOverflow_unstable}.
+ *
+ * @internal
+ */ export const useOverflowContextValues_unstable = (state)=>{
+    const { registerItem, registerDivider, registerOverflowMenu, updateOverflow, forceUpdateOverflow, containerRef, getSnapshot, subscribe } = state;
+    const overflow = React.useMemo(()=>({
+            groupVisibility: {},
+            itemVisibility: {},
+            hasOverflow: false,
+            registerItem,
+            registerDivider,
+            registerOverflowMenu,
+            updateOverflow,
+            forceUpdateOverflow,
+            containerRef,
+            getSnapshot,
+            subscribe
+        }), [
+        registerItem,
+        registerDivider,
+        registerOverflowMenu,
+        updateOverflow,
+        forceUpdateOverflow,
+        containerRef,
+        getSnapshot,
+        subscribe
+    ]);
+    return {
+        overflow
+    };
+};

package/lib/useOverflowContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useOverflowContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { OverflowContextValue } from './overflowContext';\nimport type { OverflowComponentState, OverflowContextValues } from './components/Overflow/Overflow.types';\n\n/**\n * Assembles the overflow context values provided to descendants, from the state returned by\n * {@link useOverflow_unstable}.\n *\n * @internal\n */\nexport const useOverflowContextValues_unstable = (state: OverflowComponentState): OverflowContextValues => {\n  const {\n    registerItem,\n    registerDivider,\n    registerOverflowMenu,\n    updateOverflow,\n    forceUpdateOverflow,\n    containerRef,\n    getSnapshot,\n    subscribe,\n  } = state;\n\n  const overflow = React.useMemo<OverflowContextValue>(\n    () => ({\n      groupVisibility: {},\n      itemVisibility: {},\n      hasOverflow: false,\n      registerItem,\n      registerDivider,\n      registerOverflowMenu,\n      updateOverflow,\n      forceUpdateOverflow,\n      containerRef,\n      getSnapshot,\n      subscribe,\n    }),\n    [\n      registerItem,\n      registerDivider,\n      registerOverflowMenu,\n      updateOverflow,\n      forceUpdateOverflow,\n      containerRef,\n      getSnapshot,\n      subscribe,\n    ],\n  );\n\n  return { overflow };\n};\n"],"names":["React","useOverflowContextValues_unstable","state","registerItem","registerDivider","registerOverflowMenu","updateOverflow","forceUpdateOverflow","containerRef","getSnapshot","subscribe","overflow","useMemo","groupVisibility","itemVisibility","hasOverflow"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B;;;;;CAKC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD,MAAM,EACJC,YAAY,EACZC,eAAe,EACfC,oBAAoB,EACpBC,cAAc,EACdC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,SAAS,EACV,GAAGR;IAEJ,MAAMS,WAAWX,MAAMY,OAAO,CAC5B,IAAO,CAAA;YACLC,iBAAiB,CAAC;YAClBC,gBAAgB,CAAC;YACjBC,aAAa;YACbZ;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QACEP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB,EAAE"}

package/lib/useOverflowCount.js

@@ -1,12 +1,6 @@
 'use client';
-import { useOverflowContext } from './overflowContext';
+import { useOverflowSnapshot } from './useOverflowSnapshot';
 /**
  * @returns Number of items that are overflowing
- */ export const useOverflowCount = ()=>useOverflowContext((v)=>{
-        return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{
-            if (!visible) {
-                acc++;
-            }
-            return acc;
-        }, 0);
-    });
+ */ export const useOverflowCount = ()=>useOverflowSnapshot(selectInvisibleItemCount);
+const selectInvisibleItemCount = (snapshot)=>snapshot.invisibleItemCount;

package/lib/useOverflowCount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOverflowCount.ts"],"sourcesContent":["'use client';\n\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = (): number =>\n  useOverflowContext(v => {\n    return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n      if (!visible) {\n        acc++;\n      }\n\n      return acc;\n    }, 0);\n  });\n"],"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":"AAAA;AAEA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,mBAAmBE,CAAAA;QACjB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAChE,IAAI,CAACA,SAAS;gBACZF;YACF;YAEA,OAAOA;QACT,GAAG;IACL,GAAG"}
+{"version":3,"sources":["../src/useOverflowCount.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = (): number => useOverflowSnapshot(selectInvisibleItemCount);\n\nconst selectInvisibleItemCount = (snapshot: OverflowSnapshot): number => snapshot.invisibleItemCount;\n"],"names":["useOverflowSnapshot","useOverflowCount","selectInvisibleItemCount","snapshot","invisibleItemCount"],"mappings":"AAAA;AAGA,SAASA,mBAAmB,QAAQ,wBAAwB;AAE5D;;CAEC,GACD,OAAO,MAAMC,mBAAmB,IAAcD,oBAAoBE,0BAA0B;AAE5F,MAAMA,2BAA2B,CAACC,WAAuCA,SAASC,kBAAkB"}

package/lib/useOverflowMenu.js

@@ -6,28 +6,26 @@ import { useOverflowCount } from './useOverflowCount';
 export function useOverflowMenu(id) {
     const elementId = useId('overflow-menu', id);
     const overflowCount = useOverflowCount();
-    const registerOverflowMenu = useOverflowContext((v)=>v.registerOverflowMenu);
-    const updateOverflow = useOverflowContext((v)=>v.updateOverflow);
+    const { registerOverflowMenu, forceUpdateOverflow } = useOverflowContext();
     const ref = React.useRef(null);
     const isOverflowing = overflowCount > 0;
     useIsomorphicLayoutEffect(()=>{
         if (ref.current) {
-            return registerOverflowMenu(ref.current);
+            const unregister = registerOverflowMenu(ref.current);
+            if (isOverflowing) {
+                forceUpdateOverflow();
+            }
+            return ()=>{
+                unregister();
+                forceUpdateOverflow();
+            };
         }
     }, [
         registerOverflowMenu,
+        forceUpdateOverflow,
         isOverflowing,
         elementId
     ]);
-    useIsomorphicLayoutEffect(()=>{
-        if (isOverflowing) {
-            updateOverflow();
-        }
-    }, [
-        isOverflowing,
-        updateOverflow,
-        ref
-    ]);
     return {
         ref,
         overflowCount,

package/lib/useOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n  id?: string,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement | null>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerOverflowMenu(ref.current);\n    }\n  }, [registerOverflowMenu, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC,gBACdC,EAAW;IAGX,MAAMC,YAAYN,MAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ;IACtB,MAAMK,uBAAuBN,mBAAmBO,CAAAA,IAAKA,EAAED,oBAAoB;IAC3E,MAAME,iBAAiBR,mBAAmBO,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMZ,MAAMa,MAAM,CAAkB;IAC1C,MAAMC,gBAAgBN,gBAAgB;IAEtCN,0BAA0B;QACxB,IAAIU,IAAIG,OAAO,EAAE;YACf,OAAON,qBAAqBG,IAAIG,OAAO;QACzC;IACF,GAAG;QAACN;QAAsBK;QAAeP;KAAU;IAEnDL,0BAA0B;QACxB,IAAIY,eAAe;YACjBH;QACF;IACF,GAAG;QAACG;QAAeH;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKJ;QAAeM;IAAc;AAC7C"}
+{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n  id?: string,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const { registerOverflowMenu, forceUpdateOverflow } = useOverflowContext();\n  const ref = React.useRef<TElement | null>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      const unregister = registerOverflowMenu(ref.current);\n      if (isOverflowing) {\n        forceUpdateOverflow();\n      }\n      return () => {\n        unregister();\n        forceUpdateOverflow();\n      };\n    }\n  }, [registerOverflowMenu, forceUpdateOverflow, isOverflowing, elementId]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","forceUpdateOverflow","ref","useRef","isOverflowing","current","unregister"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC,gBACdC,EAAW;IAGX,MAAMC,YAAYN,MAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ;IACtB,MAAM,EAAEK,oBAAoB,EAAEC,mBAAmB,EAAE,GAAGP;IACtD,MAAMQ,MAAMX,MAAMY,MAAM,CAAkB;IAC1C,MAAMC,gBAAgBL,gBAAgB;IAEtCN,0BAA0B;QACxB,IAAIS,IAAIG,OAAO,EAAE;YACf,MAAMC,aAAaN,qBAAqBE,IAAIG,OAAO;YACnD,IAAID,eAAe;gBACjBH;YACF;YACA,OAAO;gBACLK;gBACAL;YACF;QACF;IACF,GAAG;QAACD;QAAsBC;QAAqBG;QAAeN;KAAU;IAExE,OAAO;QAAEI;QAAKH;QAAeK;IAAc;AAC7C"}

package/lib/useOverflowSnapshot.js

@@ -0,0 +1,23 @@
+'use client';
+import * as React from 'react';
+import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useOverflowContext } from './overflowContext';
+/**
+ * Subscribes to the overflow snapshot and returns a derived slice of it.
+ *
+ * @param selector - derives the slice of the snapshot the consumer depends on
+ */ export function useOverflowSnapshot(selector) {
+    const { getSnapshot, subscribe } = useOverflowContext();
+    const select = useEventCallback(selector);
+    const [selected, setSelected] = React.useState(()=>selector(getSnapshot()));
+    useIsomorphicLayoutEffect(()=>{
+        const checkForUpdates = ()=>setSelected(select(getSnapshot()));
+        checkForUpdates();
+        return subscribe(checkForUpdates);
+    }, [
+        subscribe,
+        getSnapshot,
+        select
+    ]);
+    return selected;
+}

package/lib/useOverflowSnapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useOverflowSnapshot.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowSnapshot } from '@fluentui/priority-overflow';\nimport * as React from 'react';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Subscribes to the overflow snapshot and returns a derived slice of it.\n *\n * @param selector - derives the slice of the snapshot the consumer depends on\n */\nexport function useOverflowSnapshot<Selected>(selector: (snapshot: OverflowSnapshot) => Selected): Selected {\n  const { getSnapshot, subscribe } = useOverflowContext();\n  const select = useEventCallback(selector);\n\n  const [selected, setSelected] = React.useState(() => selector(getSnapshot()));\n\n  useIsomorphicLayoutEffect(() => {\n    const checkForUpdates = () => setSelected(select(getSnapshot()));\n    checkForUpdates();\n    return subscribe(checkForUpdates);\n  }, [subscribe, getSnapshot, select]);\n\n  return selected;\n}\n"],"names":["React","useEventCallback","useIsomorphicLayoutEffect","useOverflowContext","useOverflowSnapshot","selector","getSnapshot","subscribe","select","selected","setSelected","useState","checkForUpdates"],"mappings":"AAAA;AAGA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACxF,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;CAIC,GACD,OAAO,SAASC,oBAA8BC,QAAkD;IAC9F,MAAM,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ;IACnC,MAAMK,SAASP,iBAAiBI;IAEhC,MAAM,CAACI,UAAUC,YAAY,GAAGV,MAAMW,QAAQ,CAAC,IAAMN,SAASC;IAE9DJ,0BAA0B;QACxB,MAAMU,kBAAkB,IAAMF,YAAYF,OAAOF;QACjDM;QACA,OAAOL,UAAUK;IACnB,GAAG;QAACL;QAAWD;QAAaE;KAAO;IAEnC,OAAOC;AACT"}

package/lib/useOverflowVisibility.js

@@ -1,6 +1,5 @@
 'use client';
-import * as React from 'react';
-import { useOverflowContext } from './overflowContext';
+import { useOverflowSnapshot } from './useOverflowSnapshot';
 /**
  * A hook that returns the visibility status of all items and groups.
  *
@@ -10,13 +9,9 @@ import { useOverflowContext } from './overflowContext';
  * 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
-    ]);
+    return useOverflowSnapshot(selectVisibility);
 }
+const selectVisibility = (snapshot)=>({
+        itemVisibility: snapshot.itemVisibility,
+        groupVisibility: snapshot.groupVisibility
+    });

package/lib/useOverflowVisibility.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport * 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  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, import('@fluentui/priority-overflow').OverflowGroupState>;\n} {\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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;CAQC,GACD,OAAO,SAASC;IAId,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"}
+{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\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  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n} {\n  return useOverflowSnapshot(selectVisibility);\n}\n\nconst selectVisibility = (\n  snapshot: OverflowSnapshot,\n): {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n} => ({\n  itemVisibility: snapshot.itemVisibility,\n  groupVisibility: snapshot.groupVisibility,\n});\n"],"names":["useOverflowSnapshot","useOverflowVisibility","selectVisibility","snapshot","itemVisibility","groupVisibility"],"mappings":"AAAA;AAGA,SAASA,mBAAmB,QAAQ,wBAAwB;AAE5D;;;;;;;;CAQC,GACD,OAAO,SAASC;IAId,OAAOD,oBAAoBE;AAC7B;AAEA,MAAMA,mBAAmB,CACvBC,WAII,CAAA;QACJC,gBAAgBD,SAASC,cAAc;QACvCC,iBAAiBF,SAASE,eAAe;IAC3C,CAAA"}

package/lib-commonjs/components/Overflow/Overflow.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Overflow", {
+    enumerable: true,
+    get: function() {
+        return Overflow;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useOverflow = require("./useOverflow");
+const _useOverflowContextValues = require("../../useOverflowContextValues");
+const _useOverflowStylesstyles = require("./useOverflowStyles.styles");
+const _renderOverflow = require("./renderOverflow");
+const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useOverflow.useOverflow_unstable)(props, ref);
+    const contextValues = (0, _useOverflowContextValues.useOverflowContextValues_unstable)(state);
+    (0, _useOverflowStylesstyles.useOverflowStyles_unstable)(state);
+    return (0, _renderOverflow.renderOverflow_unstable)(state, contextValues);
+});

package/lib-commonjs/components/Overflow/Overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Overflow/Overflow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { OverflowProps } from './Overflow.types';\nimport { useOverflow_unstable } from './useOverflow';\nimport { useOverflowContextValues_unstable } from '../../useOverflowContextValues';\nimport { useOverflowStyles_unstable } from './useOverflowStyles.styles';\nimport { renderOverflow_unstable } from './renderOverflow';\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const state = useOverflow_unstable(props, ref as React.Ref<HTMLElement>);\n  const contextValues = useOverflowContextValues_unstable(state);\n\n  useOverflowStyles_unstable(state);\n\n  return renderOverflow_unstable(state, contextValues);\n});\n"],"names":["React","useOverflow_unstable","useOverflowContextValues_unstable","useOverflowStyles_unstable","renderOverflow_unstable","Overflow","forwardRef","props","ref","state","contextValues"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAEM,gBAAgB;0CACH,iCAAiC;yCACxC,6BAA6B;gCAChC,mBAAmB;AAKpD,MAAMK,WAAAA,WAAAA,GAAWL,OAAMM,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,YAAQR,iCAAAA,EAAqBM,OAAOC;IAC1C,MAAME,oBAAgBR,2DAAAA,EAAkCO;QAExDN,mDAAAA,EAA2BM;IAE3B,WAAOL,uCAAAA,EAAwBK,OAAOC;AACxC,GAAG"}

package/lib-commonjs/components/Overflow/Overflow.types.js

@@ -0,0 +1,6 @@
+/**
+ * Context values provided to overflow descendants.
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/Overflow/Overflow.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Overflow/Overflow.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { OverflowOptions, OverflowGroupState } from '@fluentui/priority-overflow';\nimport type { OverflowContextValue } from '../../overflowContext';\nimport type { UseOverflowContainerReturn } from '../../types';\n\nexport interface OverflowState {\n  hasOverflow: boolean;\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n}\n\nexport interface OnOverflowChangeData extends OverflowState {}\n\nexport type OverflowProps = Partial<\n  Pick<OverflowOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible' | 'hasHiddenItems'>\n> & {\n  children: React.ReactElement;\n\n  // overflow is not caused by DOM event\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onOverflowChange?: (ev: null, data: OverflowState) => void;\n};\n\n/**\n * State used in rendering Overflow. Carries the overflow container's registration api so\n * `useOverflowContextValues_unstable` can assemble the context values.\n */\nexport type OverflowComponentState = UseOverflowContainerReturn<HTMLElement> & {\n  /**\n   * Merged ref applied to the cloned child's root element.\n   */\n  ref: React.Ref<HTMLElement>;\n  /**\n   * Class name applied to the cloned child. Set by `useOverflowStyles_unstable`; left `undefined`\n   * by headless consumers that apply no styling.\n   */\n  className?: string;\n  /**\n   * The single child that overflow behavior is attached to.\n   */\n  children: React.ReactElement;\n};\n\n/**\n * Context values provided to overflow descendants.\n */\nexport type OverflowContextValues = {\n  overflow: OverflowContextValue;\n};\n"],"names":[],"mappings":"AA2CA;;CAEC,GACD,WAEE"}

package/lib-commonjs/components/Overflow/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Overflow: function() {
+        return _Overflow.Overflow;
+    },
+    renderOverflow_unstable: function() {
+        return _renderOverflow.renderOverflow_unstable;
+    },
+    useOverflowStyles_unstable: function() {
+        return _useOverflowStylesstyles.useOverflowStyles_unstable;
+    },
+    useOverflow_unstable: function() {
+        return _useOverflow.useOverflow_unstable;
+    }
+});
+const _Overflow = require("./Overflow");
+const _useOverflow = require("./useOverflow");
+const _renderOverflow = require("./renderOverflow");
+const _useOverflowStylesstyles = require("./useOverflowStyles.styles");

package/lib-commonjs/components/Overflow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Overflow/index.ts"],"sourcesContent":["export { Overflow } from './Overflow';\nexport { useOverflow_unstable } from './useOverflow';\nexport { renderOverflow_unstable } from './renderOverflow';\nexport { useOverflowStyles_unstable } from './useOverflowStyles.styles';\nexport type {\n  OverflowProps,\n  OnOverflowChangeData,\n  OverflowState,\n  OverflowComponentState,\n  OverflowContextValues,\n} from './Overflow.types';\n"],"names":["Overflow","useOverflow_unstable","renderOverflow_unstable","useOverflowStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAERE,uCAAuB;;;eACvBC,mDAA0B;;;eAF1BF,iCAAoB;;;0BADJ,aAAa;6BACD,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B"}

package/lib-commonjs/components/Overflow/renderOverflow.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderOverflow_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderOverflow_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _overflowContext = require("../../overflowContext");
+const renderOverflow_unstable = (state, contextValues)=>{
+    const child = (0, _reactutilities.getTriggerChild)(state.children);
+    var _state_className;
+    const clonedChild = (0, _reactutilities.applyTriggerPropsToChildren)(state.children, {
+        ref: state.ref,
+        className: (_state_className = state.className) !== null && _state_className !== void 0 ? _state_className : child === null || child === void 0 ? void 0 : child.props.className
+    });
+    return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
+        value: contextValues.overflow
+    }, clonedChild);
+};

package/lib-commonjs/components/Overflow/renderOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Overflow/renderOverflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../../overflowContext';\nimport type { OverflowComponentState, OverflowContextValues } from './Overflow.types';\n\n/**\n * Render the final JSX of Overflow.\n *\n * Griffel-free so it can be reused by headless consumers; all class merging happens in\n * `useOverflowStyles_unstable`.\n */\nexport const renderOverflow_unstable = (\n  state: OverflowComponentState,\n  contextValues: OverflowContextValues,\n): React.ReactElement => {\n  const child = getTriggerChild<HTMLElement>(state.children);\n\n  const clonedChild = applyTriggerPropsToChildren(state.children, {\n    ref: state.ref,\n    className: state.className ?? child?.props.className,\n  });\n\n  return <OverflowContext.Provider value={contextValues.overflow}>{clonedChild}</OverflowContext.Provider>;\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","OverflowContext","renderOverflow_unstable","state","contextValues","child","children","clonedChild","ref","className","props","Provider","value","overflow"],"mappings":";;;;+BAWaI;;;;;;;iEAXU,QAAQ;gCAC8B,4BAA4B;iCACzD,wBAAwB;AASjD,gCAAgC,CACrCC,OACAC;IAEA,MAAMC,YAAQL,+BAAAA,EAA6BG,MAAMG,QAAQ;QAI5CH;IAFb,MAAMI,kBAAcR,2CAAAA,EAA4BI,MAAMG,QAAQ,EAAE;QAC9DE,KAAKL,MAAMK,GAAG;QACdC,WAAWN,CAAAA,mBAAAA,MAAMM,SAAAA,AAAS,MAAA,QAAfN,qBAAAA,KAAAA,IAAAA,mBAAmBE,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOK,KAAK,CAACD,SAAS;IACtD;IAEA,OAAA,WAAA,GAAO,OAAA,aAAA,CAACR,gCAAAA,CAAgBU,QAAQ,EAAA;QAACC,OAAOR,cAAcS,QAAQ;OAAGN;AACnE,EAAE"}

package/lib-commonjs/components/Overflow/useOverflow.js

@@ -0,0 +1,47 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverflow_unstable", {
+    enumerable: true,
+    get: function() {
+        return useOverflow_unstable;
+    }
+});
+const _reactutilities = require("@fluentui/react-utilities");
+const _useOverflowContainer = require("../../useOverflowContainer");
+const useOverflow_unstable = (props, ref)=>{
+    const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding, onOverflowChange, hasHiddenItems } = props;
+    const update = (0, _reactutilities.useEventCallback)(()=>{
+        // eslint-disable-next-line react-hooks/immutability
+        const snapshot = getSnapshot();
+        const state = {
+            hasOverflow: snapshot.invisibleItemCount > 0,
+            itemVisibility: snapshot.itemVisibility,
+            groupVisibility: snapshot.groupVisibility
+        };
+        onOverflowChange === null || onOverflowChange === void 0 ? void 0 : onOverflowChange(null, state);
+    });
+    const { containerRef, getSnapshot, subscribe, registerItem, updateOverflow, forceUpdateOverflow, registerOverflowMenu, registerDivider } = (0, _useOverflowContainer.useOverflowContainer)(update, {
+        overflowDirection,
+        overflowAxis,
+        padding,
+        minimumVisible,
+        hasHiddenItems,
+        onUpdateItemVisibility: _useOverflowContainer.updateVisibilityAttribute
+    });
+    const child = (0, _reactutilities.getTriggerChild)(children);
+    return {
+        containerRef,
+        getSnapshot,
+        subscribe,
+        registerItem,
+        updateOverflow,
+        forceUpdateOverflow,
+        registerOverflowMenu,
+        registerDivider,
+        ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, (0, _reactutilities.getReactElementRef)(child)),
+        children
+    };
+};

package/lib-commonjs/components/Overflow/useOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Overflow/useOverflow.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnUpdateOverflow } from '@fluentui/priority-overflow';\nimport { getTriggerChild, getReactElementRef, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';\n\nimport { updateVisibilityAttribute, useOverflowContainer } from '../../useOverflowContainer';\nimport type { OverflowComponentState, OverflowProps, OverflowState } from './Overflow.types';\n\n/**\n * The state required to render Overflow.\n *\n * @param props - props from this instance of Overflow\n * @param ref - reference forwarded to the single child's root element\n */\nexport const useOverflow_unstable = (props: OverflowProps, ref: React.Ref<HTMLElement>): OverflowComponentState => {\n  const {\n    children,\n    minimumVisible,\n    overflowAxis = 'horizontal',\n    overflowDirection,\n    padding,\n    onOverflowChange,\n    hasHiddenItems,\n  } = props;\n\n  const update: OnUpdateOverflow = useEventCallback(() => {\n    // eslint-disable-next-line react-hooks/immutability\n    const snapshot = getSnapshot();\n    const state: OverflowState = {\n      hasOverflow: snapshot.invisibleItemCount > 0,\n      itemVisibility: snapshot.itemVisibility,\n      groupVisibility: snapshot.groupVisibility,\n    };\n    onOverflowChange?.(null, state);\n  });\n\n  const {\n    containerRef,\n    getSnapshot,\n    subscribe,\n    registerItem,\n    updateOverflow,\n    forceUpdateOverflow,\n    registerOverflowMenu,\n    registerDivider,\n  } = useOverflowContainer(update, {\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    hasHiddenItems,\n    onUpdateItemVisibility: updateVisibilityAttribute,\n  });\n\n  const child = getTriggerChild<HTMLElement>(children);\n\n  return {\n    containerRef,\n    getSnapshot,\n    subscribe,\n    registerItem,\n    updateOverflow,\n    forceUpdateOverflow,\n    registerOverflowMenu,\n    registerDivider,\n    ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n    children,\n  };\n};\n"],"names":["getTriggerChild","getReactElementRef","useMergedRefs","useEventCallback","updateVisibilityAttribute","useOverflowContainer","useOverflow_unstable","props","ref","children","minimumVisible","overflowAxis","overflowDirection","padding","onOverflowChange","hasHiddenItems","update","snapshot","getSnapshot","state","hasOverflow","invisibleItemCount","itemVisibility","groupVisibility","containerRef","subscribe","registerItem","updateOverflow","forceUpdateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child"],"mappings":"AAAA;;;;;+BAeaM;;;;;;gCAXwE,4BAA4B;sCAEjD,6BAA6B;AAStF,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EACJC,QAAQ,EACRC,cAAc,EACdC,eAAe,YAAY,EAC3BC,iBAAiB,EACjBC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,EACf,GAAGR;IAEJ,MAAMS,aAA2Bb,gCAAAA,EAAiB;QAChD,oDAAoD;QACpD,MAAMc,WAAWC;QACjB,MAAMC,QAAuB;YAC3BC,aAAaH,SAASI,kBAAkB,GAAG;YAC3CC,gBAAgBL,SAASK,cAAc;YACvCC,iBAAiBN,SAASM,eAAe;QAC3C;QACAT,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAmB,MAAMK;IAC3B;IAEA,MAAM,EACJK,YAAY,EACZN,WAAW,EACXO,SAAS,EACTC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnBC,oBAAoB,EACpBC,eAAe,EAChB,OAAGzB,0CAAAA,EAAqBW,QAAQ;QAC/BJ;QACAD;QACAE;QACAH;QACAK;QACAgB,wBAAwB3B,+CAAAA;IAC1B;IAEA,MAAM4B,YAAQhC,+BAAAA,EAA6BS;IAE3C,OAAO;QACLe;QACAN;QACAO;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB,SAAKN,6BAAAA,EAAcsB,cAAchB,SAAKP,kCAAAA,EAAmB+B;QACzDvB;IACF;AACF,EAAE"}