@fluentui/react-overflow 0.0.0-nightly-20221228-0425.1 → 0.0.0-nightly-20221230-0421.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. package/CHANGELOG.json +11 -11
  2. package/CHANGELOG.md +8 -8
  3. package/lib/components/Overflow.js +2 -6
  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 +2 -12
  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,9 +2,9 @@
2
2
  "name": "@fluentui/react-overflow",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 28 Dec 2022 04:33:28 GMT",
6
- "tag": "@fluentui/react-overflow_v0.0.0-nightly-20221228-0425.1",
7
- "version": "0.0.0-nightly-20221228-0425.1",
5
+ "date": "Fri, 30 Dec 2022 04:28:23 GMT",
6
+ "tag": "@fluentui/react-overflow_v0.0.0-nightly-20221230-0421.1",
7
+ "version": "0.0.0-nightly-20221230-0421.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,26 +16,26 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-overflow",
19
- "comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20221228-0425.1",
20
- "commit": "3ee907a253f14ff8e15878e0ec1355e2fbfcef69"
19
+ "comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20221230-0421.1",
20
+ "commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-overflow",
25
- "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221228-0425.1",
26
- "commit": "3ee907a253f14ff8e15878e0ec1355e2fbfcef69"
25
+ "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221230-0421.1",
26
+ "commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-overflow",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221228-0425.1",
32
- "commit": "3ee907a253f14ff8e15878e0ec1355e2fbfcef69"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221230-0421.1",
32
+ "commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-overflow",
37
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221228-0425.1",
38
- "commit": "3ee907a253f14ff8e15878e0ec1355e2fbfcef69"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221230-0421.1",
38
+ "commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
39
39
  }
40
40
  ]
41
41
  }
package/CHANGELOG.md CHANGED
@@ -1,21 +1,21 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Wed, 28 Dec 2022 04:33:28 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 30 Dec 2022 04:28:23 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20221228-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20221228-0425.1)
7
+ ## [0.0.0-nightly-20221230-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20221230-0421.1)
8
8
 
9
- Wed, 28 Dec 2022 04:33:28 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.4..@fluentui/react-overflow_v0.0.0-nightly-20221228-0425.1)
9
+ Fri, 30 Dec 2022 04:28:23 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.4..@fluentui/react-overflow_v0.0.0-nightly-20221230-0421.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/priority-overflow to v0.0.0-nightly-20221228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3ee907a253f14ff8e15878e0ec1355e2fbfcef69) by beachball)
16
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20221228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3ee907a253f14ff8e15878e0ec1355e2fbfcef69) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20221228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3ee907a253f14ff8e15878e0ec1355e2fbfcef69) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20221228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3ee907a253f14ff8e15878e0ec1355e2fbfcef69) by beachball)
15
+ - Bump @fluentui/priority-overflow to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
16
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
19
19
 
20
20
  ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.4)
21
21
 
@@ -4,7 +4,6 @@ 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
8
  "overflowMenu": {
10
9
  "Brvla84": "fyfkpbf"
@@ -18,8 +17,6 @@ const useStyles = /*#__PURE__*/__styles({
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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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,19 +4,12 @@ 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
14
  "overflowMenu": {
22
15
  "Brvla84": "fyfkpbf"
@@ -30,8 +23,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
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":""}
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":"","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":""}
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":"","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":""}
1
+ {"version":3,"mappings":"","names":[],"sourceRoot":"","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":""}
1
+ {"version":3,"mappings":";;;;;;AACA;AAASA;EAAAC;EAAAC;IAAA,kCAAY;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"","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":""}
1
+ {"version":3,"mappings":";;;;;;AAAaA,wBAAgB,GAAG,kBAAkB;AACrCA,0BAAkB,GAAG,oBAAoB;AACzCA,0BAAkB,GAAG,oBAAoB","names":["exports"],"sourceRoot":"","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":""}
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":"","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":""}
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":"","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":""}
1
+ {"version":3,"mappings":"","names":[],"sourceRoot":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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":""}
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":"","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": "0.0.0-nightly-20221228-0425.1",
3
+ "version": "0.0.0-nightly-20221230-0421.1",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,13 +28,13 @@
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
- "@fluentui/priority-overflow": "0.0.0-nightly-20221228-0425.1",
35
- "@fluentui/react-context-selector": "0.0.0-nightly-20221228-0425.1",
36
- "@fluentui/react-theme": "0.0.0-nightly-20221228-0425.1",
37
- "@fluentui/react-utilities": "0.0.0-nightly-20221228-0425.1",
34
+ "@fluentui/priority-overflow": "0.0.0-nightly-20221230-0421.1",
35
+ "@fluentui/react-context-selector": "0.0.0-nightly-20221230-0421.1",
36
+ "@fluentui/react-theme": "0.0.0-nightly-20221230-0421.1",
37
+ "@fluentui/react-utilities": "0.0.0-nightly-20221230-0421.1",
38
38
  "@griffel/react": "^1.4.2",
39
39
  "tslib": "^2.1.0"
40
40
  },