@fluentui/react-overflow 9.0.33 → 9.0.35
Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,85 @@
|
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 26 Sep 2023 17:44:13 GMT",
|
|
6
|
+
"tag": "@fluentui/react-overflow_v9.0.35",
|
|
7
|
+
"version": "9.0.35",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "yuanboxue@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-overflow",
|
|
13
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
|
|
14
|
+
"comment": "chore: trigger manual version bump after broken release"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-overflow",
|
|
19
|
+
"comment": "Bump @fluentui/priority-overflow to v9.1.7",
|
|
20
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-overflow",
|
|
25
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.36",
|
|
26
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-overflow",
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v9.1.14",
|
|
32
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-overflow",
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.5",
|
|
38
|
+
"commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Tue, 26 Sep 2023 15:31:54 GMT",
|
|
45
|
+
"tag": "@fluentui/react-overflow_v9.0.34",
|
|
46
|
+
"version": "9.0.34",
|
|
47
|
+
"comments": {
|
|
48
|
+
"patch": [
|
|
49
|
+
{
|
|
50
|
+
"author": "martinhochel@microsoft.com",
|
|
51
|
+
"package": "@fluentui/react-overflow",
|
|
52
|
+
"commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
|
|
53
|
+
"comment": "fix: bump swc core to mitigate transpilation memory leaks"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-overflow",
|
|
58
|
+
"comment": "Bump @fluentui/priority-overflow to v9.1.6",
|
|
59
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-overflow",
|
|
64
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.35",
|
|
65
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-overflow",
|
|
70
|
+
"comment": "Bump @fluentui/react-theme to v9.1.13",
|
|
71
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-overflow",
|
|
76
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.4",
|
|
77
|
+
"commit": "e16520437e10cd824ac254dd797e32762b5de72d"
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"date": "Wed, 06 Sep 2023 13:31:31 GMT",
|
|
6
84
|
"tag": "@fluentui/react-overflow_v9.0.33",
|
|
7
85
|
"version": "9.0.33",
|
|
8
86
|
"comments": {
|
|
@@ -11,13 +89,13 @@
|
|
|
11
89
|
"author": "beachball",
|
|
12
90
|
"package": "@fluentui/react-overflow",
|
|
13
91
|
"comment": "Bump @fluentui/react-context-selector to v9.1.34",
|
|
14
|
-
"commit": "
|
|
92
|
+
"commit": "52532950407fd4d3664ec6aa337855214233813b"
|
|
15
93
|
},
|
|
16
94
|
{
|
|
17
95
|
"author": "beachball",
|
|
18
96
|
"package": "@fluentui/react-overflow",
|
|
19
97
|
"comment": "Bump @fluentui/react-utilities to v9.13.3",
|
|
20
|
-
"commit": "
|
|
98
|
+
"commit": "52532950407fd4d3664ec6aa337855214233813b"
|
|
21
99
|
}
|
|
22
100
|
]
|
|
23
101
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,44 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 Sep 2023 17:44:13 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.35)
|
|
8
|
+
|
|
9
|
+
Tue, 26 Sep 2023 17:44:13 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.34..@fluentui/react-overflow_v9.0.35)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
|
|
15
|
+
- Bump @fluentui/priority-overflow to v9.1.7 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v9.1.36 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.0.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.34)
|
|
21
|
+
|
|
22
|
+
Tue, 26 Sep 2023 15:31:54 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.33..@fluentui/react-overflow_v9.0.34)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
|
|
28
|
+
- Bump @fluentui/priority-overflow to v9.1.6 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
29
|
+
- Bump @fluentui/react-context-selector to v9.1.35 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
30
|
+
- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
|
|
32
|
+
|
|
7
33
|
## [9.0.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.33)
|
|
8
34
|
|
|
9
|
-
Wed, 06 Sep 2023 13:
|
|
35
|
+
Wed, 06 Sep 2023 13:31:31 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.32..@fluentui/react-overflow_v9.0.33)
|
|
11
37
|
|
|
12
38
|
### Patches
|
|
13
39
|
|
|
14
|
-
- Bump @fluentui/react-context-selector to v9.1.34 ([PR #
|
|
15
|
-
- Bump @fluentui/react-utilities to v9.13.3 ([PR #
|
|
40
|
+
- Bump @fluentui/react-context-selector to v9.1.34 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
|
|
41
|
+
- Bump @fluentui/react-utilities to v9.13.3 ([PR #29080](https://github.com/microsoft/fluentui/pull/29080) by beachball)
|
|
16
42
|
|
|
17
43
|
## [9.0.32](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.32)
|
|
18
44
|
|
|
@@ -40,44 +40,37 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERF
|
|
|
40
40
|
onUpdateItemVisibility
|
|
41
41
|
]);
|
|
42
42
|
const registerItem = React.useCallback((item)=>{
|
|
43
|
-
|
|
44
|
-
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addItem(item);
|
|
43
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
|
45
44
|
item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
|
|
46
45
|
return ()=>{
|
|
47
|
-
var _overflowManager;
|
|
48
46
|
item.element.removeAttribute(DATA_OVERFLOWING);
|
|
49
47
|
item.element.removeAttribute(DATA_OVERFLOW_ITEM);
|
|
50
|
-
|
|
48
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
|
|
51
49
|
};
|
|
52
50
|
}, [
|
|
53
51
|
overflowManager
|
|
54
52
|
]);
|
|
55
53
|
const registerDivider = React.useCallback((divider)=>{
|
|
56
|
-
var _overflowManager;
|
|
57
54
|
const el = divider.element;
|
|
58
|
-
|
|
55
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
|
|
59
56
|
el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');
|
|
60
57
|
return ()=>{
|
|
61
|
-
|
|
62
|
-
divider.groupId && ((_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeDivider(divider.groupId));
|
|
58
|
+
divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
|
|
63
59
|
el.removeAttribute(DATA_OVERFLOW_DIVIDER);
|
|
64
60
|
};
|
|
65
61
|
}, [
|
|
66
62
|
overflowManager
|
|
67
63
|
]);
|
|
68
64
|
const updateOverflow = React.useCallback(()=>{
|
|
69
|
-
|
|
70
|
-
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.update();
|
|
65
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
|
71
66
|
}, [
|
|
72
67
|
overflowManager
|
|
73
68
|
]);
|
|
74
69
|
const registerOverflowMenu = React.useCallback((el)=>{
|
|
75
|
-
|
|
76
|
-
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addOverflowMenu(el);
|
|
70
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
|
77
71
|
el.setAttribute(DATA_OVERFLOW_MENU, '');
|
|
78
72
|
return ()=>{
|
|
79
|
-
|
|
80
|
-
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeOverflowMenu();
|
|
73
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
|
|
81
74
|
el.removeAttribute(DATA_OVERFLOW_MENU);
|
|
82
75
|
};
|
|
83
76
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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 OverflowDividerEntry,\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_DIVIDER, 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 registerDivider = React.useCallback(\n (divider: OverflowDividerEntry) => {\n const el = divider.element;\n overflowManager?.addDivider(divider);\n el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n divider.groupId && overflowManager?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\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 registerDivider,\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_DIVIDER","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","registerDivider","divider","el","addDivider","groupId","removeDivider","updateOverflow","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateVisibilityAttribute","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,8BAA8B;AAapE,SAASC,SAAS,EAAEC,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AAEnG,SAASC,gBAAgB,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,cAAc;AAE9G;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,QACAC;IAEA,MAAM,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAEC,cAAc,EAAEC,sBAAsB,EAAE,GAAGL;IAE7F,4CAA4C;IAC5C,MAAMM,eAAejB,MAAMkB,MAAM,CAAW;IAC5C,MAAMC,sBAAsBhB,iBAAiBO;IAE7C,MAAM,CAACU,gBAAgB,GAAGpB,MAAMqB,QAAQ,CAAyB,IAC/DnB,cAAcD,0BAA0B;IAG1CG,0BAA0B;QACxB,IAAI,CAACa,aAAaK,OAAO,EAAE;YACzB;QACF;QAEA,IAAIF,iBAAiB;YACnBA,gBAAgBG,OAAO,CAACN,aAAaK,OAAO,EAAE;gBAC5CT,mBAAmBA,8BAAAA,+BAAAA,oBAAqB;gBACxCD,cAAcA,yBAAAA,0BAAAA,eAAgB;gBAC9BE,SAASA,oBAAAA,qBAAAA,UAAW;gBACpBC,gBAAgBA,2BAAAA,4BAAAA,iBAAkB;gBAClCC,wBAAwBA,mCAAAA,oCAAAA,yBAA2B,IAAMQ;gBACzDC,kBAAkBN,gCAAAA,iCAAAA,sBAAwB,IAAMK;YAClD;YAEA,OAAO;gBACLJ,gBAAgBM,UAAU;YAC5B;QACF;IACF,GAAG;QACDP;QACAC;QACAP;QACAD;QACAE;QACAC;QACAC;KACD;IAED,MAAMW,eAAe3B,MAAM4B,WAAW,CACpC,CAACC;
|
|
1
|
+
{"version":3,"sources":["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 OverflowDividerEntry,\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_DIVIDER, 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 registerDivider = React.useCallback(\n (divider: OverflowDividerEntry) => {\n const el = divider.element;\n overflowManager?.addDivider(divider);\n el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n divider.groupId && overflowManager?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\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 registerDivider,\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_DIVIDER","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","registerDivider","divider","el","addDivider","groupId","removeDivider","updateOverflow","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
@@ -54,44 +54,37 @@ const useOverflowContainer = (update, options)=>{
|
|
|
54
54
|
onUpdateItemVisibility
|
|
55
55
|
]);
|
|
56
56
|
const registerItem = _react.useCallback((item)=>{
|
|
57
|
-
|
|
58
|
-
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addItem(item);
|
|
57
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
|
59
58
|
item.element.setAttribute(_constants.DATA_OVERFLOW_ITEM, '');
|
|
60
59
|
return ()=>{
|
|
61
|
-
var _overflowManager;
|
|
62
60
|
item.element.removeAttribute(_constants.DATA_OVERFLOWING);
|
|
63
61
|
item.element.removeAttribute(_constants.DATA_OVERFLOW_ITEM);
|
|
64
|
-
|
|
62
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
|
|
65
63
|
};
|
|
66
64
|
}, [
|
|
67
65
|
overflowManager
|
|
68
66
|
]);
|
|
69
67
|
const registerDivider = _react.useCallback((divider)=>{
|
|
70
|
-
var _overflowManager;
|
|
71
68
|
const el = divider.element;
|
|
72
|
-
|
|
69
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
|
|
73
70
|
el && el.setAttribute(_constants.DATA_OVERFLOW_DIVIDER, '');
|
|
74
71
|
return ()=>{
|
|
75
|
-
|
|
76
|
-
divider.groupId && ((_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeDivider(divider.groupId));
|
|
72
|
+
divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
|
|
77
73
|
el.removeAttribute(_constants.DATA_OVERFLOW_DIVIDER);
|
|
78
74
|
};
|
|
79
75
|
}, [
|
|
80
76
|
overflowManager
|
|
81
77
|
]);
|
|
82
78
|
const updateOverflow = _react.useCallback(()=>{
|
|
83
|
-
|
|
84
|
-
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.update();
|
|
79
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
|
85
80
|
}, [
|
|
86
81
|
overflowManager
|
|
87
82
|
]);
|
|
88
83
|
const registerOverflowMenu = _react.useCallback((el)=>{
|
|
89
|
-
|
|
90
|
-
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.addOverflowMenu(el);
|
|
84
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
|
91
85
|
el.setAttribute(_constants.DATA_OVERFLOW_MENU, '');
|
|
92
86
|
return ()=>{
|
|
93
|
-
|
|
94
|
-
(_overflowManager = overflowManager) === null || _overflowManager === void 0 ? void 0 : _overflowManager.removeOverflowMenu();
|
|
87
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
|
|
95
88
|
el.removeAttribute(_constants.DATA_OVERFLOW_MENU);
|
|
96
89
|
};
|
|
97
90
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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_DIVIDER, 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
|
|
1
|
+
{"version":3,"sources":["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_DIVIDER, 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 registerDivider = React.useCallback((divider)=>{\n const el = divider.element;\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);\n el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n return ()=>{\n divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\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 registerDivider\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"],"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","registerDivider","divider","el","addDivider","DATA_OVERFLOW_DIVIDER","groupId","removeDivider","updateOverflow","registerOverflowMenu","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","visible"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.35",
|
|
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": "^9.1.
|
|
38
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
39
|
-
"@fluentui/react-theme": "^9.1.
|
|
40
|
-
"@fluentui/react-utilities": "^9.13.
|
|
37
|
+
"@fluentui/priority-overflow": "^9.1.7",
|
|
38
|
+
"@fluentui/react-context-selector": "^9.1.36",
|
|
39
|
+
"@fluentui/react-theme": "^9.1.14",
|
|
40
|
+
"@fluentui/react-utilities": "^9.13.5",
|
|
41
41
|
"@griffel/react": "^1.5.14",
|
|
42
42
|
"@swc/helpers": "^0.5.1"
|
|
43
43
|
},
|