@fluentui/react-overflow 9.0.18 → 9.0.20

package/CHANGELOG.json

@@ -2,7 +2,81 @@
   "name": "@fluentui/react-overflow",
   "entries": [
     {
-      "date": "Thu, 25 May 2023 09:57:45 GMT",
+      "date": "Tue, 20 Jun 2023 12:34:44 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.20",
+      "version": "9.0.20",
+      "comments": {
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "cbdfdd61ae2ea8954fad2eb53d62c2b036416101",
+            "comment": "chore: update E2E tests"
+          }
+        ],
+        "patch": [
+          {
+            "author": "vkozlova@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "4dedf40597f3b5cfa63d8f2e28a79276eb816bda",
+            "comment": "Added support for custom divider"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v9.1.0",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.23",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-theme to v9.1.9",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-utilities to v9.9.3",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 31 May 2023 06:46:16 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.19",
+      "version": "9.0.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
+            "comment": "chore: Update Griffel to v1.5.7."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.22",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-utilities to v9.9.2",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 May 2023 10:00:48 GMT",
       "tag": "@fluentui/react-overflow_v9.0.18",
       "version": "9.0.18",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Jun 2023 12:34:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.20)
+
+Tue, 20 Jun 2023 12:34:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.19..@fluentui/react-overflow_v9.0.20)
+
+### Patches
+
+- Added support for custom divider ([PR #28011](https://github.com/microsoft/fluentui/pull/28011) by vkozlova@microsoft.com)
+- Bump @fluentui/priority-overflow to v9.1.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+
+## [9.0.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.19)
+
+Wed, 31 May 2023 06:46:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.18..@fluentui/react-overflow_v9.0.19)
+
+### Patches
+
+- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+
 ## [9.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.18)
 
-Thu, 25 May 2023 09:57:45 GMT 
+Thu, 25 May 2023 10:00:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.17..@fluentui/react-overflow_v9.0.18)
 
 ### Patches

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 import { ContextSelector } from '@fluentui/react-context-selector';
 import type { ObserveOptions } from '@fluentui/priority-overflow';
 import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
+import type { OverflowDividerEntry } 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_DIVIDER = "data-overflow-divider";
+
 export declare const DATA_OVERFLOW_ITEM = "data-overflow-item";
 
 export declare const DATA_OVERFLOW_MENU = "data-overflow-menu";
@@ -27,9 +30,30 @@ declare interface OverflowContextValue {
     hasOverflow: boolean;
     registerItem: (item: OverflowItemEntry) => () => void;
     registerOverflowMenu: (el: HTMLElement) => () => void;
+    registerDivider: (divider: OverflowDividerEntry) => () => 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 OverflowDivider: React_2.ForwardRefExoticComponent<OverflowDividerProps & React_2.RefAttributes<unknown>>;
+
+/**
+ * OverflowDividerProps
+ */
+declare type OverflowDividerProps = {
+    /**
+     * Assigns the item to a group, group visibility can be watched.
+     */
+    groupId: string;
+    /**
+     * The single child that has overflow item behavior attached.
+     */
+    children: React_2.ReactElement;
+};
+
 /**
  * Attaches overflow item behavior to its child registered with the OverflowContext.
  * It does not render an element of its own.
@@ -88,7 +112,7 @@ export declare const useOverflowContainer: <TElement extends HTMLElement>(update
 /**
  * @internal
  */
-export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {
+export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu' | 'registerDivider'> {
     /**
      * Ref to apply to the container that will overflow
      */
@@ -105,6 +129,14 @@ export declare const useOverflowContext: <SelectedValue>(selector: ContextSelect
  */
 export declare const useOverflowCount: () => number;
 
+/**
+ * @internal
+ * Registers an overflow item
+ * @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 useOverflowDivider<TElement extends HTMLElement>(groupId?: string): React_2.RefObject<TElement>;
+
 /**
  * @internal
  * Registers an overflow item

package/lib/components/Overflow.js

@@ -6,64 +6,50 @@ import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowC
 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 [overflowState, setOverflowState] = React.useState({
-    hasOverflow: false,
-    itemVisibility: {},
-    groupVisibility: {}
-  });
-  // useOverflowContainer wraps this method in a useEventCallback.
-  const update = data => {
-    const {
-      visibleItems,
-      invisibleItems,
-      groupVisibility
-    } = data;
-    const itemVisibility = {};
-    visibleItems.forEach(x => itemVisibility[x.id] = true);
-    invisibleItems.forEach(x => itemVisibility[x.id] = false);
-    setOverflowState(() => {
-      return {
-        hasOverflow: data.invisibleItems.length > 0,
-        itemVisibility,
-        groupVisibility
-      };
+ */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const styles = useOverflowStyles();
+    const { children , minimumVisible , overflowAxis ='horizontal' , overflowDirection , padding  } = props;
+    const [overflowState, setOverflowState] = React.useState({
+        hasOverflow: false,
+        itemVisibility: {},
+        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: overflowState.itemVisibility,
-      groupVisibility: overflowState.groupVisibility,
-      hasOverflow: overflowState.hasOverflow,
-      registerItem,
-      updateOverflow,
-      registerOverflowMenu
-    }
-  }, clonedChild);
+    // useOverflowContainer wraps this method in a useEventCallback.
+    const update = (data)=>{
+        const { visibleItems , invisibleItems , groupVisibility  } = data;
+        const itemVisibility = {};
+        visibleItems.forEach((item)=>{
+            itemVisibility[item.id] = true;
+        });
+        invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
+        setOverflowState(()=>{
+            return {
+                hasOverflow: data.invisibleItems.length > 0,
+                itemVisibility,
+                groupVisibility
+            };
+        });
+    };
+    const { containerRef , registerItem , updateOverflow , registerOverflowMenu , registerDivider  } = 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: overflowState.itemVisibility,
+            groupVisibility: overflowState.groupVisibility,
+            hasOverflow: overflowState.hasOverflow,
+            registerItem,
+            updateOverflow,
+            registerOverflowMenu,
+            registerDivider
+        }
+    }, clonedChild);
 });
-//# sourceMappingURL=Overflow.js.map

package/lib/components/Overflow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","x","id","length","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\ninterface OverflowState {\n  hasOverflow: boolean;\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\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 = useOverflowStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [overflowState, setOverflowState] = React.useState<OverflowState>({\n    hasOverflow: false,\n    itemVisibility: {},\n    groupVisibility: {},\n  });\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  const update: OnUpdateOverflow = data => {\n    const { visibleItems, invisibleItems, groupVisibility } = data;\n\n    const itemVisibility: Record<string, boolean> = {};\n    visibleItems.forEach(x => (itemVisibility[x.id] = true));\n    invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n    setOverflowState(() => {\n      return {\n        hasOverflow: data.invisibleItems.length > 0,\n        itemVisibility,\n        groupVisibility,\n      };\n    });\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: overflowState.itemVisibility,\n        groupVisibility: overflowState.groupVisibility,\n        hasOverflow: overflowState.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;AAiBlC;;;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,aAAA,EAAeC,gBAAA,CAAiB,GAAGnB,KAAA,CAAMoB,QAAQ,CAAgB;IACtEC,WAAA,EAAa,KAAK;IAClBC,cAAA,EAAgB,CAAC;IACjBC,eAAA,EAAiB,CAAC;EACpB;EAEA;EACA,MAAMC,MAAA,GAA2BC,IAAA,IAAQ;IACvC,MAAM;MAAEC,YAAA;MAAcC,cAAA;MAAgBJ;IAAe,CAAE,GAAGE,IAAA;IAE1D,MAAMH,cAAA,GAA0C,CAAC;IACjDI,YAAA,CAAaE,OAAO,CAACC,CAAA,IAAMP,cAAc,CAACO,CAAA,CAAEC,EAAE,CAAC,GAAG,IAAI;IACtDH,cAAA,CAAeC,OAAO,CAACC,CAAA,IAAMP,cAAc,CAACO,CAAA,CAAEC,EAAE,CAAC,GAAG,KAAK;IAEzDX,gBAAA,CAAiB,MAAM;MACrB,OAAO;QACLE,WAAA,EAAaI,IAAA,CAAKE,cAAc,CAACI,MAAM,GAAG;QAC1CT,cAAA;QACAC;MACF;IACF;EACF;EAEA,MAAM;IAAES,YAAA;IAAcC,YAAA;IAAcC,cAAA;IAAgBC;EAAoB,CAAE,GAAG7B,oBAAA,CAAqBkB,MAAA,EAAQ;IACxGR,iBAAA;IACAD,YAAA;IACAE,OAAA;IACAH,cAAA;IACAsB,sBAAA,EAAwB/B;EAC1B;EAEA,MAAMgC,WAAA,GAAcnC,2BAAA,CAA4BW,QAAA,EAAU;IACxDF,GAAA,EAAKR,aAAA,CAAc6B,YAAA,EAAcrB,GAAA;IACjC2B,SAAA,EAAWrC,YAAA,CAAaW,MAAA,CAAO2B,YAAY,EAAE3B,MAAA,CAAO4B,gBAAgB,EAAE3B,QAAA,CAASH,KAAK,CAAC4B,SAAS;EAChG;EAEA,oBACEtC,KAAA,CAAAyC,aAAA,CAACrC,eAAA,CAAgBsC,QAAQ;IACvBC,KAAA,EAAO;MACLrB,cAAA,EAAgBJ,aAAA,CAAcI,cAAc;MAC5CC,eAAA,EAAiBL,aAAA,CAAcK,eAAe;MAC9CF,WAAA,EAAaH,aAAA,CAAcG,WAAW;MACtCY,YAAA;MACAC,cAAA;MACAC;IACF;KAECE,WAAA;AAGP"}
+{"version":3,"sources":["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\ninterface OverflowState {\n  hasOverflow: boolean;\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\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 = useOverflowStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [overflowState, setOverflowState] = React.useState<OverflowState>({\n    hasOverflow: false,\n    itemVisibility: {},\n    groupVisibility: {},\n  });\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  const update: OnUpdateOverflow = data => {\n    const { visibleItems, invisibleItems, groupVisibility } = data;\n\n    const itemVisibility: Record<string, boolean> = {};\n    visibleItems.forEach(item => {\n      itemVisibility[item.id] = true;\n    });\n    invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n    setOverflowState(() => {\n      return {\n        hasOverflow: data.invisibleItems.length > 0,\n        itemVisibility,\n        groupVisibility,\n      };\n    });\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n    update,\n    {\n      overflowDirection,\n      overflowAxis,\n      padding,\n      minimumVisible,\n      onUpdateItemVisibility: updateVisibilityAttribute,\n    },\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: overflowState.itemVisibility,\n        groupVisibility: overflowState.groupVisibility,\n        hasOverflow: overflowState.hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n        registerDivider,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AAEvF,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWR,MAAMS,UAAU,CAAC,CAACC,OAAsBC,MAAQ;IACtE,MAAMC,SAASL;IAEf,MAAM,EAAEM,SAAQ,EAAEC,eAAc,EAAEC,cAAe,aAAY,EAAEC,kBAAiB,EAAEC,QAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGnB,MAAMoB,QAAQ,CAAgB;QACtEC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA,OAAQ;QACvC,MAAM,EAAEC,aAAY,EAAEC,eAAc,EAAEJ,gBAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA,OAAQ;YAC3BP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG,IAAI;QAChC;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG,KAAK;QAEzDX,iBAAiB,IAAM;YACrB,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,aAAY,EAAEC,aAAY,EAAEC,eAAc,EAAEC,qBAAoB,EAAEC,gBAAe,EAAE,GAAG/B,qBAC5FkB,QACA;QACER;QACAD;QACAE;QACAH;QACAwB,wBAAwBjC;IAC1B;IAGF,MAAMkC,cAAcrC,4BAA4BW,UAAU;QACxDF,KAAKR,cAAc8B,cAActB;QACjC6B,WAAWvC,aAAaW,OAAO6B,YAAY,EAAE7B,OAAO8B,gBAAgB,EAAE7B,SAASH,KAAK,CAAC8B,SAAS;IAChG;IAEA,qBACE,oBAACpC,gBAAgBuC,QAAQ;QACvBC,OAAO;YACLtB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACF;OAECE;AAGP,GAAG"}

package/lib/components/OverflowDivider/OverflowDivider.js

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

package/lib/components/OverflowDivider/OverflowDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["OverflowDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.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 OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n  const { groupId, children } = props;\n\n  const containerRef = useOverflowDivider(groupId);\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n  });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;CAGC,GACD,OAAO,MAAMC,gCAAkBJ,MAAMK,UAAU,CAAC,CAACC,OAA6BC,MAAQ;IACpF,MAAM,EAAEC,QAAO,EAAEC,SAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeP,mBAAmBK;IACxC,OAAOP,4BAA4BQ,UAAU;QAC3CF,KAAKL,cAAcQ,cAAcH;IACnC;AACF,GAAG"}

package/lib/components/OverflowDivider/OverflowDivider.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["OverflowDivider.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowDividerProps\n */\nexport type OverflowDividerProps = {\n  /**\n   * Assigns the item to a group, group visibility can be watched.\n   */\n  groupId: string;\n  /**\n   * The single child that has overflow item behavior attached.\n   */\n  children: React.ReactElement;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/OverflowItem/OverflowItem.js

@@ -4,17 +4,10 @@ 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)
-  });
+ */ 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

@@ -1 +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"}
+{"version":3,"sources":["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"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;CAGC,GACD,OAAO,MAAMC,6BAAeJ,MAAMK,UAAU,CAAC,CAACC,OAA0BC,MAAQ;IAC9E,MAAM,EAAEC,GAAE,EAAEC,QAAO,EAAEC,SAAQ,EAAEC,SAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeT,gBAAgBK,IAAIE,UAAUD;IACnD,OAAOR,4BAA4BU,UAAU;QAC3CJ,KAAKL,cAAcU,cAAcL;IACnC;AACF,GAAG"}

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

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

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

@@ -1 +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"}
+{"version":3,"sources":["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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/OverflowItem/index.js

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

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

@@ -1 +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"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB"}

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

@@ -1 +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"}
+{"version":3,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"sources":["useOverflowStyles.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n    overflowMenu: {\n        [`& [${DATA_OVERFLOW_MENU}]`]: {\n            flexShrink: 0\n        }\n    },\n    overflowingItems: {\n        [`& [${DATA_OVERFLOWING}]`]: {\n            display: 'none'\n        }\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,cAAc;AACnE,OAAO,MAAMC,iBAAiB,gBAAGH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWhC,CAAC"}

package/lib/constants.js

@@ -1,4 +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
+export const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';

package/lib/constants.js.map

@@ -1 +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"}
+{"version":3,"sources":["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';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,mBAAmB;AACnD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,wBAAwB,wBAAwB"}

package/lib/index.js

@@ -1,11 +1,12 @@
 export { Overflow } from './components/Overflow';
-export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
+export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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 { useOverflowDivider } from './useOverflowDivider';
 export { useOverflowContext } from './overflowContext';
 export { OverflowItem } from './components/OverflowItem/OverflowItem';
-//# sourceMappingURL=index.js.map
+export { OverflowDivider } from './components/OverflowDivider/OverflowDivider';

package/lib/index.js.map

@@ -1 +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"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}

package/lib/overflowContext.js

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

package/lib/overflowContext.js.map

@@ -1 +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"}
+{"version":3,"sources":["overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } 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  registerDivider: (divider: OverflowDividerEntry) => () => void;\n  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n  undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n  registerOverflowMenu: () => () => null,\n  registerDivider: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContext","selector","ctx"],"mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB,mCAAmC;AAe/G,OAAO,MAAMC,kBAAkBF,cAC7BG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa,KAAK;IAClBC,cAAc,IAAM,IAAM,IAAI;IAC9BC,gBAAgB,IAAM,IAAI;IAC1BC,sBAAsB,IAAM,IAAM,IAAI;IACtCC,iBAAiB,IAAM,IAAM,IAAI;AACnC;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAgBC,WAChDZ,mBAAmBC,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}

package/lib/types.js

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

package/lib/types.js.map

@@ -1 +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"}
+{"version":3,"sources":["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' | 'registerDivider'> {\n  /**\n   * Ref to apply to the container that will overflow\n   */\n  containerRef: React.RefObject<TElement>;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/useIsOverflowGroupVisible.js

@@ -2,8 +2,6 @@ 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]);
+ */ export function useIsOverflowGroupVisible(id) {
+    return useOverflowContext((ctx)=>ctx.groupVisibility[id]);
 }
-//# sourceMappingURL=useIsOverflowGroupVisible.js.map

package/lib/useIsOverflowGroupVisible.js.map

@@ -1 +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"}
+{"version":3,"sources":["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"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"mappings":"AACA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;;CAGC,GACD,OAAO,SAASC,0BAA0BC,EAAU,EAAsB;IACxE,OAAOF,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe,CAACF,GAAG;AAC1D,CAAC"}

package/lib/useIsOverflowItemVisible.js

@@ -2,8 +2,6 @@ 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]);
+ */ export function useIsOverflowItemVisible(id) {
+    return !!useOverflowContext((ctx)=>ctx.itemVisibility[id]);
 }
-//# sourceMappingURL=useIsOverflowItemVisible.js.map

package/lib/useIsOverflowItemVisible.js.map

@@ -1 +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"}
+{"version":3,"sources":["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"],"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;;CAGC,GACD,OAAO,SAASC,yBAAyBC,EAAU,EAAW;IAC5D,OAAO,CAAC,CAACF,mBAAmBG,CAAAA,MAAOA,IAAIC,cAAc,CAACF,GAAG;AAC3D,CAAC"}