@fluentui/react-overflow 9.1.0 → 9.1.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 20 Nov 2023 09:51:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.1)
|
|
8
|
+
|
|
9
|
+
Mon, 20 Nov 2023 09:51:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.0..@fluentui/react-overflow_v9.1.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: register should happen again once observe options change ([PR #29375](https://github.com/microsoft/fluentui/pull/29375) by lingfan.gao@microsoft.com)
|
|
15
|
+
- Bump @fluentui/priority-overflow to v9.1.10 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.0)
|
|
8
18
|
|
|
9
|
-
Fri, 10 Nov 2023 13:
|
|
19
|
+
Fri, 10 Nov 2023 13:46:33 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.43..@fluentui/react-overflow_v9.1.0)
|
|
11
21
|
|
|
12
22
|
### Minor changes
|
|
@@ -1,43 +1,58 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { createOverflowManager } from '@fluentui/priority-overflow';
|
|
3
|
-
import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
3
|
+
import { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
4
4
|
import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
|
|
5
|
+
const noop = ()=>null;
|
|
5
6
|
/**
|
|
6
7
|
* @internal
|
|
7
8
|
* @param update - Callback when overflow state changes
|
|
8
9
|
* @param options - Options to configure the overflow container
|
|
9
10
|
* @returns - ref to attach to an intrinsic HTML element and imperative functions
|
|
10
11
|
*/ export const useOverflowContainer = (update, options)=>{
|
|
11
|
-
const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;
|
|
12
|
+
const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;
|
|
13
|
+
const onUpdateOverflow = useEventCallback(update);
|
|
14
|
+
const overflowOptions = React.useMemo(()=>({
|
|
15
|
+
overflowAxis,
|
|
16
|
+
overflowDirection,
|
|
17
|
+
padding,
|
|
18
|
+
minimumVisible,
|
|
19
|
+
onUpdateItemVisibility,
|
|
20
|
+
onUpdateOverflow
|
|
21
|
+
}), [
|
|
22
|
+
minimumVisible,
|
|
23
|
+
onUpdateItemVisibility,
|
|
24
|
+
overflowAxis,
|
|
25
|
+
overflowDirection,
|
|
26
|
+
padding,
|
|
27
|
+
onUpdateOverflow
|
|
28
|
+
]);
|
|
29
|
+
const firstMount = useFirstMount();
|
|
12
30
|
// DOM ref to the overflow container element
|
|
13
31
|
const containerRef = React.useRef(null);
|
|
14
|
-
const
|
|
15
|
-
|
|
32
|
+
const [overflowManager, setOverflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);
|
|
33
|
+
// On first mount there is no need to create an overflow manager and re-render
|
|
16
34
|
useIsomorphicLayoutEffect(()=>{
|
|
17
|
-
if (
|
|
18
|
-
|
|
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
|
-
};
|
|
35
|
+
if (firstMount && containerRef.current) {
|
|
36
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);
|
|
32
37
|
}
|
|
33
38
|
}, [
|
|
34
|
-
|
|
39
|
+
firstMount,
|
|
35
40
|
overflowManager,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
+
overflowOptions
|
|
42
|
+
]);
|
|
43
|
+
useIsomorphicLayoutEffect(()=>{
|
|
44
|
+
if (!containerRef.current || !canUseDOM() || firstMount) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
const newOverflowManager = createOverflowManager();
|
|
48
|
+
newOverflowManager.observe(containerRef.current, overflowOptions);
|
|
49
|
+
setOverflowManager(newOverflowManager);
|
|
50
|
+
return ()=>{
|
|
51
|
+
newOverflowManager.disconnect();
|
|
52
|
+
};
|
|
53
|
+
}, [
|
|
54
|
+
overflowOptions,
|
|
55
|
+
firstMount
|
|
41
56
|
]);
|
|
42
57
|
const registerItem = React.useCallback((item)=>{
|
|
43
58
|
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
|
@@ -53,7 +68,7 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERF
|
|
|
53
68
|
const registerDivider = React.useCallback((divider)=>{
|
|
54
69
|
const el = divider.element;
|
|
55
70
|
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
|
|
56
|
-
el
|
|
71
|
+
el.setAttribute(DATA_OVERFLOW_DIVIDER, '');
|
|
57
72
|
return ()=>{
|
|
58
73
|
divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
|
|
59
74
|
el.removeAttribute(DATA_OVERFLOW_DIVIDER);
|
|
@@ -61,11 +76,6 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERF
|
|
|
61
76
|
}, [
|
|
62
77
|
overflowManager
|
|
63
78
|
]);
|
|
64
|
-
const updateOverflow = React.useCallback(()=>{
|
|
65
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
|
66
|
-
}, [
|
|
67
|
-
overflowManager
|
|
68
|
-
]);
|
|
69
79
|
const registerOverflowMenu = React.useCallback((el)=>{
|
|
70
80
|
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
|
71
81
|
el.setAttribute(DATA_OVERFLOW_MENU, '');
|
|
@@ -76,12 +86,17 @@ import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERF
|
|
|
76
86
|
}, [
|
|
77
87
|
overflowManager
|
|
78
88
|
]);
|
|
89
|
+
const updateOverflow = React.useCallback(()=>{
|
|
90
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
|
91
|
+
}, [
|
|
92
|
+
overflowManager
|
|
93
|
+
]);
|
|
79
94
|
return {
|
|
80
|
-
containerRef,
|
|
81
95
|
registerItem,
|
|
82
|
-
|
|
96
|
+
registerDivider,
|
|
83
97
|
registerOverflowMenu,
|
|
84
|
-
|
|
98
|
+
updateOverflow,
|
|
99
|
+
containerRef
|
|
85
100
|
};
|
|
86
101
|
};
|
|
87
102
|
export const updateVisibilityAttribute = ({ item, visible })=>{
|
|
@@ -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 {
|
|
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, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\nconst noop = () => null;\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 {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n } = options;\n\n const onUpdateOverflow = useEventCallback(update);\n\n const overflowOptions = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow,\n }),\n [minimumVisible, onUpdateItemVisibility, overflowAxis, overflowDirection, padding, onUpdateOverflow],\n );\n\n const firstMount = useFirstMount();\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n\n const [overflowManager, setOverflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(() => {\n if (firstMount && containerRef.current) {\n overflowManager?.observe(containerRef.current, overflowOptions);\n }\n }, [firstMount, overflowManager, overflowOptions]);\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n\n return () => {\n newOverflowManager.disconnect();\n };\n }, [overflowOptions, firstMount]);\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.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 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 const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef,\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","useFirstMount","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","noop","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","overflowOptions","useMemo","firstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","current","observe","newOverflowManager","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
@@ -21,37 +21,52 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
21
21
|
const _priorityoverflow = require("@fluentui/priority-overflow");
|
|
22
22
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
23
23
|
const _constants = require("./constants");
|
|
24
|
+
const noop = ()=>null;
|
|
24
25
|
const useOverflowContainer = (update, options)=>{
|
|
25
|
-
const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;
|
|
26
|
+
const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;
|
|
27
|
+
const onUpdateOverflow = (0, _reactutilities.useEventCallback)(update);
|
|
28
|
+
const overflowOptions = _react.useMemo(()=>({
|
|
29
|
+
overflowAxis,
|
|
30
|
+
overflowDirection,
|
|
31
|
+
padding,
|
|
32
|
+
minimumVisible,
|
|
33
|
+
onUpdateItemVisibility,
|
|
34
|
+
onUpdateOverflow
|
|
35
|
+
}), [
|
|
36
|
+
minimumVisible,
|
|
37
|
+
onUpdateItemVisibility,
|
|
38
|
+
overflowAxis,
|
|
39
|
+
overflowDirection,
|
|
40
|
+
padding,
|
|
41
|
+
onUpdateOverflow
|
|
42
|
+
]);
|
|
43
|
+
const firstMount = (0, _reactutilities.useFirstMount)();
|
|
26
44
|
// DOM ref to the overflow container element
|
|
27
45
|
const containerRef = _react.useRef(null);
|
|
28
|
-
const
|
|
29
|
-
|
|
46
|
+
const [overflowManager, setOverflowManager] = _react.useState(()=>(0, _reactutilities.canUseDOM)() ? (0, _priorityoverflow.createOverflowManager)() : null);
|
|
47
|
+
// On first mount there is no need to create an overflow manager and re-render
|
|
30
48
|
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
31
|
-
if (
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
if (overflowManager) {
|
|
35
|
-
overflowManager.observe(containerRef.current, {
|
|
36
|
-
overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
|
|
37
|
-
overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
|
|
38
|
-
padding: padding !== null && padding !== void 0 ? padding : 10,
|
|
39
|
-
minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
|
|
40
|
-
onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,
|
|
41
|
-
onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined
|
|
42
|
-
});
|
|
43
|
-
return ()=>{
|
|
44
|
-
overflowManager.disconnect();
|
|
45
|
-
};
|
|
49
|
+
if (firstMount && containerRef.current) {
|
|
50
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);
|
|
46
51
|
}
|
|
47
52
|
}, [
|
|
48
|
-
|
|
53
|
+
firstMount,
|
|
49
54
|
overflowManager,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
+
overflowOptions
|
|
56
|
+
]);
|
|
57
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
58
|
+
if (!containerRef.current || !(0, _reactutilities.canUseDOM)() || firstMount) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const newOverflowManager = (0, _priorityoverflow.createOverflowManager)();
|
|
62
|
+
newOverflowManager.observe(containerRef.current, overflowOptions);
|
|
63
|
+
setOverflowManager(newOverflowManager);
|
|
64
|
+
return ()=>{
|
|
65
|
+
newOverflowManager.disconnect();
|
|
66
|
+
};
|
|
67
|
+
}, [
|
|
68
|
+
overflowOptions,
|
|
69
|
+
firstMount
|
|
55
70
|
]);
|
|
56
71
|
const registerItem = _react.useCallback((item)=>{
|
|
57
72
|
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
|
@@ -67,7 +82,7 @@ const useOverflowContainer = (update, options)=>{
|
|
|
67
82
|
const registerDivider = _react.useCallback((divider)=>{
|
|
68
83
|
const el = divider.element;
|
|
69
84
|
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
|
|
70
|
-
el
|
|
85
|
+
el.setAttribute(_constants.DATA_OVERFLOW_DIVIDER, '');
|
|
71
86
|
return ()=>{
|
|
72
87
|
divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
|
|
73
88
|
el.removeAttribute(_constants.DATA_OVERFLOW_DIVIDER);
|
|
@@ -75,11 +90,6 @@ const useOverflowContainer = (update, options)=>{
|
|
|
75
90
|
}, [
|
|
76
91
|
overflowManager
|
|
77
92
|
]);
|
|
78
|
-
const updateOverflow = _react.useCallback(()=>{
|
|
79
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
|
80
|
-
}, [
|
|
81
|
-
overflowManager
|
|
82
|
-
]);
|
|
83
93
|
const registerOverflowMenu = _react.useCallback((el)=>{
|
|
84
94
|
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
|
85
95
|
el.setAttribute(_constants.DATA_OVERFLOW_MENU, '');
|
|
@@ -90,12 +100,17 @@ const useOverflowContainer = (update, options)=>{
|
|
|
90
100
|
}, [
|
|
91
101
|
overflowManager
|
|
92
102
|
]);
|
|
103
|
+
const updateOverflow = _react.useCallback(()=>{
|
|
104
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
|
105
|
+
}, [
|
|
106
|
+
overflowManager
|
|
107
|
+
]);
|
|
93
108
|
return {
|
|
94
|
-
containerRef,
|
|
95
109
|
registerItem,
|
|
96
|
-
|
|
110
|
+
registerDivider,
|
|
97
111
|
registerOverflowMenu,
|
|
98
|
-
|
|
112
|
+
updateOverflow,
|
|
113
|
+
containerRef
|
|
99
114
|
};
|
|
100
115
|
};
|
|
101
116
|
const updateVisibilityAttribute = ({ item, visible })=>{
|
|
@@ -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
|
|
1
|
+
{"version":3,"sources":["useOverflowContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nconst noop = ()=>null;\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 = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;\n const onUpdateOverflow = useEventCallback(update);\n const overflowOptions = React.useMemo(()=>({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n onUpdateOverflow\n }), [\n minimumVisible,\n onUpdateItemVisibility,\n overflowAxis,\n overflowDirection,\n padding,\n onUpdateOverflow\n ]);\n const firstMount = useFirstMount();\n // DOM ref to the overflow container element\n const containerRef = React.useRef(null);\n const [overflowManager, setOverflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);\n // On first mount there is no need to create an overflow manager and re-render\n useIsomorphicLayoutEffect(()=>{\n if (firstMount && containerRef.current) {\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);\n }\n }, [\n firstMount,\n overflowManager,\n overflowOptions\n ]);\n useIsomorphicLayoutEffect(()=>{\n if (!containerRef.current || !canUseDOM() || firstMount) {\n return;\n }\n const newOverflowManager = createOverflowManager();\n newOverflowManager.observe(containerRef.current, overflowOptions);\n setOverflowManager(newOverflowManager);\n return ()=>{\n newOverflowManager.disconnect();\n };\n }, [\n overflowOptions,\n firstMount\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.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 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 const updateOverflow = React.useCallback(()=>{\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\n }, [\n overflowManager\n ]);\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n containerRef\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","noop","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","onUpdateOverflow","useEventCallback","overflowOptions","React","useMemo","firstMount","useFirstMount","containerRef","useRef","overflowManager","setOverflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","newOverflowManager","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","registerDivider","divider","el","addDivider","DATA_OVERFLOW_DIVIDER","groupId","removeDivider","registerOverflowMenu","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","updateOverflow","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.1.
|
|
3
|
+
"version": "9.1.1",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@fluentui/scripts-tasks": "*"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@fluentui/priority-overflow": "^9.1.
|
|
37
|
+
"@fluentui/priority-overflow": "^9.1.10",
|
|
38
38
|
"@fluentui/react-context-selector": "^9.1.42",
|
|
39
39
|
"@fluentui/react-theme": "^9.1.16",
|
|
40
40
|
"@fluentui/react-utilities": "^9.15.2",
|