@fluentui/react-overflow 9.0.0-beta.4 → 9.0.0-beta.5

package/CHANGELOG.json

@@ -2,7 +2,78 @@
   "name": "@fluentui/react-overflow",
   "entries": [
     {
-      "date": "Tue, 21 Jun 2022 17:09:28 GMT",
+      "date": "Tue, 28 Jun 2022 15:08:56 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.0-beta.5",
+      "version": "9.0.0-beta.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
+            "comment": "Update 9.0.0-rc dependencies to use caret range"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "795427199eae1e792f85b6faf0783edfccd3c738",
+            "comment": "fix: do not throw in SSR"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "2da4428ae7d6e464c538b7ed10e425ce0e531144",
+            "comment": "chore: Mark teams-prg owned APIs with @internal"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "ddf16d80c50d80bc07331b478f567629775f2898",
+            "comment": "chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector."
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
+            "comment": "Bump Griffel dependencies"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v9.0.0-beta.2",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-theme to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0",
+            "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
+          }
+        ],
+        "none": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "e0c1dd07dd4772941273c9ac66422bc743fbe7d9",
+            "comment": "chore: Move Overflow stories to folder with index entry."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 23 Jun 2022 14:25:31 GMT",
       "tag": "@fluentui/react-overflow_v9.0.0-beta.4",
       "version": "9.0.0-beta.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
+This log was last generated on Tue, 28 Jun 2022 15:08:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.5)
+
+Tue, 28 Jun 2022 15:08:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.4..@fluentui/react-overflow_v9.0.0-beta.5)
+
+### Changes
+
+- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
+- fix: do not throw in SSR ([PR #23372](https://github.com/microsoft/fluentui/pull/23372) by olfedias@microsoft.com)
+- chore: Mark teams-prg owned APIs with @internal ([PR #23689](https://github.com/microsoft/fluentui/pull/23689) by lingfangao@hotmail.com)
+- chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector. ([PR #23681](https://github.com/microsoft/fluentui/pull/23681) by Humberto.Morimoto@microsoft.com)
+- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
+- Bump @fluentui/priority-overflow to v9.0.0-beta.2 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
+
 ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.4)
 
-Tue, 21 Jun 2022 17:09:28 GMT 
+Thu, 23 Jun 2022 14:25:31 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.3..@fluentui/react-overflow_v9.0.0-beta.4)
 
 ### Changes

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import type { ObserveOptions } from '@fluentui/priority-overflow';
-import type { OnUpdateItemVisibility } from '@fluentui/priority-overflow';
 import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
 import { OverflowGroupState } from '@fluentui/priority-overflow';
 import type { OverflowItemEntry } from '@fluentui/priority-overflow';
@@ -61,8 +60,6 @@ export declare type OverflowProps = Partial<Pick<ObserveOptions, 'overflowAxis'
     children: React_2.ReactElement;
 };
 
-export declare const updateVisibilityAttribute: OnUpdateItemVisibility;
-
 /**
  * @param id - unique identifier for a group of overflow items
  * @returns visibility state of the group
@@ -76,13 +73,16 @@ export declare function useIsOverflowGroupVisible(id: string): OverflowGroupStat
 export declare function useIsOverflowItemVisible(id: string): boolean;
 
 /**
- *
+ * @internal
  * @param update - Callback when overflow state changes
  * @param options - Options to configure the overflow container
  * @returns - ref to attach to an intrinsic HTML element and imperative functions
  */
 export declare const useOverflowContainer: <TElement extends HTMLElement>(update: OnUpdateOverflow, options: Omit<ObserveOptions, 'onUpdateOverflow'>) => UseOverflowContainerReturn<TElement>;
 
+/**
+ * @internal
+ */
 export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> {
     /**
      * Ref to apply to the container that will overflow
@@ -104,6 +104,7 @@ export declare interface UseOverflowContainerReturn<TElement extends HTMLElement
 export declare const useOverflowCount: () => number;
 
 /**
+ * @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

package/lib/components/Overflow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAEA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AAEA,SAAS,eAAT,QAAgC,oBAAhC;AACA,SAAS,yBAAT,EAAoC,oBAApC,QAAgE,yBAAhE;AACA,SAAS,gBAAT,EAA2B,kBAA3B,QAAqD,cAArD;;AAEA,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,cAAZ;AAA4B,IAAA,YAAY,GAAG,YAA3C;AAAyD,IAAA,iBAAzD;AAA4E,IAAA;AAA5E,MAAwF,KAA9F;AAEA,QAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;AACA,QAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;AACA,QAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;AACA;;AACA,QAAM,MAAM,GAAqB,IAAI,IAAG;AACtC,IAAA,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;AACA,IAAA,iBAAiB,CAAC,MAAK;AACrB,YAAM,QAAQ,GAA4B,EAA1C;AACA,MAAA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;AACA,MAAA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;AACA,aAAO,QAAP;AACD,KALgB,CAAjB;AAMA,IAAA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;AACD,GATD;;AAWA,QAAM;AAAE,IAAA,YAAF;AAAgB,IAAA,YAAhB;AAA8B,IAAA;AAA9B,MAAiD,oBAAoB,CAAC,MAAD,EAAS;AAClF,IAAA,iBADkF;AAElF,IAAA,YAFkF;AAGlF,IAAA,OAHkF;AAIlF,IAAA,cAJkF;AAKlF,IAAA,sBAAsB,EAAE;AAL0D,GAAT,CAA3E;AAQA,QAAM,WAAW,GAAG,2BAA2B,CAAC,QAAD,EAAW;AACxD,IAAA,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf,CADsC;AAExD,IAAA,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,YAAR,EAAsB,MAAM,CAAC,gBAA7B,EAA+C,QAAQ,CAAC,KAAT,CAAe,SAA9D;AAFiC,GAAX,CAA/C;AAKA,sBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;AACvB,IAAA,KAAK,EAAE;AACL,MAAA,cADK;AAEL,MAAA,eAFK;AAGL,MAAA,WAHK;AAIL,MAAA,YAJK;AAKL,MAAA;AALK;AADgB,GAAzB,EASG,WATH,CADF;AAaD,CAhDuB,CAAjB","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 } = 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      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAEA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AAEA,SAAS,eAAT,QAAgC,oBAAhC;AACA,SAAS,yBAAT,EAAoC,oBAApC,QAAgE,yBAAhE;AACA,SAAS,gBAAT,EAA2B,kBAA3B,QAAqD,cAArD;;AAEA,MAAM,SAAS,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM;IAAE,QAAF;IAAY,cAAZ;IAA4B,YAAY,GAAG,YAA3C;IAAyD,iBAAzD;IAA4E;EAA5E,IAAwF,KAA9F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;EACA;;EACA,MAAM,MAAM,GAAqB,IAAI,IAAG;IACtC,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;IACA,iBAAiB,CAAC,MAAK;MACrB,MAAM,QAAQ,GAA4B,EAA1C;MACA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;MACA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;MACA,OAAO,QAAP;IACD,CALgB,CAAjB;IAMA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;EACD,CATD;;EAWA,MAAM;IAAE,YAAF;IAAgB,YAAhB;IAA8B;EAA9B,IAAiD,oBAAoB,CAAC,MAAD,EAAS;IAClF,iBADkF;IAElF,YAFkF;IAGlF,OAHkF;IAIlF,cAJkF;IAKlF,sBAAsB,EAAE;EAL0D,CAAT,CAA3E;EAQA,MAAM,WAAW,GAAG,2BAA2B,CAAC,QAAD,EAAW;IACxD,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf,CADsC;IAExD,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,YAAR,EAAsB,MAAM,CAAC,gBAA7B,EAA+C,QAAQ,CAAC,KAAT,CAAe,SAA9D;EAFiC,CAAX,CAA/C;EAKA,oBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;IACvB,KAAK,EAAE;MACL,cADK;MAEL,eAFK;MAGL,WAHK;MAIL,YAJK;MAKL;IALK;EADgB,CAAzB,EASG,WATH,CADF;AAaD,CAhDuB,CAAjB","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 } = 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      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AACA,SAAS,eAAT,QAAgC,uBAAhC;AAGA;;;AAGG;;AACH,OAAO,MAAM,YAAY,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;AAC7E,QAAM;AAAE,IAAA,EAAF;AAAM,IAAA,OAAN;AAAe,IAAA,QAAf;AAAyB,IAAA;AAAzB,MAAsC,KAA5C;AAEA,QAAM,YAAY,GAAG,eAAe,CAAC,EAAD,EAAK,QAAL,EAAe,OAAf,CAApC;AACA,SAAO,2BAA2B,CAAC,QAAD,EAAW;AAC3C,IAAA,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf;AADyB,GAAX,CAAlC;AAGD,CAP2B,CAArB","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AACA,SAAS,eAAT,QAAgC,uBAAhC;AAGA;;;AAGG;;AACH,OAAO,MAAM,YAAY,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;EAC7E,MAAM;IAAE,EAAF;IAAM,OAAN;IAAe,QAAf;IAAyB;EAAzB,IAAsC,KAA5C;EAEA,MAAM,YAAY,GAAG,eAAe,CAAC,EAAD,EAAK,QAAL,EAAe,OAAf,CAApC;EACA,OAAO,2BAA2B,CAAC,QAAD,EAAW;IAC3C,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf;EADyB,CAAX,CAAlC;AAGD,CAP2B,CAArB","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"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -2,7 +2,7 @@ export { Overflow } from './components/Overflow';
 export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
 export { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';
 export { useIsOverflowItemVisible } from './useIsOverflowItemVisible';
-export { updateVisibilityAttribute, useOverflowContainer } from './useOverflowContainer';
+export { useOverflowContainer } from './useOverflowContainer';
 export { useOverflowCount } from './useOverflowCount';
 export { useOverflowItem } from './useOverflowItem';
 export { useOverflowMenu } from './useOverflowMenu';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC","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 { updateVisibilityAttribute, 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"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC","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/overflowContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["overflowContext.ts"],"names":[],"mappings":"AACA,SAA0B,aAA1B,EAAyC,kBAAzC,QAAmE,kCAAnE;AAUA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;AACjE,EAAA,cAAc,EAAE,EADiD;AAEjE,EAAA,eAAe,EAAE,EAFgD;AAGjE,EAAA,WAAW,EAAE,KAHoD;AAIjE,EAAA,YAAY,EAAE,MAAM,MAAM,IAJuC;AAKjE,EAAA,cAAc,EAAE,MAAM;AAL2C,CAAvB,CAArC;AAQP,OAAO,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CADb","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector } 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  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue>({\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n});\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, selector);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["overflowContext.ts"],"names":[],"mappings":"AACA,SAA0B,aAA1B,EAAyC,kBAAzC,QAAmE,kCAAnE;AAUA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;EACjE,cAAc,EAAE,EADiD;EAEjE,eAAe,EAAE,EAFgD;EAGjE,WAAW,EAAE,KAHoD;EAIjE,YAAY,EAAE,MAAM,MAAM,IAJuC;EAKjE,cAAc,EAAE,MAAM;AAL2C,CAAvB,CAArC;AAQP,OAAO,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CADb","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector } 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  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue>({\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n});\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, selector);\n"],"sourceRoot":"../src/"}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement> {\n  /**\n   * Ref to apply to the container that will overflow\n   */\n  containerRef: React.RefObject<TElement>;\n  /**\n   * Registers and overflow item\n   */\n  registerItem: OverflowContextValue['registerItem'];\n  /**\n   * Imperative function to trigger overflow update\n   */\n  updateOverflow: OverflowContextValue['updateOverflow'];\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["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  /**\n   * Ref to apply to the container that will overflow\n   */\n  containerRef: React.RefObject<TElement>;\n  /**\n   * Registers and overflow item\n   */\n  registerItem: OverflowContextValue['registerItem'];\n  /**\n   * Imperative function to trigger overflow update\n   */\n  updateOverflow: OverflowContextValue['updateOverflow'];\n}\n"]}

package/lib/useIsOverflowGroupVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useIsOverflowGroupVisible.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,yBAAV,CAAoC,EAApC,EAA8C;AAClD,SAAO,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAAR,CAAzB;AACD","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useIsOverflowGroupVisible.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,yBAAV,CAAoC,EAApC,EAA8C;EAClD,OAAO,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAAR,CAAzB;AACD","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"],"sourceRoot":"../src/"}

package/lib/useIsOverflowItemVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useIsOverflowItemVisible.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,wBAAV,CAAmC,EAAnC,EAA6C;AACjD,SAAO,CAAC,CAAC,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAAR,CAA3B;AACD","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useIsOverflowItemVisible.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,wBAAV,CAAmC,EAAnC,EAA6C;EACjD,OAAO,CAAC,CAAC,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAAR,CAA3B;AACD","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"],"sourceRoot":"../src/"}

package/lib/useOverflowContainer.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { createOverflowManager } from '@fluentui/priority-overflow';
-import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';
 /**
- *
+ * @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
@@ -20,35 +20,37 @@ export const useOverflowContainer = (update, options) => {
 
   const containerRef = React.useRef(null);
   const updateOverflowItems = useEventCallback(update);
-  const [overflowManager] = React.useState(() => createOverflowManager());
+  const [overflowManager] = React.useState(() => canUseDOM() ? createOverflowManager() : null);
   useIsomorphicLayoutEffect(() => {
     if (!containerRef.current) {
       return;
     }
 
-    overflowManager.observe(containerRef.current, {
-      overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
-      overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
-      padding: padding !== null && padding !== void 0 ? padding : 10,
-      minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
-      onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => undefined,
-      onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined
-    });
-    return () => {
-      overflowManager.disconnect();
-    };
+    if (overflowManager) {
+      overflowManager.observe(containerRef.current, {
+        overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
+        overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
+        padding: padding !== null && padding !== void 0 ? padding : 10,
+        minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
+        onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => undefined,
+        onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined
+      });
+      return () => {
+        overflowManager.disconnect();
+      };
+    }
   }, [updateOverflowItems, overflowManager, overflowDirection, overflowAxis, padding, minimumVisible, onUpdateItemVisibility]);
   const registerItem = React.useCallback(item => {
-    overflowManager.addItem(item);
+    overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
     item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
     return () => {
       item.element.removeAttribute(DATA_OVERFLOWING);
       item.element.removeAttribute(DATA_OVERFLOW_ITEM);
-      overflowManager.removeItem(item.id);
+      overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
     };
   }, [overflowManager]);
   const updateOverflow = React.useCallback(() => {
-    overflowManager.update();
+    overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
   }, [overflowManager]);
   return {
     containerRef,

package/lib/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,6BAAtC;AASA,SAAS,gBAAT,EAA2B,yBAA3B,QAA4D,2BAA5D;AAEA,SAAS,gBAAT,EAA2B,kBAA3B,QAAqD,aAArD;AAEA;;;;;AAKG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAClC,MADkC,EAElC,OAFkC,KAGM;AACxC,QAAM;AAAE,IAAA,YAAF;AAAgB,IAAA,iBAAhB;AAAmC,IAAA,OAAnC;AAA4C,IAAA,cAA5C;AAA4D,IAAA;AAA5D,MAAuF,OAA7F,CADwC,CAExC;;AACA,QAAM,YAAY,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAArB;AACA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAD,CAA5C;AACA,QAAM,CAAC,eAAD,IAAoB,KAAK,CAAC,QAAN,CAAgC,MAAM,qBAAqB,EAA3D,CAA1B;AAEA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,QAAI,CAAC,YAAY,CAAC,OAAlB,EAA2B;AACzB;AACD;;AAED,IAAA,eAAe,CAAC,OAAhB,CAAwB,YAAY,CAAC,OAArC,EAA8C;AAC5C,MAAA,iBAAiB,EAAE,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAA,iBAAA,GAAqB,KADI;AAE5C,MAAA,YAAY,EAAE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAA,YAAA,GAAgB,YAFc;AAG5C,MAAA,OAAO,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAA,OAAA,GAAW,EAHwB;AAI5C,MAAA,cAAc,EAAE,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAA,cAAA,GAAkB,CAJU;AAK5C,MAAA,sBAAsB,EAAE,sBAAsB,KAAA,IAAtB,IAAA,sBAAsB,KAAA,KAAA,CAAtB,GAAA,sBAAA,GAA2B,MAAM,SALb;AAM5C,MAAA,gBAAgB,EAAE,mBAAmB,KAAA,IAAnB,IAAA,mBAAmB,KAAA,KAAA,CAAnB,GAAA,mBAAA,GAAwB,MAAM;AANJ,KAA9C;AASA,WAAO,MAAK;AACV,MAAA,eAAe,CAAC,UAAhB;AACD,KAFD;AAGD,GAjBwB,EAiBtB,CACD,mBADC,EAED,eAFC,EAGD,iBAHC,EAID,YAJC,EAKD,OALC,EAMD,cANC,EAOD,sBAPC,CAjBsB,CAAzB;AA2BA,QAAM,YAAY,GAAG,KAAK,CAAC,WAAN,CAClB,IAAD,IAA4B;AAC1B,IAAA,eAAe,CAAC,OAAhB,CAAwB,IAAxB;AACA,IAAA,IAAI,CAAC,OAAL,CAAa,YAAb,CAA0B,kBAA1B,EAA8C,EAA9C;AAEA,WAAO,MAAK;AACV,MAAA,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,gBAA7B;AACA,MAAA,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,kBAA7B;AACA,MAAA,eAAe,CAAC,UAAhB,CAA2B,IAAI,CAAC,EAAhC;AACD,KAJD;AAKD,GAVkB,EAWnB,CAAC,eAAD,CAXmB,CAArB;AAcA,QAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;AAC5C,IAAA,eAAe,CAAC,MAAhB;AACD,GAFsB,EAEpB,CAAC,eAAD,CAFoB,CAAvB;AAIA,SAAO;AACL,IAAA,YADK;AAEL,IAAA,YAFK;AAGL,IAAA;AAHK,GAAP;AAKD,CA5DM;AA8DP,OAAO,MAAM,yBAAyB,GAA2B,CAAC;AAAE,EAAA,IAAF;AAAQ,EAAA;AAAR,CAAD,KAAsB;AACrF,MAAI,OAAJ,EAAa;AACX,IAAA,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,gBAA7B;AACD,GAFD,MAEO;AACL,IAAA,IAAI,CAAC,OAAL,CAAa,YAAb,CAA0B,gBAA1B,EAA4C,EAA5C;AACD;AACF,CANM","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\nimport type {\n  OnUpdateItemVisibility,\n  OnUpdateOverflow,\n  OverflowItemEntry,\n  OverflowManager,\n  ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';\n\n/**\n *\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  // DOM ref to the overflow container element\n  const containerRef = React.useRef<TElement>(null);\n  const updateOverflowItems = useEventCallback(update);\n  const [overflowManager] = React.useState<OverflowManager>(() => createOverflowManager());\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\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    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  return {\n    containerRef,\n    registerItem,\n    updateOverflow,\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,6BAAtC;AAYA,SAAS,SAAT,EAAoB,gBAApB,EAAsC,yBAAtC,QAAuE,2BAAvE;AAEA,SAAS,gBAAT,EAA2B,kBAA3B,QAAqD,aAArD;AAEA;;;;;AAKG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAClC,MADkC,EAElC,OAFkC,KAGM;EACxC,MAAM;IAAE,YAAF;IAAgB,iBAAhB;IAAmC,OAAnC;IAA4C,cAA5C;IAA4D;EAA5D,IAAuF,OAA7F,CADwC,CAGxC;;EACA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAArB;EACA,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAD,CAA5C;EAEA,MAAM,CAAC,eAAD,IAAoB,KAAK,CAAC,QAAN,CAAuC,MAC/D,SAAS,KAAK,qBAAqB,EAA1B,GAA+B,IADhB,CAA1B;EAIA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,CAAC,YAAY,CAAC,OAAlB,EAA2B;MACzB;IACD;;IAED,IAAI,eAAJ,EAAqB;MACnB,eAAe,CAAC,OAAhB,CAAwB,YAAY,CAAC,OAArC,EAA8C;QAC5C,iBAAiB,EAAE,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAA,iBAAA,GAAqB,KADI;QAE5C,YAAY,EAAE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAA,YAAA,GAAgB,YAFc;QAG5C,OAAO,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAA,OAAA,GAAW,EAHwB;QAI5C,cAAc,EAAE,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAA,cAAA,GAAkB,CAJU;QAK5C,sBAAsB,EAAE,sBAAsB,KAAA,IAAtB,IAAA,sBAAsB,KAAA,KAAA,CAAtB,GAAA,sBAAA,GAA2B,MAAM,SALb;QAM5C,gBAAgB,EAAE,mBAAmB,KAAA,IAAnB,IAAA,mBAAmB,KAAA,KAAA,CAAnB,GAAA,mBAAA,GAAwB,MAAM;MANJ,CAA9C;MASA,OAAO,MAAK;QACV,eAAe,CAAC,UAAhB;MACD,CAFD;IAGD;EACF,CAnBwB,EAmBtB,CACD,mBADC,EAED,eAFC,EAGD,iBAHC,EAID,YAJC,EAKD,OALC,EAMD,cANC,EAOD,sBAPC,CAnBsB,CAAzB;EA6BA,MAAM,YAAY,GAAG,KAAK,CAAC,WAAN,CAClB,IAAD,IAA4B;IAC1B,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAE,OAAjB,CAAyB,IAAzB,CAAA;IACA,IAAI,CAAC,OAAL,CAAa,YAAb,CAA0B,kBAA1B,EAA8C,EAA9C;IAEA,OAAO,MAAK;MACV,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,gBAA7B;MACA,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,kBAA7B;MACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAE,UAAjB,CAA4B,IAAI,CAAC,EAAjC,CAAA;IACD,CAJD;EAKD,CAVkB,EAWnB,CAAC,eAAD,CAXmB,CAArB;EAcA,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;IAC5C,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAE,MAAjB,EAAA;EACD,CAFsB,EAEpB,CAAC,eAAD,CAFoB,CAAvB;EAIA,OAAO;IACL,YADK;IAEL,YAFK;IAGL;EAHK,CAAP;AAKD,CAlEM;AAoEP,OAAO,MAAM,yBAAyB,GAA2B,CAAC;EAAE,IAAF;EAAQ;AAAR,CAAD,KAAsB;EACrF,IAAI,OAAJ,EAAa;IACX,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,gBAA7B;EACD,CAFD,MAEO;IACL,IAAI,CAAC,OAAL,CAAa,YAAb,CAA0B,gBAA1B,EAA4C,EAA5C;EACD;AACF,CANM","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 } 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  return {\n    containerRef,\n    registerItem,\n    updateOverflow,\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"],"sourceRoot":"../src/"}

package/lib/useOverflowCount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowCount.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,MAC9B,kBAAkB,CAAC,CAAC,IAAG;AACrB,SAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;AACpE,QAAI,CAAC,OAAL,EAAc;AACZ,MAAA,GAAG;AACJ;;AAED,WAAO,GAAP;AACD,GANM,EAMJ,CANI,CAAP;AAOD,CARiB,CADb","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useOverflowCount.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,MAC9B,kBAAkB,CAAC,CAAC,IAAG;EACrB,OAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;IACpE,IAAI,CAAC,OAAL,EAAc;MACZ,GAAG;IACJ;;IAED,OAAO,GAAP;EACD,CANM,EAMJ,CANI,CAAP;AAOD,CARiB,CADb","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"],"sourceRoot":"../src/"}

package/lib/useOverflowItem.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { useOverflowContext } from './overflowContext';
 /**
+ * @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

package/lib/useOverflowItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;;;;AAMG;;AACH,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAoE,QAApE,EAAuF,OAAvF,EAAuG;AAC3G,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;AACA,QAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;AAEA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,aAAO,YAAY,CAAC;AAClB,QAAA,OAAO,EAAE,GAAG,CAAC,OADK;AAElB,QAAA,EAFkB;AAGlB,QAAA,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;AAIlB,QAAA;AAJkB,OAAD,CAAnB;AAMD;AACF,GATwB,EAStB,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATsB,CAAzB;AAWA,SAAO,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAoE,QAApE,EAAuF,OAAvF,EAAuG;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATwB,EAStB,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATsB,CAAzB;EAWA,OAAO,GAAP;AACD","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"],"sourceRoot":"../src/"}

package/lib/useOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AAEA,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAmE;AACvE,QAAM,SAAS,GAAG,KAAK,CAAC,eAAD,EAAkB,EAAlB,CAAvB;AACA,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;AACA,QAAM,cAAc,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,cAAR,CAAzC;AACA,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;AACA,QAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;AAEA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,UAAM,OAAO,GAAG,GAAG,CAAC,OAApB;;AACA,QAAI,OAAJ,EAAa;AACX,YAAM,cAAc,GAAG,YAAY,CAAC;AAClC,QAAA,OADkC;AAElC,QAAA,EAAE,EAAE,SAF8B;AAGlC,QAAA,QAAQ,EAAE;AAHwB,OAAD,CAAnC;AAKA,MAAA,OAAO,CAAC,YAAR,CAAqB,kBAArB,EAAyC,EAAzC;AAEA,aAAO,MAAK;AACV,QAAA,cAAc;AACd,QAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAAT,CAAyB,kBAAzB,CAAA;AACD,OAHD;AAID;AACF,GAfwB,EAetB,CAAC,YAAD,EAAe,aAAf,EAA8B,SAA9B,CAfsB,CAAzB;AAiBA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,QAAI,aAAJ,EAAmB;AACjB,MAAA,cAAc;AACf;AACF,GAJwB,EAItB,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJsB,CAAzB;AAMA,SAAO;AAAE,IAAA,GAAF;AAAO,IAAA,aAAP;AAAsB,IAAA;AAAtB,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nimport { DATA_OVERFLOW_MENU } from './constants';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerItem = useOverflowContext(v => v.registerItem);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    const element = ref.current;\n    if (element) {\n      const deregisterItem = registerItem({\n        element,\n        id: elementId,\n        priority: Infinity,\n      });\n      element.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        deregisterItem();\n        element?.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    }\n  }, [registerItem, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useOverflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AAEA,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAmE;EACvE,MAAM,SAAS,GAAG,KAAK,CAAC,eAAD,EAAkB,EAAlB,CAAvB;EACA,MAAM,aAAa,GAAG,gBAAgB,EAAtC;EACA,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;EACA,MAAM,cAAc,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,cAAR,CAAzC;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,MAAM,OAAO,GAAG,GAAG,CAAC,OAApB;;IACA,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,YAAY,CAAC;QAClC,OADkC;QAElC,EAAE,EAAE,SAF8B;QAGlC,QAAQ,EAAE;MAHwB,CAAD,CAAnC;MAKA,OAAO,CAAC,YAAR,CAAqB,kBAArB,EAAyC,EAAzC;MAEA,OAAO,MAAK;QACV,cAAc;QACd,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAAT,CAAyB,kBAAzB,CAAA;MACD,CAHD;IAID;EACF,CAfwB,EAetB,CAAC,YAAD,EAAe,aAAf,EAA8B,SAA9B,CAfsB,CAAzB;EAiBA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,aAAJ,EAAmB;MACjB,cAAc;IACf;EACF,CAJwB,EAItB,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJsB,CAAzB;EAMA,OAAO;IAAE,GAAF;IAAO,aAAP;IAAsB;EAAtB,CAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nimport { DATA_OVERFLOW_MENU } from './constants';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerItem = useOverflowContext(v => v.registerItem);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    const element = ref.current;\n    if (element) {\n      const deregisterItem = registerItem({\n        element,\n        id: elementId,\n        priority: Infinity,\n      });\n      element.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        deregisterItem();\n        element?.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    }\n  }, [registerItem, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Overflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAEA,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAAW,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,cAAZ;AAA4B,IAAA,YAAY,GAAG,YAA3C;AAAyD,IAAA,iBAAzD;AAA4E,IAAA;AAA5E,MAAwF,KAA9F;AAEA,QAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;AACA,QAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;AACA,QAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;AACA;;AACA,QAAM,MAAM,GAAqB,IAAI,IAAG;AACtC,IAAA,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;AACA,IAAA,iBAAiB,CAAC,MAAK;AACrB,YAAM,QAAQ,GAA4B,EAA1C;AACA,MAAA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;AACA,MAAA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;AACA,aAAO,QAAP;AACD,KALgB,CAAjB;AAMA,IAAA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;AACD,GATD;;AAWA,QAAM;AAAE,IAAA,YAAF;AAAgB,IAAA,YAAhB;AAA8B,IAAA;AAA9B,MAAiD,sBAAA,CAAA,oBAAA,CAAqB,MAArB,EAA6B;AAClF,IAAA,iBADkF;AAElF,IAAA,YAFkF;AAGlF,IAAA,OAHkF;AAIlF,IAAA,cAJkF;AAKlF,IAAA,sBAAsB,EAAE,sBAAA,CAAA;AAL0D,GAA7B,CAAvD;AAQA,QAAM,WAAW,GAAG,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;AACxD,IAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B,CADmD;AAExD,IAAA,SAAS,EAAE,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,YAApB,EAAkC,MAAM,CAAC,gBAAzC,EAA2D,QAAQ,CAAC,KAAT,CAAe,SAA1E;AAF6C,GAAtC,CAApB;AAKA,SACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;AACvB,IAAA,KAAK,EAAE;AACL,MAAA,cADK;AAEL,MAAA,eAFK;AAGL,MAAA,WAHK;AAIL,MAAA,YAJK;AAKL,MAAA;AALK;AADgB,GAAzB,EASG,WATH,CADF;AAaD,CAhDuB,CAAX","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 } = 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      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Overflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAEA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAAW,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM;IAAE,QAAF;IAAY,cAAZ;IAA4B,YAAY,GAAG,YAA3C;IAAyD,iBAAzD;IAA4E;EAA5E,IAAwF,KAA9F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;EACA;;EACA,MAAM,MAAM,GAAqB,IAAI,IAAG;IACtC,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;IACA,iBAAiB,CAAC,MAAK;MACrB,MAAM,QAAQ,GAA4B,EAA1C;MACA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;MACA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;MACA,OAAO,QAAP;IACD,CALgB,CAAjB;IAMA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;EACD,CATD;;EAWA,MAAM;IAAE,YAAF;IAAgB,YAAhB;IAA8B;EAA9B,IAAiD,sBAAA,CAAA,oBAAA,CAAqB,MAArB,EAA6B;IAClF,iBADkF;IAElF,YAFkF;IAGlF,OAHkF;IAIlF,cAJkF;IAKlF,sBAAsB,EAAE,sBAAA,CAAA;EAL0D,CAA7B,CAAvD;EAQA,MAAM,WAAW,GAAG,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;IACxD,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B,CADmD;IAExD,SAAS,EAAE,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,YAApB,EAAkC,MAAM,CAAC,gBAAzC,EAA2D,QAAQ,CAAC,KAAT,CAAe,SAA1E;EAF6C,CAAtC,CAApB;EAKA,OACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;IACvB,KAAK,EAAE;MACL,cADK;MAEL,eAFK;MAGL,WAHK;MAIL,YAJK;MAKL;IALK;EADgB,CAAzB,EASG,WATH,CADF;AAaD,CAhDuB,CAAX","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 } = 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      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,YAAA,gBAAe,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;AAC7E,QAAM;AAAE,IAAA,EAAF;AAAM,IAAA,OAAN;AAAe,IAAA,QAAf;AAAyB,IAAA;AAAzB,MAAsC,KAA5C;AAEA,QAAM,YAAY,GAAG,iBAAA,CAAA,eAAA,CAAgB,EAAhB,EAAoB,QAApB,EAA8B,OAA9B,CAArB;AACA,SAAO,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;AAC3C,IAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B;AADsC,GAAtC,CAAP;AAGD,CAP2B,CAAf","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,YAAA,gBAAe,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;EAC7E,MAAM;IAAE,EAAF;IAAM,OAAN;IAAe,QAAf;IAAyB;EAAzB,IAAsC,KAA5C;EAEA,MAAM,YAAY,GAAG,iBAAA,CAAA,eAAA,CAAgB,EAAhB,EAAoB,QAApB,EAA8B,OAA9B,CAArB;EACA,OAAO,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;IAC3C,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B;EADsC,CAAtC,CAAP;AAGD,CAP2B,CAAf","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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/OverflowItem/index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,YAAA;AAAY;AAAZ,CAAA","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/OverflowItem/index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OverflowItem = exports.useOverflowMenu = exports.useOverflowItem = exports.useOverflowCount = exports.useOverflowContainer = exports.updateVisibilityAttribute = exports.useIsOverflowItemVisible = exports.useIsOverflowGroupVisible = exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = exports.Overflow = void 0;
+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;
 
 var Overflow_1 = /*#__PURE__*/require("./components/Overflow");
 
@@ -55,12 +55,6 @@ Object.defineProperty(exports, "useIsOverflowItemVisible", {
 
 var useOverflowContainer_1 = /*#__PURE__*/require("./useOverflowContainer");
 
-Object.defineProperty(exports, "updateVisibilityAttribute", {
-  enumerable: true,
-  get: function () {
-    return useOverflowContainer_1.updateVisibilityAttribute;
-  }
-});
 Object.defineProperty(exports, "useOverflowContainer", {
   enumerable: true,
   get: function () {

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,UAAA,CAAA,QAAA;AAAQ;AAAR,CAAA;;AAET,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,WAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,WAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,WAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;;AAE/C,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,2BAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;;AACT,IAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,0BAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;;AACT,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AAA2B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;;AACpC,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,kBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;;AAGT,IAAA,cAAA,gBAAA,OAAA,CAAA,wCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,YAAA;AAAY;AAAZ,CAAA","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 { updateVisibilityAttribute, 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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;;AAET,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAE/C,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,2BAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;;AACT,IAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,0BAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;;AACT,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,sBAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AACT,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,kBAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AAGT,IAAA,cAAA,gBAAA,OAAA,CAAA,wCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA","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"],"sourceRoot":"../src/"}

package/lib-commonjs/overflowContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["overflowContext.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAUa,OAAA,CAAA,eAAA,gBAAkB,wBAAA,CAAA,aAAA,CAAoC;AACjE,EAAA,cAAc,EAAE,EADiD;AAEjE,EAAA,eAAe,EAAE,EAFgD;AAGjE,EAAA,WAAW,EAAE,KAHoD;AAIjE,EAAA,YAAY,EAAE,MAAM,MAAM,IAJuC;AAKjE,EAAA,cAAc,EAAE,MAAM;AAL2C,CAApC,CAAlB;;AAQN,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,QAApC,CADK;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector } 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  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue>({\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n});\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, selector);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["overflowContext.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAUa,OAAA,CAAA,eAAA,gBAAkB,wBAAA,CAAA,aAAA,CAAoC;EACjE,cAAc,EAAE,EADiD;EAEjE,eAAe,EAAE,EAFgD;EAGjE,WAAW,EAAE,KAHoD;EAIjE,YAAY,EAAE,MAAM,MAAM,IAJuC;EAKjE,cAAc,EAAE,MAAM;AAL2C,CAApC,CAAlB;;AAQN,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,QAApC,CADK;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector } 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  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue>({\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n});\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, selector);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/useIsOverflowGroupVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,yBAAhB,CAA0C,EAA1C,EAAoD;AAClD,SAAO,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAA1B,CAAP;AACD;;AAFD,OAAA,CAAA,yBAAA,GAAA,yBAAA","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,yBAAhB,CAA0C,EAA1C,EAAoD;EAClD,OAAO,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAA1B,CAAP;AACD;;AAFD,OAAA,CAAA,yBAAA,GAAA,yBAAA","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"],"sourceRoot":"../src/"}

package/lib-commonjs/useIsOverflowItemVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,wBAAhB,CAAyC,EAAzC,EAAmD;AACjD,SAAO,CAAC,CAAC,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAA1B,CAAT;AACD;;AAFD,OAAA,CAAA,wBAAA,GAAA,wBAAA","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,wBAAhB,CAAyC,EAAzC,EAAmD;EACjD,OAAO,CAAC,CAAC,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAA1B,CAAT;AACD;;AAFD,OAAA,CAAA,wBAAA,GAAA,wBAAA","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"],"sourceRoot":"../src/"}

package/lib-commonjs/useOverflowContainer.js

@@ -13,7 +13,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const constants_1 = /*#__PURE__*/require("./constants");
 /**
- *
+ * @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
@@ -31,35 +31,37 @@ const useOverflowContainer = (update, options) => {
 
   const containerRef = React.useRef(null);
   const updateOverflowItems = react_utilities_1.useEventCallback(update);
-  const [overflowManager] = React.useState(() => priority_overflow_1.createOverflowManager());
+  const [overflowManager] = React.useState(() => react_utilities_1.canUseDOM() ? priority_overflow_1.createOverflowManager() : null);
   react_utilities_1.useIsomorphicLayoutEffect(() => {
     if (!containerRef.current) {
       return;
     }
 
-    overflowManager.observe(containerRef.current, {
-      overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
-      overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
-      padding: padding !== null && padding !== void 0 ? padding : 10,
-      minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
-      onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => undefined,
-      onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined
-    });
-    return () => {
-      overflowManager.disconnect();
-    };
+    if (overflowManager) {
+      overflowManager.observe(containerRef.current, {
+        overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
+        overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
+        padding: padding !== null && padding !== void 0 ? padding : 10,
+        minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
+        onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => undefined,
+        onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined
+      });
+      return () => {
+        overflowManager.disconnect();
+      };
+    }
   }, [updateOverflowItems, overflowManager, overflowDirection, overflowAxis, padding, minimumVisible, onUpdateItemVisibility]);
   const registerItem = React.useCallback(item => {
-    overflowManager.addItem(item);
+    overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
     item.element.setAttribute(constants_1.DATA_OVERFLOW_ITEM, '');
     return () => {
       item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
       item.element.removeAttribute(constants_1.DATA_OVERFLOW_ITEM);
-      overflowManager.removeItem(item.id);
+      overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
     };
   }, [overflowManager]);
   const updateOverflow = React.useCallback(() => {
-    overflowManager.update();
+    overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
   }, [overflowManager]);
   return {
     containerRef,

package/lib-commonjs/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\nimport type {\n  OnUpdateItemVisibility,\n  OnUpdateOverflow,\n  OverflowItemEntry,\n  OverflowManager,\n  ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';\n\n/**\n *\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  // DOM ref to the overflow container element\n  const containerRef = React.useRef<TElement>(null);\n  const updateOverflowItems = useEventCallback(update);\n  const [overflowManager] = React.useState<OverflowManager>(() => createOverflowManager());\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\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    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  return {\n    containerRef,\n    registerItem,\n    updateOverflow,\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAYA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAEA;;;;;AAKG;;;AACI,MAAM,oBAAoB,GAAG,CAClC,MADkC,EAElC,OAFkC,KAGM;EACxC,MAAM;IAAE,YAAF;IAAgB,iBAAhB;IAAmC,OAAnC;IAA4C,cAA5C;IAA4D;EAA5D,IAAuF,OAA7F,CADwC,CAGxC;;EACA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAArB;EACA,MAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,CAA5B;EAEA,MAAM,CAAC,eAAD,IAAoB,KAAK,CAAC,QAAN,CAAuC,MAC/D,iBAAA,CAAA,SAAA,KAAc,mBAAA,CAAA,qBAAA,EAAd,GAAwC,IADhB,CAA1B;EAIA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,CAAC,YAAY,CAAC,OAAlB,EAA2B;MACzB;IACD;;IAED,IAAI,eAAJ,EAAqB;MACnB,eAAe,CAAC,OAAhB,CAAwB,YAAY,CAAC,OAArC,EAA8C;QAC5C,iBAAiB,EAAE,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAA,iBAAA,GAAqB,KADI;QAE5C,YAAY,EAAE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAA,YAAA,GAAgB,YAFc;QAG5C,OAAO,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAA,OAAA,GAAW,EAHwB;QAI5C,cAAc,EAAE,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAA,cAAA,GAAkB,CAJU;QAK5C,sBAAsB,EAAE,sBAAsB,KAAA,IAAtB,IAAA,sBAAsB,KAAA,KAAA,CAAtB,GAAA,sBAAA,GAA2B,MAAM,SALb;QAM5C,gBAAgB,EAAE,mBAAmB,KAAA,IAAnB,IAAA,mBAAmB,KAAA,KAAA,CAAnB,GAAA,mBAAA,GAAwB,MAAM;MANJ,CAA9C;MASA,OAAO,MAAK;QACV,eAAe,CAAC,UAAhB;MACD,CAFD;IAGD;EACF,CAnBD,EAmBG,CACD,mBADC,EAED,eAFC,EAGD,iBAHC,EAID,YAJC,EAKD,OALC,EAMD,cANC,EAOD,sBAPC,CAnBH;EA6BA,MAAM,YAAY,GAAG,KAAK,CAAC,WAAN,CAClB,IAAD,IAA4B;IAC1B,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAE,OAAjB,CAAyB,IAAzB,CAAA;IACA,IAAI,CAAC,OAAL,CAAa,YAAb,CAA0B,WAAA,CAAA,kBAA1B,EAA8C,EAA9C;IAEA,OAAO,MAAK;MACV,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,WAAA,CAAA,gBAA7B;MACA,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,WAAA,CAAA,kBAA7B;MACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAE,UAAjB,CAA4B,IAAI,CAAC,EAAjC,CAAA;IACD,CAJD;EAKD,CAVkB,EAWnB,CAAC,eAAD,CAXmB,CAArB;EAcA,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;IAC5C,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAE,MAAjB,EAAA;EACD,CAFsB,EAEpB,CAAC,eAAD,CAFoB,CAAvB;EAIA,OAAO;IACL,YADK;IAEL,YAFK;IAGL;EAHK,CAAP;AAKD,CAlEM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB;;AAoEN,MAAM,yBAAyB,GAA2B,CAAC;EAAE,IAAF;EAAQ;AAAR,CAAD,KAAsB;EACrF,IAAI,OAAJ,EAAa;IACX,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,WAAA,CAAA,gBAA7B;EACD,CAFD,MAEO;IACL,IAAI,CAAC,OAAL,CAAa,YAAb,CAA0B,WAAA,CAAA,gBAA1B,EAA4C,EAA5C;EACD;AACF,CANM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","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 } 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  return {\n    containerRef,\n    registerItem,\n    updateOverflow,\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"],"sourceRoot":"../src/"}

package/lib-commonjs/useOverflowCount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowCount.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAG,MAC9B,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAG;AACrB,SAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;AACpE,QAAI,CAAC,OAAL,EAAc;AACZ,MAAA,GAAG;AACJ;;AAED,WAAO,GAAP;AACD,GANM,EAMJ,CANI,CAAP;AAOD,CARD,CADK;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useOverflowCount.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAG,MAC9B,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAG;EACrB,OAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;IACpE,IAAI,CAAC,OAAL,EAAc;MACZ,GAAG;IACJ;;IAED,OAAO,GAAP;EACD,CANM,EAMJ,CANI,CAAP;AAOD,CARD,CADK;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","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"],"sourceRoot":"../src/"}

package/lib-commonjs/useOverflowItem.js

@@ -11,6 +11,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
 /**
+ * @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

package/lib-commonjs/useOverflowItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;AAMG;;;AACH,SAAgB,eAAhB,CAA8D,EAA9D,EAA0E,QAA1E,EAA6F,OAA7F,EAA6G;AAC3G,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;AACA,QAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;AAEA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,aAAO,YAAY,CAAC;AAClB,QAAA,OAAO,EAAE,GAAG,CAAC,OADK;AAElB,QAAA,EAFkB;AAGlB,QAAA,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;AAIlB,QAAA;AAJkB,OAAD,CAAnB;AAMD;AACF,GATD,EASG,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATH;AAWA,SAAO,GAAP;AACD;;AAhBD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;;AAOG;;;AACH,SAAgB,eAAhB,CAA8D,EAA9D,EAA0E,QAA1E,EAA6F,OAA7F,EAA6G;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATD,EASG,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATH;EAWA,OAAO,GAAP;AACD;;AAhBD,OAAA,CAAA,eAAA,GAAA,eAAA","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"],"sourceRoot":"../src/"}

package/lib-commonjs/useOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOverflowMenu.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAEA,SAAgB,eAAhB,CAA8D,EAA9D,EAAyE;AACvE,QAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,EAAvB,CAAlB;AACA,QAAM,aAAa,GAAG,kBAAA,CAAA,gBAAA,EAAtB;AACA,QAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;AACA,QAAM,cAAc,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,cAA1B,CAAvB;AACA,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;AACA,QAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;AAEA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,UAAM,OAAO,GAAG,GAAG,CAAC,OAApB;;AACA,QAAI,OAAJ,EAAa;AACX,YAAM,cAAc,GAAG,YAAY,CAAC;AAClC,QAAA,OADkC;AAElC,QAAA,EAAE,EAAE,SAF8B;AAGlC,QAAA,QAAQ,EAAE;AAHwB,OAAD,CAAnC;AAKA,MAAA,OAAO,CAAC,YAAR,CAAqB,WAAA,CAAA,kBAArB,EAAyC,EAAzC;AAEA,aAAO,MAAK;AACV,QAAA,cAAc;AACd,QAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAAT,CAAyB,WAAA,CAAA,kBAAzB,CAAA;AACD,OAHD;AAID;AACF,GAfD,EAeG,CAAC,YAAD,EAAe,aAAf,EAA8B,SAA9B,CAfH;AAiBA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,QAAI,aAAJ,EAAmB;AACjB,MAAA,cAAc;AACf;AACF,GAJD,EAIG,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJH;AAMA,SAAO;AAAE,IAAA,GAAF;AAAO,IAAA,aAAP;AAAsB,IAAA;AAAtB,GAAP;AACD;;AAhCD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nimport { DATA_OVERFLOW_MENU } from './constants';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerItem = useOverflowContext(v => v.registerItem);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    const element = ref.current;\n    if (element) {\n      const deregisterItem = registerItem({\n        element,\n        id: elementId,\n        priority: Infinity,\n      });\n      element.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        deregisterItem();\n        element?.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    }\n  }, [registerItem, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["useOverflowMenu.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAEA,SAAgB,eAAhB,CAA8D,EAA9D,EAAyE;EACvE,MAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,EAAvB,CAAlB;EACA,MAAM,aAAa,GAAG,kBAAA,CAAA,gBAAA,EAAtB;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;EACA,MAAM,cAAc,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,cAA1B,CAAvB;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,MAAM,OAAO,GAAG,GAAG,CAAC,OAApB;;IACA,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,YAAY,CAAC;QAClC,OADkC;QAElC,EAAE,EAAE,SAF8B;QAGlC,QAAQ,EAAE;MAHwB,CAAD,CAAnC;MAKA,OAAO,CAAC,YAAR,CAAqB,WAAA,CAAA,kBAArB,EAAyC,EAAzC;MAEA,OAAO,MAAK;QACV,cAAc;QACd,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAAT,CAAyB,WAAA,CAAA,kBAAzB,CAAA;MACD,CAHD;IAID;EACF,CAfD,EAeG,CAAC,YAAD,EAAe,aAAf,EAA8B,SAA9B,CAfH;EAiBA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,aAAJ,EAAmB;MACjB,cAAc;IACf;EACF,CAJD,EAIG,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJH;EAMA,OAAO;IAAE,GAAF;IAAO,aAAP;IAAsB;EAAtB,CAAP;AACD;;AAhCD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nimport { DATA_OVERFLOW_MENU } from './constants';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerItem = useOverflowContext(v => v.registerItem);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    const element = ref.current;\n    if (element) {\n      const deregisterItem = registerItem({\n        element,\n        id: elementId,\n        priority: Infinity,\n      });\n      element.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        deregisterItem();\n        element?.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    }\n  }, [registerItem, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "9.0.0-beta.4",
+  "version": "9.0.0-beta.5",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -30,18 +30,19 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/priority-overflow": "^9.0.0-beta.1",
-    "@fluentui/react-context-selector": "9.0.0-rc.10",
-    "@fluentui/react-theme": "9.0.0-rc.10",
-    "@fluentui/react-utilities": "9.0.0-rc.10",
-    "@griffel/react": "1.1.0",
+    "@fluentui/priority-overflow": "^9.0.0-beta.2",
+    "@fluentui/react-context-selector": "^9.0.0",
+    "@fluentui/react-theme": "^9.0.0",
+    "@fluentui/react-utilities": "^9.0.0",
+    "@griffel/react": "1.2.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <18.0.0",
     "@types/react-dom": ">=16.8.0 <18.0.0",
     "react": ">=16.8.0 <18.0.0",
-    "react-dom": ">=16.8.0 <18.0.0"
+    "react-dom": ">=16.8.0 <18.0.0",
+    "scheduler": "^0.19.0 || ^0.20.0"
   },
   "beachball": {
     "disallowedChangeTypes": [