@fluentui/react-overflow 9.0.0-rc.7 → 9.0.0

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@fluentui/react-overflow",
   "entries": [
     {
-      "date": "Mon, 16 Jan 2023 08:35:41 GMT",
+      "date": "Wed, 18 Jan 2023 16:30:56 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.0",
+      "version": "9.0.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "e59f114d3244739a7917813ea02c59d53406d902",
+            "comment": "Release as stable"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v9.0.0",
+            "commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 16 Jan 2023 08:39:05 GMT",
       "tag": "@fluentui/react-overflow_v9.0.0-rc.7",
       "version": "9.0.0-rc.7",
       "comments": {

package/CHANGELOG.md

@@ -1,9 +1,19 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Mon, 09 Jan 2023 14:34:57 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Jan 2023 16:30:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0)
+
+Wed, 18 Jan 2023 16:30:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.7..@fluentui/react-overflow_v9.0.0)
+
+### Patches
+
+- Release as stable ([PR #26380](https://github.com/microsoft/fluentui/pull/26380) by lingfangao@hotmail.com)
+- Bump @fluentui/priority-overflow to v9.0.0 ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by beachball)
+
 ## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.6)
 
 Mon, 09 Jan 2023 14:34:57 GMT 

package/lib-amd/components/Overflow.js

@@ -0,0 +1,60 @@
+define(["require", "exports", "react", "@griffel/react", "@fluentui/react-utilities", "../overflowContext", "../useOverflowContainer", "../constants"], function (require, exports, React, react_1, react_utilities_1, overflowContext_1, useOverflowContainer_1, constants_1) {
+    "use strict";
+    var _a, _b;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Overflow = void 0;
+    var useStyles = react_1.makeStyles({
+        overflowMenu: (_a = {},
+            _a["& [" + constants_1.DATA_OVERFLOW_MENU + "]"] = {
+                flexShrink: 0,
+            },
+            _a),
+        overflowingItems: (_b = {},
+            _b["& > [" + constants_1.DATA_OVERFLOWING + "]"] = {
+                display: 'none',
+            },
+            _b),
+    });
+    /**
+     * Provides an OverflowContext for OverflowItem descendants.
+     */
+    exports.Overflow = React.forwardRef(function (props, ref) {
+        var styles = useStyles();
+        var children = props.children, minimumVisible = props.minimumVisible, _a = props.overflowAxis, overflowAxis = _a === void 0 ? 'horizontal' : _a, overflowDirection = props.overflowDirection, padding = props.padding;
+        var _b = React.useState(false), hasOverflow = _b[0], setHasOverflow = _b[1];
+        var _c = React.useState({}), itemVisibility = _c[0], setItemVisibility = _c[1];
+        var _d = React.useState({}), groupVisibility = _d[0], setGroupVisibility = _d[1];
+        // useOverflowContainer wraps this method in a useEventCallback.
+        // TODO: Do we need a useEventCallback here too?
+        var update = function (data) {
+            setHasOverflow(function () { return data.invisibleItems.length > 0; });
+            setItemVisibility(function () {
+                var newState = {};
+                data.visibleItems.forEach(function (x) { return (newState[x.id] = true); });
+                data.invisibleItems.forEach(function (x) { return (newState[x.id] = false); });
+                return newState;
+            });
+            setGroupVisibility(data.groupVisibility);
+        };
+        var _e = useOverflowContainer_1.useOverflowContainer(update, {
+            overflowDirection: overflowDirection,
+            overflowAxis: overflowAxis,
+            padding: padding,
+            minimumVisible: minimumVisible,
+            onUpdateItemVisibility: useOverflowContainer_1.updateVisibilityAttribute,
+        }), containerRef = _e.containerRef, registerItem = _e.registerItem, updateOverflow = _e.updateOverflow, registerOverflowMenu = _e.registerOverflowMenu;
+        var clonedChild = react_utilities_1.applyTriggerPropsToChildren(children, {
+            ref: react_utilities_1.useMergedRefs(containerRef, ref),
+            className: react_1.mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),
+        });
+        return (React.createElement(overflowContext_1.OverflowContext.Provider, { value: {
+                itemVisibility: itemVisibility,
+                groupVisibility: groupVisibility,
+                hasOverflow: hasOverflow,
+                registerItem: registerItem,
+                updateOverflow: updateOverflow,
+                registerOverflowMenu: registerOverflowMenu,
+            } }, clonedChild));
+    });
+});
+//# sourceMappingURL=Overflow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-overflow/src/components/Overflow.tsx"],"names":[],"mappings":";;;;;IASA,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,YAAY;YACV,GAAC,QAAM,8BAAkB,MAAG,IAAG;gBAC7B,UAAU,EAAE,CAAC;aACd;eACF;QAED,gBAAgB;YACd,GAAC,UAAQ,4BAAgB,MAAG,IAAG;gBAC7B,OAAO,EAAE,MAAM;aAChB;eACF;KACF,CAAC,CAAC;IAWH;;OAEG;IACU,QAAA,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAoB,EAAE,GAAG;QACjE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAEnB,IAAA,QAAQ,GAA8E,KAAK,SAAnF,EAAE,cAAc,GAA8D,KAAK,eAAnE,EAAE,KAA4D,KAAK,aAAtC,EAA3B,YAAY,mBAAG,YAAY,KAAA,EAAE,iBAAiB,GAAc,KAAK,kBAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;QAE9F,IAAA,KAAgC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAApD,WAAW,QAAA,EAAE,cAAc,QAAyB,CAAC;QACtD,IAAA,KAAsC,KAAK,CAAC,QAAQ,CAA0B,EAAE,CAAC,EAAhF,cAAc,QAAA,EAAE,iBAAiB,QAA+C,CAAC;QAClF,IAAA,KAAwC,KAAK,CAAC,QAAQ,CAAqC,EAAE,CAAC,EAA7F,eAAe,QAAA,EAAE,kBAAkB,QAA0D,CAAC;QAErG,gEAAgE;QAChE,gDAAgD;QAChD,IAAM,MAAM,GAAqB,UAAA,IAAI;YACnC,cAAc,CAAC,cAAM,OAAA,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAA9B,CAA8B,CAAC,CAAC;YACrD,iBAAiB,CAAC;gBAChB,IAAM,QAAQ,GAA4B,EAAE,CAAC;gBAC7C,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAvB,CAAuB,CAAC,CAAC;gBACxD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,EAAxB,CAAwB,CAAC,CAAC;gBAC3D,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEI,IAAA,KAAuE,2CAAoB,CAAC,MAAM,EAAE;YACxG,iBAAiB,mBAAA;YACjB,YAAY,cAAA;YACZ,OAAO,SAAA;YACP,cAAc,gBAAA;YACd,sBAAsB,EAAE,gDAAyB;SAClD,CAAC,EANM,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAE,cAAc,oBAAA,EAAE,oBAAoB,0BAMtE,CAAC;QAEH,IAAM,WAAW,GAAG,6CAA2B,CAAC,QAAQ,EAAE;YACxD,GAAG,EAAE,+BAAa,CAAC,YAAY,EAAE,GAAG,CAAC;YACrC,SAAS,EAAE,oBAAY,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC;SAChG,CAAC,CAAC;QAEH,OAAO,CACL,oBAAC,iCAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;gBACL,cAAc,gBAAA;gBACd,eAAe,iBAAA;gBACf,WAAW,aAAA;gBACX,YAAY,cAAA;gBACZ,cAAc,gBAAA;gBACd,oBAAoB,sBAAA;aACrB,IAEA,WAAW,CACa,CAC5B,CAAC;IACJ,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = 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\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n  children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [hasOverflow, setHasOverflow] = React.useState(false);\n  const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n  const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  // TODO: Do we need a useEventCallback here too?\n  const update: OnUpdateOverflow = data => {\n    setHasOverflow(() => data.invisibleItems.length > 0);\n    setItemVisibility(() => {\n      const newState: Record<string, boolean> = {};\n      data.visibleItems.forEach(x => (newState[x.id] = true));\n      data.invisibleItems.forEach(x => (newState[x.id] = false));\n      return newState;\n    });\n    setGroupVisibility(data.groupVisibility);\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    onUpdateItemVisibility: updateVisibilityAttribute,\n  });\n\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n    className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility,\n        groupVisibility,\n        hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"]}

package/lib-amd/components/OverflowItem/OverflowItem.js

@@ -0,0 +1,17 @@
+define(["require", "exports", "react", "@fluentui/react-utilities", "../../useOverflowItem"], function (require, exports, React, react_utilities_1, useOverflowItem_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.OverflowItem = void 0;
+    /**
+     * Attaches overflow item behavior to its child registered with the OverflowContext.
+     * It does not render an element of its own.
+     */
+    exports.OverflowItem = React.forwardRef(function (props, ref) {
+        var id = props.id, groupId = props.groupId, priority = props.priority, children = props.children;
+        var containerRef = useOverflowItem_1.useOverflowItem(id, priority, groupId);
+        return react_utilities_1.applyTriggerPropsToChildren(children, {
+            ref: react_utilities_1.useMergedRefs(containerRef, ref),
+        });
+    });
+});
+//# sourceMappingURL=OverflowItem.js.map

package/lib-amd/components/OverflowItem/OverflowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowItem.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACU,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAwB,EAAE,GAAG;QACjE,IAAA,EAAE,GAAkC,KAAK,GAAvC,EAAE,OAAO,GAAyB,KAAK,QAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAElD,IAAM,YAAY,GAAG,iCAAe,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC5D,OAAO,6CAA2B,CAAC,QAAQ,EAAE;YAC3C,GAAG,EAAE,+BAAa,CAAC,YAAY,EAAE,GAAG,CAAC;SACtC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n  const { id, groupId, priority, children } = props;\n\n  const containerRef = useOverflowItem(id, priority, groupId);\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n  });\n});\n"]}

package/lib-amd/components/OverflowItem/OverflowItem.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=OverflowItem.types.js.map

package/lib-amd/components/OverflowItem/OverflowItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowItem.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n  /**\n   * The unique identifier for the item used by the overflow manager.\n   */\n  id: string;\n  /**\n   * Assigns the item to a group, group visibility can be watched.\n   */\n  groupId?: string;\n  /**\n   * A higher priority means the item overflows later.\n   */\n  priority?: number;\n  /**\n   * The single child that has overflow item behavior attached.\n   */\n  children: React.ReactElement;\n};\n"]}

package/lib-amd/constants.js

@@ -0,0 +1,9 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = void 0;
+    exports.DATA_OVERFLOWING = 'data-overflowing';
+    exports.DATA_OVERFLOW_ITEM = 'data-overflow-item';
+    exports.DATA_OVERFLOW_MENU = 'data-overflow-menu';
+});
+//# sourceMappingURL=constants.js.map

package/lib-amd/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/constants.ts"],"names":[],"mappings":";;;;IAAa,QAAA,gBAAgB,GAAG,kBAAkB,CAAC;IACtC,QAAA,kBAAkB,GAAG,oBAAoB,CAAC;IAC1C,QAAA,kBAAkB,GAAG,oBAAoB,CAAC","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"]}

package/lib-amd/index.js

@@ -0,0 +1,17 @@
+define(["require", "exports", "./components/Overflow", "./constants", "./useIsOverflowGroupVisible", "./useIsOverflowItemVisible", "./useOverflowContainer", "./useOverflowCount", "./useOverflowItem", "./useOverflowMenu", "./components/OverflowItem/OverflowItem"], function (require, exports, Overflow_1, constants_1, useIsOverflowGroupVisible_1, useIsOverflowItemVisible_1, useOverflowContainer_1, useOverflowCount_1, useOverflowItem_1, useOverflowMenu_1, OverflowItem_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.OverflowItem = exports.useOverflowMenu = exports.useOverflowItem = exports.useOverflowCount = exports.useOverflowContainer = exports.useIsOverflowItemVisible = exports.useIsOverflowGroupVisible = exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = exports.Overflow = void 0;
+    Object.defineProperty(exports, "Overflow", { enumerable: true, get: function () { return Overflow_1.Overflow; } });
+    Object.defineProperty(exports, "DATA_OVERFLOWING", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOWING; } });
+    Object.defineProperty(exports, "DATA_OVERFLOW_ITEM", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOW_ITEM; } });
+    Object.defineProperty(exports, "DATA_OVERFLOW_MENU", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOW_MENU; } });
+    Object.defineProperty(exports, "useIsOverflowGroupVisible", { enumerable: true, get: function () { return useIsOverflowGroupVisible_1.useIsOverflowGroupVisible; } });
+    Object.defineProperty(exports, "useIsOverflowItemVisible", { enumerable: true, get: function () { return useIsOverflowItemVisible_1.useIsOverflowItemVisible; } });
+    Object.defineProperty(exports, "useOverflowContainer", { enumerable: true, get: function () { return useOverflowContainer_1.useOverflowContainer; } });
+    Object.defineProperty(exports, "useOverflowCount", { enumerable: true, get: function () { return useOverflowCount_1.useOverflowCount; } });
+    Object.defineProperty(exports, "useOverflowItem", { enumerable: true, get: function () { return useOverflowItem_1.useOverflowItem; } });
+    Object.defineProperty(exports, "useOverflowMenu", { enumerable: true, get: function () { return useOverflowMenu_1.useOverflowMenu; } });
+    Object.defineProperty(exports, "OverflowItem", { enumerable: true, get: function () { return OverflowItem_1.OverflowItem; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/index.ts"],"names":[],"mappings":";;;;IAAS,oGAAA,QAAQ,OAAA;IAER,6GAAA,gBAAgB,OAAA;IAAE,+GAAA,kBAAkB,OAAA;IAAE,+GAAA,kBAAkB,OAAA;IAExD,sIAAA,yBAAyB,OAAA;IACzB,oIAAA,wBAAwB,OAAA;IACxB,4HAAA,oBAAoB,OAAA;IACpB,oHAAA,gBAAgB,OAAA;IAChB,kHAAA,eAAe,OAAA;IACf,kHAAA,eAAe,OAAA;IAGf,4GAAA,YAAY,OAAA","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } 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';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"]}

package/lib-amd/overflowContext.js

@@ -0,0 +1,22 @@
+define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOverflowContext = exports.OverflowContext = void 0;
+    exports.OverflowContext = react_context_selector_1.createContext(undefined);
+    var overflowContextDefaultValue = {
+        itemVisibility: {},
+        groupVisibility: {},
+        hasOverflow: false,
+        registerItem: function () { return function () { return null; }; },
+        updateOverflow: function () { return null; },
+        registerOverflowMenu: function () { return function () { return null; }; },
+    };
+    var useOverflowContext = function (selector) {
+        return react_context_selector_1.useContextSelector(exports.OverflowContext, function (ctx) {
+            if (ctx === void 0) { ctx = overflowContextDefaultValue; }
+            return selector(ctx);
+        });
+    };
+    exports.useOverflowContext = useOverflowContext;
+});
+//# sourceMappingURL=overflowContext.js.map

package/lib-amd/overflowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflowContext.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/overflowContext.ts"],"names":[],"mappings":";;;;IAYa,QAAA,eAAe,GAAG,sCAAa,CAC1C,SAAS,CACuB,CAAC;IAEnC,IAAM,2BAA2B,GAAyB;QACxD,cAAc,EAAE,EAAE;QAClB,eAAe,EAAE,EAAE;QACnB,WAAW,EAAE,KAAK;QAClB,YAAY,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;QAC9B,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAC1B,oBAAoB,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;KACvC,CAAC;IAEK,IAAM,kBAAkB,GAAG,UAAgB,QAA8D;QAC9G,OAAA,2CAAkB,CAAC,uBAAe,EAAE,UAAC,GAAiC;YAAjC,oBAAA,EAAA,iCAAiC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAAzF,CAAyF,CAAC;IAD/E,QAAA,kBAAkB,sBAC6D","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\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  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};\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"]}

package/lib-amd/types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=types.js.map

package/lib-amd/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n  extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {\n  /**\n   * Ref to apply to the container that will overflow\n   */\n  containerRef: React.RefObject<TElement>;\n}\n"]}

package/lib-amd/useIsOverflowGroupVisible.js

@@ -0,0 +1,14 @@
+define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useIsOverflowGroupVisible = void 0;
+    /**
+     * @param id - unique identifier for a group of overflow items
+     * @returns visibility state of the group
+     */
+    function useIsOverflowGroupVisible(id) {
+        return overflowContext_1.useOverflowContext(function (ctx) { return ctx.groupVisibility[id]; });
+    }
+    exports.useIsOverflowGroupVisible = useIsOverflowGroupVisible;
+});
+//# sourceMappingURL=useIsOverflowGroupVisible.js.map

package/lib-amd/useIsOverflowGroupVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsOverflowGroupVisible.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;IAGA;;;OAGG;IACH,SAAgB,yBAAyB,CAAC,EAAU;QAClD,OAAO,oCAAkB,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC,EAAvB,CAAuB,CAAC,CAAC;IAC5D,CAAC;IAFD,8DAEC","sourcesContent":["import { 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"]}

package/lib-amd/useIsOverflowItemVisible.js

@@ -0,0 +1,14 @@
+define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useIsOverflowItemVisible = void 0;
+    /**
+     * @param id - unique identifier for the item used by the overflow manager
+     * @returns visibility state of an overflow item
+     */
+    function useIsOverflowItemVisible(id) {
+        return !!overflowContext_1.useOverflowContext(function (ctx) { return ctx.itemVisibility[id]; });
+    }
+    exports.useIsOverflowItemVisible = useIsOverflowItemVisible;
+});
+//# sourceMappingURL=useIsOverflowItemVisible.js.map

package/lib-amd/useIsOverflowItemVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsOverflowItemVisible.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;IAEA;;;OAGG;IACH,SAAgB,wBAAwB,CAAC,EAAU;QACjD,OAAO,CAAC,CAAC,oCAAkB,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,EAAtB,CAAsB,CAAC,CAAC;IAC7D,CAAC;IAFD,4DAEC","sourcesContent":["import { 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"]}

package/lib-amd/useOverflowContainer.js

@@ -0,0 +1,84 @@
+define(["require", "exports", "react", "@fluentui/priority-overflow", "@fluentui/react-utilities", "./constants"], function (require, exports, React, priority_overflow_1, react_utilities_1, constants_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.updateVisibilityAttribute = exports.useOverflowContainer = void 0;
+    /**
+     * @internal
+     * @param update - Callback when overflow state changes
+     * @param options - Options to configure the overflow container
+     * @returns - ref to attach to an intrinsic HTML element and imperative functions
+     */
+    var useOverflowContainer = function (update, options) {
+        var overflowAxis = options.overflowAxis, overflowDirection = options.overflowDirection, padding = options.padding, minimumVisible = options.minimumVisible, onUpdateItemVisibility = options.onUpdateItemVisibility;
+        // DOM ref to the overflow container element
+        var containerRef = React.useRef(null);
+        var updateOverflowItems = react_utilities_1.useEventCallback(update);
+        var overflowManager = React.useState(function () {
+            return react_utilities_1.canUseDOM() ? priority_overflow_1.createOverflowManager() : null;
+        })[0];
+        react_utilities_1.useIsomorphicLayoutEffect(function () {
+            if (!containerRef.current) {
+                return;
+            }
+            if (overflowManager) {
+                overflowManager.observe(containerRef.current, {
+                    overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
+                    overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
+                    padding: padding !== null && padding !== void 0 ? padding : 10,
+                    minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
+                    onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : (function () { return undefined; }),
+                    onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : (function () { return undefined; }),
+                });
+                return function () {
+                    overflowManager.disconnect();
+                };
+            }
+        }, [
+            updateOverflowItems,
+            overflowManager,
+            overflowDirection,
+            overflowAxis,
+            padding,
+            minimumVisible,
+            onUpdateItemVisibility,
+        ]);
+        var registerItem = React.useCallback(function (item) {
+            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
+            item.element.setAttribute(constants_1.DATA_OVERFLOW_ITEM, '');
+            return function () {
+                item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
+                item.element.removeAttribute(constants_1.DATA_OVERFLOW_ITEM);
+                overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
+            };
+        }, [overflowManager]);
+        var updateOverflow = React.useCallback(function () {
+            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
+        }, [overflowManager]);
+        var registerOverflowMenu = React.useCallback(function (el) {
+            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
+            el.setAttribute(constants_1.DATA_OVERFLOW_MENU, '');
+            return function () {
+                overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
+                el.removeAttribute(constants_1.DATA_OVERFLOW_MENU);
+            };
+        }, [overflowManager]);
+        return {
+            containerRef: containerRef,
+            registerItem: registerItem,
+            updateOverflow: updateOverflow,
+            registerOverflowMenu: registerOverflowMenu,
+        };
+    };
+    exports.useOverflowContainer = useOverflowContainer;
+    var updateVisibilityAttribute = function (_a) {
+        var item = _a.item, visible = _a.visible;
+        if (visible) {
+            item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
+        }
+        else {
+            item.element.setAttribute(constants_1.DATA_OVERFLOWING, '');
+        }
+    };
+    exports.updateVisibilityAttribute = updateVisibilityAttribute;
+});
+//# sourceMappingURL=useOverflowContainer.js.map

package/lib-amd/useOverflowContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowContainer.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n  OnUpdateItemVisibility,\n  OnUpdateOverflow,\n  OverflowItemEntry,\n  OverflowManager,\n  ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n  update: OnUpdateOverflow,\n  options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n  const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n  // DOM ref to the overflow container element\n  const containerRef = React.useRef<TElement>(null);\n  const updateOverflowItems = useEventCallback(update);\n\n  const [overflowManager] = React.useState<OverflowManager | null>(() =>\n    canUseDOM() ? createOverflowManager() : null,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    if (overflowManager) {\n      overflowManager.observe(containerRef.current, {\n        overflowDirection: overflowDirection ?? 'end',\n        overflowAxis: overflowAxis ?? 'horizontal',\n        padding: padding ?? 10,\n        minimumVisible: minimumVisible ?? 0,\n        onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n        onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n      });\n\n      return () => {\n        overflowManager.disconnect();\n      };\n    }\n  }, [\n    updateOverflowItems,\n    overflowManager,\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    onUpdateItemVisibility,\n  ]);\n\n  const registerItem = React.useCallback(\n    (item: OverflowItemEntry) => {\n      overflowManager?.addItem(item);\n      item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n      return () => {\n        item.element.removeAttribute(DATA_OVERFLOWING);\n        item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n        overflowManager?.removeItem(item.id);\n      };\n    },\n    [overflowManager],\n  );\n\n  const updateOverflow = React.useCallback(() => {\n    overflowManager?.update();\n  }, [overflowManager]);\n\n  const registerOverflowMenu = React.useCallback(\n    (el: HTMLElement) => {\n      overflowManager?.addOverflowMenu(el);\n      el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        overflowManager?.removeOverflowMenu();\n        el.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    },\n    [overflowManager],\n  );\n\n  return {\n    containerRef,\n    registerItem,\n    updateOverflow,\n    registerOverflowMenu,\n  };\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"]}

package/lib-amd/useOverflowCount.js

@@ -0,0 +1,21 @@
+define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOverflowCount = void 0;
+    /**
+     * @returns Number of items that are overflowing
+     */
+    var useOverflowCount = function () {
+        return overflowContext_1.useOverflowContext(function (v) {
+            return Object.entries(v.itemVisibility).reduce(function (acc, _a) {
+                var id = _a[0], visible = _a[1];
+                if (!visible) {
+                    acc++;
+                }
+                return acc;
+            }, 0);
+        });
+    };
+    exports.useOverflowCount = useOverflowCount;
+});
+//# sourceMappingURL=useOverflowCount.js.map

package/lib-amd/useOverflowCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowCount.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowCount.ts"],"names":[],"mappings":";;;;IAEA;;OAEG;IACI,IAAM,gBAAgB,GAAG;QAC9B,OAAA,oCAAkB,CAAC,UAAA,CAAC;YAClB,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,EAAa;oBAAZ,EAAE,QAAA,EAAE,OAAO,QAAA;gBAC/D,IAAI,CAAC,OAAO,EAAE;oBACZ,GAAG,EAAE,CAAC;iBACP;gBAED,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IARF,CAQE,CAAC;IATQ,QAAA,gBAAgB,oBASxB","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\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"]}

package/lib-amd/useOverflowItem.js

@@ -0,0 +1,30 @@
+define(["require", "exports", "react", "@fluentui/react-utilities", "./overflowContext"], function (require, exports, React, react_utilities_1, overflowContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOverflowItem = void 0;
+    /**
+     * @internal
+     * Registers an overflow item
+     * @param id - unique identifier for the item used by the overflow manager
+     * @param priority - higher priority means the item overflows later
+     * @param groupId - assigns the item to a group, group visibility can be watched
+     * @returns ref to assign to an intrinsic HTML element
+     */
+    function useOverflowItem(id, priority, groupId) {
+        var ref = React.useRef(null);
+        var registerItem = overflowContext_1.useOverflowContext(function (v) { return v.registerItem; });
+        react_utilities_1.useIsomorphicLayoutEffect(function () {
+            if (ref.current) {
+                return registerItem({
+                    element: ref.current,
+                    id: id,
+                    priority: priority !== null && priority !== void 0 ? priority : 0,
+                    groupId: groupId,
+                });
+            }
+        }, [id, priority, registerItem, groupId]);
+        return ref;
+    }
+    exports.useOverflowItem = useOverflowItem;
+});
+//# sourceMappingURL=useOverflowItem.js.map

package/lib-amd/useOverflowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowItem.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowItem.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;OAOG;IACH,SAAgB,eAAe,CAA+B,EAAU,EAAE,QAAiB,EAAE,OAAgB;QAC3G,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QACzC,IAAM,YAAY,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,YAAY,EAAd,CAAc,CAAC,CAAC;QAE7D,2CAAyB,CAAC;YACxB,IAAI,GAAG,CAAC,OAAO,EAAE;gBACf,OAAO,YAAY,CAAC;oBAClB,OAAO,EAAE,GAAG,CAAC,OAAO;oBACpB,EAAE,IAAA;oBACF,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC;oBACvB,OAAO,SAAA;iBACR,CAAC,CAAC;aACJ;QACH,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;QAE1C,OAAO,GAAG,CAAC;IACb,CAAC;IAhBD,0CAgBC","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n  const ref = React.useRef<TElement>(null);\n  const registerItem = useOverflowContext(v => v.registerItem);\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerItem({\n        element: ref.current,\n        id,\n        priority: priority ?? 0,\n        groupId,\n      });\n    }\n  }, [id, priority, registerItem, groupId]);\n\n  return ref;\n}\n"]}

package/lib-amd/useOverflowMenu.js

@@ -0,0 +1,26 @@
+define(["require", "exports", "react", "@fluentui/react-utilities", "./overflowContext", "./useOverflowCount"], function (require, exports, React, react_utilities_1, overflowContext_1, useOverflowCount_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOverflowMenu = void 0;
+    function useOverflowMenu(id) {
+        var elementId = react_utilities_1.useId('overflow-menu', id);
+        var overflowCount = useOverflowCount_1.useOverflowCount();
+        var registerOverflowMenu = overflowContext_1.useOverflowContext(function (v) { return v.registerOverflowMenu; });
+        var updateOverflow = overflowContext_1.useOverflowContext(function (v) { return v.updateOverflow; });
+        var ref = React.useRef(null);
+        var isOverflowing = overflowCount > 0;
+        react_utilities_1.useIsomorphicLayoutEffect(function () {
+            if (ref.current) {
+                return registerOverflowMenu(ref.current);
+            }
+        }, [registerOverflowMenu, isOverflowing, elementId]);
+        react_utilities_1.useIsomorphicLayoutEffect(function () {
+            if (isOverflowing) {
+                updateOverflow();
+            }
+        }, [isOverflowing, updateOverflow, ref]);
+        return { ref: ref, overflowCount: overflowCount, isOverflowing: isOverflowing };
+    }
+    exports.useOverflowMenu = useOverflowMenu;
+});
+//# sourceMappingURL=useOverflowMenu.js.map

package/lib-amd/useOverflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowMenu.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowMenu.ts"],"names":[],"mappings":";;;;IAKA,SAAgB,eAAe,CAA+B,EAAW;QACvE,IAAM,SAAS,GAAG,uBAAK,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAC7C,IAAM,aAAa,GAAG,mCAAgB,EAAE,CAAC;QACzC,IAAM,oBAAoB,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,oBAAoB,EAAtB,CAAsB,CAAC,CAAC;QAC7E,IAAM,cAAc,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,cAAc,EAAhB,CAAgB,CAAC,CAAC;QACjE,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QACzC,IAAM,aAAa,GAAG,aAAa,GAAG,CAAC,CAAC;QAExC,2CAAyB,CAAC;YACxB,IAAI,GAAG,CAAC,OAAO,EAAE;gBACf,OAAO,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;QAErD,2CAAyB,CAAC;YACxB,IAAI,aAAa,EAAE;gBACjB,cAAc,EAAE,CAAC;aAClB;QACH,CAAC,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC;QAEzC,OAAO,EAAE,GAAG,KAAA,EAAE,aAAa,eAAA,EAAE,aAAa,eAAA,EAAE,CAAC;IAC/C,CAAC;IArBD,0CAqBC","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerOverflowMenu(ref.current);\n    }\n  }, [registerOverflowMenu, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "9.0.0-rc.7",
+  "version": "9.0.0",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/priority-overflow": "^9.0.0-rc.2",
+    "@fluentui/priority-overflow": "^9.0.0",
     "@fluentui/react-context-selector": "^9.1.5",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.4.0",
@@ -49,9 +49,8 @@
   },
   "beachball": {
     "disallowedChangeTypes": [
-      "major",
-      "minor",
-      "patch"
+      "prerelease",
+      "major"
     ]
   },
   "exports": {