@fluentui/react-overflow 9.1.0 → 9.1.2
Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 14 Dec 2023 09:51:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.2)
|
|
8
|
+
|
|
9
|
+
Thu, 14 Dec 2023 09:51:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.1..@fluentui/react-overflow_v9.1.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/priority-overflow to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
|
|
15
|
+
- Bump @fluentui/react-context-selector to v9.1.43 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.15.3 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.1)
|
|
19
|
+
|
|
20
|
+
Mon, 20 Nov 2023 09:55:09 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.0..@fluentui/react-overflow_v9.1.1)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- fix: register should happen again once observe options change ([PR #29375](https://github.com/microsoft/fluentui/pull/29375) by lingfan.gao@microsoft.com)
|
|
26
|
+
- Bump @fluentui/priority-overflow to v9.1.10 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.0)
|
|
8
29
|
|
|
9
|
-
Fri, 10 Nov 2023 13:
|
|
30
|
+
Fri, 10 Nov 2023 13:46:33 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.43..@fluentui/react-overflow_v9.1.0)
|
|
11
32
|
|
|
12
33
|
### 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.2",
|
|
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.
|
|
37
|
+
"@fluentui/priority-overflow": "^9.1.11",
|
|
38
|
+
"@fluentui/react-context-selector": "^9.1.43",
|
|
39
39
|
"@fluentui/react-theme": "^9.1.16",
|
|
40
|
-
"@fluentui/react-utilities": "^9.15.
|
|
40
|
+
"@fluentui/react-utilities": "^9.15.3",
|
|
41
41
|
"@griffel/react": "^1.5.14",
|
|
42
42
|
"@swc/helpers": "^0.5.1"
|
|
43
43
|
},
|