@fluentui/react-overflow 9.8.0 → 9.9.0

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/index.js

@@ -30,9 +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;
     },
@@ -45,6 +51,9 @@ _export(exports, {
     useOverflowContext: function() {
         return _overflowContext.useOverflowContext;
     },
+    useOverflowContextValues_unstable: function() {
+        return _useOverflowContextValues.useOverflowContextValues_unstable;
+    },
     useOverflowCount: function() {
         return _useOverflowCount.useOverflowCount;
     },
@@ -57,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");
@@ -66,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");

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';\nexport { OverflowReorderObserver } from './components/OverflowReorderObserver';\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","OverflowReorderObserver"],"mappings":";;;;;;;;;;;IAESC,gBAAgB;;;;eAA0CG,gCAAqB;;;eAA7DF,6BAAkB;;;eAAEC,6BAAkB;;;eAFxDH,kBAAQ;;;eAiBRe,gCAAe;;;eADfD,0BAAY;;;eAEZE,gDAAuB;;;eAdvBX,oDAAyB;;IACzBC,wBAAwB;;;;eACxBC,0CAAoB;;;eAOpBM,mCAAkB;;;eANlBL,kCAAgB;;IAGhBG;qDAAkB;;;eAFlBF,gCAAe;;mBACA;eAAfC;;;eAEAE,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;yCACvC,uCAAuC"}
+{"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 * as React from 'react';\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  containerRef?: React.RefObject<HTMLElement | null>;\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;;;;;;;;;;;;mBAqBaE;;;sBAiBAU;;;;sCAjCqC,mCAAmC;AAgB9E,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);

package/lib-commonjs/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-commonjs/useOverflowContextValues.js

@@ -0,0 +1,41 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverflowContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useOverflowContextValues_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+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-commonjs/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;;;;;+BAYaC;;;;;;;iEAVU,QAAQ;AAUxB,0CAA0C,CAACC;IAChD,MAAM,EACJC,YAAY,EACZC,eAAe,EACfC,oBAAoB,EACpBC,cAAc,EACdC,mBAAmB,EACnBC,YAAY,EACZC,WAAW,EACXC,SAAS,EACV,GAAGR;IAEJ,MAAMS,WAAWX,OAAMY,OAAO,CAC5B,IAAO,CAAA;YACLC,iBAAiB,CAAC;YAClBC,gBAAgB,CAAC;YACjBC,aAAa;YACbZ;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QACEP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACD;IAGH,OAAO;QAAEC;IAAS;AACpB,EAAE"}

package/lib-commonjs/useOverflowCount.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "useOverflowCount", {
         return useOverflowCount;
     }
 });
-const _overflowContext = require("./overflowContext");
-const useOverflowCount = ()=>(0, _overflowContext.useOverflowContext)((v)=>{
-        return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{
-            if (!visible) {
-                acc++;
-            }
-            return acc;
-        }, 0);
-    });
+const _useOverflowSnapshot = require("./useOverflowSnapshot");
+const useOverflowCount = ()=>(0, _useOverflowSnapshot.useOverflowSnapshot)(selectInvisibleItemCount);
+const selectInvisibleItemCount = (snapshot)=>snapshot.invisibleItemCount;

package/lib-commonjs/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;;;;;;;;;;;iCAEmC,oBAAoB;AAKhD,MAAMC,mBAAmB,QAC9BD,mCAAAA,EAAmBE,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;;;;;;;;;;;qCAGoC,wBAAwB;AAKrD,MAAMC,mBAAmB,QAAcD,wCAAAA,EAAoBE,0BAA0B;AAE5F,MAAMA,2BAA2B,CAACC,WAAuCA,SAASC,kBAAkB"}

package/lib-commonjs/useOverflowMenu.js

@@ -17,28 +17,26 @@ const _useOverflowCount = require("./useOverflowCount");
 function useOverflowMenu(id) {
     const elementId = (0, _reactutilities.useId)('overflow-menu', id);
     const overflowCount = (0, _useOverflowCount.useOverflowCount)();
-    const registerOverflowMenu = (0, _overflowContext.useOverflowContext)((v)=>v.registerOverflowMenu);
-    const updateOverflow = (0, _overflowContext.useOverflowContext)((v)=>v.updateOverflow);
+    const { registerOverflowMenu, forceUpdateOverflow } = (0, _overflowContext.useOverflowContext)();
     const ref = _react.useRef(null);
     const isOverflowing = overflowCount > 0;
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
         if (ref.current) {
-            return registerOverflowMenu(ref.current);
+            const unregister = registerOverflowMenu(ref.current);
+            if (isOverflowing) {
+                forceUpdateOverflow();
+            }
+            return ()=>{
+                unregister();
+                forceUpdateOverflow();
+            };
         }
     }, [
         registerOverflowMenu,
+        forceUpdateOverflow,
         isOverflowing,
         elementId
     ]);
-    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
-        if (isOverflowing) {
-            updateOverflow();
-        }
-    }, [
-        isOverflowing,
-        updateOverflow,
-        ref
-    ]);
     return {
         ref,
         overflowCount,