@fluentui/react-overflow 0.0.0-nightly-20230502-0418.1 → 0.0.0-nightly-20230503-0419.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-overflow",
   "entries": [
     {
-      "date": "Tue, 02 May 2023 04:24:29 GMT",
-      "tag": "@fluentui/react-overflow_v0.0.0-nightly-20230502-0418.1",
-      "version": "0.0.0-nightly-20230502-0418.1",
+      "date": "Wed, 03 May 2023 04:25:39 GMT",
+      "tag": "@fluentui/react-overflow_v0.0.0-nightly-20230503-0419.1",
+      "version": "0.0.0-nightly-20230503-0419.1",
       "comments": {
         "prerelease": [
           {
@@ -16,26 +16,26 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-overflow",
-            "comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-overflow",
-            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-overflow",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-overflow",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,21 +1,21 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Tue, 02 May 2023 04:24:29 GMT and should not be manually modified.
+This log was last generated on Wed, 03 May 2023 04:25:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230502-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20230502-0418.1)
+## [0.0.0-nightly-20230503-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20230503-0419.1)
 
-Tue, 02 May 2023 04:24:29 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.15..@fluentui/react-overflow_v0.0.0-nightly-20230502-0418.1)
+Wed, 03 May 2023 04:25:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.15..@fluentui/react-overflow_v0.0.0-nightly-20230503-0419.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/priority-overflow to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
+- Bump @fluentui/priority-overflow to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
 
 ## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.15)
 

package/dist/index.d.ts

@@ -0,0 +1,124 @@
+import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ObserveOptions } from '@fluentui/priority-overflow';
+import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
+import { OverflowGroupState } from '@fluentui/priority-overflow';
+import type { OverflowItemEntry } from '@fluentui/priority-overflow';
+import * as React_2 from 'react';
+
+export declare const DATA_OVERFLOW_ITEM = "data-overflow-item";
+
+export declare const DATA_OVERFLOW_MENU = "data-overflow-menu";
+
+export declare const DATA_OVERFLOWING = "data-overflowing";
+
+/**
+ * Provides an OverflowContext for OverflowItem descendants.
+ */
+export declare const Overflow: React_2.ForwardRefExoticComponent<Partial<Pick<ObserveOptions, "padding" | "overflowDirection" | "overflowAxis" | "minimumVisible">> & {
+    children: React_2.ReactElement;
+} & React_2.RefAttributes<unknown>>;
+
+/**
+ * @internal
+ */
+declare interface OverflowContextValue {
+    itemVisibility: Record<string, boolean>;
+    groupVisibility: Record<string, OverflowGroupState>;
+    hasOverflow: boolean;
+    registerItem: (item: OverflowItemEntry) => () => void;
+    registerOverflowMenu: (el: HTMLElement) => () => void;
+    updateOverflow: (padding?: number) => void;
+}
+
+/**
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
+ * It does not render an element of its own.
+ */
+export declare const OverflowItem: React_2.ForwardRefExoticComponent<OverflowItemProps & React_2.RefAttributes<unknown>>;
+
+/**
+ * OverflowItemProps
+ */
+export declare type OverflowItemProps = {
+    /**
+     * The unique identifier for the item used by the overflow manager.
+     */
+    id: string;
+    /**
+     * Assigns the item to a group, group visibility can be watched.
+     */
+    groupId?: string;
+    /**
+     * A higher priority means the item overflows later.
+     */
+    priority?: number;
+    /**
+     * The single child that has overflow item behavior attached.
+     */
+    children: React_2.ReactElement;
+};
+
+/**
+ * Overflow Props
+ */
+export declare type OverflowProps = Partial<Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>> & {
+    children: React_2.ReactElement;
+};
+
+/**
+ * @param id - unique identifier for a group of overflow items
+ * @returns visibility state of the group
+ */
+export declare function useIsOverflowGroupVisible(id: string): OverflowGroupState;
+
+/**
+ * @param id - unique identifier for the item used by the overflow manager
+ * @returns visibility state of an overflow item
+ */
+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> extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {
+    /**
+     * Ref to apply to the container that will overflow
+     */
+    containerRef: React_2.RefObject<TElement>;
+}
+
+/**
+ * @internal
+ */
+export declare const useOverflowContext: <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) => SelectedValue;
+
+/**
+ * @returns Number of items that are overflowing
+ */
+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
+ * @param groupId - assigns the item to a group, group visibility can be watched
+ * @returns ref to assign to an intrinsic HTML element
+ */
+export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string): React_2.RefObject<TElement>;
+
+export declare function useOverflowMenu<TElement extends HTMLElement>(id?: string): {
+    ref: React_2.RefObject<TElement>;
+    overflowCount: number;
+    isOverflowing: boolean;
+};
+
+export { }

package/lib/components/Overflow.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { mergeClasses } from '@griffel/react';
+import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
+import { OverflowContext } from '../overflowContext';
+import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
+import { useOverflowStyles } from './useOverflowStyles.styles';
+/**
+ * Provides an OverflowContext for OverflowItem descendants.
+ */
+export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const styles = useOverflowStyles();
+  const {
+    children,
+    minimumVisible,
+    overflowAxis = 'horizontal',
+    overflowDirection,
+    padding
+  } = props;
+  const [hasOverflow, setHasOverflow] = React.useState(false);
+  const [itemVisibility, setItemVisibility] = React.useState({});
+  const [groupVisibility, setGroupVisibility] = React.useState({});
+  // useOverflowContainer wraps this method in a useEventCallback.
+  // TODO: Do we need a useEventCallback here too?
+  const update = data => {
+    setHasOverflow(() => data.invisibleItems.length > 0);
+    setItemVisibility(() => {
+      const newState = {};
+      data.visibleItems.forEach(x => newState[x.id] = true);
+      data.invisibleItems.forEach(x => newState[x.id] = false);
+      return newState;
+    });
+    setGroupVisibility(data.groupVisibility);
+  };
+  const {
+    containerRef,
+    registerItem,
+    updateOverflow,
+    registerOverflowMenu
+  } = useOverflowContainer(update, {
+    overflowDirection,
+    overflowAxis,
+    padding,
+    minimumVisible,
+    onUpdateItemVisibility: updateVisibilityAttribute
+  });
+  const clonedChild = applyTriggerPropsToChildren(children, {
+    ref: useMergedRefs(containerRef, ref),
+    className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)
+  });
+  return /*#__PURE__*/React.createElement(OverflowContext.Provider, {
+    value: {
+      itemVisibility,
+      groupVisibility,
+      hasOverflow,
+      registerItem,
+      updateOverflow,
+      registerOverflowMenu
+    }
+  }, clonedChild);
+});
+//# sourceMappingURL=Overflow.js.map

package/lib/components/Overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","hasOverflow","setHasOverflow","useState","itemVisibility","setItemVisibility","groupVisibility","setGroupVisibility","update","data","invisibleItems","length","newState","visibleItems","forEach","x","id","containerRef","registerItem","updateOverflow","registerOverflowMenu","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","createElement","Provider","value"],"sources":["../../src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { 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 { useOverflowStyles } from './useOverflowStyles.styles';\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 = useOverflowStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [hasOverflow, setHasOverflow] = React.useState(false);\n  const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n  const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  // TODO: Do we need a useEventCallback here too?\n  const update: OnUpdateOverflow = data => {\n    setHasOverflow(() => data.invisibleItems.length > 0);\n    setItemVisibility(() => {\n      const newState: Record<string, boolean> = {};\n      data.visibleItems.forEach(x => (newState[x.id] = true));\n      data.invisibleItems.forEach(x => (newState[x.id] = false));\n      return newState;\n    });\n    setGroupVisibility(data.groupVisibility);\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    onUpdateItemVisibility: updateVisibilityAttribute,\n  });\n\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n    className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility,\n        groupVisibility,\n        hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAE7B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAE3D,SAASC,eAAe,QAAQ;AAChC,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ;AAChE,SAASC,iBAAiB,QAAQ;AAWlC;;;AAGA,OAAO,MAAMC,QAAA,gBAAWR,KAAA,CAAMS,UAAU,CAAC,CAACC,KAAA,EAAsBC,GAAA,KAAQ;EACtE,MAAMC,MAAA,GAASL,iBAAA;EAEf,MAAM;IAAEM,QAAA;IAAUC,cAAA;IAAgBC,YAAA,GAAe;IAAcC,iBAAA;IAAmBC;EAAO,CAAE,GAAGP,KAAA;EAE9F,MAAM,CAACQ,WAAA,EAAaC,cAAA,CAAe,GAAGnB,KAAA,CAAMoB,QAAQ,CAAC,KAAK;EAC1D,MAAM,CAACC,cAAA,EAAgBC,iBAAA,CAAkB,GAAGtB,KAAA,CAAMoB,QAAQ,CAA0B,CAAC;EACrF,MAAM,CAACG,eAAA,EAAiBC,kBAAA,CAAmB,GAAGxB,KAAA,CAAMoB,QAAQ,CAAqC,CAAC;EAElG;EACA;EACA,MAAMK,MAAA,GAA2BC,IAAA,IAAQ;IACvCP,cAAA,CAAe,MAAMO,IAAA,CAAKC,cAAc,CAACC,MAAM,GAAG;IAClDN,iBAAA,CAAkB,MAAM;MACtB,MAAMO,QAAA,GAAoC,CAAC;MAC3CH,IAAA,CAAKI,YAAY,CAACC,OAAO,CAACC,CAAA,IAAMH,QAAQ,CAACG,CAAA,CAAEC,EAAE,CAAC,GAAG,IAAI;MACrDP,IAAA,CAAKC,cAAc,CAACI,OAAO,CAACC,CAAA,IAAMH,QAAQ,CAACG,CAAA,CAAEC,EAAE,CAAC,GAAG,KAAK;MACxD,OAAOJ,QAAA;IACT;IACAL,kBAAA,CAAmBE,IAAA,CAAKH,eAAe;EACzC;EAEA,MAAM;IAAEW,YAAA;IAAcC,YAAA;IAAcC,cAAA;IAAgBC;EAAoB,CAAE,GAAG/B,oBAAA,CAAqBmB,MAAA,EAAQ;IACxGT,iBAAA;IACAD,YAAA;IACAE,OAAA;IACAH,cAAA;IACAwB,sBAAA,EAAwBjC;EAC1B;EAEA,MAAMkC,WAAA,GAAcrC,2BAAA,CAA4BW,QAAA,EAAU;IACxDF,GAAA,EAAKR,aAAA,CAAc+B,YAAA,EAAcvB,GAAA;IACjC6B,SAAA,EAAWvC,YAAA,CAAaW,MAAA,CAAO6B,YAAY,EAAE7B,MAAA,CAAO8B,gBAAgB,EAAE7B,QAAA,CAASH,KAAK,CAAC8B,SAAS;EAChG;EAEA,oBACExC,KAAA,CAAA2C,aAAA,CAACvC,eAAA,CAAgBwC,QAAQ;IACvBC,KAAA,EAAO;MACLxB,cAAA;MACAE,eAAA;MACAL,WAAA;MACAiB,YAAA;MACAC,cAAA;MACAC;IACF;KAECE,WAAA;AAGP"}

package/lib/components/OverflowItem/OverflowItem.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
+import { useOverflowItem } from '../../useOverflowItem';
+/**
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
+ * It does not render an element of its own.
+ */
+export const OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    id,
+    groupId,
+    priority,
+    children
+  } = props;
+  const containerRef = useOverflowItem(id, priority, groupId);
+  return applyTriggerPropsToChildren(children, {
+    ref: useMergedRefs(containerRef, ref)
+  });
+});
+//# sourceMappingURL=OverflowItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef"],"sources":["../../../src/components/OverflowItem/OverflowItem.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAC3D,SAASC,eAAe,QAAQ;AAGhC;;;;AAIA,OAAO,MAAMC,YAAA,gBAAeJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAA0BC,GAAA,KAAQ;EAC9E,MAAM;IAAEC,EAAA;IAAIC,OAAA;IAASC,QAAA;IAAUC;EAAQ,CAAE,GAAGL,KAAA;EAE5C,MAAMM,YAAA,GAAeT,eAAA,CAAgBK,EAAA,EAAIE,QAAA,EAAUD,OAAA;EACnD,OAAOR,2BAAA,CAA4BU,QAAA,EAAU;IAC3CJ,GAAA,EAAKL,aAAA,CAAcU,YAAA,EAAcL,GAAA;EACnC;AACF"}

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+//# sourceMappingURL=OverflowItem.types.js.map

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

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

package/lib/components/OverflowItem/index.js

@@ -0,0 +1,2 @@
+export { OverflowItem } from './OverflowItem';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["OverflowItem"],"sources":["../../../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"mappings":"AACA,SAASA,YAAY,QAAQ"}

package/lib/components/useOverflowStyles.styles.js

@@ -0,0 +1,13 @@
+import { __styles } from '@griffel/react';
+import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
+export const useOverflowStyles = /*#__PURE__*/__styles({
+  overflowMenu: {
+    Brvla84: "fyfkpbf"
+  },
+  overflowingItems: {
+    zb22lx: "f10570jf"
+  }
+}, {
+  d: [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10570jf [data-overflowing]{display:none;}"]
+});
+//# sourceMappingURL=useOverflowStyles.styles.js.map

package/lib/components/useOverflowStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"sources":["../../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n  overflowMenu: {\n    [`& [${DATA_OVERFLOW_MENU}]`]: {\n      flexShrink: 0,\n    },\n  },\n\n  overflowingItems: {\n    [`& [${DATA_OVERFLOWING}]`]: {\n      display: 'none',\n    },\n  },\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B;AAC3B,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ;AAErD,OAAO,MAAMC,iBAAA,gBAAoBH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAYjC"}

package/lib/constants.js

@@ -0,0 +1,4 @@
+export const DATA_OVERFLOWING = 'data-overflowing';
+export const DATA_OVERFLOW_ITEM = 'data-overflow-item';
+export const DATA_OVERFLOW_MENU = 'data-overflow-menu';
+//# sourceMappingURL=constants.js.map

package/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"mappings":"AAAA,OAAO,MAAMA,gBAAA,GAAmB;AAChC,OAAO,MAAMC,kBAAA,GAAqB;AAClC,OAAO,MAAMC,kBAAA,GAAqB"}

package/lib/index.js

@@ -0,0 +1,11 @@
+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 { useOverflowContainer } from './useOverflowContainer';
+export { useOverflowCount } from './useOverflowCount';
+export { useOverflowItem } from './useOverflowItem';
+export { useOverflowMenu } from './useOverflowMenu';
+export { useOverflowContext } from './overflowContext';
+export { OverflowItem } from './components/OverflowItem/OverflowItem';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowContext","OverflowItem"],"sources":["../src/index.ts"],"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 { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ;AAEzB,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ;AAEzE,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,wBAAwB,QAAQ;AACzC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,eAAe,QAAQ;AAChC,SAASC,eAAe,QAAQ;AAEhC,SAASC,kBAAkB,QAAQ;AAGnC,SAASC,YAAY,QAAQ"}

package/lib/overflowContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const OverflowContext = /*#__PURE__*/createContext(undefined);
+const overflowContextDefaultValue = {
+  itemVisibility: {},
+  groupVisibility: {},
+  hasOverflow: false,
+  registerItem: () => () => null,
+  updateOverflow: () => null,
+  registerOverflowMenu: () => () => null
+};
+/**
+ * @internal
+ */
+export const useOverflowContext = selector => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));
+//# sourceMappingURL=overflowContext.js.map

package/lib/overflowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"sources":["../src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\n/**\n * @internal\n */\nexport interface OverflowContextValue {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n  hasOverflow: boolean;\n  registerItem: (item: OverflowItemEntry) => () => void;\n  registerOverflowMenu: (el: HTMLElement) => () => void;\n  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n  undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n  registerOverflowMenu: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB;AAc5E,OAAO,MAAMC,eAAA,gBAAkBF,aAAA,CAC7BG,SAAA;AAGF,MAAMC,2BAAA,GAAoD;EACxDC,cAAA,EAAgB,CAAC;EACjBC,eAAA,EAAiB,CAAC;EAClBC,WAAA,EAAa,KAAK;EAClBC,YAAA,EAAcA,CAAA,KAAM,MAAM,IAAI;EAC9BC,cAAA,EAAgBA,CAAA,KAAM,IAAI;EAC1BC,oBAAA,EAAsBA,CAAA,KAAM,MAAM;AACpC;AAEA;;;AAGA,OAAO,MAAMC,kBAAA,GAAqCC,QAAA,IAChDX,kBAAA,CAAmBC,eAAA,EAAiB,CAACW,GAAA,GAAMT,2BAA2B,KAAKQ,QAAA,CAASC,GAAA"}

package/lib/types.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

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

package/lib/useIsOverflowGroupVisible.js

@@ -0,0 +1,9 @@
+import { useOverflowContext } from './overflowContext';
+/**
+ * @param id - unique identifier for a group of overflow items
+ * @returns visibility state of the group
+ */
+export function useIsOverflowGroupVisible(id) {
+  return useOverflowContext(ctx => ctx.groupVisibility[id]);
+}
+//# sourceMappingURL=useIsOverflowGroupVisible.js.map

package/lib/useIsOverflowGroupVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"sources":["../src/useIsOverflowGroupVisible.ts"],"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"],"mappings":"AACA,SAASA,kBAAkB,QAAQ;AAEnC;;;;AAIA,OAAO,SAASC,0BAA0BC,EAAU,EAAsB;EACxE,OAAOF,kBAAA,CAAmBG,GAAA,IAAOA,GAAA,CAAIC,eAAe,CAACF,EAAA,CAAG;AAC1D"}

package/lib/useIsOverflowItemVisible.js

@@ -0,0 +1,9 @@
+import { useOverflowContext } from './overflowContext';
+/**
+ * @param id - unique identifier for the item used by the overflow manager
+ * @returns visibility state of an overflow item
+ */
+export function useIsOverflowItemVisible(id) {
+  return !!useOverflowContext(ctx => ctx.itemVisibility[id]);
+}
+//# sourceMappingURL=useIsOverflowItemVisible.js.map

package/lib/useIsOverflowItemVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"sources":["../src/useIsOverflowItemVisible.ts"],"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"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ;AAEnC;;;;AAIA,OAAO,SAASC,yBAAyBC,EAAU,EAAW;EAC5D,OAAO,CAAC,CAACF,kBAAA,CAAmBG,GAAA,IAAOA,GAAA,CAAIC,cAAc,CAACF,EAAA,CAAG;AAC3D"}

package/lib/useOverflowContainer.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { createOverflowManager } from '@fluentui/priority-overflow';
+import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } 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
+ */
+export const useOverflowContainer = (update, options) => {
+  const {
+    overflowAxis,
+    overflowDirection,
+    padding,
+    minimumVisible,
+    onUpdateItemVisibility
+  } = options;
+  // DOM ref to the overflow container element
+  const containerRef = React.useRef(null);
+  const updateOverflowItems = useEventCallback(update);
+  const [overflowManager] = React.useState(() => canUseDOM() ? createOverflowManager() : null);
+  useIsomorphicLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    if (overflowManager) {
+      overflowManager.observe(containerRef.current, {
+        overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
+        overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
+        padding: padding !== null && padding !== void 0 ? padding : 10,
+        minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
+        onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => 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 === 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 === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
+    };
+  }, [overflowManager]);
+  const updateOverflow = React.useCallback(() => {
+    overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
+  }, [overflowManager]);
+  const registerOverflowMenu = React.useCallback(el => {
+    overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
+    el.setAttribute(DATA_OVERFLOW_MENU, '');
+    return () => {
+      overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
+      el.removeAttribute(DATA_OVERFLOW_MENU);
+    };
+  }, [overflowManager]);
+  return {
+    containerRef,
+    registerItem,
+    updateOverflow,
+    registerOverflowMenu
+  };
+};
+export const updateVisibilityAttribute = ({
+  item,
+  visible
+}) => {
+  if (visible) {
+    item.element.removeAttribute(DATA_OVERFLOWING);
+  } else {
+    item.element.setAttribute(DATA_OVERFLOWING, '');
+  }
+};
+//# sourceMappingURL=useOverflowContainer.js.map

package/lib/useOverflowContainer.js.map

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

package/lib/useOverflowCount.js

@@ -0,0 +1,13 @@
+import { useOverflowContext } from './overflowContext';
+/**
+ * @returns Number of items that are overflowing
+ */
+export const useOverflowCount = () => useOverflowContext(v => {
+  return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
+    if (!visible) {
+      acc++;
+    }
+    return acc;
+  }, 0);
+});
+//# sourceMappingURL=useOverflowCount.js.map

package/lib/useOverflowCount.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"sources":["../src/useOverflowCount.ts"],"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"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ;AAEnC;;;AAGA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAC9BD,kBAAA,CAAmBE,CAAA,IAAK;EACtB,OAAOC,MAAA,CAAOC,OAAO,CAACF,CAAA,CAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,GAAA,EAAK,CAACC,EAAA,EAAIC,OAAA,CAAQ,KAAK;IACrE,IAAI,CAACA,OAAA,EAAS;MACZF,GAAA;IACF;IAEA,OAAOA,GAAA;EACT,GAAG;AACL"}

package/lib/useOverflowItem.js

@@ -0,0 +1,27 @@
+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
+ * @param groupId - assigns the item to a group, group visibility can be watched
+ * @returns ref to assign to an intrinsic HTML element
+ */
+export function useOverflowItem(id, priority, groupId) {
+  const ref = React.useRef(null);
+  const registerItem = useOverflowContext(v => v.registerItem);
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      return registerItem({
+        element: ref.current,
+        id,
+        priority: priority !== null && priority !== void 0 ? priority : 0,
+        groupId
+      });
+    }
+  }, [id, priority, registerItem, groupId]);
+  return ref;
+}
+//# sourceMappingURL=useOverflowItem.js.map

package/lib/useOverflowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"sources":["../src/useOverflowItem.ts"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;AAQA,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB,EAAE;EAC7G,MAAMC,GAAA,GAAMP,KAAA,CAAMQ,MAAM,CAAW,IAAI;EACvC,MAAMC,YAAA,GAAeP,kBAAA,CAAmBQ,CAAA,IAAKA,CAAA,CAAED,YAAY;EAE3DR,yBAAA,CAA0B,MAAM;IAC9B,IAAIM,GAAA,CAAII,OAAO,EAAE;MACf,OAAOF,YAAA,CAAa;QAClBG,OAAA,EAASL,GAAA,CAAII,OAAO;QACpBP,EAAA;QACAC,QAAA,EAAUA,QAAA,aAAAA,QAAA,cAAAA,QAAA,GAAY,CAAC;QACvBC;MACF;IACF;EACF,GAAG,CAACF,EAAA,EAAIC,QAAA,EAAUI,YAAA,EAAcH,OAAA,CAAQ;EAExC,OAAOC,GAAA;AACT"}

package/lib/useOverflowMenu.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useOverflowContext } from './overflowContext';
+import { useOverflowCount } from './useOverflowCount';
+export function useOverflowMenu(id) {
+  const elementId = useId('overflow-menu', id);
+  const overflowCount = useOverflowCount();
+  const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);
+  const updateOverflow = useOverflowContext(v => v.updateOverflow);
+  const ref = React.useRef(null);
+  const isOverflowing = overflowCount > 0;
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      return registerOverflowMenu(ref.current);
+    }
+  }, [registerOverflowMenu, isOverflowing, elementId]);
+  useIsomorphicLayoutEffect(() => {
+    if (isOverflowing) {
+      updateOverflow();
+    }
+  }, [isOverflowing, updateOverflow, ref]);
+  return {
+    ref,
+    overflowCount,
+    isOverflowing
+  };
+}
+//# sourceMappingURL=useOverflowMenu.js.map

package/lib/useOverflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerOverflowMenu(ref.current);\n    }\n  }, [registerOverflowMenu, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,KAAK,EAAEC,yBAAyB,QAAQ;AACjD,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AAEjC,OAAO,SAASC,gBAA8CC,EAAW,EAAE;EACzE,MAAMC,SAAA,GAAYN,KAAA,CAAM,iBAAiBK,EAAA;EACzC,MAAME,aAAA,GAAgBJ,gBAAA;EACtB,MAAMK,oBAAA,GAAuBN,kBAAA,CAAmBO,CAAA,IAAKA,CAAA,CAAED,oBAAoB;EAC3E,MAAME,cAAA,GAAiBR,kBAAA,CAAmBO,CAAA,IAAKA,CAAA,CAAEC,cAAc;EAC/D,MAAMC,GAAA,GAAMZ,KAAA,CAAMa,MAAM,CAAW,IAAI;EACvC,MAAMC,aAAA,GAAgBN,aAAA,GAAgB;EAEtCN,yBAAA,CAA0B,MAAM;IAC9B,IAAIU,GAAA,CAAIG,OAAO,EAAE;MACf,OAAON,oBAAA,CAAqBG,GAAA,CAAIG,OAAO;IACzC;EACF,GAAG,CAACN,oBAAA,EAAsBK,aAAA,EAAeP,SAAA,CAAU;EAEnDL,yBAAA,CAA0B,MAAM;IAC9B,IAAIY,aAAA,EAAe;MACjBH,cAAA;IACF;EACF,GAAG,CAACG,aAAA,EAAeH,cAAA,EAAgBC,GAAA,CAAI;EAEvC,OAAO;IAAEA,GAAA;IAAKJ,aAAA;IAAeM;EAAc;AAC7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "0.0.0-nightly-20230502-0418.1",
+  "version": "0.0.0-nightly-20230503-0419.1",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,10 +33,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/priority-overflow": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/priority-overflow": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230503-0419.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },