@fluentui/react-overflow 0.0.0-nightly-20231115-0405.1 → 0.0.0-nightly-20231116-0411.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,21 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 16 Nov 2023 04:25:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20231116-0411.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20231116-0411.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.0..@fluentui/react-overflow_v0.0.0-nightly-
|
|
9
|
+
Thu, 16 Nov 2023 04:25:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.0..@fluentui/react-overflow_v0.0.0-nightly-20231116-0411.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/priority-overflow to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/priority-overflow to v0.0.0-nightly-20231116-0411.1 ([commit](https://github.com/microsoft/fluentui/commit/cee08d46b4814c0ef52720b35bf404405fafab06) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20231116-0411.1 ([commit](https://github.com/microsoft/fluentui/commit/cee08d46b4814c0ef52720b35bf404405fafab06) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20231116-0411.1 ([commit](https://github.com/microsoft/fluentui/commit/cee08d46b4814c0ef52720b35bf404405fafab06) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20231116-0411.1 ([commit](https://github.com/microsoft/fluentui/commit/cee08d46b4814c0ef52720b35bf404405fafab06) by beachball)
|
|
19
19
|
|
|
20
20
|
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.0)
|
|
21
21
|
|
|
@@ -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": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20231116-0411.1",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
"@fluentui/scripts-tasks": "*"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@fluentui/priority-overflow": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
37
|
+
"@fluentui/priority-overflow": "0.0.0-nightly-20231116-0411.1",
|
|
38
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20231116-0411.1",
|
|
39
|
+
"@fluentui/react-theme": "0.0.0-nightly-20231116-0411.1",
|
|
40
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20231116-0411.1",
|
|
41
41
|
"@griffel/react": "^1.5.14",
|
|
42
42
|
"@swc/helpers": "^0.5.1"
|
|
43
43
|
},
|