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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/CHANGELOG.json +57 -1
  2. package/CHANGELOG.md +22 -2
  3. package/lib/components/Overflow.js +7 -11
  4. package/lib/components/Overflow.js.map +1 -1
  5. package/lib/components/OverflowItem/OverflowItem.js +0 -1
  6. package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
  7. package/lib/overflowContext.js.map +1 -1
  8. package/lib/useIsOverflowGroupVisible.js +0 -1
  9. package/lib/useIsOverflowGroupVisible.js.map +1 -1
  10. package/lib/useIsOverflowItemVisible.js +0 -1
  11. package/lib/useIsOverflowItemVisible.js.map +1 -1
  12. package/lib/useOverflowContainer.js +2 -4
  13. package/lib/useOverflowContainer.js.map +1 -1
  14. package/lib/useOverflowCount.js +0 -2
  15. package/lib/useOverflowCount.js.map +1 -1
  16. package/lib/useOverflowItem.js +0 -1
  17. package/lib/useOverflowItem.js.map +1 -1
  18. package/lib/useOverflowMenu.js.map +1 -1
  19. package/lib-commonjs/components/Overflow.js +7 -17
  20. package/lib-commonjs/components/Overflow.js.map +1 -1
  21. package/lib-commonjs/components/OverflowItem/OverflowItem.js +0 -5
  22. package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
  23. package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
  24. package/lib-commonjs/components/OverflowItem/index.js +0 -2
  25. package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
  26. package/lib-commonjs/constants.js.map +1 -1
  27. package/lib-commonjs/index.js +0 -18
  28. package/lib-commonjs/index.js.map +1 -1
  29. package/lib-commonjs/overflowContext.js +0 -4
  30. package/lib-commonjs/overflowContext.js.map +1 -1
  31. package/lib-commonjs/types.js.map +1 -1
  32. package/lib-commonjs/useIsOverflowGroupVisible.js +0 -4
  33. package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
  34. package/lib-commonjs/useIsOverflowItemVisible.js +0 -4
  35. package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
  36. package/lib-commonjs/useOverflowContainer.js +2 -12
  37. package/lib-commonjs/useOverflowContainer.js.map +1 -1
  38. package/lib-commonjs/useOverflowCount.js +0 -5
  39. package/lib-commonjs/useOverflowCount.js.map +1 -1
  40. package/lib-commonjs/useOverflowItem.js +0 -6
  41. package/lib-commonjs/useOverflowItem.js.map +1 -1
  42. package/lib-commonjs/useOverflowMenu.js +0 -6
  43. package/lib-commonjs/useOverflowMenu.js.map +1 -1
  44. package/package.json +6 -6
package/CHANGELOG.json CHANGED
@@ -2,7 +2,63 @@
2
2
  "name": "@fluentui/react-overflow",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 20 Dec 2022 14:55:58 GMT",
5
+ "date": "Wed, 04 Jan 2023 01:35:35 GMT",
6
+ "tag": "@fluentui/react-overflow_v9.0.0-rc.5",
7
+ "version": "9.0.0-rc.5",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "martinhochel@microsoft.com",
12
+ "package": "@fluentui/react-overflow",
13
+ "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
14
+ "comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
15
+ },
16
+ {
17
+ "author": "martinhochel@microsoft.com",
18
+ "package": "@fluentui/react-overflow",
19
+ "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
20
+ "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
21
+ }
22
+ ],
23
+ "prerelease": [
24
+ {
25
+ "author": "olfedias@microsoft.com",
26
+ "package": "@fluentui/react-overflow",
27
+ "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
28
+ "comment": "chore: Update Griffel to latest version"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-overflow",
33
+ "comment": "Bump @fluentui/react-context-selector to v9.1.4",
34
+ "commit": "3e322d15529451be153e97298873253e21af4082"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui/react-overflow",
39
+ "comment": "Bump @fluentui/react-utilities to v9.3.1",
40
+ "commit": "3e322d15529451be153e97298873253e21af4082"
41
+ }
42
+ ]
43
+ }
44
+ },
45
+ {
46
+ "date": "Wed, 21 Dec 2022 10:20:33 GMT",
47
+ "tag": "@fluentui/react-overflow_v9.0.0-rc.4",
48
+ "version": "9.0.0-rc.4",
49
+ "comments": {
50
+ "prerelease": [
51
+ {
52
+ "author": "beachball",
53
+ "package": "@fluentui/react-overflow",
54
+ "comment": "Bump @fluentui/react-theme to v9.1.5",
55
+ "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
56
+ }
57
+ ]
58
+ }
59
+ },
60
+ {
61
+ "date": "Tue, 20 Dec 2022 14:59:34 GMT",
6
62
  "tag": "@fluentui/react-overflow_v9.0.0-rc.3",
7
63
  "version": "9.0.0-rc.3",
8
64
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,32 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Tue, 20 Dec 2022 14:55:58 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 04 Jan 2023 01:35:35 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.5)
8
+
9
+ Wed, 04 Jan 2023 01:35:35 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.4..@fluentui/react-overflow_v9.0.0-rc.5)
11
+
12
+ ### Changes
13
+
14
+ - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
15
+ - Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
17
+
18
+ ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.4)
19
+
20
+ Wed, 21 Dec 2022 10:20:33 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.3..@fluentui/react-overflow_v9.0.0-rc.4)
22
+
23
+ ### Changes
24
+
25
+ - Bump @fluentui/react-theme to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
26
+
7
27
  ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.3)
8
28
 
9
- Tue, 20 Dec 2022 14:55:58 GMT
29
+ Tue, 20 Dec 2022 14:59:34 GMT
10
30
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.2..@fluentui/react-overflow_v9.0.0-rc.3)
11
31
 
12
32
  ### Changes
@@ -4,22 +4,19 @@ import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-util
4
4
  import { OverflowContext } from '../overflowContext';
5
5
  import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
6
6
  import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
7
-
8
7
  const useStyles = /*#__PURE__*/__styles({
9
- "overflowMenu": {
10
- "Brvla84": "fyfkpbf"
8
+ overflowMenu: {
9
+ Brvla84: "fyfkpbf"
11
10
  },
12
- "overflowingItems": {
13
- "Hevnzl": "ftz08xh"
11
+ overflowingItems: {
12
+ Hevnzl: "ftz08xh"
14
13
  }
15
14
  }, {
16
- "d": [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
15
+ d: [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
17
16
  });
18
17
  /**
19
18
  * Provides an OverflowContext for OverflowItem descendants.
20
19
  */
21
-
22
-
23
20
  export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
24
21
  const styles = useStyles();
25
22
  const {
@@ -31,9 +28,9 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
31
28
  } = props;
32
29
  const [hasOverflow, setHasOverflow] = React.useState(false);
33
30
  const [itemVisibility, setItemVisibility] = React.useState({});
34
- const [groupVisibility, setGroupVisibility] = React.useState({}); // useOverflowContainer wraps this method in a useEventCallback.
31
+ const [groupVisibility, setGroupVisibility] = React.useState({});
32
+ // useOverflowContainer wraps this method in a useEventCallback.
35
33
  // TODO: Do we need a useEventCallback here too?
36
-
37
34
  const update = data => {
38
35
  setHasOverflow(() => data.invisibleItems.length > 0);
39
36
  setItemVisibility(() => {
@@ -44,7 +41,6 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
44
41
  });
45
42
  setGroupVisibility(data.groupVisibility);
46
43
  };
47
-
48
44
  const {
49
45
  containerRef,
50
46
  registerItem,
@@ -1 +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/"}
1
+ {"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"]}
@@ -5,7 +5,6 @@ import { useOverflowItem } from '../../useOverflowItem';
5
5
  * Attaches overflow item behavior to its child registered with the OverflowContext.
6
6
  * It does not render an element of its own.
7
7
  */
8
-
9
8
  export const OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {
10
9
  const {
11
10
  id,
@@ -1 +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/"}
1
+ {"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"]}
@@ -1 +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/"}
1
+ {"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"]}
@@ -3,7 +3,6 @@ import { useOverflowContext } from './overflowContext';
3
3
  * @param id - unique identifier for a group of overflow items
4
4
  * @returns visibility state of the group
5
5
  */
6
-
7
6
  export function useIsOverflowGroupVisible(id) {
8
7
  return useOverflowContext(ctx => ctx.groupVisibility[id]);
9
8
  }
@@ -1 +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/"}
1
+ {"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"]}
@@ -3,7 +3,6 @@ import { useOverflowContext } from './overflowContext';
3
3
  * @param id - unique identifier for the item used by the overflow manager
4
4
  * @returns visibility state of an overflow item
5
5
  */
6
-
7
6
  export function useIsOverflowItemVisible(id) {
8
7
  return !!useOverflowContext(ctx => ctx.itemVisibility[id]);
9
8
  }
@@ -1 +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/"}
1
+ {"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"]}
@@ -8,7 +8,6 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './cons
8
8
  * @param options - Options to configure the overflow container
9
9
  * @returns - ref to attach to an intrinsic HTML element and imperative functions
10
10
  */
11
-
12
11
  export const useOverflowContainer = (update, options) => {
13
12
  const {
14
13
  overflowAxis,
@@ -16,8 +15,8 @@ export const useOverflowContainer = (update, options) => {
16
15
  padding,
17
16
  minimumVisible,
18
17
  onUpdateItemVisibility
19
- } = options; // DOM ref to the overflow container element
20
-
18
+ } = options;
19
+ // DOM ref to the overflow container element
21
20
  const containerRef = React.useRef(null);
22
21
  const updateOverflowItems = useEventCallback(update);
23
22
  const [overflowManager] = React.useState(() => canUseDOM() ? createOverflowManager() : null);
@@ -25,7 +24,6 @@ export const useOverflowContainer = (update, options) => {
25
24
  if (!containerRef.current) {
26
25
  return;
27
26
  }
28
-
29
27
  if (overflowManager) {
30
28
  overflowManager.observe(containerRef.current, {
31
29
  overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
@@ -1 +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/"}
1
+ {"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"]}
@@ -2,13 +2,11 @@ import { useOverflowContext } from './overflowContext';
2
2
  /**
3
3
  * @returns Number of items that are overflowing
4
4
  */
5
-
6
5
  export const useOverflowCount = () => useOverflowContext(v => {
7
6
  return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
8
7
  if (!visible) {
9
8
  acc++;
10
9
  }
11
-
12
10
  return acc;
13
11
  }, 0);
14
12
  });
@@ -1 +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/"}
1
+ {"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"]}
@@ -9,7 +9,6 @@ import { useOverflowContext } from './overflowContext';
9
9
  * @param groupId - assigns the item to a group, group visibility can be watched
10
10
  * @returns ref to assign to an intrinsic HTML element
11
11
  */
12
-
13
12
  export function useOverflowItem(id, priority, groupId) {
14
13
  const ref = React.useRef(null);
15
14
  const registerItem = useOverflowContext(v => v.registerItem);
@@ -1 +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/"}
1
+ {"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"]}
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,34 +4,25 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Overflow = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
11
-
12
9
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
13
-
14
10
  const overflowContext_1 = /*#__PURE__*/require("../overflowContext");
15
-
16
11
  const useOverflowContainer_1 = /*#__PURE__*/require("../useOverflowContainer");
17
-
18
12
  const constants_1 = /*#__PURE__*/require("../constants");
19
-
20
13
  const useStyles = /*#__PURE__*/react_1.__styles({
21
- "overflowMenu": {
22
- "Brvla84": "fyfkpbf"
14
+ overflowMenu: {
15
+ Brvla84: "fyfkpbf"
23
16
  },
24
- "overflowingItems": {
25
- "Hevnzl": "ftz08xh"
17
+ overflowingItems: {
18
+ Hevnzl: "ftz08xh"
26
19
  }
27
20
  }, {
28
- "d": [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
21
+ d: [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
29
22
  });
30
23
  /**
31
24
  * Provides an OverflowContext for OverflowItem descendants.
32
25
  */
33
-
34
-
35
26
  exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
36
27
  const styles = useStyles();
37
28
  const {
@@ -43,9 +34,9 @@ exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
43
34
  } = props;
44
35
  const [hasOverflow, setHasOverflow] = React.useState(false);
45
36
  const [itemVisibility, setItemVisibility] = React.useState({});
46
- const [groupVisibility, setGroupVisibility] = React.useState({}); // useOverflowContainer wraps this method in a useEventCallback.
37
+ const [groupVisibility, setGroupVisibility] = React.useState({});
38
+ // useOverflowContainer wraps this method in a useEventCallback.
47
39
  // TODO: Do we need a useEventCallback here too?
48
-
49
40
  const update = data => {
50
41
  setHasOverflow(() => data.invisibleItems.length > 0);
51
42
  setItemVisibility(() => {
@@ -56,7 +47,6 @@ exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
56
47
  });
57
48
  setGroupVisibility(data.groupVisibility);
58
49
  };
59
-
60
50
  const {
61
51
  containerRef,
62
52
  registerItem,
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.OverflowItem = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
9
  const useOverflowItem_1 = /*#__PURE__*/require("../../useOverflowItem");
13
10
  /**
14
11
  * Attaches overflow item behavior to its child registered with the OverflowContext.
15
12
  * It does not render an element of its own.
16
13
  */
17
-
18
-
19
14
  exports.OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {
20
15
  const {
21
16
  id,
@@ -1 +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/"}
1
+ {"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"]}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.OverflowItem = void 0;
7
-
8
7
  var OverflowItem_1 = /*#__PURE__*/require("./OverflowItem");
9
-
10
8
  Object.defineProperty(exports, "OverflowItem", {
11
9
  enumerable: true,
12
10
  get: function () {
@@ -1 +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/"}
1
+ {"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"]}
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,18 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  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;
7
-
8
7
  var Overflow_1 = /*#__PURE__*/require("./components/Overflow");
9
-
10
8
  Object.defineProperty(exports, "Overflow", {
11
9
  enumerable: true,
12
10
  get: function () {
13
11
  return Overflow_1.Overflow;
14
12
  }
15
13
  });
16
-
17
14
  var constants_1 = /*#__PURE__*/require("./constants");
18
-
19
15
  Object.defineProperty(exports, "DATA_OVERFLOWING", {
20
16
  enumerable: true,
21
17
  get: function () {
@@ -34,63 +30,49 @@ Object.defineProperty(exports, "DATA_OVERFLOW_MENU", {
34
30
  return constants_1.DATA_OVERFLOW_MENU;
35
31
  }
36
32
  });
37
-
38
33
  var useIsOverflowGroupVisible_1 = /*#__PURE__*/require("./useIsOverflowGroupVisible");
39
-
40
34
  Object.defineProperty(exports, "useIsOverflowGroupVisible", {
41
35
  enumerable: true,
42
36
  get: function () {
43
37
  return useIsOverflowGroupVisible_1.useIsOverflowGroupVisible;
44
38
  }
45
39
  });
46
-
47
40
  var useIsOverflowItemVisible_1 = /*#__PURE__*/require("./useIsOverflowItemVisible");
48
-
49
41
  Object.defineProperty(exports, "useIsOverflowItemVisible", {
50
42
  enumerable: true,
51
43
  get: function () {
52
44
  return useIsOverflowItemVisible_1.useIsOverflowItemVisible;
53
45
  }
54
46
  });
55
-
56
47
  var useOverflowContainer_1 = /*#__PURE__*/require("./useOverflowContainer");
57
-
58
48
  Object.defineProperty(exports, "useOverflowContainer", {
59
49
  enumerable: true,
60
50
  get: function () {
61
51
  return useOverflowContainer_1.useOverflowContainer;
62
52
  }
63
53
  });
64
-
65
54
  var useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
66
-
67
55
  Object.defineProperty(exports, "useOverflowCount", {
68
56
  enumerable: true,
69
57
  get: function () {
70
58
  return useOverflowCount_1.useOverflowCount;
71
59
  }
72
60
  });
73
-
74
61
  var useOverflowItem_1 = /*#__PURE__*/require("./useOverflowItem");
75
-
76
62
  Object.defineProperty(exports, "useOverflowItem", {
77
63
  enumerable: true,
78
64
  get: function () {
79
65
  return useOverflowItem_1.useOverflowItem;
80
66
  }
81
67
  });
82
-
83
68
  var useOverflowMenu_1 = /*#__PURE__*/require("./useOverflowMenu");
84
-
85
69
  Object.defineProperty(exports, "useOverflowMenu", {
86
70
  enumerable: true,
87
71
  get: function () {
88
72
  return useOverflowMenu_1.useOverflowMenu;
89
73
  }
90
74
  });
91
-
92
75
  var OverflowItem_1 = /*#__PURE__*/require("./components/OverflowItem/OverflowItem");
93
-
94
76
  Object.defineProperty(exports, "OverflowItem", {
95
77
  enumerable: true,
96
78
  get: function () {
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useOverflowContext = exports.OverflowContext = void 0;
7
-
8
7
  const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
9
-
10
8
  exports.OverflowContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
11
9
  const overflowContextDefaultValue = {
12
10
  itemVisibility: {},
@@ -16,8 +14,6 @@ const overflowContextDefaultValue = {
16
14
  updateOverflow: () => null,
17
15
  registerOverflowMenu: () => () => null
18
16
  };
19
-
20
17
  const useOverflowContext = selector => react_context_selector_1.useContextSelector(exports.OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));
21
-
22
18
  exports.useOverflowContext = useOverflowContext;
23
19
  //# sourceMappingURL=overflowContext.js.map
@@ -1 +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/"}
1
+ {"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"]}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useIsOverflowGroupVisible = void 0;
7
-
8
7
  const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
9
8
  /**
10
9
  * @param id - unique identifier for a group of overflow items
11
10
  * @returns visibility state of the group
12
11
  */
13
-
14
-
15
12
  function useIsOverflowGroupVisible(id) {
16
13
  return overflowContext_1.useOverflowContext(ctx => ctx.groupVisibility[id]);
17
14
  }
18
-
19
15
  exports.useIsOverflowGroupVisible = useIsOverflowGroupVisible;
20
16
  //# sourceMappingURL=useIsOverflowGroupVisible.js.map
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useIsOverflowItemVisible = void 0;
7
-
8
7
  const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
9
8
  /**
10
9
  * @param id - unique identifier for the item used by the overflow manager
11
10
  * @returns visibility state of an overflow item
12
11
  */
13
-
14
-
15
12
  function useIsOverflowItemVisible(id) {
16
13
  return !!overflowContext_1.useOverflowContext(ctx => ctx.itemVisibility[id]);
17
14
  }
18
-
19
15
  exports.useIsOverflowItemVisible = useIsOverflowItemVisible;
20
16
  //# sourceMappingURL=useIsOverflowItemVisible.js.map
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.updateVisibilityAttribute = exports.useOverflowContainer = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const priority_overflow_1 = /*#__PURE__*/require("@fluentui/priority-overflow");
11
-
12
9
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
13
-
14
10
  const constants_1 = /*#__PURE__*/require("./constants");
15
11
  /**
16
12
  * @internal
@@ -18,8 +14,6 @@ const constants_1 = /*#__PURE__*/require("./constants");
18
14
  * @param options - Options to configure the overflow container
19
15
  * @returns - ref to attach to an intrinsic HTML element and imperative functions
20
16
  */
21
-
22
-
23
17
  const useOverflowContainer = (update, options) => {
24
18
  const {
25
19
  overflowAxis,
@@ -27,8 +21,8 @@ const useOverflowContainer = (update, options) => {
27
21
  padding,
28
22
  minimumVisible,
29
23
  onUpdateItemVisibility
30
- } = options; // DOM ref to the overflow container element
31
-
24
+ } = options;
25
+ // DOM ref to the overflow container element
32
26
  const containerRef = React.useRef(null);
33
27
  const updateOverflowItems = react_utilities_1.useEventCallback(update);
34
28
  const [overflowManager] = React.useState(() => react_utilities_1.canUseDOM() ? priority_overflow_1.createOverflowManager() : null);
@@ -36,7 +30,6 @@ const useOverflowContainer = (update, options) => {
36
30
  if (!containerRef.current) {
37
31
  return;
38
32
  }
39
-
40
33
  if (overflowManager) {
41
34
  overflowManager.observe(containerRef.current, {
42
35
  overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
@@ -78,9 +71,7 @@ const useOverflowContainer = (update, options) => {
78
71
  registerOverflowMenu
79
72
  };
80
73
  };
81
-
82
74
  exports.useOverflowContainer = useOverflowContainer;
83
-
84
75
  const updateVisibilityAttribute = ({
85
76
  item,
86
77
  visible
@@ -91,6 +82,5 @@ const updateVisibilityAttribute = ({
91
82
  item.element.setAttribute(constants_1.DATA_OVERFLOWING, '');
92
83
  }
93
84
  };
94
-
95
85
  exports.updateVisibilityAttribute = updateVisibilityAttribute;
96
86
  //# sourceMappingURL=useOverflowContainer.js.map
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,22 +4,17 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useOverflowCount = void 0;
7
-
8
7
  const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
9
8
  /**
10
9
  * @returns Number of items that are overflowing
11
10
  */
12
-
13
-
14
11
  const useOverflowCount = () => overflowContext_1.useOverflowContext(v => {
15
12
  return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
16
13
  if (!visible) {
17
14
  acc++;
18
15
  }
19
-
20
16
  return acc;
21
17
  }, 0);
22
18
  });
23
-
24
19
  exports.useOverflowCount = useOverflowCount;
25
20
  //# sourceMappingURL=useOverflowCount.js.map
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useOverflowItem = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
9
  const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
13
10
  /**
14
11
  * @internal
@@ -18,8 +15,6 @@ const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
18
15
  * @param groupId - assigns the item to a group, group visibility can be watched
19
16
  * @returns ref to assign to an intrinsic HTML element
20
17
  */
21
-
22
-
23
18
  function useOverflowItem(id, priority, groupId) {
24
19
  const ref = React.useRef(null);
25
20
  const registerItem = overflowContext_1.useOverflowContext(v => v.registerItem);
@@ -35,6 +30,5 @@ function useOverflowItem(id, priority, groupId) {
35
30
  }, [id, priority, registerItem, groupId]);
36
31
  return ref;
37
32
  }
38
-
39
33
  exports.useOverflowItem = useOverflowItem;
40
34
  //# sourceMappingURL=useOverflowItem.js.map
@@ -1 +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/"}
1
+ {"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"]}
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useOverflowMenu = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
9
  const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
13
-
14
10
  const useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
15
-
16
11
  function useOverflowMenu(id) {
17
12
  const elementId = react_utilities_1.useId('overflow-menu', id);
18
13
  const overflowCount = useOverflowCount_1.useOverflowCount();
@@ -36,6 +31,5 @@ function useOverflowMenu(id) {
36
31
  isOverflowing
37
32
  };
38
33
  }
39
-
40
34
  exports.useOverflowMenu = useOverflowMenu;
41
35
  //# sourceMappingURL=useOverflowMenu.js.map
@@ -1 +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/"}
1
+ {"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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-overflow",
3
- "version": "9.0.0-rc.3",
3
+ "version": "9.0.0-rc.5",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,14 +28,14 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@fluentui/eslint-plugin": "*",
31
- "@fluentui/scripts": "^1.0.0"
31
+ "@fluentui/scripts": "*"
32
32
  },
33
33
  "dependencies": {
34
34
  "@fluentui/priority-overflow": "^9.0.0-rc.1",
35
- "@fluentui/react-context-selector": "^9.1.3",
36
- "@fluentui/react-theme": "^9.1.4",
37
- "@fluentui/react-utilities": "^9.3.0",
38
- "@griffel/react": "^1.4.2",
35
+ "@fluentui/react-context-selector": "^9.1.4",
36
+ "@fluentui/react-theme": "^9.1.5",
37
+ "@fluentui/react-utilities": "^9.3.1",
38
+ "@griffel/react": "^1.5.2",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {