@fluentui/react-overflow 0.0.0-nightly-20230529-0417.1 → 0.0.0-nightly-20230530-0415.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.json +11 -11
  2. package/CHANGELOG.md +8 -8
  3. package/lib/components/Overflow.js +43 -58
  4. package/lib/components/Overflow.js.map +1 -1
  5. package/lib/components/OverflowItem/OverflowItem.js +7 -12
  6. package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
  7. package/lib/components/OverflowItem/OverflowItem.types.js +1 -0
  8. package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
  9. package/lib/components/OverflowItem/index.js +1 -0
  10. package/lib/components/OverflowItem/index.js.map +1 -1
  11. package/lib/components/useOverflowStyles.styles.js.map +1 -1
  12. package/lib/constants.js +1 -0
  13. package/lib/constants.js.map +1 -1
  14. package/lib/index.js +1 -0
  15. package/lib/index.js.map +1 -1
  16. package/lib/overflowContext.js +9 -9
  17. package/lib/overflowContext.js.map +1 -1
  18. package/lib/types.js +1 -0
  19. package/lib/types.js.map +1 -1
  20. package/lib/useIsOverflowGroupVisible.js +3 -3
  21. package/lib/useIsOverflowGroupVisible.js.map +1 -1
  22. package/lib/useIsOverflowItemVisible.js +3 -3
  23. package/lib/useIsOverflowItemVisible.js.map +1 -1
  24. package/lib/useOverflowContainer.js +70 -65
  25. package/lib/useOverflowContainer.js.map +1 -1
  26. package/lib/useOverflowCount.js +9 -9
  27. package/lib/useOverflowCount.js.map +1 -1
  28. package/lib/useOverflowItem.js +18 -13
  29. package/lib/useOverflowItem.js.map +1 -1
  30. package/lib/useOverflowMenu.js +30 -21
  31. package/lib/useOverflowMenu.js.map +1 -1
  32. package/lib-commonjs/components/Overflow.js.map +1 -1
  33. package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
  34. package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
  35. package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
  36. package/lib-commonjs/constants.js.map +1 -1
  37. package/lib-commonjs/index.js.map +1 -1
  38. package/lib-commonjs/overflowContext.js +1 -1
  39. package/lib-commonjs/overflowContext.js.map +1 -1
  40. package/lib-commonjs/types.js.map +1 -1
  41. package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
  42. package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
  43. package/lib-commonjs/useOverflowContainer.js.map +1 -1
  44. package/lib-commonjs/useOverflowCount.js.map +1 -1
  45. package/lib-commonjs/useOverflowItem.js.map +1 -1
  46. package/lib-commonjs/useOverflowMenu.js.map +1 -1
  47. package/package.json +5 -5
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-overflow",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 29 May 2023 04:22:25 GMT",
6
- "tag": "@fluentui/react-overflow_v0.0.0-nightly-20230529-0417.1",
7
- "version": "0.0.0-nightly-20230529-0417.1",
5
+ "date": "Tue, 30 May 2023 04:20:59 GMT",
6
+ "tag": "@fluentui/react-overflow_v0.0.0-nightly-20230530-0415.1",
7
+ "version": "0.0.0-nightly-20230530-0415.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-20230529-0417.1",
20
- "commit": "7df11de7bd463f5d170ca4e80e14d2352a752b3b"
19
+ "comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20230530-0415.1",
20
+ "commit": "808fbe4052231d4cccf478348a770df18232f4f9"
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-20230529-0417.1",
26
- "commit": "7df11de7bd463f5d170ca4e80e14d2352a752b3b"
25
+ "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230530-0415.1",
26
+ "commit": "808fbe4052231d4cccf478348a770df18232f4f9"
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-20230529-0417.1",
32
- "commit": "7df11de7bd463f5d170ca4e80e14d2352a752b3b"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230530-0415.1",
32
+ "commit": "808fbe4052231d4cccf478348a770df18232f4f9"
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-20230529-0417.1",
38
- "commit": "7df11de7bd463f5d170ca4e80e14d2352a752b3b"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230530-0415.1",
38
+ "commit": "808fbe4052231d4cccf478348a770df18232f4f9"
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 Mon, 29 May 2023 04:22:25 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 30 May 2023 04:20:59 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230529-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20230529-0417.1)
7
+ ## [0.0.0-nightly-20230530-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20230530-0415.1)
8
8
 
9
- Mon, 29 May 2023 04:22:25 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.18..@fluentui/react-overflow_v0.0.0-nightly-20230529-0417.1)
9
+ Tue, 30 May 2023 04:20:59 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.18..@fluentui/react-overflow_v0.0.0-nightly-20230530-0415.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-20230529-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/7df11de7bd463f5d170ca4e80e14d2352a752b3b) by beachball)
16
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20230529-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/7df11de7bd463f5d170ca4e80e14d2352a752b3b) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20230529-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/7df11de7bd463f5d170ca4e80e14d2352a752b3b) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230529-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/7df11de7bd463f5d170ca4e80e14d2352a752b3b) by beachball)
15
+ - Bump @fluentui/priority-overflow to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
16
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230530-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/808fbe4052231d4cccf478348a770df18232f4f9) by beachball)
19
19
 
20
20
  ## [9.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.18)
21
21
 
@@ -6,64 +6,49 @@ import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowC
6
6
  import { useOverflowStyles } from './useOverflowStyles.styles';
7
7
  /**
8
8
  * Provides an OverflowContext for OverflowItem descendants.
9
- */
10
- export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
11
- const styles = useOverflowStyles();
12
- const {
13
- children,
14
- minimumVisible,
15
- overflowAxis = 'horizontal',
16
- overflowDirection,
17
- padding
18
- } = props;
19
- const [overflowState, setOverflowState] = React.useState({
20
- hasOverflow: false,
21
- itemVisibility: {},
22
- groupVisibility: {}
23
- });
24
- // useOverflowContainer wraps this method in a useEventCallback.
25
- const update = data => {
26
- const {
27
- visibleItems,
28
- invisibleItems,
29
- groupVisibility
30
- } = data;
31
- const itemVisibility = {};
32
- visibleItems.forEach(x => itemVisibility[x.id] = true);
33
- invisibleItems.forEach(x => itemVisibility[x.id] = false);
34
- setOverflowState(() => {
35
- return {
36
- hasOverflow: data.invisibleItems.length > 0,
37
- itemVisibility,
38
- groupVisibility
39
- };
9
+ */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
10
+ const styles = useOverflowStyles();
11
+ const { children , minimumVisible , overflowAxis ='horizontal' , overflowDirection , padding } = props;
12
+ const [overflowState, setOverflowState] = React.useState({
13
+ hasOverflow: false,
14
+ itemVisibility: {},
15
+ groupVisibility: {}
40
16
  });
41
- };
42
- const {
43
- containerRef,
44
- registerItem,
45
- updateOverflow,
46
- registerOverflowMenu
47
- } = useOverflowContainer(update, {
48
- overflowDirection,
49
- overflowAxis,
50
- padding,
51
- minimumVisible,
52
- onUpdateItemVisibility: updateVisibilityAttribute
53
- });
54
- const clonedChild = applyTriggerPropsToChildren(children, {
55
- ref: useMergedRefs(containerRef, ref),
56
- className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)
57
- });
58
- return /*#__PURE__*/React.createElement(OverflowContext.Provider, {
59
- value: {
60
- itemVisibility: overflowState.itemVisibility,
61
- groupVisibility: overflowState.groupVisibility,
62
- hasOverflow: overflowState.hasOverflow,
63
- registerItem,
64
- updateOverflow,
65
- registerOverflowMenu
66
- }
67
- }, clonedChild);
17
+ // useOverflowContainer wraps this method in a useEventCallback.
18
+ const update = (data)=>{
19
+ const { visibleItems , invisibleItems , groupVisibility } = data;
20
+ const itemVisibility = {};
21
+ visibleItems.forEach((x)=>itemVisibility[x.id] = true);
22
+ invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
23
+ setOverflowState(()=>{
24
+ return {
25
+ hasOverflow: data.invisibleItems.length > 0,
26
+ itemVisibility,
27
+ groupVisibility
28
+ };
29
+ });
30
+ };
31
+ const { containerRef , registerItem , updateOverflow , registerOverflowMenu } = useOverflowContainer(update, {
32
+ overflowDirection,
33
+ overflowAxis,
34
+ padding,
35
+ minimumVisible,
36
+ onUpdateItemVisibility: updateVisibilityAttribute
37
+ });
38
+ const clonedChild = applyTriggerPropsToChildren(children, {
39
+ ref: useMergedRefs(containerRef, ref),
40
+ className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)
41
+ });
42
+ return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {
43
+ value: {
44
+ itemVisibility: overflowState.itemVisibility,
45
+ groupVisibility: overflowState.groupVisibility,
46
+ hasOverflow: overflowState.hasOverflow,
47
+ registerItem,
48
+ updateOverflow,
49
+ registerOverflowMenu
50
+ }
51
+ }, clonedChild);
68
52
  });
53
+
69
54
  //# sourceMappingURL=Overflow.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","createElement","Provider","value"],"sources":["../../src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(x => (itemVisibility[x.id] = true));\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAE7B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAE3D,SAASC,eAAe,QAAQ;AAChC,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ;AAChE,SAASC,iBAAiB,QAAQ;AAiBlC;;;AAGA,OAAO,MAAMC,QAAA,gBAAWR,KAAA,CAAMS,UAAU,CAAC,CAACC,KAAA,EAAsBC,GAAA,KAAQ;EACtE,MAAMC,MAAA,GAASL,iBAAA;EAEf,MAAM;IAAEM,QAAA;IAAUC,cAAA;IAAgBC,YAAA,GAAe;IAAcC,iBAAA;IAAmBC;EAAO,CAAE,GAAGP,KAAA;EAE9F,MAAM,CAACQ,aAAA,EAAeC,gBAAA,CAAiB,GAAGnB,KAAA,CAAMoB,QAAQ,CAAgB;IACtEC,WAAA,EAAa,KAAK;IAClBC,cAAA,EAAgB,CAAC;IACjBC,eAAA,EAAiB,CAAC;EACpB;EAEA;EACA,MAAMC,MAAA,GAA2BC,IAAA,IAAQ;IACvC,MAAM;MAAEC,YAAA;MAAcC,cAAA;MAAgBJ;IAAe,CAAE,GAAGE,IAAA;IAE1D,MAAMH,cAAA,GAA0C,CAAC;IACjDI,YAAA,CAAaE,OAAO,CAACC,CAAA,IAAMP,cAAc,CAACO,CAAA,CAAEC,EAAE,CAAC,GAAG,IAAI;IACtDH,cAAA,CAAeC,OAAO,CAACC,CAAA,IAAMP,cAAc,CAACO,CAAA,CAAEC,EAAE,CAAC,GAAG,KAAK;IAEzDX,gBAAA,CAAiB,MAAM;MACrB,OAAO;QACLE,WAAA,EAAaI,IAAA,CAAKE,cAAc,CAACI,MAAM,GAAG;QAC1CT,cAAA;QACAC;MACF;IACF;EACF;EAEA,MAAM;IAAES,YAAA;IAAcC,YAAA;IAAcC,cAAA;IAAgBC;EAAoB,CAAE,GAAG7B,oBAAA,CAAqBkB,MAAA,EAAQ;IACxGR,iBAAA;IACAD,YAAA;IACAE,OAAA;IACAH,cAAA;IACAsB,sBAAA,EAAwB/B;EAC1B;EAEA,MAAMgC,WAAA,GAAcnC,2BAAA,CAA4BW,QAAA,EAAU;IACxDF,GAAA,EAAKR,aAAA,CAAc6B,YAAA,EAAcrB,GAAA;IACjC2B,SAAA,EAAWrC,YAAA,CAAaW,MAAA,CAAO2B,YAAY,EAAE3B,MAAA,CAAO4B,gBAAgB,EAAE3B,QAAA,CAASH,KAAK,CAAC4B,SAAS;EAChG;EAEA,oBACEtC,KAAA,CAAAyC,aAAA,CAACrC,eAAA,CAAgBsC,QAAQ;IACvBC,KAAA,EAAO;MACLrB,cAAA,EAAgBJ,aAAA,CAAcI,cAAc;MAC5CC,eAAA,EAAiBL,aAAA,CAAcK,eAAe;MAC9CF,WAAA,EAAaH,aAAA,CAAcG,WAAW;MACtCY,YAAA;MACAC,cAAA;MACAC;IACF;KAECE,WAAA;AAGP"}
1
+ {"version":3,"sources":["../../src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(x => (itemVisibility[x.id] = true));\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AAEvF,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWR,MAAMS,UAAU,CAAC,CAACC,OAAsBC,MAAQ;IACtE,MAAMC,SAASL;IAEf,MAAM,EAAEM,SAAQ,EAAEC,eAAc,EAAEC,cAAe,aAAY,EAAEC,kBAAiB,EAAEC,QAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGnB,MAAMoB,QAAQ,CAAgB;QACtEC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA,OAAQ;QACvC,MAAM,EAAEC,aAAY,EAAEC,eAAc,EAAEJ,gBAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA,IAAMP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,IAAI;QACtDH,eAAeC,OAAO,CAACC,CAAAA,IAAMP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,KAAK;QAEzDX,iBAAiB,IAAM;YACrB,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACI,MAAM,GAAG;gBAC1CT;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAES,aAAY,EAAEC,aAAY,EAAEC,eAAc,EAAEC,qBAAoB,EAAE,GAAG7B,qBAAqBkB,QAAQ;QACxGR;QACAD;QACAE;QACAH;QACAsB,wBAAwB/B;IAC1B;IAEA,MAAMgC,cAAcnC,4BAA4BW,UAAU;QACxDF,KAAKR,cAAc6B,cAAcrB;QACjC2B,WAAWrC,aAAaW,OAAO2B,YAAY,EAAE3B,OAAO4B,gBAAgB,EAAE3B,SAASH,KAAK,CAAC4B,SAAS;IAChG;IAEA,qBACE,oBAAClC,gBAAgBqC,QAAQ;QACvBC,OAAO;YACLpB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCY;YACAC;YACAC;QACF;OAECE;AAGP,GAAG"}
@@ -4,17 +4,12 @@ import { useOverflowItem } from '../../useOverflowItem';
4
4
  /**
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
- */
8
- export const OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {
9
- const {
10
- id,
11
- groupId,
12
- priority,
13
- children
14
- } = props;
15
- const containerRef = useOverflowItem(id, priority, groupId);
16
- return applyTriggerPropsToChildren(children, {
17
- ref: useMergedRefs(containerRef, ref)
18
- });
7
+ */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
8
+ const { id , groupId , priority , children } = props;
9
+ const containerRef = useOverflowItem(id, priority, groupId);
10
+ return applyTriggerPropsToChildren(children, {
11
+ ref: useMergedRefs(containerRef, ref)
12
+ });
19
13
  });
14
+
20
15
  //# sourceMappingURL=OverflowItem.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef"],"sources":["../../../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAC3D,SAASC,eAAe,QAAQ;AAGhC;;;;AAIA,OAAO,MAAMC,YAAA,gBAAeJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAA0BC,GAAA,KAAQ;EAC9E,MAAM;IAAEC,EAAA;IAAIC,OAAA;IAASC,QAAA;IAAUC;EAAQ,CAAE,GAAGL,KAAA;EAE5C,MAAMM,YAAA,GAAeT,eAAA,CAAgBK,EAAA,EAAIE,QAAA,EAAUD,OAAA;EACnD,OAAOR,2BAAA,CAA4BU,QAAA,EAAU;IAC3CJ,GAAA,EAAKL,aAAA,CAAcU,YAAA,EAAcL,GAAA;EACnC;AACF"}
1
+ {"version":3,"sources":["../../../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;CAGC,GACD,OAAO,MAAMC,6BAAeJ,MAAMK,UAAU,CAAC,CAACC,OAA0BC,MAAQ;IAC9E,MAAM,EAAEC,GAAE,EAAEC,QAAO,EAAEC,SAAQ,EAAEC,SAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeT,gBAAgBK,IAAIE,UAAUD;IACnD,OAAOR,4BAA4BU,UAAU;QAC3CJ,KAAKL,cAAcU,cAAcL;IACnC;AACF,GAAG"}
@@ -1,2 +1,3 @@
1
1
  import * as React from 'react';
2
+
2
3
  //# sourceMappingURL=OverflowItem.types.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React"],"sources":["../../../src/components/OverflowItem/OverflowItem.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n /**\n * The unique identifier for the item used by the overflow manager.\n */\n id: string;\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId?: string;\n /**\n * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
1
+ {"version":3,"sources":["../../../src/components/OverflowItem/OverflowItem.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n /**\n * The unique identifier for the item used by the overflow manager.\n */\n id: string;\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId?: string;\n /**\n * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -1,2 +1,3 @@
1
1
  export { OverflowItem } from './OverflowItem';
2
+
2
3
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["OverflowItem"],"sources":["../../../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"mappings":"AACA,SAASA,YAAY,QAAQ"}
1
+ {"version":3,"sources":["../../../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB"}
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"sources":["../../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B;AAC3B,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ;AAErD,OAAO,MAAMC,iBAAA,gBAAoBH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAYjC"}
1
+ {"version":3,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"sources":["../../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B;AAC3B,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ;AAErD,OAAO,MAAMC,iBAAA,gBAAoBH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYjC"}
package/lib/constants.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export const DATA_OVERFLOWING = 'data-overflowing';
2
2
  export const DATA_OVERFLOW_ITEM = 'data-overflow-item';
3
3
  export const DATA_OVERFLOW_MENU = 'data-overflow-menu';
4
+
4
5
  //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"mappings":"AAAA,OAAO,MAAMA,gBAAA,GAAmB;AAChC,OAAO,MAAMC,kBAAA,GAAqB;AAClC,OAAO,MAAMC,kBAAA,GAAqB"}
1
+ {"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,mBAAmB;AACnD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,qBAAqB,qBAAqB"}
package/lib/index.js CHANGED
@@ -8,4 +8,5 @@ export { useOverflowItem } from './useOverflowItem';
8
8
  export { useOverflowMenu } from './useOverflowMenu';
9
9
  export { useOverflowContext } from './overflowContext';
10
10
  export { OverflowItem } from './components/OverflowItem/OverflowItem';
11
+
11
12
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowContext","OverflowItem"],"sources":["../src/index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ;AAEzB,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ;AAEzE,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,wBAAwB,QAAQ;AACzC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,eAAe,QAAQ;AAChC,SAASC,eAAe,QAAQ;AAEhC,SAASC,kBAAkB,QAAQ;AAGnC,SAASC,YAAY,QAAQ"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowContext","OverflowItem"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,cAAc;AAEvF,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC"}
@@ -1,15 +1,15 @@
1
1
  import { createContext, useContextSelector } from '@fluentui/react-context-selector';
2
- export const OverflowContext = /*#__PURE__*/createContext(undefined);
2
+ export const OverflowContext = createContext(undefined);
3
3
  const overflowContextDefaultValue = {
4
- itemVisibility: {},
5
- groupVisibility: {},
6
- hasOverflow: false,
7
- registerItem: () => () => null,
8
- updateOverflow: () => null,
9
- registerOverflowMenu: () => () => null
4
+ itemVisibility: {},
5
+ groupVisibility: {},
6
+ hasOverflow: false,
7
+ registerItem: ()=>()=>null,
8
+ updateOverflow: ()=>null,
9
+ registerOverflowMenu: ()=>()=>null
10
10
  };
11
11
  /**
12
12
  * @internal
13
- */
14
- export const useOverflowContext = selector => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));
13
+ */ export const useOverflowContext = (selector)=>useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));
14
+
15
15
  //# sourceMappingURL=overflowContext.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"sources":["../src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\n/**\n * @internal\n */\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n registerOverflowMenu: (el: HTMLElement) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB;AAc5E,OAAO,MAAMC,eAAA,gBAAkBF,aAAA,CAC7BG,SAAA;AAGF,MAAMC,2BAAA,GAAoD;EACxDC,cAAA,EAAgB,CAAC;EACjBC,eAAA,EAAiB,CAAC;EAClBC,WAAA,EAAa,KAAK;EAClBC,YAAA,EAAcA,CAAA,KAAM,MAAM,IAAI;EAC9BC,cAAA,EAAgBA,CAAA,KAAM,IAAI;EAC1BC,oBAAA,EAAsBA,CAAA,KAAM,MAAM;AACpC;AAEA;;;AAGA,OAAO,MAAMC,kBAAA,GAAqCC,QAAA,IAChDX,kBAAA,CAAmBC,eAAA,EAAiB,CAACW,GAAA,GAAMT,2BAA2B,KAAKQ,QAAA,CAASC,GAAA"}
1
+ {"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\n/**\n * @internal\n */\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n registerOverflowMenu: (el: HTMLElement) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB,mCAAmC;AAc/G,OAAO,MAAMC,kBAAkBF,cAC7BG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa,KAAK;IAClBC,cAAc,IAAM,IAAM,IAAI;IAC9BC,gBAAgB,IAAM,IAAI;IAC1BC,sBAAsB,IAAM,IAAM,IAAI;AACxC;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAgBC,WAChDX,mBAAmBC,iBAAiB,CAACW,MAAMT,2BAA2B,GAAKQ,SAASC,MAAM"}
package/lib/types.js CHANGED
@@ -1,2 +1,3 @@
1
1
  import * as React from 'react';
2
+
2
3
  //# sourceMappingURL=types.js.map
package/lib/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React"],"sources":["../src/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
1
+ {"version":3,"sources":["../src/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -2,8 +2,8 @@ import { useOverflowContext } from './overflowContext';
2
2
  /**
3
3
  * @param id - unique identifier for a group of overflow items
4
4
  * @returns visibility state of the group
5
- */
6
- export function useIsOverflowGroupVisible(id) {
7
- return useOverflowContext(ctx => ctx.groupVisibility[id]);
5
+ */ export function useIsOverflowGroupVisible(id) {
6
+ return useOverflowContext((ctx)=>ctx.groupVisibility[id]);
8
7
  }
8
+
9
9
  //# sourceMappingURL=useIsOverflowGroupVisible.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"mappings":"AACA,SAASA,kBAAkB,QAAQ;AAEnC;;;;AAIA,OAAO,SAASC,0BAA0BC,EAAU,EAAsB;EACxE,OAAOF,kBAAA,CAAmBG,GAAA,IAAOA,GAAA,CAAIC,eAAe,CAACF,EAAA,CAAG;AAC1D"}
1
+ {"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"mappings":"AACA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;;CAGC,GACD,OAAO,SAASC,0BAA0BC,EAAU,EAAsB;IACxE,OAAOF,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe,CAACF,GAAG;AAC1D,CAAC"}
@@ -2,8 +2,8 @@ import { useOverflowContext } from './overflowContext';
2
2
  /**
3
3
  * @param id - unique identifier for the item used by the overflow manager
4
4
  * @returns visibility state of an overflow item
5
- */
6
- export function useIsOverflowItemVisible(id) {
7
- return !!useOverflowContext(ctx => ctx.itemVisibility[id]);
5
+ */ export function useIsOverflowItemVisible(id) {
6
+ return !!useOverflowContext((ctx)=>ctx.itemVisibility[id]);
8
7
  }
8
+
9
9
  //# sourceMappingURL=useIsOverflowItemVisible.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"sources":["../src/useIsOverflowItemVisible.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ;AAEnC;;;;AAIA,OAAO,SAASC,yBAAyBC,EAAU,EAAW;EAC5D,OAAO,CAAC,CAACF,kBAAA,CAAmBG,GAAA,IAAOA,GAAA,CAAIC,cAAc,CAACF,EAAA,CAAG;AAC3D"}
1
+ {"version":3,"sources":["../src/useIsOverflowItemVisible.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;;CAGC,GACD,OAAO,SAASC,yBAAyBC,EAAU,EAAW;IAC5D,OAAO,CAAC,CAACF,mBAAmBG,CAAAA,MAAOA,IAAIC,cAAc,CAACF,GAAG;AAC3D,CAAC"}
@@ -7,72 +7,77 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './cons
7
7
  * @param update - Callback when overflow state changes
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
- */
11
- export const useOverflowContainer = (update, options) => {
12
- const {
13
- overflowAxis,
14
- overflowDirection,
15
- padding,
16
- minimumVisible,
17
- onUpdateItemVisibility
18
- } = options;
19
- // DOM ref to the overflow container element
20
- const containerRef = React.useRef(null);
21
- const updateOverflowItems = useEventCallback(update);
22
- const [overflowManager] = React.useState(() => canUseDOM() ? createOverflowManager() : null);
23
- useIsomorphicLayoutEffect(() => {
24
- if (!containerRef.current) {
25
- return;
26
- }
27
- if (overflowManager) {
28
- overflowManager.observe(containerRef.current, {
29
- overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
30
- overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
31
- padding: padding !== null && padding !== void 0 ? padding : 10,
32
- minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
33
- onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => undefined,
34
- onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined
35
- });
36
- return () => {
37
- overflowManager.disconnect();
38
- };
39
- }
40
- }, [updateOverflowItems, overflowManager, overflowDirection, overflowAxis, padding, minimumVisible, onUpdateItemVisibility]);
41
- const registerItem = React.useCallback(item => {
42
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
43
- item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
44
- return () => {
45
- item.element.removeAttribute(DATA_OVERFLOWING);
46
- item.element.removeAttribute(DATA_OVERFLOW_ITEM);
47
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
10
+ */ export const useOverflowContainer = (update, options)=>{
11
+ const { overflowAxis , overflowDirection , padding , minimumVisible , onUpdateItemVisibility } = options;
12
+ // DOM ref to the overflow container element
13
+ const containerRef = React.useRef(null);
14
+ const updateOverflowItems = useEventCallback(update);
15
+ const [overflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);
16
+ useIsomorphicLayoutEffect(()=>{
17
+ if (!containerRef.current) {
18
+ return;
19
+ }
20
+ if (overflowManager) {
21
+ overflowManager.observe(containerRef.current, {
22
+ overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
23
+ overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
24
+ padding: padding !== null && padding !== void 0 ? padding : 10,
25
+ minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
26
+ onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,
27
+ onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined
28
+ });
29
+ return ()=>{
30
+ overflowManager.disconnect();
31
+ };
32
+ }
33
+ }, [
34
+ updateOverflowItems,
35
+ overflowManager,
36
+ overflowDirection,
37
+ overflowAxis,
38
+ padding,
39
+ minimumVisible,
40
+ onUpdateItemVisibility
41
+ ]);
42
+ const registerItem = React.useCallback((item)=>{
43
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
44
+ item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
45
+ return ()=>{
46
+ item.element.removeAttribute(DATA_OVERFLOWING);
47
+ item.element.removeAttribute(DATA_OVERFLOW_ITEM);
48
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
49
+ };
50
+ }, [
51
+ overflowManager
52
+ ]);
53
+ const updateOverflow = React.useCallback(()=>{
54
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
55
+ }, [
56
+ overflowManager
57
+ ]);
58
+ const registerOverflowMenu = React.useCallback((el)=>{
59
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
60
+ el.setAttribute(DATA_OVERFLOW_MENU, '');
61
+ return ()=>{
62
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
63
+ el.removeAttribute(DATA_OVERFLOW_MENU);
64
+ };
65
+ }, [
66
+ overflowManager
67
+ ]);
68
+ return {
69
+ containerRef,
70
+ registerItem,
71
+ updateOverflow,
72
+ registerOverflowMenu
48
73
  };
49
- }, [overflowManager]);
50
- const updateOverflow = React.useCallback(() => {
51
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
52
- }, [overflowManager]);
53
- const registerOverflowMenu = React.useCallback(el => {
54
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
55
- el.setAttribute(DATA_OVERFLOW_MENU, '');
56
- return () => {
57
- overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
58
- el.removeAttribute(DATA_OVERFLOW_MENU);
59
- };
60
- }, [overflowManager]);
61
- return {
62
- containerRef,
63
- registerItem,
64
- updateOverflow,
65
- registerOverflowMenu
66
- };
67
74
  };
68
- export const updateVisibilityAttribute = ({
69
- item,
70
- visible
71
- }) => {
72
- if (visible) {
73
- item.element.removeAttribute(DATA_OVERFLOWING);
74
- } else {
75
- item.element.setAttribute(DATA_OVERFLOWING, '');
76
- }
75
+ export const updateVisibilityAttribute = ({ item , visible })=>{
76
+ if (visible) {
77
+ item.element.removeAttribute(DATA_OVERFLOWING);
78
+ } else {
79
+ item.element.setAttribute(DATA_OVERFLOWING, '');
80
+ }
77
81
  };
82
+
78
83
  //# sourceMappingURL=useOverflowContainer.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","createOverflowManager","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","containerRef","useRef","updateOverflowItems","overflowManager","useState","current","observe","undefined","onUpdateOverflow","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","updateOverflow","registerOverflowMenu","el","addOverflowMenu","removeOverflowMenu","updateVisibilityAttribute","visible"],"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n ]);\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n ]);\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,8BAA8B;AAYpE,SAASC,SAAS,EAAEC,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AAEnG,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,cAAc;AAEvF;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,QACAC,UACyC;IACzC,MAAM,EAAEC,aAAY,EAAEC,kBAAiB,EAAEC,QAAO,EAAEC,eAAc,EAAEC,uBAAsB,EAAE,GAAGL;IAE7F,4CAA4C;IAC5C,MAAMM,eAAehB,MAAMiB,MAAM,CAAW,IAAI;IAChD,MAAMC,sBAAsBf,iBAAiBM;IAE7C,MAAM,CAACU,gBAAgB,GAAGnB,MAAMoB,QAAQ,CAAyB,IAC/DlB,cAAcD,0BAA0B,IAAI;IAG9CG,0BAA0B,IAAM;QAC9B,IAAI,CAACY,aAAaK,OAAO,EAAE;YACzB;QACF,CAAC;QAED,IAAIF,iBAAiB;YACnBA,gBAAgBG,OAAO,CAACN,aAAaK,OAAO,EAAE;gBAC5CT,mBAAmBA,8BAAAA,+BAAAA,oBAAqB,KAAK;gBAC7CD,cAAcA,yBAAAA,0BAAAA,eAAgB,YAAY;gBAC1CE,SAASA,oBAAAA,qBAAAA,UAAW,EAAE;gBACtBC,gBAAgBA,2BAAAA,4BAAAA,iBAAkB,CAAC;gBACnCC,wBAAwBA,mCAAAA,oCAAAA,yBAA2B,IAAMQ,SAAU;gBACnEC,kBAAkBN,gCAAAA,iCAAAA,sBAAwB,IAAMK,SAAU;YAC5D;YAEA,OAAO,IAAM;gBACXJ,gBAAgBM,UAAU;YAC5B;QACF,CAAC;IACH,GAAG;QACDP;QACAC;QACAP;QACAD;QACAE;QACAC;QACAC;KACD;IAED,MAAMW,eAAe1B,MAAM2B,WAAW,CACpC,CAACC,OAA4B;QAC3BT,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBU,OAAO,CAACD;QACzBA,KAAKE,OAAO,CAACC,YAAY,CAACzB,oBAAoB;QAE9C,OAAO,IAAM;YACXsB,KAAKE,OAAO,CAACE,eAAe,CAAC3B;YAC7BuB,KAAKE,OAAO,CAACE,eAAe,CAAC1B;YAC7Ba,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBc,UAAU,CAACL,KAAKM,EAAE;QACrC;IACF,GACA;QAACf;KAAgB;IAGnB,MAAMgB,iBAAiBnC,MAAM2B,WAAW,CAAC,IAAM;QAC7CR,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBV,MAAM;IACzB,GAAG;QAACU;KAAgB;IAEpB,MAAMiB,uBAAuBpC,MAAM2B,WAAW,CAC5C,CAACU,KAAoB;QACnBlB,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBmB,eAAe,CAACD;QACjCA,GAAGN,YAAY,CAACxB,oBAAoB;QAEpC,OAAO,IAAM;YACXY,4BAAAA,6BAAAA,KAAAA,IAAAA,gBAAiBoB,kBAAkB;YACnCF,GAAGL,eAAe,CAACzB;QACrB;IACF,GACA;QAACY;KAAgB;IAGnB,OAAO;QACLH;QACAU;QACAS;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMI,4BAAoD,CAAC,EAAEZ,KAAI,EAAEa,QAAO,EAAE,GAAK;IACtF,IAAIA,SAAS;QACXb,KAAKE,OAAO,CAACE,eAAe,CAAC3B;IAC/B,OAAO;QACLuB,KAAKE,OAAO,CAACC,YAAY,CAAC1B,kBAAkB;IAC9C,CAAC;AACH,EAAE"}
@@ -1,13 +1,13 @@
1
1
  import { useOverflowContext } from './overflowContext';
2
2
  /**
3
3
  * @returns Number of items that are overflowing
4
- */
5
- export const useOverflowCount = () => useOverflowContext(v => {
6
- return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
7
- if (!visible) {
8
- acc++;
9
- }
10
- return acc;
11
- }, 0);
12
- });
4
+ */ export const useOverflowCount = ()=>useOverflowContext((v)=>{
5
+ return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{
6
+ if (!visible) {
7
+ acc++;
8
+ }
9
+ return acc;
10
+ }, 0);
11
+ });
12
+
13
13
  //# sourceMappingURL=useOverflowCount.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"sources":["../src/useOverflowCount.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ;AAEnC;;;AAGA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAC9BD,kBAAA,CAAmBE,CAAA,IAAK;EACtB,OAAOC,MAAA,CAAOC,OAAO,CAACF,CAAA,CAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,GAAA,EAAK,CAACC,EAAA,EAAIC,OAAA,CAAQ,KAAK;IACrE,IAAI,CAACA,OAAA,EAAS;MACZF,GAAA;IACF;IAEA,OAAOA,GAAA;EACT,GAAG;AACL"}
1
+ {"version":3,"sources":["../src/useOverflowCount.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,mBAAmBE,CAAAA,IAAK;QACtB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAK;YACrE,IAAI,CAACA,SAAS;gBACZF;YACF,CAAC;YAED,OAAOA;QACT,GAAG;IACL,GAAG"}
@@ -8,20 +8,25 @@ import { useOverflowContext } from './overflowContext';
8
8
  * @param priority - higher priority means the item overflows later
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
- */
12
- export function useOverflowItem(id, priority, groupId) {
13
- const ref = React.useRef(null);
14
- const registerItem = useOverflowContext(v => v.registerItem);
15
- useIsomorphicLayoutEffect(() => {
16
- if (ref.current) {
17
- return registerItem({
18
- element: ref.current,
11
+ */ export function useOverflowItem(id, priority, groupId) {
12
+ const ref = React.useRef(null);
13
+ const registerItem = useOverflowContext((v)=>v.registerItem);
14
+ useIsomorphicLayoutEffect(()=>{
15
+ if (ref.current) {
16
+ return registerItem({
17
+ element: ref.current,
18
+ id,
19
+ priority: priority !== null && priority !== void 0 ? priority : 0,
20
+ groupId
21
+ });
22
+ }
23
+ }, [
19
24
  id,
20
- priority: priority !== null && priority !== void 0 ? priority : 0,
25
+ priority,
26
+ registerItem,
21
27
  groupId
22
- });
23
- }
24
- }, [id, priority, registerItem, groupId]);
25
- return ref;
28
+ ]);
29
+ return ref;
26
30
  }
31
+
27
32
  //# sourceMappingURL=useOverflowItem.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"sources":["../src/useOverflowItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;AAQA,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB,EAAE;EAC7G,MAAMC,GAAA,GAAMP,KAAA,CAAMQ,MAAM,CAAW,IAAI;EACvC,MAAMC,YAAA,GAAeP,kBAAA,CAAmBQ,CAAA,IAAKA,CAAA,CAAED,YAAY;EAE3DR,yBAAA,CAA0B,MAAM;IAC9B,IAAIM,GAAA,CAAII,OAAO,EAAE;MACf,OAAOF,YAAA,CAAa;QAClBG,OAAA,EAASL,GAAA,CAAII,OAAO;QACpBP,EAAA;QACAC,QAAA,EAAUA,QAAA,aAAAA,QAAA,cAAAA,QAAA,GAAY,CAAC;QACvBC;MACF;IACF;EACF,GAAG,CAACF,EAAA,EAAIC,QAAA,EAAUI,YAAA,EAAcH,OAAA,CAAQ;EAExC,OAAOC,GAAA;AACT"}
1
+ {"version":3,"sources":["../src/useOverflowItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;CAOC,GACD,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB,EAAE;IAC7G,MAAMC,MAAMP,MAAMQ,MAAM,CAAW,IAAI;IACvC,MAAMC,eAAeP,mBAAmBQ,CAAAA,IAAKA,EAAED,YAAY;IAE3DR,0BAA0B,IAAM;QAC9B,IAAIM,IAAII,OAAO,EAAE;YACf,OAAOF,aAAa;gBAClBG,SAASL,IAAII,OAAO;gBACpBP;gBACAC,UAAUA,qBAAAA,sBAAAA,WAAY,CAAC;gBACvBC;YACF;QACF,CAAC;IACH,GAAG;QAACF;QAAIC;QAAUI;QAAcH;KAAQ;IAExC,OAAOC;AACT,CAAC"}
@@ -3,26 +3,35 @@ import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
3
3
  import { useOverflowContext } from './overflowContext';
4
4
  import { useOverflowCount } from './useOverflowCount';
5
5
  export function useOverflowMenu(id) {
6
- const elementId = useId('overflow-menu', id);
7
- const overflowCount = useOverflowCount();
8
- const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);
9
- const updateOverflow = useOverflowContext(v => v.updateOverflow);
10
- const ref = React.useRef(null);
11
- const isOverflowing = overflowCount > 0;
12
- useIsomorphicLayoutEffect(() => {
13
- if (ref.current) {
14
- return registerOverflowMenu(ref.current);
15
- }
16
- }, [registerOverflowMenu, isOverflowing, elementId]);
17
- useIsomorphicLayoutEffect(() => {
18
- if (isOverflowing) {
19
- updateOverflow();
20
- }
21
- }, [isOverflowing, updateOverflow, ref]);
22
- return {
23
- ref,
24
- overflowCount,
25
- isOverflowing
26
- };
6
+ const elementId = useId('overflow-menu', id);
7
+ const overflowCount = useOverflowCount();
8
+ const registerOverflowMenu = useOverflowContext((v)=>v.registerOverflowMenu);
9
+ const updateOverflow = useOverflowContext((v)=>v.updateOverflow);
10
+ const ref = React.useRef(null);
11
+ const isOverflowing = overflowCount > 0;
12
+ useIsomorphicLayoutEffect(()=>{
13
+ if (ref.current) {
14
+ return registerOverflowMenu(ref.current);
15
+ }
16
+ }, [
17
+ registerOverflowMenu,
18
+ isOverflowing,
19
+ elementId
20
+ ]);
21
+ useIsomorphicLayoutEffect(()=>{
22
+ if (isOverflowing) {
23
+ updateOverflow();
24
+ }
25
+ }, [
26
+ isOverflowing,
27
+ updateOverflow,
28
+ ref
29
+ ]);
30
+ return {
31
+ ref,
32
+ overflowCount,
33
+ isOverflowing
34
+ };
27
35
  }
36
+
28
37
  //# sourceMappingURL=useOverflowMenu.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,KAAK,EAAEC,yBAAyB,QAAQ;AACjD,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AAEjC,OAAO,SAASC,gBAA8CC,EAAW,EAAE;EACzE,MAAMC,SAAA,GAAYN,KAAA,CAAM,iBAAiBK,EAAA;EACzC,MAAME,aAAA,GAAgBJ,gBAAA;EACtB,MAAMK,oBAAA,GAAuBN,kBAAA,CAAmBO,CAAA,IAAKA,CAAA,CAAED,oBAAoB;EAC3E,MAAME,cAAA,GAAiBR,kBAAA,CAAmBO,CAAA,IAAKA,CAAA,CAAEC,cAAc;EAC/D,MAAMC,GAAA,GAAMZ,KAAA,CAAMa,MAAM,CAAW,IAAI;EACvC,MAAMC,aAAA,GAAgBN,aAAA,GAAgB;EAEtCN,yBAAA,CAA0B,MAAM;IAC9B,IAAIU,GAAA,CAAIG,OAAO,EAAE;MACf,OAAON,oBAAA,CAAqBG,GAAA,CAAIG,OAAO;IACzC;EACF,GAAG,CAACN,oBAAA,EAAsBK,aAAA,EAAeP,SAAA,CAAU;EAEnDL,yBAAA,CAA0B,MAAM;IAC9B,IAAIY,aAAA,EAAe;MACjBH,cAAA;IACF;EACF,GAAG,CAACG,aAAA,EAAeH,cAAA,EAAgBC,GAAA,CAAI;EAEvC,OAAO;IAAEA,GAAA;IAAKJ,aAAA;IAAeM;EAAc;AAC7C"}
1
+ {"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC,gBAA8CC,EAAW,EAAE;IACzE,MAAMC,YAAYN,MAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ;IACtB,MAAMK,uBAAuBN,mBAAmBO,CAAAA,IAAKA,EAAED,oBAAoB;IAC3E,MAAME,iBAAiBR,mBAAmBO,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMZ,MAAMa,MAAM,CAAW,IAAI;IACvC,MAAMC,gBAAgBN,gBAAgB;IAEtCN,0BAA0B,IAAM;QAC9B,IAAIU,IAAIG,OAAO,EAAE;YACf,OAAON,qBAAqBG,IAAIG,OAAO;QACzC,CAAC;IACH,GAAG;QAACN;QAAsBK;QAAeP;KAAU;IAEnDL,0BAA0B,IAAM;QAC9B,IAAIY,eAAe;YACjBH;QACF,CAAC;IACH,GAAG;QAACG;QAAeH;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKJ;QAAeM;IAAc;AAC7C,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../lib/components/Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {\n const styles = useOverflowStyles();\n const {\n children,\n minimumVisible,\n overflowAxis = 'horizontal',\n overflowDirection,\n padding\n } = props;\n const [overflowState, setOverflowState] = React.useState({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {}\n });\n // useOverflowContainer wraps this method in a useEventCallback.\n const update = data => {\n const {\n visibleItems,\n invisibleItems,\n groupVisibility\n } = data;\n const itemVisibility = {};\n visibleItems.forEach(x => itemVisibility[x.id] = true);\n invisibleItems.forEach(x => itemVisibility[x.id] = false);\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility\n };\n });\n };\n const {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute\n });\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n }\n }, clonedChild);\n});\n//# sourceMappingURL=Overflow.js.map"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAI3B,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EACJC,SAAQ,EACRC,eAAc,EACdC,cAAe,aAAY,EAC3BC,kBAAiB,EACjBC,QAAO,EACR,GAAGR;IACJ,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACvDC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IACA,gEAAgE;IAChE,MAAMC,SAASC,CAAAA,OAAQ;QACrB,MAAM,EACJC,aAAY,EACZC,eAAc,EACdJ,gBAAe,EAChB,GAAGE;QACJ,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAACC,CAAAA,IAAKP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,IAAI;QACrDH,eAAeC,OAAO,CAACC,CAAAA,IAAKP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,KAAK;QACxDX,iBAAiB,IAAM;YACrB,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACI,MAAM,GAAG;gBAC1CT;gBACAC;YACF;QACF;IACF;IACA,MAAM,EACJS,aAAY,EACZC,aAAY,EACZC,eAAc,EACdC,qBAAoB,EACrB,GAAGC,IAAAA,0CAAoB,EAACZ,QAAQ;QAC/BR;QACAD;QACAE;QACAH;QACAuB,wBAAwBC,+CAAyB;IACnD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC3B,UAAU;QACxDH,KAAK+B,IAAAA,6BAAa,EAACT,cAActB;QACjCgC,WAAWC,IAAAA,oBAAY,EAAChC,OAAOiC,YAAY,EAAEjC,OAAOkC,gBAAgB,EAAEhC,SAASJ,KAAK,CAACiC,SAAS;IAChG;IACA,OAAO,WAAW,GAAEnC,OAAMuC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAChEC,OAAO;YACL3B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCY;YACAC;YACAC;QACF;IACF,GAAGI;AACL,IACA,oCAAoC"}
1
+ {"version":3,"sources":["../../lib/components/Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const styles = useOverflowStyles();\n const { children , minimumVisible , overflowAxis ='horizontal' , overflowDirection , padding } = props;\n const [overflowState, setOverflowState] = React.useState({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {}\n });\n // useOverflowContainer wraps this method in a useEventCallback.\n const update = (data)=>{\n const { visibleItems , invisibleItems , groupVisibility } = data;\n const itemVisibility = {};\n visibleItems.forEach((x)=>itemVisibility[x.id] = true);\n invisibleItems.forEach((x)=>itemVisibility[x.id] = false);\n setOverflowState(()=>{\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility\n };\n });\n };\n const { containerRef , registerItem , updateOverflow , registerOverflowMenu } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute\n });\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n }\n }, clonedChild);\n});\n\n//# sourceMappingURL=Overflow.js.map"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;aAAAA;;;6DARM;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACrE,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,SAAQ,EAAGC,eAAc,EAAGC,cAAc,aAAY,EAAGC,kBAAiB,EAAGC,QAAO,EAAG,GAAGR;IAClG,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC,OAAO;QACnB,MAAM,EAAEC,aAAY,EAAGC,eAAc,EAAGJ,gBAAe,EAAG,GAAGE;QAC7D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC,IAAIP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,IAAI;QACrDH,eAAeC,OAAO,CAAC,CAACC,IAAIP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,KAAK;QACxDX,iBAAiB,IAAI;YACjB,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACI,MAAM,GAAG;gBAC1CT;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAES,aAAY,EAAGC,aAAY,EAAGC,eAAc,EAAGC,qBAAoB,EAAG,GAAGC,IAAAA,0CAAoB,EAACZ,QAAQ;QAC1GR;QACAD;QACAE;QACAH;QACAuB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC3B,UAAU;QACtDH,KAAK+B,IAAAA,6BAAa,EAACT,cAActB;QACjCgC,WAAWC,IAAAA,oBAAY,EAAChC,OAAOiC,YAAY,EAAEjC,OAAOkC,gBAAgB,EAAEhC,SAASJ,KAAK,CAACiC,SAAS;IAClG;IACA,OAAO,WAAW,GAAGnC,OAAMuC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAC/DC,OAAO;YACH3B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCY;YACAC;YACAC;QACJ;IACJ,GAAGI;AACP,IAEA,oCAAoC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/OverflowItem/OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\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 = /*#__PURE__*/React.forwardRef((props, ref) => {\n const {\n id,\n groupId,\n priority,\n children\n } = props;\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref)\n });\n});\n//# sourceMappingURL=OverflowItem.js.map"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","applyTriggerPropsToChildren","useMergedRefs"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;gCACoC;iCAC3B;AAKzB,MAAMA,eAAe,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACxE,MAAM,EACJC,GAAE,EACFC,QAAO,EACPC,SAAQ,EACRC,SAAQ,EACT,GAAGL;IACJ,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,OAAOK,IAAAA,2CAA2B,EAACH,UAAU;QAC3CJ,KAAKQ,IAAAA,6BAAa,EAACH,cAAcL;IACnC;AACF,IACA,wCAAwC"}
1
+ {"version":3,"sources":["../../../lib/components/OverflowItem/OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const { id , groupId , priority , children } = props;\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref)\n });\n});\n\n//# sourceMappingURL=OverflowItem.js.map"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","applyTriggerPropsToChildren","useMergedRefs"],"mappings":";;;;+BAMiBA;;aAAAA;;;6DANM;gCACoC;iCAC3B;AAIrB,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACzE,MAAM,EAAEC,GAAE,EAAGC,QAAO,EAAGC,SAAQ,EAAGC,SAAQ,EAAG,GAAGL;IAChD,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,OAAOK,IAAAA,2CAA2B,EAACH,UAAU;QACzCJ,KAAKQ,IAAAA,6BAAa,EAACH,cAAcL;IACrC;AACJ,IAEA,wCAAwC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/OverflowItem/OverflowItem.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=OverflowItem.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,8CAA8C"}
1
+ {"version":3,"sources":["../../../lib/components/OverflowItem/OverflowItem.types.js"],"sourcesContent":["import * as React from 'react';\n\n//# sourceMappingURL=OverflowItem.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CAEvB,8CAA8C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/OverflowItem/index.js"],"sourcesContent":["export { OverflowItem } from './OverflowItem';\n//# sourceMappingURL=index.js.map"],"names":["OverflowItem"],"mappings":";;;;+BAASA;;aAAAA,0BAAY;;8BAAQ;CAC7B,iCAAiC"}
1
+ {"version":3,"sources":["../../../lib/components/OverflowItem/index.js"],"sourcesContent":["export { OverflowItem } from './OverflowItem';\n\n//# sourceMappingURL=index.js.map"],"names":["OverflowItem"],"mappings":";;;;+BAASA;;aAAAA,0BAAY;;8BAAQ;CAE7B,iCAAiC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/constants.js"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n//# sourceMappingURL=constants.js.map"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"mappings":";;;;;;;;;;;IAAaA,gBAAgB,MAAhBA;IACAC,kBAAkB,MAAlBA;IACAC,kBAAkB,MAAlBA;;AAFN,MAAMF,mBAAmB;AACzB,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB,sBAClC,qCAAqC"}
1
+ {"version":3,"sources":["../lib/constants.js"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n\n//# sourceMappingURL=constants.js.map"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"mappings":";;;;;;;;;;;IAAaA,gBAAgB,MAAhBA;IACAC,kBAAkB,MAAlBA;IACAC,kBAAkB,MAAlBA;;AAFN,MAAMF,mBAAmB;AACzB,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB,sBAElC,qCAAqC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n//# sourceMappingURL=index.js.map"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowContext","OverflowItem"],"mappings":";;;;;;;;;;;IAASA,QAAQ,MAARA,kBAAQ;IACRC,gBAAgB,MAAhBA,2BAAgB;IAAEC,kBAAkB,MAAlBA,6BAAkB;IAAEC,kBAAkB,MAAlBA,6BAAkB;IACxDC,yBAAyB,MAAzBA,oDAAyB;IACzBC,wBAAwB,MAAxBA,kDAAwB;IACxBC,oBAAoB,MAApBA,0CAAoB;IACpBC,gBAAgB,MAAhBA,kCAAgB;IAChBC,eAAe,MAAfA,gCAAe;IACfC,eAAe,MAAfA,gCAAe;IACfC,kBAAkB,MAAlBA,mCAAkB;IAClBC,YAAY,MAAZA,0BAAY;;0BATI;2BACgD;2CAC/B;0CACD;sCACJ;kCACJ;iCACD;iCACA;iCACG;8BACN;CAC7B,iCAAiC"}
1
+ {"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n\n//# sourceMappingURL=index.js.map"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowContext","OverflowItem"],"mappings":";;;;;;;;;;;IAASA,QAAQ,MAARA,kBAAQ;IACRC,gBAAgB,MAAhBA,2BAAgB;IAAEC,kBAAkB,MAAlBA,6BAAkB;IAAEC,kBAAkB,MAAlBA,6BAAkB;IACxDC,yBAAyB,MAAzBA,oDAAyB;IACzBC,wBAAwB,MAAxBA,kDAAwB;IACxBC,oBAAoB,MAApBA,0CAAoB;IACpBC,gBAAgB,MAAhBA,kCAAgB;IAChBC,eAAe,MAAfA,gCAAe;IACfC,eAAe,MAAfA,gCAAe;IACfC,kBAAkB,MAAlBA,mCAAkB;IAClBC,YAAY,MAAZA,0BAAY;;0BATI;2BACgD;2CAC/B;0CACD;sCACJ;kCACJ;iCACD;iCACA;iCACG;8BACN;CAE7B,iCAAiC"}
@@ -13,7 +13,7 @@ _export(exports, {
13
13
  useOverflowContext: ()=>useOverflowContext
14
14
  });
15
15
  const _reactContextSelector = require("@fluentui/react-context-selector");
16
- const OverflowContext = /*#__PURE__*/ (0, _reactContextSelector.createContext)(undefined);
16
+ const OverflowContext = (0, _reactContextSelector.createContext)(undefined);
17
17
  const overflowContextDefaultValue = {
18
18
  itemVisibility: {},
19
19
  groupVisibility: {},
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/overflowContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nexport const OverflowContext = /*#__PURE__*/createContext(undefined);\nconst overflowContextDefaultValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null\n};\n/**\n * @internal\n */\nexport const useOverflowContext = selector => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n//# sourceMappingURL=overflowContext.js.map"],"names":["OverflowContext","useOverflowContext","createContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,eAAe,MAAfA;IAYAC,kBAAkB,MAAlBA;;sCAbqC;AAC3C,MAAMD,kBAAkB,WAAW,GAAEE,IAAAA,mCAAa,EAACC;AAC1D,MAAMC,8BAA8B;IAClCC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa,KAAK;IAClBC,cAAc,IAAM,IAAM,IAAI;IAC9BC,gBAAgB,IAAM,IAAI;IAC1BC,sBAAsB,IAAM,IAAM,IAAI;AACxC;AAIO,MAAMT,qBAAqBU,CAAAA,WAAYC,IAAAA,wCAAkB,EAACZ,iBAAiB,CAACa,MAAMT,2BAA2B,GAAKO,SAASE,OAClI,2CAA2C"}
1
+ {"version":3,"sources":["../lib/overflowContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nexport const OverflowContext = createContext(undefined);\nconst overflowContextDefaultValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: ()=>()=>null,\n updateOverflow: ()=>null,\n registerOverflowMenu: ()=>()=>null\n};\n/**\n * @internal\n */ export const useOverflowContext = (selector)=>useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));\n\n//# sourceMappingURL=overflowContext.js.map"],"names":["OverflowContext","useOverflowContext","createContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,eAAe,MAAfA;IAWIC,kBAAkB,MAAlBA;;sCAZiC;AAC3C,MAAMD,kBAAkBE,IAAAA,mCAAa,EAACC;AAC7C,MAAMC,8BAA8B;IAChCC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa,KAAK;IAClBC,cAAc,IAAI,IAAI,IAAI;IAC1BC,gBAAgB,IAAI,IAAI;IACxBC,sBAAsB,IAAI,IAAI,IAAI;AACtC;AAGW,MAAMT,qBAAqB,CAACU,WAAWC,IAAAA,wCAAkB,EAACZ,iBAAiB,CAACa,MAAMT,2BAA2B,GAAGO,SAASE,OAEpI,2CAA2C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,iCAAiC"}
1
+ {"version":3,"sources":["../lib/types.js"],"sourcesContent":["import * as React from 'react';\n\n//# sourceMappingURL=types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CAEvB,iCAAiC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/useIsOverflowGroupVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id) {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n//# sourceMappingURL=useIsOverflowGroupVisible.js.map"],"names":["useIsOverflowGroupVisible","id","useOverflowContext","ctx","groupVisibility"],"mappings":";;;;+BAKgBA;;aAAAA;;iCALmB;AAK5B,SAASA,0BAA0BC,EAAE,EAAE;IAC5C,OAAOC,IAAAA,mCAAkB,EAACC,CAAAA,MAAOA,IAAIC,eAAe,CAACH,GAAG;AAC1D,EACA,qDAAqD"}
1
+ {"version":3,"sources":["../lib/useIsOverflowGroupVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */ export function useIsOverflowGroupVisible(id) {\n return useOverflowContext((ctx)=>ctx.groupVisibility[id]);\n}\n\n//# sourceMappingURL=useIsOverflowGroupVisible.js.map"],"names":["useIsOverflowGroupVisible","id","useOverflowContext","ctx","groupVisibility"],"mappings":";;;;+BAIoBA;;aAAAA;;iCAJe;AAIxB,SAASA,0BAA0BC,EAAE,EAAE;IAC9C,OAAOC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,eAAe,CAACH,GAAG;AAC5D,EAEA,qDAAqD"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/useIsOverflowItemVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\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) {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n//# sourceMappingURL=useIsOverflowItemVisible.js.map"],"names":["useIsOverflowItemVisible","id","useOverflowContext","ctx","itemVisibility"],"mappings":";;;;+BAKgBA;;aAAAA;;iCALmB;AAK5B,SAASA,yBAAyBC,EAAE,EAAE;IAC3C,OAAO,CAAC,CAACC,IAAAA,mCAAkB,EAACC,CAAAA,MAAOA,IAAIC,cAAc,CAACH,GAAG;AAC3D,EACA,oDAAoD"}
1
+ {"version":3,"sources":["../lib/useIsOverflowItemVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */ export function useIsOverflowItemVisible(id) {\n return !!useOverflowContext((ctx)=>ctx.itemVisibility[id]);\n}\n\n//# sourceMappingURL=useIsOverflowItemVisible.js.map"],"names":["useIsOverflowItemVisible","id","useOverflowContext","ctx","itemVisibility"],"mappings":";;;;+BAIoBA;;aAAAA;;iCAJe;AAIxB,SAASA,yBAAyBC,EAAE,EAAE;IAC7C,OAAO,CAAC,CAACC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,cAAc,CAACH,GAAG;AAC7D,EAEA,oDAAoD"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\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 = (update, options) => {\n const {\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility\n } = options;\n // DOM ref to the overflow container element\n const containerRef = React.useRef(null);\n const updateOverflowItems = useEventCallback(update);\n const [overflowManager] = React.useState(() => canUseDOM() ? createOverflowManager() : null);\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',\n overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',\n padding: padding !== null && padding !== void 0 ? padding : 10,\n minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,\n onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => undefined,\n onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined\n });\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [updateOverflowItems, overflowManager, overflowDirection, overflowAxis, padding, minimumVisible, onUpdateItemVisibility]);\n const registerItem = React.useCallback(item => {\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);\n };\n }, [overflowManager]);\n const updateOverflow = React.useCallback(() => {\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\n }, [overflowManager]);\n const registerOverflowMenu = React.useCallback(el => {\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n return () => {\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }, [overflowManager]);\n return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n };\n};\nexport const updateVisibilityAttribute = ({\n item,\n visible\n}) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n//# sourceMappingURL=useOverflowContainer.js.map"],"names":["useOverflowContainer","updateVisibilityAttribute","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","containerRef","React","useRef","updateOverflowItems","useEventCallback","overflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","undefined","onUpdateOverflow","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","updateOverflow","registerOverflowMenu","el","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","visible"],"mappings":"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"}
1
+ {"version":3,"sources":["../lib/useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\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 */ export const useOverflowContainer = (update, options)=>{\n const { overflowAxis , overflowDirection , padding , minimumVisible , onUpdateItemVisibility } = options;\n // DOM ref to the overflow container element\n const containerRef = React.useRef(null);\n const updateOverflowItems = useEventCallback(update);\n const [overflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);\n useIsomorphicLayoutEffect(()=>{\n if (!containerRef.current) {\n return;\n }\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',\n overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',\n padding: padding !== null && padding !== void 0 ? padding : 10,\n minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,\n onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,\n onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined\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 const registerItem = React.useCallback((item)=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n return ()=>{\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);\n };\n }, [\n overflowManager\n ]);\n const updateOverflow = React.useCallback(()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\n }, [\n overflowManager\n ]);\n const registerOverflowMenu = React.useCallback((el)=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n return ()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }, [\n overflowManager\n ]);\n return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n };\n};\nexport const updateVisibilityAttribute = ({ item , visible })=>{\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n\n//# sourceMappingURL=useOverflowContainer.js.map"],"names":["useOverflowContainer","updateVisibilityAttribute","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","containerRef","React","useRef","updateOverflowItems","useEventCallback","overflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","undefined","onUpdateOverflow","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","updateOverflow","registerOverflowMenu","el","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","visible"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/useOverflowCount.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () => useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n return acc;\n }, 0);\n});\n//# sourceMappingURL=useOverflowCount.js.map"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":";;;;+BAIaA;;aAAAA;;iCAJsB;AAI5B,MAAMA,mBAAmB,IAAMC,IAAAA,mCAAkB,EAACC,CAAAA,IAAK;QAC5D,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAK;YACrE,IAAI,CAACA,SAAS;gBACZF;YACF,CAAC;YACD,OAAOA;QACT,GAAG;IACL,IACA,4CAA4C"}
1
+ {"version":3,"sources":["../lib/useOverflowCount.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @returns Number of items that are overflowing\n */ export const useOverflowCount = ()=>useOverflowContext((v)=>{\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{\n if (!visible) {\n acc++;\n }\n return acc;\n }, 0);\n });\n\n//# sourceMappingURL=useOverflowCount.js.map"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":";;;;+BAGiBA;;aAAAA;;iCAHkB;AAGxB,MAAMA,mBAAmB,IAAIC,IAAAA,mCAAkB,EAAC,CAACC,IAAI;QACxD,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAG;YACjE,IAAI,CAACA,SAAS;gBACVF;YACJ,CAAC;YACD,OAAOA;QACX,GAAG;IACP,IAEJ,4CAA4C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/useOverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\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(id, priority, groupId) {\n const ref = React.useRef(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority !== null && priority !== void 0 ? priority : 0,\n groupId\n });\n }\n }, [id, priority, registerItem, groupId]);\n return ref;\n}\n//# sourceMappingURL=useOverflowItem.js.map"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAWgBA;;aAAAA;;;6DAXO;gCACmB;iCACP;AAS5B,SAASA,gBAAgBC,EAAE,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IACrD,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,eAAeC,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEF,YAAY;IAC3DG,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIN,IAAIO,OAAO,EAAE;YACf,OAAOJ,aAAa;gBAClBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAIA,WAAW,CAAC;gBACjEC;YACF;QACF,CAAC;IACH,GAAG;QAACF;QAAIC;QAAUK;QAAcJ;KAAQ;IACxC,OAAOC;AACT,EACA,2CAA2C"}
1
+ {"version":3,"sources":["../lib/useOverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\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 */ export function useOverflowItem(id, priority, groupId) {\n const ref = React.useRef(null);\n const registerItem = useOverflowContext((v)=>v.registerItem);\n useIsomorphicLayoutEffect(()=>{\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority !== null && priority !== void 0 ? priority : 0,\n groupId\n });\n }\n }, [\n id,\n priority,\n registerItem,\n groupId\n ]);\n return ref;\n}\n\n//# sourceMappingURL=useOverflowItem.js.map"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAUoBA;;aAAAA;;;6DAVG;gCACmB;iCACP;AAQxB,SAASA,gBAAgBC,EAAE,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IACvD,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,eAAeC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,YAAY;IAC3DG,IAAAA,yCAAyB,EAAC,IAAI;QAC1B,IAAIN,IAAIO,OAAO,EAAE;YACb,OAAOJ,aAAa;gBAChBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAIA,WAAW,CAAC;gBACjEC;YACJ;QACJ,CAAC;IACL,GAAG;QACCF;QACAC;QACAK;QACAJ;KACH;IACD,OAAOC;AACX,EAEA,2CAA2C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/useOverflowMenu.js"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nexport function useOverflowMenu(id) {\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(null);\n const isOverflowing = overflowCount > 0;\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n return {\n ref,\n overflowCount,\n isOverflowing\n };\n}\n//# sourceMappingURL=useOverflowMenu.js.map"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"mappings":";;;;+BAIgBA;;aAAAA;;;6DAJO;gCAC0B;iCACd;kCACF;AAC1B,SAASA,gBAAgBC,EAAE,EAAE;IAClC,MAAMC,YAAYC,IAAAA,qBAAK,EAAC,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAgB;IACtC,MAAMC,uBAAuBC,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,gBAAgBT,gBAAgB;IACtCU,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIJ,IAAIK,OAAO,EAAE;YACf,OAAOT,qBAAqBI,IAAIK,OAAO;QACzC,CAAC;IACH,GAAG;QAACT;QAAsBO;QAAeX;KAAU;IACnDY,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAID,eAAe;YACjBJ;QACF,CAAC;IACH,GAAG;QAACI;QAAeJ;QAAgBC;KAAI;IACvC,OAAO;QACLA;QACAN;QACAS;IACF;AACF,EACA,2CAA2C"}
1
+ {"version":3,"sources":["../lib/useOverflowMenu.js"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nexport function useOverflowMenu(id) {\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(null);\n const isOverflowing = overflowCount > 0;\n useIsomorphicLayoutEffect(()=>{\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [\n registerOverflowMenu,\n isOverflowing,\n elementId\n ]);\n useIsomorphicLayoutEffect(()=>{\n if (isOverflowing) {\n updateOverflow();\n }\n }, [\n isOverflowing,\n updateOverflow,\n ref\n ]);\n return {\n ref,\n overflowCount,\n isOverflowing\n };\n}\n\n//# sourceMappingURL=useOverflowMenu.js.map"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"mappings":";;;;+BAIgBA;;aAAAA;;;6DAJO;gCAC0B;iCACd;kCACF;AAC1B,SAASA,gBAAgBC,EAAE,EAAE;IAChC,MAAMC,YAAYC,IAAAA,qBAAK,EAAC,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAgB;IACtC,MAAMC,uBAAuBC,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAkB,EAAC,CAACC,IAAIA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,gBAAgBT,gBAAgB;IACtCU,IAAAA,yCAAyB,EAAC,IAAI;QAC1B,IAAIJ,IAAIK,OAAO,EAAE;YACb,OAAOT,qBAAqBI,IAAIK,OAAO;QAC3C,CAAC;IACL,GAAG;QACCT;QACAO;QACAX;KACH;IACDY,IAAAA,yCAAyB,EAAC,IAAI;QAC1B,IAAID,eAAe;YACfJ;QACJ,CAAC;IACL,GAAG;QACCI;QACAJ;QACAC;KACH;IACD,OAAO;QACHA;QACAN;QACAS;IACJ;AACJ,EAEA,2CAA2C"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-overflow",
3
- "version": "0.0.0-nightly-20230529-0417.1",
3
+ "version": "0.0.0-nightly-20230530-0415.1",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -34,10 +34,10 @@
34
34
  "@fluentui/scripts-tasks": "*"
35
35
  },
36
36
  "dependencies": {
37
- "@fluentui/priority-overflow": "0.0.0-nightly-20230529-0417.1",
38
- "@fluentui/react-context-selector": "0.0.0-nightly-20230529-0417.1",
39
- "@fluentui/react-theme": "0.0.0-nightly-20230529-0417.1",
40
- "@fluentui/react-utilities": "0.0.0-nightly-20230529-0417.1",
37
+ "@fluentui/priority-overflow": "0.0.0-nightly-20230530-0415.1",
38
+ "@fluentui/react-context-selector": "0.0.0-nightly-20230530-0415.1",
39
+ "@fluentui/react-theme": "0.0.0-nightly-20230530-0415.1",
40
+ "@fluentui/react-utilities": "0.0.0-nightly-20230530-0415.1",
41
41
  "@griffel/react": "^1.5.2",
42
42
  "@swc/helpers": "^0.4.14"
43
43
  },