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

package/CHANGELOG.json

@@ -2,7 +2,48 @@
   "name": "@fluentui/react-overflow",
   "entries": [
     {
-      "date": "Wed, 21 Dec 2022 10:17:16 GMT",
+      "date": "Wed, 04 Jan 2023 01:35:35 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.0-rc.5",
+      "version": "9.0.0-rc.5",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
+            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
+            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.4",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-utilities to v9.3.1",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Dec 2022 10:20:33 GMT",
       "tag": "@fluentui/react-overflow_v9.0.0-rc.4",
       "version": "9.0.0-rc.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Wed, 21 Dec 2022 10:17:16 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Jan 2023 01:35:35 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.5)
+
+Wed, 04 Jan 2023 01:35:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.4..@fluentui/react-overflow_v9.0.0-rc.5)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
 ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.4)
 
-Wed, 21 Dec 2022 10:17:16 GMT 
+Wed, 21 Dec 2022 10:20:33 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.3..@fluentui/react-overflow_v9.0.0-rc.4)
 
 ### Changes

package/lib/components/Overflow.js

@@ -4,22 +4,19 @@ import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-util
 import { OverflowContext } from '../overflowContext';
 import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
 import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
-
 const useStyles = /*#__PURE__*/__styles({
-  "overflowMenu": {
-    "Brvla84": "fyfkpbf"
+  overflowMenu: {
+    Brvla84: "fyfkpbf"
   },
-  "overflowingItems": {
-    "Hevnzl": "ftz08xh"
+  overflowingItems: {
+    Hevnzl: "ftz08xh"
   }
 }, {
-  "d": [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
+  d: [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
 });
 /**
  * Provides an OverflowContext for OverflowItem descendants.
  */
-
-
 export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
   const styles = useStyles();
   const {
@@ -31,9 +28,9 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const [hasOverflow, setHasOverflow] = React.useState(false);
   const [itemVisibility, setItemVisibility] = React.useState({});
-  const [groupVisibility, setGroupVisibility] = React.useState({}); // useOverflowContainer wraps this method in a useEventCallback.
+  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(() => {
@@ -44,7 +41,6 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
     setGroupVisibility(data.groupVisibility);
   };
-
   const {
     containerRef,
     registerItem,

package/lib/components/Overflow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/components/Overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAEA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AAEA,SAAS,eAAT,QAAgC,oBAAhC;AACA,SAAS,yBAAT,EAAoC,oBAApC,QAAgE,yBAAhE;AACA,SAAS,gBAAT,EAA2B,kBAA3B,QAAqD,cAArD;;AAEA,MAAM,SAAS,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM;IAAE,QAAF;IAAY,cAAZ;IAA4B,YAAY,GAAG,YAA3C;IAAyD,iBAAzD;IAA4E;EAA5E,IAAwF,KAA9F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;EACA;;EACA,MAAM,MAAM,GAAqB,IAAI,IAAG;IACtC,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;IACA,iBAAiB,CAAC,MAAK;MACrB,MAAM,QAAQ,GAA4B,EAA1C;MACA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;MACA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;MACA,OAAO,QAAP;IACD,CALgB,CAAjB;IAMA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;EACD,CATD;;EAWA,MAAM;IAAE,YAAF;IAAgB,YAAhB;IAA8B,cAA9B;IAA8C;EAA9C,IAAuE,oBAAoB,CAAC,MAAD,EAAS;IACxG,iBADwG;IAExG,YAFwG;IAGxG,OAHwG;IAIxG,cAJwG;IAKxG,sBAAsB,EAAE;EALgF,CAAT,CAAjG;EAQA,MAAM,WAAW,GAAG,2BAA2B,CAAC,QAAD,EAAW;IACxD,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf,CADsC;IAExD,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,YAAR,EAAsB,MAAM,CAAC,gBAA7B,EAA+C,QAAQ,CAAC,KAAT,CAAe,SAA9D;EAFiC,CAAX,CAA/C;EAKA,oBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;IACvB,KAAK,EAAE;MACL,cADK;MAEL,eAFK;MAGL,WAHK;MAIL,YAJK;MAKL,cALK;MAML;IANK;EADgB,CAAzB,EAUG,WAVH,CADF;AAcD,CAjDuB,CAAjB","sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n  overflowMenu: {\n    [`& [${DATA_OVERFLOW_MENU}]`]: {\n      flexShrink: 0,\n    },\n  },\n\n  overflowingItems: {\n    [`& > [${DATA_OVERFLOWING}]`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n  children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [hasOverflow, setHasOverflow] = React.useState(false);\n  const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n  const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  // TODO: Do we need a useEventCallback here too?\n  const update: OnUpdateOverflow = data => {\n    setHasOverflow(() => data.invisibleItems.length > 0);\n    setItemVisibility(() => {\n      const newState: Record<string, boolean> = {};\n      data.visibleItems.forEach(x => (newState[x.id] = true));\n      data.invisibleItems.forEach(x => (newState[x.id] = false));\n      return newState;\n    });\n    setGroupVisibility(data.groupVisibility);\n  };\n\n  const { containerRef, registerItem, updateOverflow, 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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,mBAAqBC,YAAY,QAAQ,gBAAgB;AAEzD,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,2BAA2B;AAEtF,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,yBAAyB;AACzF,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,cAAc;AAEnE,MAAMC,SAAS,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAYhB;AAWF;;;AAGA,OAAO,MAAMC,QAAQ,gBAAGV,KAAK,CAACW,UAAU,CAAC,CAACC,KAAoB,EAAEC,GAAG,KAAI;EACrE,MAAMC,MAAM,GAAGL,SAAS,EAAE;EAE1B,MAAM;IAAEM,QAAQ;IAAEC,cAAc;IAAEC,YAAY,GAAG,YAAY;IAAEC,iBAAiB;IAAEC;EAAO,CAAE,GAAGP,KAAK;EAEnG,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAGrB,KAAK,CAACsB,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGxB,KAAK,CAACsB,QAAQ,CAA0B,EAAE,CAAC;EACvF,MAAM,CAACG,eAAe,EAAEC,kBAAkB,CAAC,GAAG1B,KAAK,CAACsB,QAAQ,CAAqC,EAAE,CAAC;EAEpG;EACA;EACA,MAAMK,MAAM,GAAqBC,IAAI,IAAG;IACtCP,cAAc,CAAC,MAAMO,IAAI,CAACC,cAAc,CAACC,MAAM,GAAG,CAAC,CAAC;IACpDN,iBAAiB,CAAC,MAAK;MACrB,MAAMO,QAAQ,GAA4B,EAAE;MAC5CH,IAAI,CAACI,YAAY,CAACC,OAAO,CAACC,CAAC,IAAKH,QAAQ,CAACG,CAAC,CAACC,EAAE,CAAC,GAAG,IAAK,CAAC;MACvDP,IAAI,CAACC,cAAc,CAACI,OAAO,CAACC,CAAC,IAAKH,QAAQ,CAACG,CAAC,CAACC,EAAE,CAAC,GAAG,KAAM,CAAC;MAC1D,OAAOJ,QAAQ;IACjB,CAAC,CAAC;IACFL,kBAAkB,CAACE,IAAI,CAACH,eAAe,CAAC;EAC1C,CAAC;EAED,MAAM;IAAEW,YAAY;IAAEC,YAAY;IAAEC,cAAc;IAAEC;EAAoB,CAAE,GAAGjC,oBAAoB,CAACqB,MAAM,EAAE;IACxGT,iBAAiB;IACjBD,YAAY;IACZE,OAAO;IACPH,cAAc;IACdwB,sBAAsB,EAAEnC;GACzB,CAAC;EAEF,MAAMoC,WAAW,GAAGvC,2BAA2B,CAACa,QAAQ,EAAE;IACxDF,GAAG,EAAEV,aAAa,CAACiC,YAAY,EAAEvB,GAAG,CAAC;IACrC6B,SAAS,EAAEzC,YAAY,CAACa,MAAM,CAAC6B,YAAY,EAAE7B,MAAM,CAAC8B,gBAAgB,EAAE7B,QAAQ,CAACH,KAAK,CAAC8B,SAAS;GAC/F,CAAC;EAEF,oBACE1C,oBAACI,eAAe,CAACyC,QAAQ;IACvBC,KAAK,EAAE;MACLvB,cAAc;MACdE,eAAe;MACfL,WAAW;MACXiB,YAAY;MACZC,cAAc;MACdC;;EACD,GAEAE,WAAW,CACa;AAE/B,CAAC,CAAC","names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useStyles","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","Provider","value"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n  overflowMenu: {\n    [`& [${DATA_OVERFLOW_MENU}]`]: {\n      flexShrink: 0,\n    },\n  },\n\n  overflowingItems: {\n    [`& > [${DATA_OVERFLOWING}]`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n  children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [hasOverflow, setHasOverflow] = React.useState(false);\n  const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n  const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  // TODO: Do we need a useEventCallback here too?\n  const update: OnUpdateOverflow = data => {\n    setHasOverflow(() => data.invisibleItems.length > 0);\n    setItemVisibility(() => {\n      const newState: Record<string, boolean> = {};\n      data.visibleItems.forEach(x => (newState[x.id] = true));\n      data.invisibleItems.forEach(x => (newState[x.id] = false));\n      return newState;\n    });\n    setGroupVisibility(data.groupVisibility);\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    onUpdateItemVisibility: updateVisibilityAttribute,\n  });\n\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n    className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility,\n        groupVisibility,\n        hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"]}

package/lib/components/OverflowItem/OverflowItem.js

@@ -5,7 +5,6 @@ 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,

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AACA,SAAS,eAAT,QAAgC,uBAAhC;AAGA;;;AAGG;;AACH,OAAO,MAAM,YAAY,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;EAC7E,MAAM;IAAE,EAAF;IAAM,OAAN;IAAe,QAAf;IAAyB;EAAzB,IAAsC,KAA5C;EAEA,MAAM,YAAY,GAAG,eAAe,CAAC,EAAD,EAAK,QAAL,EAAe,OAAf,CAApC;EACA,OAAO,2BAA2B,CAAC,QAAD,EAAW;IAC3C,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf;EADyB,CAAX,CAAlC;AAGD,CAP2B,CAArB","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n  const { id, groupId, priority, children } = props;\n\n  const containerRef = useOverflowItem(id, priority, groupId);\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n  });\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,2BAA2B;AACtF,SAASC,eAAe,QAAQ,uBAAuB;AAGvD;;;;AAIA,OAAO,MAAMC,YAAY,gBAAGJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAwB,EAAEC,GAAG,KAAI;EAC7E,MAAM;IAAEC,EAAE;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EAEjD,MAAMM,YAAY,GAAGT,eAAe,CAACK,EAAE,EAAEE,QAAQ,EAAED,OAAO,CAAC;EAC3D,OAAOR,2BAA2B,CAACU,QAAQ,EAAE;IAC3CJ,GAAG,EAAEL,aAAa,CAACU,YAAY,EAAEL,GAAG;GACrC,CAAC;AACJ,CAAC,CAAC","names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib/overflowContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/overflowContext.ts"],"names":[],"mappings":"AACA,SAA0B,aAA1B,EAAyC,kBAAzC,QAA4E,kCAA5E;AAWA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAC1C,SAD0C,CAArC;AAIP,MAAM,2BAA2B,GAAyB;EACxD,cAAc,EAAE,EADwC;EAExD,eAAe,EAAE,EAFuC;EAGxD,WAAW,EAAE,KAH2C;EAIxD,YAAY,EAAE,MAAM,MAAM,IAJ8B;EAKxD,cAAc,EAAE,MAAM,IALkC;EAMxD,oBAAoB,EAAE,MAAM,MAAM;AANsB,CAA1D;AASA,OAAO,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,kBAAkB,CAAC,eAAD,EAAkB,CAAC,GAAG,GAAG,2BAAP,KAAuC,QAAQ,CAAC,GAAD,CAAjE,CADb","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n  hasOverflow: boolean;\n  registerItem: (item: OverflowItemEntry) => () => void;\n  registerOverflowMenu: (el: HTMLElement) => () => void;\n  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n  undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n  registerOverflowMenu: () => () => null,\n};\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB,kCAAkC;AAW9G,OAAO,MAAMC,eAAe,gBAAGF,aAAa,CAC1CG,SAAS,CACuB;AAElC,MAAMC,2BAA2B,GAAyB;EACxDC,cAAc,EAAE,EAAE;EAClBC,eAAe,EAAE,EAAE;EACnBC,WAAW,EAAE,KAAK;EAClBC,YAAY,EAAE,MAAM,MAAM,IAAI;EAC9BC,cAAc,EAAE,MAAM,IAAI;EAC1BC,oBAAoB,EAAE,MAAM,MAAM;CACnC;AAED,OAAO,MAAMC,kBAAkB,GAAmBC,QAA8D,IAC9GX,kBAAkB,CAACC,eAAe,EAAE,CAACW,GAAG,GAAGT,2BAA2B,KAAKQ,QAAQ,CAACC,GAAG,CAAC,CAAC","names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n  hasOverflow: boolean;\n  registerItem: (item: OverflowItemEntry) => () => void;\n  registerOverflowMenu: (el: HTMLElement) => () => void;\n  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n  undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n  registerOverflowMenu: () => () => null,\n};\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"]}

package/lib/useIsOverflowGroupVisible.js

@@ -3,7 +3,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]);
 }

package/lib/useIsOverflowGroupVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useIsOverflowGroupVisible.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,yBAAV,CAAoC,EAApC,EAA8C;EAClD,OAAO,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAAR,CAAzB;AACD","sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n  return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,kBAAkB,QAAQ,mBAAmB;AAEtD;;;;AAIA,OAAM,SAAUC,yBAAyB,CAACC,EAAU;EAClD,OAAOF,kBAAkB,CAACG,GAAG,IAAIA,GAAG,CAACC,eAAe,CAACF,EAAE,CAAC,CAAC;AAC3D","names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib/useIsOverflowItemVisible.js

@@ -3,7 +3,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]);
 }

package/lib/useIsOverflowItemVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useIsOverflowItemVisible.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,wBAAV,CAAmC,EAAnC,EAA6C;EACjD,OAAO,CAAC,CAAC,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAAR,CAA3B;AACD","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n  return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,kBAAkB,QAAQ,mBAAmB;AAEtD;;;;AAIA,OAAM,SAAUC,wBAAwB,CAACC,EAAU;EACjD,OAAO,CAAC,CAACF,kBAAkB,CAACG,GAAG,IAAIA,GAAG,CAACC,cAAc,CAACF,EAAE,CAAC,CAAC;AAC5D","names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib/useOverflowContainer.js

@@ -8,7 +8,6 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './cons
  * @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,
@@ -16,8 +15,8 @@ export const useOverflowContainer = (update, options) => {
     padding,
     minimumVisible,
     onUpdateItemVisibility
-  } = options; // DOM ref to the overflow container element
-
+  } = options;
+  // DOM ref to the overflow container element
   const containerRef = React.useRef(null);
   const updateOverflowItems = useEventCallback(update);
   const [overflowManager] = React.useState(() => canUseDOM() ? createOverflowManager() : null);
@@ -25,7 +24,6 @@ export const useOverflowContainer = (update, options) => {
     if (!containerRef.current) {
       return;
     }
-
     if (overflowManager) {
       overflowManager.observe(containerRef.current, {
         overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',

package/lib/useOverflowContainer.js.map

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

package/lib/useOverflowCount.js

@@ -2,13 +2,11 @@ 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);
 });

package/lib/useOverflowCount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowCount.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,MAC9B,kBAAkB,CAAC,CAAC,IAAG;EACrB,OAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;IACpE,IAAI,CAAC,OAAL,EAAc;MACZ,GAAG;IACJ;;IAED,OAAO,GAAP;EACD,CANM,EAMJ,CANI,CAAP;AAOD,CARiB,CADb","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n  useOverflowContext(v => {\n    return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n      if (!visible) {\n        acc++;\n      }\n\n      return acc;\n    }, 0);\n  });\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,kBAAkB,QAAQ,mBAAmB;AAEtD;;;AAGA,OAAO,MAAMC,gBAAgB,GAAG,MAC9BD,kBAAkB,CAACE,CAAC,IAAG;EACrB,OAAOC,MAAM,CAACC,OAAO,CAACF,CAAC,CAACG,cAAc,CAAC,CAACC,MAAM,CAAC,CAACC,GAAG,EAAE,CAACC,EAAE,EAAEC,OAAO,CAAC,KAAI;IACpE,IAAI,CAACA,OAAO,EAAE;MACZF,GAAG,EAAE;;IAGP,OAAOA,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC;AACP,CAAC,CAAC","names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib/useOverflowItem.js

@@ -9,7 +9,6 @@ import { useOverflowContext } from './overflowContext';
  * @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);

package/lib/useOverflowItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAoE,QAApE,EAAuF,OAAvF,EAAuG;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATwB,EAStB,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATsB,CAAzB;EAWA,OAAO,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n  const ref = React.useRef<TElement>(null);\n  const registerItem = useOverflowContext(v => v.registerItem);\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerItem({\n        element: ref.current,\n        id,\n        priority: priority ?? 0,\n        groupId,\n      });\n    }\n  }, [id, priority, registerItem, groupId]);\n\n  return ref;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,2BAA2B;AACrE,SAASC,kBAAkB,QAAQ,mBAAmB;AAEtD;;;;;;;;AAQA,OAAM,SAAUC,eAAe,CAA+BC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;EAC3G,MAAMC,GAAG,GAAGP,KAAK,CAACQ,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,YAAY,GAAGP,kBAAkB,CAACQ,CAAC,IAAIA,CAAC,CAACD,YAAY,CAAC;EAE5DR,yBAAyB,CAAC,MAAK;IAC7B,IAAIM,GAAG,CAACI,OAAO,EAAE;MACf,OAAOF,YAAY,CAAC;QAClBG,OAAO,EAAEL,GAAG,CAACI,OAAO;QACpBP,EAAE;QACFC,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,CAAC;QACvBC;OACD,CAAC;;EAEN,CAAC,EAAE,CAACF,EAAE,EAAEC,QAAQ,EAAEI,YAAY,EAAEH,OAAO,CAAC,CAAC;EAEzC,OAAOC,GAAG;AACZ","names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib/useOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AAEA,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAmE;EACvE,MAAM,SAAS,GAAG,KAAK,CAAC,eAAD,EAAkB,EAAlB,CAAvB;EACA,MAAM,aAAa,GAAG,gBAAgB,EAAtC;EACA,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,oBAAR,CAA/C;EACA,MAAM,cAAc,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,cAAR,CAAzC;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,oBAAoB,CAAC,GAAG,CAAC,OAAL,CAA3B;IACD;EACF,CAJwB,EAItB,CAAC,oBAAD,EAAuB,aAAvB,EAAsC,SAAtC,CAJsB,CAAzB;EAMA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,aAAJ,EAAmB;MACjB,cAAc;IACf;EACF,CAJwB,EAItB,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJsB,CAAzB;EAMA,OAAO;IAAE,GAAF;IAAO,aAAP;IAAsB;EAAtB,CAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,2BAA2B;AAC5E,SAASC,kBAAkB,QAAQ,mBAAmB;AACtD,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,OAAM,SAAUC,eAAe,CAA+BC,EAAW;EACvE,MAAMC,SAAS,GAAGN,KAAK,CAAC,eAAe,EAAEK,EAAE,CAAC;EAC5C,MAAME,aAAa,GAAGJ,gBAAgB,EAAE;EACxC,MAAMK,oBAAoB,GAAGN,kBAAkB,CAACO,CAAC,IAAIA,CAAC,CAACD,oBAAoB,CAAC;EAC5E,MAAME,cAAc,GAAGR,kBAAkB,CAACO,CAAC,IAAIA,CAAC,CAACC,cAAc,CAAC;EAChE,MAAMC,GAAG,GAAGZ,KAAK,CAACa,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,aAAa,GAAGN,aAAa,GAAG,CAAC;EAEvCN,yBAAyB,CAAC,MAAK;IAC7B,IAAIU,GAAG,CAACG,OAAO,EAAE;MACf,OAAON,oBAAoB,CAACG,GAAG,CAACG,OAAO,CAAC;;EAE5C,CAAC,EAAE,CAACN,oBAAoB,EAAEK,aAAa,EAAEP,SAAS,CAAC,CAAC;EAEpDL,yBAAyB,CAAC,MAAK;IAC7B,IAAIY,aAAa,EAAE;MACjBH,cAAc,EAAE;;EAEpB,CAAC,EAAE,CAACG,aAAa,EAAEH,cAAc,EAAEC,GAAG,CAAC,CAAC;EAExC,OAAO;IAAEA,GAAG;IAAEJ,aAAa;IAAEM;EAAa,CAAE;AAC9C","names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib-commonjs/components/Overflow.js

@@ -4,34 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Overflow = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const overflowContext_1 = /*#__PURE__*/require("../overflowContext");
-
 const useOverflowContainer_1 = /*#__PURE__*/require("../useOverflowContainer");
-
 const constants_1 = /*#__PURE__*/require("../constants");
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "overflowMenu": {
-    "Brvla84": "fyfkpbf"
+  overflowMenu: {
+    Brvla84: "fyfkpbf"
   },
-  "overflowingItems": {
-    "Hevnzl": "ftz08xh"
+  overflowingItems: {
+    Hevnzl: "ftz08xh"
   }
 }, {
-  "d": [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
+  d: [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
 });
 /**
  * Provides an OverflowContext for OverflowItem descendants.
  */
-
-
 exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
   const styles = useStyles();
   const {
@@ -43,9 +34,9 @@ exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const [hasOverflow, setHasOverflow] = React.useState(false);
   const [itemVisibility, setItemVisibility] = React.useState({});
-  const [groupVisibility, setGroupVisibility] = React.useState({}); // useOverflowContainer wraps this method in a useEventCallback.
+  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(() => {
@@ -56,7 +47,6 @@ exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
     setGroupVisibility(data.groupVisibility);
   };
-
   const {
     containerRef,
     registerItem,

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/components/Overflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAEA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAAW,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM;IAAE,QAAF;IAAY,cAAZ;IAA4B,YAAY,GAAG,YAA3C;IAAyD,iBAAzD;IAA4E;EAA5E,IAAwF,KAA9F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;EACA;;EACA,MAAM,MAAM,GAAqB,IAAI,IAAG;IACtC,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;IACA,iBAAiB,CAAC,MAAK;MACrB,MAAM,QAAQ,GAA4B,EAA1C;MACA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;MACA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;MACA,OAAO,QAAP;IACD,CALgB,CAAjB;IAMA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;EACD,CATD;;EAWA,MAAM;IAAE,YAAF;IAAgB,YAAhB;IAA8B,cAA9B;IAA8C;EAA9C,IAAuE,sBAAA,CAAA,oBAAA,CAAqB,MAArB,EAA6B;IACxG,iBADwG;IAExG,YAFwG;IAGxG,OAHwG;IAIxG,cAJwG;IAKxG,sBAAsB,EAAE,sBAAA,CAAA;EALgF,CAA7B,CAA7E;EAQA,MAAM,WAAW,GAAG,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;IACxD,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B,CADmD;IAExD,SAAS,EAAE,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,YAApB,EAAkC,MAAM,CAAC,gBAAzC,EAA2D,QAAQ,CAAC,KAAT,CAAe,SAA1E;EAF6C,CAAtC,CAApB;EAKA,OACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;IACvB,KAAK,EAAE;MACL,cADK;MAEL,eAFK;MAGL,WAHK;MAIL,YAJK;MAKL,cALK;MAML;IANK;EADgB,CAAzB,EAUG,WAVH,CADF;AAcD,CAjDuB,CAAX","sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n  overflowMenu: {\n    [`& [${DATA_OVERFLOW_MENU}]`]: {\n      flexShrink: 0,\n    },\n  },\n\n  overflowingItems: {\n    [`& > [${DATA_OVERFLOWING}]`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n  children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [hasOverflow, setHasOverflow] = React.useState(false);\n  const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n  const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  // TODO: Do we need a useEventCallback here too?\n  const update: OnUpdateOverflow = data => {\n    setHasOverflow(() => data.invisibleItems.length > 0);\n    setItemVisibility(() => {\n      const newState: Record<string, boolean> = {};\n      data.visibleItems.forEach(x => (newState[x.id] = true));\n      data.invisibleItems.forEach(x => (newState[x.id] = false));\n      return newState;\n    });\n    setGroupVisibility(data.groupVisibility);\n  };\n\n  const { containerRef, registerItem, updateOverflow, 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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;AACA;AACA;AAEA,MAAMA,SAAS,gBAAGC,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAY1B;AAWF;;;AAGaC,gBAAQ,gBAAGC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAoB,EAAEC,GAAG,KAAI;EACrE,MAAMC,MAAM,GAAGP,SAAS,EAAE;EAE1B,MAAM;IAAEQ,QAAQ;IAAEC,cAAc;IAAEC,YAAY,GAAG,YAAY;IAAEC,iBAAiB;IAAEC;EAAO,CAAE,GAAGP,KAAK;EAEnG,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAGX,KAAK,CAACY,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGd,KAAK,CAACY,QAAQ,CAA0B,EAAE,CAAC;EACvF,MAAM,CAACG,eAAe,EAAEC,kBAAkB,CAAC,GAAGhB,KAAK,CAACY,QAAQ,CAAqC,EAAE,CAAC;EAEpG;EACA;EACA,MAAMK,MAAM,GAAqBC,IAAI,IAAG;IACtCP,cAAc,CAAC,MAAMO,IAAI,CAACC,cAAc,CAACC,MAAM,GAAG,CAAC,CAAC;IACpDN,iBAAiB,CAAC,MAAK;MACrB,MAAMO,QAAQ,GAA4B,EAAE;MAC5CH,IAAI,CAACI,YAAY,CAACC,OAAO,CAACC,CAAC,IAAKH,QAAQ,CAACG,CAAC,CAACC,EAAE,CAAC,GAAG,IAAK,CAAC;MACvDP,IAAI,CAACC,cAAc,CAACI,OAAO,CAACC,CAAC,IAAKH,QAAQ,CAACG,CAAC,CAACC,EAAE,CAAC,GAAG,KAAM,CAAC;MAC1D,OAAOJ,QAAQ;IACjB,CAAC,CAAC;IACFL,kBAAkB,CAACE,IAAI,CAACH,eAAe,CAAC;EAC1C,CAAC;EAED,MAAM;IAAEW,YAAY;IAAEC,YAAY;IAAEC,cAAc;IAAEC;EAAoB,CAAE,GAAGC,2CAAoB,CAACb,MAAM,EAAE;IACxGT,iBAAiB;IACjBD,YAAY;IACZE,OAAO;IACPH,cAAc;IACdyB,sBAAsB,EAAED;GACzB,CAAC;EAEF,MAAME,WAAW,GAAGC,6CAA2B,CAAC5B,QAAQ,EAAE;IACxDF,GAAG,EAAE8B,+BAAa,CAACP,YAAY,EAAEvB,GAAG,CAAC;IACrC+B,SAAS,EAAEpC,oBAAY,CAACM,MAAM,CAAC+B,YAAY,EAAE/B,MAAM,CAACgC,gBAAgB,EAAE/B,QAAQ,CAACH,KAAK,CAACgC,SAAS;GAC/F,CAAC;EAEF,OACElC,oBAACqC,iCAAe,CAACC,QAAQ;IACvBC,KAAK,EAAE;MACL1B,cAAc;MACdE,eAAe;MACfL,WAAW;MACXiB,YAAY;MACZC,cAAc;MACdC;;EACD,GAEAG,WAAW,CACa;AAE/B,CAAC,CAAC","names":["useStyles","react_1","exports","React","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","useOverflowContainer_1","onUpdateItemVisibility","clonedChild","react_utilities_1","className","overflowMenu","overflowingItems","overflowContext_1","Provider","value"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n  overflowMenu: {\n    [`& [${DATA_OVERFLOW_MENU}]`]: {\n      flexShrink: 0,\n    },\n  },\n\n  overflowingItems: {\n    [`& > [${DATA_OVERFLOWING}]`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n  children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [hasOverflow, setHasOverflow] = React.useState(false);\n  const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n  const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  // TODO: Do we need a useEventCallback here too?\n  const update: OnUpdateOverflow = data => {\n    setHasOverflow(() => data.invisibleItems.length > 0);\n    setItemVisibility(() => {\n      const newState: Record<string, boolean> = {};\n      data.visibleItems.forEach(x => (newState[x.id] = true));\n      data.invisibleItems.forEach(x => (newState[x.id] = false));\n      return newState;\n    });\n    setGroupVisibility(data.groupVisibility);\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    onUpdateItemVisibility: updateVisibilityAttribute,\n  });\n\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n    className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility,\n        groupVisibility,\n        hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"]}

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

@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OverflowItem = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const useOverflowItem_1 = /*#__PURE__*/require("../../useOverflowItem");
 /**
  * Attaches overflow item behavior to its child registered with the OverflowContext.
  * It does not render an element of its own.
  */
-
-
 exports.OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     id,

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,YAAA,gBAAe,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;EAC7E,MAAM;IAAE,EAAF;IAAM,OAAN;IAAe,QAAf;IAAyB;EAAzB,IAAsC,KAA5C;EAEA,MAAM,YAAY,GAAG,iBAAA,CAAA,eAAA,CAAgB,EAAhB,EAAoB,QAApB,EAA8B,OAA9B,CAArB;EACA,OAAO,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;IAC3C,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B;EADsC,CAAtC,CAAP;AAGD,CAP2B,CAAf","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n  const { id, groupId, priority, children } = props;\n\n  const containerRef = useOverflowItem(id, priority, groupId);\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n  });\n});\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;;AAIaA,oBAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAwB,EAAEC,GAAG,KAAI;EAC7E,MAAM;IAAEC,EAAE;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EAEjD,MAAMM,YAAY,GAAGC,iCAAe,CAACL,EAAE,EAAEE,QAAQ,EAAED,OAAO,CAAC;EAC3D,OAAOK,6CAA2B,CAACH,QAAQ,EAAE;IAC3CJ,GAAG,EAAEO,+BAAa,CAACF,YAAY,EAAEL,GAAG;GACrC,CAAC;AACJ,CAAC,CAAC","names":["exports","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem_1","react_utilities_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OverflowItem = void 0;
-
 var OverflowItem_1 = /*#__PURE__*/require("./OverflowItem");
-
 Object.defineProperty(exports, "OverflowItem", {
   enumerable: true,
   get: function () {

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

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

package/lib-commonjs/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,gBAAA,GAAmB,kBAAnB;AACA,OAAA,CAAA,kBAAA,GAAqB,oBAArB;AACA,OAAA,CAAA,kBAAA,GAAqB,oBAArB","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAaA,wBAAgB,GAAG,kBAAkB;AACrCA,0BAAkB,GAAG,oBAAoB;AACzCA,0BAAkB,GAAG,oBAAoB","names":["exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib-commonjs/index.js

@@ -4,18 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OverflowItem = exports.useOverflowMenu = exports.useOverflowItem = exports.useOverflowCount = exports.useOverflowContainer = exports.useIsOverflowItemVisible = exports.useIsOverflowGroupVisible = exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = exports.Overflow = void 0;
-
 var Overflow_1 = /*#__PURE__*/require("./components/Overflow");
-
 Object.defineProperty(exports, "Overflow", {
   enumerable: true,
   get: function () {
     return Overflow_1.Overflow;
   }
 });
-
 var constants_1 = /*#__PURE__*/require("./constants");
-
 Object.defineProperty(exports, "DATA_OVERFLOWING", {
   enumerable: true,
   get: function () {
@@ -34,63 +30,49 @@ Object.defineProperty(exports, "DATA_OVERFLOW_MENU", {
     return constants_1.DATA_OVERFLOW_MENU;
   }
 });
-
 var useIsOverflowGroupVisible_1 = /*#__PURE__*/require("./useIsOverflowGroupVisible");
-
 Object.defineProperty(exports, "useIsOverflowGroupVisible", {
   enumerable: true,
   get: function () {
     return useIsOverflowGroupVisible_1.useIsOverflowGroupVisible;
   }
 });
-
 var useIsOverflowItemVisible_1 = /*#__PURE__*/require("./useIsOverflowItemVisible");
-
 Object.defineProperty(exports, "useIsOverflowItemVisible", {
   enumerable: true,
   get: function () {
     return useIsOverflowItemVisible_1.useIsOverflowItemVisible;
   }
 });
-
 var useOverflowContainer_1 = /*#__PURE__*/require("./useOverflowContainer");
-
 Object.defineProperty(exports, "useOverflowContainer", {
   enumerable: true,
   get: function () {
     return useOverflowContainer_1.useOverflowContainer;
   }
 });
-
 var useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
-
 Object.defineProperty(exports, "useOverflowCount", {
   enumerable: true,
   get: function () {
     return useOverflowCount_1.useOverflowCount;
   }
 });
-
 var useOverflowItem_1 = /*#__PURE__*/require("./useOverflowItem");
-
 Object.defineProperty(exports, "useOverflowItem", {
   enumerable: true,
   get: function () {
     return useOverflowItem_1.useOverflowItem;
   }
 });
-
 var useOverflowMenu_1 = /*#__PURE__*/require("./useOverflowMenu");
-
 Object.defineProperty(exports, "useOverflowMenu", {
   enumerable: true,
   get: function () {
     return useOverflowMenu_1.useOverflowMenu;
   }
 });
-
 var OverflowItem_1 = /*#__PURE__*/require("./components/OverflowItem/OverflowItem");
-
 Object.defineProperty(exports, "OverflowItem", {
   enumerable: true,
   get: function () {

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;;AAET,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAE/C,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,2BAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;;AACT,IAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,0BAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;;AACT,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,sBAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AACT,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,kBAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AAGT,IAAA,cAAA,gBAAA,OAAA,CAAA,wCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAASA;EAAAC;EAAAC;IAAA,0BAAQ;EAAA;AAAA;AAEjB;AAASF;EAAAC;EAAAC;IAAA,mCAAgB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,qCAAkB;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,qCAAkB;EAAA;AAAA;AAEjE;AAASF;EAAAC;EAAAC;IAAA,4DAAyB;EAAA;AAAA;AAClC;AAASF;EAAAC;EAAAC;IAAA,0DAAwB;EAAA;AAAA;AACjC;AAASF;EAAAC;EAAAC;IAAA,kDAAoB;EAAA;AAAA;AAC7B;AAASF;EAAAC;EAAAC;IAAA,0CAAgB;EAAA;AAAA;AACzB;AAASF;EAAAC;EAAAC;IAAA,wCAAe;EAAA;AAAA;AACxB;AAASF;EAAAC;EAAAC;IAAA,wCAAe;EAAA;AAAA;AAGxB;AAASF;EAAAC;EAAAC;IAAA,kCAAY;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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 type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"]}

package/lib-commonjs/overflowContext.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOverflowContext = exports.OverflowContext = void 0;
-
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
-
 exports.OverflowContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
 const overflowContextDefaultValue = {
   itemVisibility: {},
@@ -16,8 +14,6 @@ const overflowContextDefaultValue = {
   updateOverflow: () => null,
   registerOverflowMenu: () => () => null
 };
-
 const useOverflowContext = selector => react_context_selector_1.useContextSelector(exports.OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));
-
 exports.useOverflowContext = useOverflowContext;
 //# sourceMappingURL=overflowContext.js.map

package/lib-commonjs/overflowContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/overflowContext.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAWa,OAAA,CAAA,eAAA,gBAAkB,wBAAA,CAAA,aAAA,CAC7B,SAD6B,CAAlB;AAIb,MAAM,2BAA2B,GAAyB;EACxD,cAAc,EAAE,EADwC;EAExD,eAAe,EAAE,EAFuC;EAGxD,WAAW,EAAE,KAH2C;EAIxD,YAAY,EAAE,MAAM,MAAM,IAJ8B;EAKxD,cAAc,EAAE,MAAM,IALkC;EAMxD,oBAAoB,EAAE,MAAM,MAAM;AANsB,CAA1D;;AASO,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,CAAC,GAAG,GAAG,2BAAP,KAAuC,QAAQ,CAAC,GAAD,CAAnF,CADK;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n  hasOverflow: boolean;\n  registerItem: (item: OverflowItemEntry) => () => void;\n  registerOverflowMenu: (el: HTMLElement) => () => void;\n  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n  undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n  registerOverflowMenu: () => () => null,\n};\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAWaA,uBAAe,gBAAGC,sCAAa,CAC1CC,SAAS,CACuB;AAElC,MAAMC,2BAA2B,GAAyB;EACxDC,cAAc,EAAE,EAAE;EAClBC,eAAe,EAAE,EAAE;EACnBC,WAAW,EAAE,KAAK;EAClBC,YAAY,EAAE,MAAM,MAAM,IAAI;EAC9BC,cAAc,EAAE,MAAM,IAAI;EAC1BC,oBAAoB,EAAE,MAAM,MAAM;CACnC;AAEM,MAAMC,kBAAkB,GAAmBC,QAA8D,IAC9GV,2CAAkB,CAACD,uBAAe,EAAE,CAACY,GAAG,GAAGT,2BAA2B,KAAKQ,QAAQ,CAACC,GAAG,CAAC,CAAC;AAD9EZ,0BAAkB","names":["exports","react_context_selector_1","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n  hasOverflow: boolean;\n  registerItem: (item: OverflowItemEntry) => () => void;\n  registerOverflowMenu: (el: HTMLElement) => () => void;\n  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n  undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n  registerOverflowMenu: () => () => null,\n};\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"]}

package/lib-commonjs/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/useIsOverflowGroupVisible.js

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

package/lib-commonjs/useIsOverflowGroupVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,yBAAhB,CAA0C,EAA1C,EAAoD;EAClD,OAAO,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAA1B,CAAP;AACD;;AAFD,OAAA,CAAA,yBAAA,GAAA,yBAAA","sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n  return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AACA;AAEA;;;;AAIA,SAAgBA,yBAAyB,CAACC,EAAU;EAClD,OAAOC,oCAAkB,CAACC,GAAG,IAAIA,GAAG,CAACC,eAAe,CAACH,EAAE,CAAC,CAAC;AAC3D;AAFAI","names":["useIsOverflowGroupVisible","id","overflowContext_1","ctx","groupVisibility","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib-commonjs/useIsOverflowItemVisible.js

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

package/lib-commonjs/useIsOverflowItemVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,wBAAhB,CAAyC,EAAzC,EAAmD;EACjD,OAAO,CAAC,CAAC,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAA1B,CAAT;AACD;;AAFD,OAAA,CAAA,wBAAA,GAAA,wBAAA","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n  return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAEA;;;;AAIA,SAAgBA,wBAAwB,CAACC,EAAU;EACjD,OAAO,CAAC,CAACC,oCAAkB,CAACC,GAAG,IAAIA,GAAG,CAACC,cAAc,CAACH,EAAE,CAAC,CAAC;AAC5D;AAFAI","names":["useIsOverflowItemVisible","id","overflowContext_1","ctx","itemVisibility","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib-commonjs/useOverflowContainer.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.updateVisibilityAttribute = exports.useOverflowContainer = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const priority_overflow_1 = /*#__PURE__*/require("@fluentui/priority-overflow");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const constants_1 = /*#__PURE__*/require("./constants");
 /**
  * @internal
@@ -18,8 +14,6 @@ const constants_1 = /*#__PURE__*/require("./constants");
  * @param options - Options to configure the overflow container
  * @returns - ref to attach to an intrinsic HTML element and imperative functions
  */
-
-
 const useOverflowContainer = (update, options) => {
   const {
     overflowAxis,
@@ -27,8 +21,8 @@ const useOverflowContainer = (update, options) => {
     padding,
     minimumVisible,
     onUpdateItemVisibility
-  } = options; // DOM ref to the overflow container element
-
+  } = options;
+  // DOM ref to the overflow container element
   const containerRef = React.useRef(null);
   const updateOverflowItems = react_utilities_1.useEventCallback(update);
   const [overflowManager] = React.useState(() => react_utilities_1.canUseDOM() ? priority_overflow_1.createOverflowManager() : null);
@@ -36,7 +30,6 @@ const useOverflowContainer = (update, options) => {
     if (!containerRef.current) {
       return;
     }
-
     if (overflowManager) {
       overflowManager.observe(containerRef.current, {
         overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
@@ -78,9 +71,7 @@ const useOverflowContainer = (update, options) => {
     registerOverflowMenu
   };
 };
-
 exports.useOverflowContainer = useOverflowContainer;
-
 const updateVisibilityAttribute = ({
   item,
   visible
@@ -91,6 +82,5 @@ const updateVisibilityAttribute = ({
     item.element.setAttribute(constants_1.DATA_OVERFLOWING, '');
   }
 };
-
 exports.updateVisibilityAttribute = updateVisibilityAttribute;
 //# sourceMappingURL=useOverflowContainer.js.map

package/lib-commonjs/useOverflowContainer.js.map

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

package/lib-commonjs/useOverflowCount.js

@@ -4,22 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOverflowCount = void 0;
-
 const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
 /**
  * @returns Number of items that are overflowing
  */
-
-
 const useOverflowCount = () => overflowContext_1.useOverflowContext(v => {
   return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
     if (!visible) {
       acc++;
     }
-
     return acc;
   }, 0);
 });
-
 exports.useOverflowCount = useOverflowCount;
 //# sourceMappingURL=useOverflowCount.js.map

package/lib-commonjs/useOverflowCount.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowCount.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAG,MAC9B,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAG;EACrB,OAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;IACpE,IAAI,CAAC,OAAL,EAAc;MACZ,GAAG;IACJ;;IAED,OAAO,GAAP;EACD,CANM,EAMJ,CANI,CAAP;AAOD,CARD,CADK;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n  useOverflowContext(v => {\n    return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n      if (!visible) {\n        acc++;\n      }\n\n      return acc;\n    }, 0);\n  });\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAEA;;;AAGO,MAAMA,gBAAgB,GAAG,MAC9BC,oCAAkB,CAACC,CAAC,IAAG;EACrB,OAAOC,MAAM,CAACC,OAAO,CAACF,CAAC,CAACG,cAAc,CAAC,CAACC,MAAM,CAAC,CAACC,GAAG,EAAE,CAACC,EAAE,EAAEC,OAAO,CAAC,KAAI;IACpE,IAAI,CAACA,OAAO,EAAE;MACZF,GAAG,EAAE;;IAGP,OAAOA,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC;AACP,CAAC,CAAC;AATSG,wBAAgB","names":["useOverflowCount","overflowContext_1","v","Object","entries","itemVisibility","reduce","acc","id","visible","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib-commonjs/useOverflowItem.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOverflowItem = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
 /**
  * @internal
@@ -18,8 +15,6 @@ const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
  * @param groupId - assigns the item to a group, group visibility can be watched
  * @returns ref to assign to an intrinsic HTML element
  */
-
-
 function useOverflowItem(id, priority, groupId) {
   const ref = React.useRef(null);
   const registerItem = overflowContext_1.useOverflowContext(v => v.registerItem);
@@ -35,6 +30,5 @@ function useOverflowItem(id, priority, groupId) {
   }, [id, priority, registerItem, groupId]);
   return ref;
 }
-
 exports.useOverflowItem = useOverflowItem;
 //# sourceMappingURL=useOverflowItem.js.map

package/lib-commonjs/useOverflowItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;;AAOG;;;AACH,SAAgB,eAAhB,CAA8D,EAA9D,EAA0E,QAA1E,EAA6F,OAA7F,EAA6G;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATD,EASG,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATH;EAWA,OAAO,GAAP;AACD;;AAhBD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n  const ref = React.useRef<TElement>(null);\n  const registerItem = useOverflowContext(v => v.registerItem);\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerItem({\n        element: ref.current,\n        id,\n        priority: priority ?? 0,\n        groupId,\n      });\n    }\n  }, [id, priority, registerItem, groupId]);\n\n  return ref;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAEA;;;;;;;;AAQA,SAAgBA,eAAe,CAA+BC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;EAC3G,MAAMC,GAAG,GAAGC,KAAK,CAACC,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,YAAY,GAAGC,oCAAkB,CAACC,CAAC,IAAIA,CAAC,CAACF,YAAY,CAAC;EAE5DG,2CAAyB,CAAC,MAAK;IAC7B,IAAIN,GAAG,CAACO,OAAO,EAAE;MACf,OAAOJ,YAAY,CAAC;QAClBK,OAAO,EAAER,GAAG,CAACO,OAAO;QACpBV,EAAE;QACFC,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,CAAC;QACvBC;OACD,CAAC;;EAEN,CAAC,EAAE,CAACF,EAAE,EAAEC,QAAQ,EAAEK,YAAY,EAAEJ,OAAO,CAAC,CAAC;EAEzC,OAAOC,GAAG;AACZ;AAhBAS","names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","overflowContext_1","v","react_utilities_1","current","element","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/lib-commonjs/useOverflowMenu.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOverflowMenu = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
-
 const useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
-
 function useOverflowMenu(id) {
   const elementId = react_utilities_1.useId('overflow-menu', id);
   const overflowCount = useOverflowCount_1.useOverflowCount();
@@ -36,6 +31,5 @@ function useOverflowMenu(id) {
     isOverflowing
   };
 }
-
 exports.useOverflowMenu = useOverflowMenu;
 //# sourceMappingURL=useOverflowMenu.js.map

package/lib-commonjs/useOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowMenu.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAEA,SAAgB,eAAhB,CAA8D,EAA9D,EAAyE;EACvE,MAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,EAAvB,CAAlB;EACA,MAAM,aAAa,GAAG,kBAAA,CAAA,gBAAA,EAAtB;EACA,MAAM,oBAAoB,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,oBAA1B,CAA7B;EACA,MAAM,cAAc,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,cAA1B,CAAvB;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,oBAAoB,CAAC,GAAG,CAAC,OAAL,CAA3B;IACD;EACF,CAJD,EAIG,CAAC,oBAAD,EAAuB,aAAvB,EAAsC,SAAtC,CAJH;EAMA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,aAAJ,EAAmB;MACjB,cAAc;IACf;EACF,CAJD,EAIG,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJH;EAMA,OAAO;IAAE,GAAF;IAAO,aAAP;IAAsB;EAAtB,CAAP;AACD;;AArBD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA,SAAgBA,eAAe,CAA+BC,EAAW;EACvE,MAAMC,SAAS,GAAGC,uBAAK,CAAC,eAAe,EAAEF,EAAE,CAAC;EAC5C,MAAMG,aAAa,GAAGC,mCAAgB,EAAE;EACxC,MAAMC,oBAAoB,GAAGC,oCAAkB,CAACC,CAAC,IAAIA,CAAC,CAACF,oBAAoB,CAAC;EAC5E,MAAMG,cAAc,GAAGF,oCAAkB,CAACC,CAAC,IAAIA,CAAC,CAACC,cAAc,CAAC;EAChE,MAAMC,GAAG,GAAGC,KAAK,CAACC,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,aAAa,GAAGT,aAAa,GAAG,CAAC;EAEvCD,2CAAyB,CAAC,MAAK;IAC7B,IAAIO,GAAG,CAACI,OAAO,EAAE;MACf,OAAOR,oBAAoB,CAACI,GAAG,CAACI,OAAO,CAAC;;EAE5C,CAAC,EAAE,CAACR,oBAAoB,EAAEO,aAAa,EAAEX,SAAS,CAAC,CAAC;EAEpDC,2CAAyB,CAAC,MAAK;IAC7B,IAAIU,aAAa,EAAE;MACjBJ,cAAc,EAAE;;EAEpB,CAAC,EAAE,CAACI,aAAa,EAAEJ,cAAc,EAAEC,GAAG,CAAC,CAAC;EAExC,OAAO;IAAEA,GAAG;IAAEN,aAAa;IAAES;EAAa,CAAE;AAC9C;AArBAE","names":["useOverflowMenu","id","elementId","react_utilities_1","overflowCount","useOverflowCount_1","registerOverflowMenu","overflowContext_1","v","updateOverflow","ref","React","useRef","isOverflowing","current","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-overflow/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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "9.0.0-rc.4",
+  "version": "9.0.0-rc.5",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,14 +28,14 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/scripts": "*"
   },
   "dependencies": {
     "@fluentui/priority-overflow": "^9.0.0-rc.1",
-    "@fluentui/react-context-selector": "^9.1.3",
+    "@fluentui/react-context-selector": "^9.1.4",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.3.0",
-    "@griffel/react": "^1.4.2",
+    "@fluentui/react-utilities": "^9.3.1",
+    "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {