@fluentui/react-overflow 9.0.18 → 9.0.20

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 (75) hide show
  1. package/CHANGELOG.json +75 -1
  2. package/CHANGELOG.md +26 -2
  3. package/dist/index.d.ts +33 -1
  4. package/lib/components/Overflow.js +45 -59
  5. package/lib/components/Overflow.js.map +1 -1
  6. package/lib/components/OverflowDivider/OverflowDivider.js +13 -0
  7. package/lib/components/OverflowDivider/OverflowDivider.js.map +1 -0
  8. package/lib/components/OverflowDivider/OverflowDivider.types.js +1 -0
  9. package/lib/components/OverflowDivider/OverflowDivider.types.js.map +1 -0
  10. package/lib/components/OverflowItem/OverflowItem.js +6 -13
  11. package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
  12. package/lib/components/OverflowItem/OverflowItem.types.js +0 -1
  13. package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
  14. package/lib/components/OverflowItem/index.js +0 -1
  15. package/lib/components/OverflowItem/index.js.map +1 -1
  16. package/lib/components/useOverflowStyles.styles.js.map +1 -1
  17. package/lib/constants.js +1 -1
  18. package/lib/constants.js.map +1 -1
  19. package/lib/index.js +3 -2
  20. package/lib/index.js.map +1 -1
  21. package/lib/overflowContext.js +9 -10
  22. package/lib/overflowContext.js.map +1 -1
  23. package/lib/types.js +0 -1
  24. package/lib/types.js.map +1 -1
  25. package/lib/useIsOverflowGroupVisible.js +2 -4
  26. package/lib/useIsOverflowGroupVisible.js.map +1 -1
  27. package/lib/useIsOverflowItemVisible.js +2 -4
  28. package/lib/useIsOverflowItemVisible.js.map +1 -1
  29. package/lib/useOverflowContainer.js +82 -67
  30. package/lib/useOverflowContainer.js.map +1 -1
  31. package/lib/useOverflowCount.js +8 -10
  32. package/lib/useOverflowCount.js.map +1 -1
  33. package/lib/useOverflowDivider.js +24 -0
  34. package/lib/useOverflowDivider.js.map +1 -0
  35. package/lib/useOverflowItem.js +17 -14
  36. package/lib/useOverflowItem.js.map +1 -1
  37. package/lib/useOverflowMenu.js +29 -22
  38. package/lib/useOverflowMenu.js.map +1 -1
  39. package/lib-commonjs/components/Overflow.js +7 -6
  40. package/lib-commonjs/components/Overflow.js.map +1 -1
  41. package/lib-commonjs/components/OverflowDivider/OverflowDivider.js +19 -0
  42. package/lib-commonjs/components/OverflowDivider/OverflowDivider.js.map +1 -0
  43. package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js +6 -0
  44. package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js.map +1 -0
  45. package/lib-commonjs/components/OverflowItem/OverflowItem.js +1 -3
  46. package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
  47. package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +0 -3
  48. package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
  49. package/lib-commonjs/components/OverflowItem/index.js +0 -3
  50. package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
  51. package/lib-commonjs/components/useOverflowStyles.styles.js +0 -2
  52. package/lib-commonjs/components/useOverflowStyles.styles.js.map +1 -1
  53. package/lib-commonjs/constants.js +4 -4
  54. package/lib-commonjs/constants.js.map +1 -1
  55. package/lib-commonjs/index.js +6 -4
  56. package/lib-commonjs/index.js.map +1 -1
  57. package/lib-commonjs/overflowContext.js +4 -5
  58. package/lib-commonjs/overflowContext.js.map +1 -1
  59. package/lib-commonjs/types.js +0 -3
  60. package/lib-commonjs/types.js.map +1 -1
  61. package/lib-commonjs/useIsOverflowGroupVisible.js +1 -3
  62. package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
  63. package/lib-commonjs/useIsOverflowItemVisible.js +1 -3
  64. package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
  65. package/lib-commonjs/useOverflowContainer.js +14 -4
  66. package/lib-commonjs/useOverflowContainer.js.map +1 -1
  67. package/lib-commonjs/useOverflowCount.js +1 -3
  68. package/lib-commonjs/useOverflowCount.js.map +1 -1
  69. package/lib-commonjs/useOverflowDivider.js +28 -0
  70. package/lib-commonjs/useOverflowDivider.js.map +1 -0
  71. package/lib-commonjs/useOverflowItem.js +1 -3
  72. package/lib-commonjs/useOverflowItem.js.map +1 -1
  73. package/lib-commonjs/useOverflowMenu.js +1 -3
  74. package/lib-commonjs/useOverflowMenu.js.map +1 -1
  75. package/package.json +6 -6
package/CHANGELOG.json CHANGED
@@ -2,7 +2,81 @@
2
2
  "name": "@fluentui/react-overflow",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 25 May 2023 09:57:45 GMT",
5
+ "date": "Tue, 20 Jun 2023 12:34:44 GMT",
6
+ "tag": "@fluentui/react-overflow_v9.0.20",
7
+ "version": "9.0.20",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "olfedias@microsoft.com",
12
+ "package": "@fluentui/react-overflow",
13
+ "commit": "cbdfdd61ae2ea8954fad2eb53d62c2b036416101",
14
+ "comment": "chore: update E2E tests"
15
+ }
16
+ ],
17
+ "patch": [
18
+ {
19
+ "author": "vkozlova@microsoft.com",
20
+ "package": "@fluentui/react-overflow",
21
+ "commit": "4dedf40597f3b5cfa63d8f2e28a79276eb816bda",
22
+ "comment": "Added support for custom divider"
23
+ },
24
+ {
25
+ "author": "beachball",
26
+ "package": "@fluentui/react-overflow",
27
+ "comment": "Bump @fluentui/priority-overflow to v9.1.0",
28
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-overflow",
33
+ "comment": "Bump @fluentui/react-context-selector to v9.1.23",
34
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui/react-overflow",
39
+ "comment": "Bump @fluentui/react-theme to v9.1.9",
40
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
41
+ },
42
+ {
43
+ "author": "beachball",
44
+ "package": "@fluentui/react-overflow",
45
+ "comment": "Bump @fluentui/react-utilities to v9.9.3",
46
+ "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
47
+ }
48
+ ]
49
+ }
50
+ },
51
+ {
52
+ "date": "Wed, 31 May 2023 06:46:16 GMT",
53
+ "tag": "@fluentui/react-overflow_v9.0.19",
54
+ "version": "9.0.19",
55
+ "comments": {
56
+ "patch": [
57
+ {
58
+ "author": "seanmonahan@microsoft.com",
59
+ "package": "@fluentui/react-overflow",
60
+ "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
61
+ "comment": "chore: Update Griffel to v1.5.7."
62
+ },
63
+ {
64
+ "author": "beachball",
65
+ "package": "@fluentui/react-overflow",
66
+ "comment": "Bump @fluentui/react-context-selector to v9.1.22",
67
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
68
+ },
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-overflow",
72
+ "comment": "Bump @fluentui/react-utilities to v9.9.2",
73
+ "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
74
+ }
75
+ ]
76
+ }
77
+ },
78
+ {
79
+ "date": "Thu, 25 May 2023 10:00:48 GMT",
6
80
  "tag": "@fluentui/react-overflow_v9.0.18",
7
81
  "version": "9.0.18",
8
82
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Jun 2023 12:34:44 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.20)
8
+
9
+ Tue, 20 Jun 2023 12:34:44 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.19..@fluentui/react-overflow_v9.0.20)
11
+
12
+ ### Patches
13
+
14
+ - Added support for custom divider ([PR #28011](https://github.com/microsoft/fluentui/pull/28011) by vkozlova@microsoft.com)
15
+ - Bump @fluentui/priority-overflow to v9.1.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
16
+ - Bump @fluentui/react-context-selector to v9.1.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
17
+ - Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
19
+
20
+ ## [9.0.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.19)
21
+
22
+ Wed, 31 May 2023 06:46:16 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.18..@fluentui/react-overflow_v9.0.19)
24
+
25
+ ### Patches
26
+
27
+ - chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
28
+ - Bump @fluentui/react-context-selector to v9.1.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
29
+ - Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
30
+
7
31
  ## [9.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.18)
8
32
 
9
- Thu, 25 May 2023 09:57:45 GMT
33
+ Thu, 25 May 2023 10:00:48 GMT
10
34
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.17..@fluentui/react-overflow_v9.0.18)
11
35
 
12
36
  ### Patches
package/dist/index.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import { ContextSelector } from '@fluentui/react-context-selector';
2
2
  import type { ObserveOptions } from '@fluentui/priority-overflow';
3
3
  import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
4
+ import type { OverflowDividerEntry } from '@fluentui/priority-overflow';
4
5
  import { OverflowGroupState } from '@fluentui/priority-overflow';
5
6
  import type { OverflowItemEntry } from '@fluentui/priority-overflow';
6
7
  import * as React_2 from 'react';
7
8
 
9
+ export declare const DATA_OVERFLOW_DIVIDER = "data-overflow-divider";
10
+
8
11
  export declare const DATA_OVERFLOW_ITEM = "data-overflow-item";
9
12
 
10
13
  export declare const DATA_OVERFLOW_MENU = "data-overflow-menu";
@@ -27,9 +30,30 @@ declare interface OverflowContextValue {
27
30
  hasOverflow: boolean;
28
31
  registerItem: (item: OverflowItemEntry) => () => void;
29
32
  registerOverflowMenu: (el: HTMLElement) => () => void;
33
+ registerDivider: (divider: OverflowDividerEntry) => () => void;
30
34
  updateOverflow: (padding?: number) => void;
31
35
  }
32
36
 
37
+ /**
38
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
39
+ * It does not render an element of its own.
40
+ */
41
+ export declare const OverflowDivider: React_2.ForwardRefExoticComponent<OverflowDividerProps & React_2.RefAttributes<unknown>>;
42
+
43
+ /**
44
+ * OverflowDividerProps
45
+ */
46
+ declare type OverflowDividerProps = {
47
+ /**
48
+ * Assigns the item to a group, group visibility can be watched.
49
+ */
50
+ groupId: string;
51
+ /**
52
+ * The single child that has overflow item behavior attached.
53
+ */
54
+ children: React_2.ReactElement;
55
+ };
56
+
33
57
  /**
34
58
  * Attaches overflow item behavior to its child registered with the OverflowContext.
35
59
  * It does not render an element of its own.
@@ -88,7 +112,7 @@ export declare const useOverflowContainer: <TElement extends HTMLElement>(update
88
112
  /**
89
113
  * @internal
90
114
  */
91
- export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {
115
+ export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu' | 'registerDivider'> {
92
116
  /**
93
117
  * Ref to apply to the container that will overflow
94
118
  */
@@ -105,6 +129,14 @@ export declare const useOverflowContext: <SelectedValue>(selector: ContextSelect
105
129
  */
106
130
  export declare const useOverflowCount: () => number;
107
131
 
132
+ /**
133
+ * @internal
134
+ * Registers an overflow item
135
+ * @param groupId - assigns the item to a group, group visibility can be watched
136
+ * @returns ref to assign to an intrinsic HTML element
137
+ */
138
+ export declare function useOverflowDivider<TElement extends HTMLElement>(groupId?: string): React_2.RefObject<TElement>;
139
+
108
140
  /**
109
141
  * @internal
110
142
  * Registers an overflow item
@@ -6,64 +6,50 @@ 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((item)=>{
22
+ itemVisibility[item.id] = true;
23
+ });
24
+ invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
25
+ setOverflowState(()=>{
26
+ return {
27
+ hasOverflow: data.invisibleItems.length > 0,
28
+ itemVisibility,
29
+ groupVisibility
30
+ };
31
+ });
32
+ };
33
+ const { containerRef , registerItem , updateOverflow , registerOverflowMenu , registerDivider } = useOverflowContainer(update, {
34
+ overflowDirection,
35
+ overflowAxis,
36
+ padding,
37
+ minimumVisible,
38
+ onUpdateItemVisibility: updateVisibilityAttribute
39
+ });
40
+ const clonedChild = applyTriggerPropsToChildren(children, {
41
+ ref: useMergedRefs(containerRef, ref),
42
+ className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)
43
+ });
44
+ return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {
45
+ value: {
46
+ itemVisibility: overflowState.itemVisibility,
47
+ groupVisibility: overflowState.groupVisibility,
48
+ hasOverflow: overflowState.hasOverflow,
49
+ registerItem,
50
+ updateOverflow,
51
+ registerOverflowMenu,
52
+ registerDivider
53
+ }
54
+ }, clonedChild);
68
55
  });
69
- //# 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":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AAEvF,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWR,MAAMS,UAAU,CAAC,CAACC,OAAsBC,MAAQ;IACtE,MAAMC,SAASL;IAEf,MAAM,EAAEM,SAAQ,EAAEC,eAAc,EAAEC,cAAe,aAAY,EAAEC,kBAAiB,EAAEC,QAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGnB,MAAMoB,QAAQ,CAAgB;QACtEC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA,OAAQ;QACvC,MAAM,EAAEC,aAAY,EAAEC,eAAc,EAAEJ,gBAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA,OAAQ;YAC3BP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG,IAAI;QAChC;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG,KAAK;QAEzDX,iBAAiB,IAAM;YACrB,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,aAAY,EAAEC,aAAY,EAAEC,eAAc,EAAEC,qBAAoB,EAAEC,gBAAe,EAAE,GAAG/B,qBAC5FkB,QACA;QACER;QACAD;QACAE;QACAH;QACAwB,wBAAwBjC;IAC1B;IAGF,MAAMkC,cAAcrC,4BAA4BW,UAAU;QACxDF,KAAKR,cAAc8B,cAActB;QACjC6B,WAAWvC,aAAaW,OAAO6B,YAAY,EAAE7B,OAAO8B,gBAAgB,EAAE7B,SAASH,KAAK,CAAC8B,SAAS;IAChG;IAEA,qBACE,oBAACpC,gBAAgBuC,QAAQ;QACvBC,OAAO;YACLtB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACF;OAECE;AAGP,GAAG"}
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
3
+ import { useOverflowDivider } from '../../useOverflowDivider';
4
+ /**
5
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
6
+ * It does not render an element of its own.
7
+ */ export const OverflowDivider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
8
+ const { groupId , children } = props;
9
+ const containerRef = useOverflowDivider(groupId);
10
+ return applyTriggerPropsToChildren(children, {
11
+ ref: useMergedRefs(containerRef, ref)
12
+ });
13
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["OverflowDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;CAGC,GACD,OAAO,MAAMC,gCAAkBJ,MAAMK,UAAU,CAAC,CAACC,OAA6BC,MAAQ;IACpF,MAAM,EAAEC,QAAO,EAAEC,SAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeP,mBAAmBK;IACxC,OAAOP,4BAA4BQ,UAAU;QAC3CF,KAAKL,cAAcQ,cAAcH;IACnC;AACF,GAAG"}
@@ -0,0 +1 @@
1
+ import * as React from 'react';
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["OverflowDivider.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowDividerProps\n */\nexport type OverflowDividerProps = {\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId: string;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -4,17 +4,10 @@ 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
  });
20
- //# 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":["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 @@
1
1
  import * as React from 'react';
2
- //# 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":["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 @@
1
1
  export { OverflowItem } from './OverflowItem';
2
- //# 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":["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":["useOverflowStyles.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,cAAc;AACnE,OAAO,MAAMC,iBAAiB,gBAAGH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWhC,CAAC"}
package/lib/constants.js CHANGED
@@ -1,4 +1,4 @@
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
- //# sourceMappingURL=constants.js.map
4
+ export const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';
@@ -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":["constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,mBAAmB;AACnD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,qBAAqB,qBAAqB;AACvD,OAAO,MAAMC,wBAAwB,wBAAwB"}
package/lib/index.js CHANGED
@@ -1,11 +1,12 @@
1
1
  export { Overflow } from './components/Overflow';
2
- export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
2
+ export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';
3
3
  export { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';
4
4
  export { useIsOverflowItemVisible } from './useIsOverflowItemVisible';
5
5
  export { useOverflowContainer } from './useOverflowContainer';
6
6
  export { useOverflowCount } from './useOverflowCount';
7
7
  export { useOverflowItem } from './useOverflowItem';
8
8
  export { useOverflowMenu } from './useOverflowMenu';
9
+ export { useOverflowDivider } from './useOverflowDivider';
9
10
  export { useOverflowContext } from './overflowContext';
10
11
  export { OverflowItem } from './components/OverflowItem/OverflowItem';
11
- //# sourceMappingURL=index.js.map
12
+ export { OverflowDivider } from './components/OverflowDivider/OverflowDivider';
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":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}
@@ -1,15 +1,14 @@
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
+ registerDivider: ()=>()=>null
10
11
  };
11
12
  /**
12
13
  * @internal
13
- */
14
- export const useOverflowContext = selector => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));
15
- //# sourceMappingURL=overflowContext.js.map
14
+ */ export const useOverflowContext = (selector)=>useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));
@@ -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":["overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\n/**\n * @internal\n */\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n registerOverflowMenu: (el: HTMLElement) => () => void;\n registerDivider: (divider: OverflowDividerEntry) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null,\n registerDivider: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContext","selector","ctx"],"mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB,mCAAmC;AAe/G,OAAO,MAAMC,kBAAkBF,cAC7BG,WACiC;AAEnC,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa,KAAK;IAClBC,cAAc,IAAM,IAAM,IAAI;IAC9BC,gBAAgB,IAAM,IAAI;IAC1BC,sBAAsB,IAAM,IAAM,IAAI;IACtCC,iBAAiB,IAAM,IAAM,IAAI;AACnC;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAgBC,WAChDZ,mBAAmBC,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
package/lib/types.js CHANGED
@@ -1,2 +1 @@
1
1
  import * as React from 'react';
2
- //# 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":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu' | 'registerDivider'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -2,8 +2,6 @@ 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
  }
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":["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,6 @@ 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
  }
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":["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"}