@fluentui/react-overflow 9.7.2 → 9.9.0

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"}

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

@@ -0,0 +1,41 @@
+'use client';
+"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, {
+    useOverflowStyles: function() {
+        return useOverflowStyles;
+    },
+    useOverflowStyles_unstable: function() {
+        return useOverflowStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactutilities = require("@fluentui/react-utilities");
+const useOverflowStyles = /*#__PURE__*/ (0, _react.__styles)({
+    overflowMenu: {
+        Brvla84: "fyfkpbf"
+    },
+    overflowingItems: {
+        zb22lx: "f10570jf"
+    }
+}, {
+    d: [
+        ".fyfkpbf [data-overflow-menu]{flex-shrink:0;}",
+        ".f10570jf [data-overflowing]{display:none;}"
+    ]
+});
+const useOverflowStyles_unstable = (state)=>{
+    const styles = useOverflowStyles();
+    const child = (0, _reactutilities.getTriggerChild)(state.children);
+    // eslint-disable-next-line react-hooks/immutability
+    state.className = (0, _react.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTriggerChild } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../../constants';\nexport const useOverflowStyles = makeStyles({\n    overflowMenu: {\n        [`& [${DATA_OVERFLOW_MENU}]`]: {\n            flexShrink: 0\n        }\n    },\n    overflowingItems: {\n        [`& [${DATA_OVERFLOWING}]`]: {\n            display: 'none'\n        }\n    }\n});\nexport const useOverflowStyles_unstable = (state)=>{\n    const styles = useOverflowStyles();\n    const child = getTriggerChild(state.children);\n    // eslint-disable-next-line react-hooks/immutability\n    state.className = mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","getTriggerChild","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d","useOverflowStyles_unstable","state","styles","child","children","className","props"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,iBAAiB;;;IAYjBM,0BAA0B;;;;uBAfE,gBAAgB;gCACzB,2BAA2B;AAEpD,0BAAuB,WAAA,OAAGX,eAAA,EAAA;IAAAM,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAWhC,CAAC;AACK,oCAAoCE,KAAK,IAAG;IAC/C,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;IAClC,MAAMS,KAAK,OAAGZ,+BAAe,EAACU,KAAK,CAACG,QAAQ,CAAC;IAC7C,oDAAA;IACAH,KAAK,CAACI,SAAS,OAAGf,mBAAY,EAAC,cAAc,EAAEY,MAAM,CAACP,YAAY,EAAEO,MAAM,CAACL,gBAAgB,EAAEM,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACG,KAAK,CAACD,SAAS,CAAC;IACjK,OAAOJ,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Overflow/useOverflowStyles.styles.raw.js

@@ -0,0 +1,41 @@
+'use client';
+"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, {
+    useOverflowStyles: function() {
+        return useOverflowStyles;
+    },
+    useOverflowStyles_unstable: function() {
+        return useOverflowStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactutilities = require("@fluentui/react-utilities");
+const _constants = require("../../constants");
+const useOverflowStyles = (0, _react.makeStyles)({
+    overflowMenu: {
+        [`& [${_constants.DATA_OVERFLOW_MENU}]`]: {
+            flexShrink: 0
+        }
+    },
+    overflowingItems: {
+        [`& [${_constants.DATA_OVERFLOWING}]`]: {
+            display: 'none'
+        }
+    }
+});
+const useOverflowStyles_unstable = (state)=>{
+    const styles = useOverflowStyles();
+    const child = (0, _reactutilities.getTriggerChild)(state.children);
+    // eslint-disable-next-line react-hooks/immutability
+    state.className = (0, _react.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className);
+    return state;
+};

package/lib-commonjs/components/Overflow/useOverflowStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Overflow/useOverflowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTriggerChild } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../../constants';\nimport type { OverflowComponentState } from './Overflow.types';\n\nexport const useOverflowStyles = makeStyles({\n  overflowMenu: {\n    [`& [${DATA_OVERFLOW_MENU}]`]: {\n      flexShrink: 0,\n    },\n  },\n\n  overflowingItems: {\n    [`& [${DATA_OVERFLOWING}]`]: {\n      display: 'none',\n    },\n  },\n});\n\nexport const useOverflowStyles_unstable = (state: OverflowComponentState): OverflowComponentState => {\n  const styles = useOverflowStyles();\n  const child = getTriggerChild<HTMLElement>(state.children);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.className = mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.props.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","getTriggerChild","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","flexShrink","overflowingItems","display","useOverflowStyles_unstable","state","styles","child","children","className","props"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,iBAAAA;;;IAcAK,0BAAAA;;;;uBAnB4B,iBAAiB;gCAC1B,4BAA4B;2BACP,kBAAkB;AAGhE,8BAA0BV,iBAAAA,EAAW;IAC1CM,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,6BAAAA,CAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,2BAAAA,CAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG;AAEI,mCAAmC,CAACE;IACzC,MAAMC,SAASP;IACf,MAAMQ,YAAQX,+BAAAA,EAA6BS,MAAMG,QAAQ;IAEzD,oDAAoD;IACpDH,MAAMI,SAAS,OAAGd,mBAAAA,EAAa,gBAAgBW,OAAON,YAAY,EAAEM,OAAOJ,gBAAgB,EAAEK,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOG,KAAK,CAACD,SAAS;IAEnH,OAAOJ;AACT,EAAE"}

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

@@ -0,0 +1,37 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverflowReorderObserver", {
+    enumerable: true,
+    get: function() {
+        return OverflowReorderObserver;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _overflowContext = require("../../overflowContext");
+const OverflowReorderObserver = ()=>{
+    const containerRef = (0, _overflowContext.useOverflowContext)((v)=>v.containerRef);
+    const updateOverflow = (0, _overflowContext.useOverflowContext)((v)=>v.updateOverflow);
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const targetWindow = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    _react.useEffect(()=>{
+        const el = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+        if (!el || !(targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.MutationObserver)) {
+            return;
+        }
+        const mutationObserver = new targetWindow.MutationObserver(()=>updateOverflow());
+        mutationObserver.observe(el, {
+            childList: true
+        });
+        return ()=>mutationObserver.disconnect();
+    }, [
+        containerRef,
+        updateOverflow,
+        targetWindow
+    ]);
+    return null;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverflowReorderObserver/OverflowReorderObserver.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useOverflowContext } from '../../overflowContext';\n\n/**\n * Renderless opt-in component that observes the `<Overflow>` container for\n * direct-child DOM mutations and triggers an overflow recompute. Drop it\n * inside `<Overflow>` when items can be reordered, added, or removed via\n * React state without a container resize — Fluent's overflow manager only\n * listens to `ResizeObserver` otherwise, so reorders leave visibility flags\n * stale.\n *\n * @example\n * ```tsx\n * <Overflow>\n *   <div>\n *     <OverflowReorderObserver />\n *     {items.map(id => <OverflowItem key={id} id={id} priority={1}>{id}</OverflowItem>)}\n *   </div>\n * </Overflow>\n * ```\n */\nexport const OverflowReorderObserver: React.FC = () => {\n  const containerRef = useOverflowContext(v => v.containerRef);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const { targetDocument } = useFluent();\n  const targetWindow = targetDocument?.defaultView;\n\n  React.useEffect(() => {\n    const el = containerRef?.current;\n    if (!el || !targetWindow?.MutationObserver) {\n      return;\n    }\n\n    const mutationObserver = new targetWindow.MutationObserver(() => updateOverflow());\n    mutationObserver.observe(el, { childList: true });\n\n    return () => mutationObserver.disconnect();\n  }, [containerRef, updateOverflow, targetWindow]);\n\n  return null;\n};\n"],"names":["React","useFluent_unstable","useFluent","useOverflowContext","OverflowReorderObserver","containerRef","v","updateOverflow","targetDocument","targetWindow","defaultView","useEffect","el","current","MutationObserver","mutationObserver","observe","childList","disconnect"],"mappings":"AAAA;;;;;+BAwBaI;;;;;;;iEAtBU,QAAQ;qCACiB,kCAAkC;iCAC/C,wBAAwB;AAoBpD,gCAA0C;IAC/C,MAAMC,mBAAeF,mCAAAA,EAAmBG,CAAAA,IAAKA,EAAED,YAAY;IAC3D,MAAME,qBAAiBJ,mCAAAA,EAAmBG,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAM,EAAEC,cAAc,EAAE,OAAGN,uCAAAA;IAC3B,MAAMO,eAAeD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBE,WAAW;IAEhDV,OAAMW,SAAS,CAAC;QACd,MAAMC,KAAKP,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcQ,OAAO;QAChC,IAAI,CAACD,MAAM,EAACH,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcK,gBAAAA,AAAgB,GAAE;YAC1C;QACF;QAEA,MAAMC,mBAAmB,IAAIN,aAAaK,gBAAgB,CAAC,IAAMP;QACjEQ,iBAAiBC,OAAO,CAACJ,IAAI;YAAEK,WAAW;QAAK;QAE/C,OAAO,IAAMF,iBAAiBG,UAAU;IAC1C,GAAG;QAACb;QAAcE;QAAgBE;KAAa;IAE/C,OAAO;AACT,EAAE"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverflowReorderObserver", {
+    enumerable: true,
+    get: function() {
+        return _OverflowReorderObserver.OverflowReorderObserver;
+    }
+});
+const _OverflowReorderObserver = require("./OverflowReorderObserver");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverflowReorderObserver/index.ts"],"sourcesContent":["export { OverflowReorderObserver } from './OverflowReorderObserver';\n"],"names":["OverflowReorderObserver"],"mappings":";;;;;;;eAASA,gDAAuB;;;yCAAQ,4BAA4B"}

package/lib-commonjs/index.js

@@ -30,6 +30,15 @@ _export(exports, {
     OverflowItem: function() {
         return _OverflowItem.OverflowItem;
     },
+    OverflowProvider: function() {
+        return _overflowContext.OverflowProvider;
+    },
+    OverflowReorderObserver: function() {
+        return _OverflowReorderObserver.OverflowReorderObserver;
+    },
+    renderOverflow_unstable: function() {
+        return _Overflow.renderOverflow_unstable;
+    },
     useIsOverflowGroupVisible: function() {
         return _useIsOverflowGroupVisible.useIsOverflowGroupVisible;
     },
@@ -42,6 +51,9 @@ _export(exports, {
     useOverflowContext: function() {
         return _overflowContext.useOverflowContext;
     },
+    useOverflowContextValues_unstable: function() {
+        return _useOverflowContextValues.useOverflowContextValues_unstable;
+    },
     useOverflowCount: function() {
         return _useOverflowCount.useOverflowCount;
     },
@@ -54,8 +66,14 @@ _export(exports, {
     useOverflowMenu: function() {
         return _useOverflowMenu.useOverflowMenu;
     },
+    useOverflowStyles_unstable: function() {
+        return _Overflow.useOverflowStyles_unstable;
+    },
     useOverflowVisibility: function() {
         return _useOverflowVisibility.useOverflowVisibility;
+    },
+    useOverflow_unstable: function() {
+        return _Overflow.useOverflow_unstable;
     }
 });
 const _Overflow = require("./components/Overflow");
@@ -63,6 +81,7 @@ const _constants = require("./constants");
 const _useIsOverflowGroupVisible = require("./useIsOverflowGroupVisible");
 const _useIsOverflowItemVisible = require("./useIsOverflowItemVisible");
 const _useOverflowContainer = require("./useOverflowContainer");
+const _useOverflowContextValues = require("./useOverflowContextValues");
 const _useOverflowCount = require("./useOverflowCount");
 const _useOverflowItem = require("./useOverflowItem");
 const _useOverflowMenu = require("./useOverflowMenu");
@@ -71,3 +90,4 @@ const _useOverflowVisibility = require("./useOverflowVisibility");
 const _overflowContext = require("./overflowContext");
 const _OverflowItem = require("./components/OverflowItem/OverflowItem");
 const _OverflowDivider = require("./components/OverflowDivider/OverflowDivider");
+const _OverflowReorderObserver = require("./components/OverflowReorderObserver");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps, OnOverflowChangeData } 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":";;;;;;;;;;;IAESC,gBAAgB;;;;eAA0CG,gCAAqB;;;eAA7DF,6BAAkB;;;eAAEC,6BAAkB;;;eAFxDH,kBAAQ;;;eAiBRe,gCAAe;;gBADH;eAAZD;;;eAZAT,oDAAyB;;IACzBC,wBAAwB;;;;eACxBC,0CAAoB;;;eAOpBM,mCAAkB;;;eANlBL,kCAAgB;;;eAGhBG,sCAAkB;;;eAFlBF,gCAAe;;;eACfC,gCAAe;;;eAEfE,4CAAqB;;;0BAXL,wBAAwB;2BAE+C,cAAc;2CAEpE,8BAA8B;0CAC/B,6BAA6B;sCACjC,yBAAyB;kCAC7B,qBAAqB;iCACtB,oBAAoB;iCACpB,oBAAoB;oCACjB,uBAAuB;uCACpB,0BAA0B;iCAE7B,oBAAoB;8BAG1B,yCAAyC;iCACtC,+CAA+C"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Overflow,\n  useOverflow_unstable,\n  renderOverflow_unstable,\n  useOverflowStyles_unstable,\n} from './components/Overflow';\nexport type {\n  OverflowProps,\n  OnOverflowChangeData,\n  OverflowState,\n  OverflowComponentState,\n  OverflowContextValues,\n} 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 { useOverflowContextValues_unstable } from './useOverflowContextValues';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext, OverflowProvider } from './overflowContext';\nexport type { OverflowContextValue } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport type { OverflowDividerProps } from './components/OverflowDivider/OverflowDivider.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\nexport { OverflowReorderObserver } from './components/OverflowReorderObserver';\n\nexport type { OnUpdateItemVisibility, OnUpdateOverflow, OverflowEventPayload } from '@fluentui/priority-overflow';\n"],"names":["Overflow","useOverflow_unstable","renderOverflow_unstable","useOverflowStyles_unstable","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowContextValues_unstable","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowProvider","OverflowItem","OverflowDivider","OverflowReorderObserver"],"mappings":";;;;;;;;;;;IAaSI;0CAAgB;;yBAA+D;eAArBG;;;eAAxCF,6BAAkB;;;eAAEC,6BAAkB;;;eAZ/DN,kBAAQ;;IA8BDoB;+CAAe;;;eADfD,0BAAY;;oBALwB;eAAhBD;;IAOpBG,uBAAuB;;;;eA7B9BnB,iCAAuB;;;eAYhBM,oDAAyB;;;eACzBC,kDAAwB;;;eACxBC,0CAAoB;;;eAQpBO,mCAAkB;;;eAPlBN,2DAAiC;;oBACjB;eAAhBC;;sBAGkB;eAAlBG;;;eAFAF,gCAAe;;mBACA;eAAfC;;;eAjBPX,oCAA0B;;;eAmBnBa,4CAAqB;;;eArB5Bf,8BAAoB;;;0BAGf,wBAAwB;2BAQiE,cAAc;2CAEpE,8BAA8B;0CAC/B,6BAA6B;sCACjC,yBAAyB;0CACZ,6BAA6B;kCAC9C,qBAAqB;iCACtB,oBAAoB;iCACpB,oBAAoB;oCACjB,uBAAuB;uCACpB,0BAA0B;iCAEX,oBAAoB;8BAK5C,yCAAyC;iCACtC,+CAA+C;yCACvC,uCAAuC"}

package/lib-commonjs/overflowContext.js

@@ -13,19 +13,34 @@ _export(exports, {
     OverflowContext: function() {
         return OverflowContext;
     },
+    OverflowProvider: function() {
+        return OverflowProvider;
+    },
     useOverflowContext: function() {
         return useOverflowContext;
     }
 });
-const _reactcontextselector = require("@fluentui/react-context-selector");
-const OverflowContext = (0, _reactcontextselector.createContext)(undefined);
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _priorityoverflow = require("@fluentui/priority-overflow");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const OverflowContext = /*#__PURE__*/ _react.createContext(undefined);
+const OverflowProvider = OverflowContext.Provider;
+const noop = ()=>{
+/* noop */ };
 const overflowContextDefaultValue = {
+    hasOverflow: false,
     itemVisibility: {},
     groupVisibility: {},
-    hasOverflow: false,
-    registerItem: ()=>()=>null,
-    updateOverflow: ()=>null,
-    registerOverflowMenu: ()=>()=>null,
-    registerDivider: ()=>()=>null
+    registerItem: ()=>noop,
+    updateOverflow: noop,
+    forceUpdateOverflow: noop,
+    registerOverflowMenu: ()=>noop,
+    registerDivider: ()=>noop,
+    getSnapshot: ()=>_priorityoverflow.EMPTY_SNAPSHOT,
+    subscribe: ()=>noop
 };
-const useOverflowContext = (selector)=>(0, _reactcontextselector.useContextSelector)(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));
+function useOverflowContext(selector) {
+    var _React_useContext;
+    const context = (_React_useContext = _react.useContext(OverflowContext)) !== null && _React_useContext !== void 0 ? _React_useContext : overflowContextDefaultValue;
+    return selector ? selector(context) : context;
+}

package/lib-commonjs/overflowContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } from '@fluentui/priority-overflow';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\n\n/**\n * @internal\n */\nexport interface OverflowContextValue {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n  hasOverflow: boolean;\n  registerItem: (item: OverflowItemEntry) => () => void;\n  registerOverflowMenu: (el: HTMLElement) => () => void;\n  registerDivider: (divider: OverflowDividerEntry) => () => void;\n  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n  undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n  registerOverflowMenu: () => () => null,\n  registerDivider: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(\n  selector: ContextSelector<OverflowContextValue, SelectedValue>,\n): SelectedValue => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContext","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;mBAmBaE;;;sBAiBAU;;;;sCAhCqC,mCAAmC;AAe9E,MAAMV,sBAAkBF,mCAAAA,EAC7BG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAM,IAAM;IAC1BC,gBAAgB,IAAM;IACtBC,sBAAsB,IAAM,IAAM;IAClCC,iBAAiB,IAAM,IAAM;AAC/B;AAKO,MAAMC,qBAAqB,CAChCC,eACkBZ,wCAAAA,EAAmBC,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
+{"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["'use client';\n\nimport type {\n  OverflowItemEntry,\n  OverflowDividerEntry,\n  OverflowGroupState,\n  OverflowSnapshot,\n} from '@fluentui/priority-overflow';\nimport { EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';\nimport * as React from 'react';\n\n/**\n * @public\n */\nexport interface OverflowContextValue {\n  /**\n   * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead\n   */\n  itemVisibility: Record<string, boolean>;\n  /**\n   * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead\n   */\n  groupVisibility: Record<string, OverflowGroupState>;\n  /**\n   * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead\n   */\n  hasOverflow: boolean;\n  registerItem: (item: OverflowItemEntry) => () => void;\n  registerOverflowMenu: (el: HTMLElement) => () => void;\n  registerDivider: (divider: OverflowDividerEntry) => () => void;\n  updateOverflow: (padding?: number) => void;\n  forceUpdateOverflow: () => void;\n  containerRef?: React.RefObject<HTMLElement | null>;\n  getSnapshot: () => OverflowSnapshot;\n  subscribe: (listener: () => void) => () => void;\n}\n\nexport const OverflowContext = React.createContext<OverflowContextValue | undefined>(\n  undefined,\n) as React.Context<OverflowContextValue>;\n\n/**\n * Provides an {@link OverflowContextValue} to descendant overflow hooks and components.\n * Used by headless consumers that build their own overflow root.\n * @public\n */\nexport const OverflowProvider = OverflowContext.Provider;\n\nconst noop = () => {\n  /* noop */\n};\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n  hasOverflow: false,\n  itemVisibility: {},\n  groupVisibility: {},\n  registerItem: () => noop,\n  updateOverflow: noop,\n  forceUpdateOverflow: noop,\n  registerOverflowMenu: () => noop,\n  registerDivider: () => noop,\n  getSnapshot: () => EMPTY_SNAPSHOT,\n  subscribe: () => noop,\n};\n\n/**\n * @internal\n */\nexport function useOverflowContext(): OverflowContextValue;\n/**\n * @internal\n */\nexport function useOverflowContext<SelectedValue>(\n  selector: (context: OverflowContextValue) => SelectedValue,\n): SelectedValue;\nexport function useOverflowContext<SelectedValue>(\n  selector?: (context: OverflowContextValue) => SelectedValue,\n): SelectedValue | OverflowContextValue {\n  const context = React.useContext(OverflowContext) ?? overflowContextDefaultValue;\n  return selector ? selector(context) : context;\n}\n"],"names":["EMPTY_SNAPSHOT","React","OverflowContext","createContext","undefined","OverflowProvider","Provider","noop","overflowContextDefaultValue","hasOverflow","itemVisibility","groupVisibility","registerItem","updateOverflow","forceUpdateOverflow","registerOverflowMenu","registerDivider","getSnapshot","subscribe","useOverflowContext","selector","context","useContext"],"mappings":"AAAA;;;;;;;;;;;;IAqCaE,eAAAA;;;oBASAG;;;IA6BGc,kBAAAA;;;;;kCAnEe,8BAA8B;iEACtC,QAAQ;AA4BxB,sCAAwBlB,OAAME,aAAa,CAChDC,WACuC;AAOlC,MAAMC,mBAAmBH,gBAAgBI,QAAQ,CAAC;AAEzD,MAAMC,OAAO;AACX,QAAQ,GACV;AAEA,MAAMC,8BAAoD;IACxDC,aAAa;IACbC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,cAAc,IAAML;IACpBM,gBAAgBN;IAChBO,qBAAqBP;IACrBQ,sBAAsB,IAAMR;IAC5BS,iBAAiB,IAAMT;IACvBU,aAAa,IAAMjB,gCAAAA;IACnBkB,WAAW,IAAMX;AACnB;AAYO,4BACLa,QAA2D;QAE3CnB;IAAhB,MAAMoB,UAAUpB,CAAAA,oBAAAA,OAAMqB,UAAU,CAACpB,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCO;IACrD,OAAOY,WAAWA,SAASC,WAAWA;AACxC"}

package/lib-commonjs/types.js

@@ -1,5 +1,5 @@
 /**
- * @internal
+ * @public
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n  extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu' | 'registerDivider'> {\n  /**\n   * Ref to apply to the container that will overflow\n   */\n  containerRef: React.RefObject<TElement | null>;\n}\n"],"names":[],"mappings":"AAGA;;CAEC,GACD,WAMC"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { OverflowContextValue } from './overflowContext';\n\n/**\n * @public\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n  extends Pick<\n    OverflowContextValue,\n    | 'registerItem'\n    | 'updateOverflow'\n    | 'forceUpdateOverflow'\n    | 'registerOverflowMenu'\n    | 'registerDivider'\n    | 'getSnapshot'\n    | 'subscribe'\n  > {\n  /**\n   * Ref to apply to the container that will overflow\n   */\n  containerRef: React.RefObject<TElement | null>;\n}\n"],"names":[],"mappings":"AAGA;;CAEC,GACD,WAeC"}

package/lib-commonjs/useIsOverflowGroupVisible.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useIsOverflowGroupVisible", {
         return useIsOverflowGroupVisible;
     }
 });
-const _overflowContext = require("./overflowContext");
+const _useOverflowSnapshot = require("./useOverflowSnapshot");
 function useIsOverflowGroupVisible(id) {
-    return (0, _overflowContext.useOverflowContext)((ctx)=>ctx.groupVisibility[id]);
+    return (0, _useOverflowSnapshot.useOverflowSnapshot)((snapshot)=>snapshot.groupVisibility[id]);
 }

package/lib-commonjs/useIsOverflowGroupVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n  return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;iCAGmC,oBAAoB;AAMhD,SAASC,0BAA0BC,EAAU;IAClD,WAAOF,mCAAAA,EAAmBG,CAAAA,MAAOA,IAAIC,eAAe,CAACF,GAAG;AAC1D"}
+{"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n  return useOverflowSnapshot(snapshot => snapshot.groupVisibility[id]);\n}\n"],"names":["useOverflowSnapshot","useIsOverflowGroupVisible","id","snapshot","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,wBAAwB;AAMrD,SAASC,0BAA0BC,EAAU;IAClD,WAAOF,wCAAAA,EAAoBG,CAAAA,WAAYA,SAASC,eAAe,CAACF,GAAG;AACrE"}

package/lib-commonjs/useIsOverflowItemVisible.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useIsOverflowItemVisible", {
         return useIsOverflowItemVisible;
     }
 });
-const _overflowContext = require("./overflowContext");
+const _useOverflowSnapshot = require("./useOverflowSnapshot");
 function useIsOverflowItemVisible(id) {
-    return !!(0, _overflowContext.useOverflowContext)((ctx)=>ctx.itemVisibility[id]);
+    return (0, _useOverflowSnapshot.useOverflowSnapshot)((snapshot)=>!!snapshot.itemVisibility[id]);
 }

package/lib-commonjs/useIsOverflowItemVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useIsOverflowItemVisible.ts"],"sourcesContent":["'use client';\n\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n  return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"mappings":"AAAA;;;;;;;;;;;iCAEmC,oBAAoB;AAMhD,SAASC,yBAAyBC,EAAU;IACjD,OAAO,CAAC,KAACF,mCAAAA,EAAmBG,CAAAA,MAAOA,IAAIC,cAAc,CAACF,GAAG;AAC3D"}
+{"version":3,"sources":["../src/useIsOverflowItemVisible.ts"],"sourcesContent":["'use client';\n\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n  return useOverflowSnapshot(snapshot => !!snapshot.itemVisibility[id]);\n}\n"],"names":["useOverflowSnapshot","useIsOverflowItemVisible","id","snapshot","itemVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAEoC,wBAAwB;AAMrD,SAASC,yBAAyBC,EAAU;IACjD,WAAOF,wCAAAA,EAAoBG,CAAAA,WAAY,CAAC,CAACA,SAASC,cAAc,CAACF,GAAG;AACtE"}

package/lib-commonjs/useOverflowContainer.js

@@ -22,104 +22,113 @@ 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)=>{
-    'use no memo';
     const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop, hasHiddenItems = false } = options;
-    const onUpdateOverflow = (0, _reactutilities.useEventCallback)(update);
-    const overflowOptions = _react.useMemo(()=>({
+    const onUpdateItemVisibilityCallback = (0, _reactutilities.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 = (0, _reactutilities.useFirstMount)();
-    // DOM ref to the overflow container element
     const containerRef = _react.useRef(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
+    const managerRef = _react.useRef(null);
+    if (managerRef.current === null) {
+        managerRef.current = (0, _reactutilities.canUseDOM)() ? (0, _priorityoverflow.createOverflowManager)(observeOptions) : null;
+    }
     (0, _reactutilities.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
-    ]);
+    }, []);
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
-        if (!containerRef.current || !(0, _reactutilities.canUseDOM)() || firstMount) {
-            return;
-        }
-        const newOverflowManager = (0, _priorityoverflow.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(_constants.DATA_OVERFLOW_ITEM, '');
         return ()=>{
+            var _managerRef_current;
             item.element.removeAttribute(_constants.DATA_OVERFLOWING);
             item.element.removeAttribute(_constants.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(_constants.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(_constants.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(_constants.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(_constants.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 : _priorityoverflow.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 */ };
 const updateVisibilityAttribute = ({ item, visible })=>{
     if (visible) {
         item.element.removeAttribute(_constants.DATA_OVERFLOWING);