@fluentui/react-overflow 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.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/.swcrc +2 -11
- package/CHANGELOG.json +56 -11
- package/CHANGELOG.md +22 -8
- package/lib/components/Overflow.js +7 -7
- package/lib/components/OverflowItem/OverflowItem.js +3 -3
- package/lib/components/OverflowItem/OverflowItem.types.js +1 -1
- package/lib/components/OverflowItem/index.js +1 -1
- package/lib/constants.js +3 -3
- package/lib/index.js +10 -10
- package/lib/overflowContext.js +1 -1
- package/lib/types.js +1 -1
- package/lib/useIsOverflowGroupVisible.js +1 -1
- package/lib/useIsOverflowItemVisible.js +1 -1
- package/lib/useOverflowContainer.js +18 -18
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowCount.js +1 -1
- package/lib/useOverflowItem.js +4 -4
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js +5 -5
- package/lib-commonjs/components/Overflow.js +1 -1
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
- package/lib-commonjs/constants.js +3 -3
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +14 -14
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowCount.js.map +1 -1
- package/lib-commonjs/useOverflowItem.js +1 -1
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/lib-commonjs/useOverflowMenu.js +1 -1
- package/lib-commonjs/useOverflowMenu.js.map +1 -1
- package/package.json +6 -5
package/.swcrc
CHANGED
@@ -1,15 +1,5 @@
|
|
1
1
|
{
|
2
2
|
"$schema": "https://json.schemastore.org/swcrc",
|
3
|
-
"env": {
|
4
|
-
"targets": {
|
5
|
-
"chrome": "84",
|
6
|
-
"edge": "84",
|
7
|
-
"firefox": "75",
|
8
|
-
"opera": "73",
|
9
|
-
"safari": "14.1"
|
10
|
-
},
|
11
|
-
"bugfixes": true
|
12
|
-
},
|
13
3
|
"exclude": [
|
14
4
|
"/testing",
|
15
5
|
"/**/*.cy.ts",
|
@@ -32,7 +22,8 @@
|
|
32
22
|
"runtime": "classic",
|
33
23
|
"useSpread": true
|
34
24
|
}
|
35
|
-
}
|
25
|
+
},
|
26
|
+
"target": "es2019"
|
36
27
|
},
|
37
28
|
"minify": false,
|
38
29
|
"sourceMaps": true
|
package/CHANGELOG.json
CHANGED
@@ -2,9 +2,9 @@
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-overflow_v0.0.0-nightly-
|
7
|
-
"version": "0.0.0-nightly-
|
5
|
+
"date": "Wed, 22 Mar 2023 04:46:46 GMT",
|
6
|
+
"tag": "@fluentui/react-overflow_v0.0.0-nightly-20230322-0439.1",
|
7
|
+
"version": "0.0.0-nightly-20230322-0439.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
@@ -16,26 +16,71 @@
|
|
16
16
|
{
|
17
17
|
"author": "beachball",
|
18
18
|
"package": "@fluentui/react-overflow",
|
19
|
-
"comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-
|
20
|
-
"commit": "
|
19
|
+
"comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20230322-0439.1",
|
20
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
21
21
|
},
|
22
22
|
{
|
23
23
|
"author": "beachball",
|
24
24
|
"package": "@fluentui/react-overflow",
|
25
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
26
|
-
"commit": "
|
25
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230322-0439.1",
|
26
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
27
27
|
},
|
28
28
|
{
|
29
29
|
"author": "beachball",
|
30
30
|
"package": "@fluentui/react-overflow",
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
32
|
-
"commit": "
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1",
|
32
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
33
33
|
},
|
34
34
|
{
|
35
35
|
"author": "beachball",
|
36
36
|
"package": "@fluentui/react-overflow",
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
38
|
-
"commit": "
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1",
|
38
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
39
|
+
}
|
40
|
+
]
|
41
|
+
}
|
42
|
+
},
|
43
|
+
{
|
44
|
+
"date": "Tue, 21 Mar 2023 21:23:41 GMT",
|
45
|
+
"tag": "@fluentui/react-overflow_v9.0.12",
|
46
|
+
"version": "9.0.12",
|
47
|
+
"comments": {
|
48
|
+
"patch": [
|
49
|
+
{
|
50
|
+
"author": "tristan.watanabe@gmail.com",
|
51
|
+
"package": "@fluentui/react-overflow",
|
52
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
53
|
+
"comment": "fix: add node field to package.json exports map."
|
54
|
+
},
|
55
|
+
{
|
56
|
+
"author": "tristan.watanabe@gmail.com",
|
57
|
+
"package": "@fluentui/react-overflow",
|
58
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
59
|
+
"comment": "chore: migrate to swc transpilation approach."
|
60
|
+
},
|
61
|
+
{
|
62
|
+
"author": "beachball",
|
63
|
+
"package": "@fluentui/react-overflow",
|
64
|
+
"comment": "Bump @fluentui/priority-overflow to v9.0.2",
|
65
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
66
|
+
},
|
67
|
+
{
|
68
|
+
"author": "beachball",
|
69
|
+
"package": "@fluentui/react-overflow",
|
70
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.15",
|
71
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
72
|
+
},
|
73
|
+
{
|
74
|
+
"author": "beachball",
|
75
|
+
"package": "@fluentui/react-overflow",
|
76
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
77
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
78
|
+
},
|
79
|
+
{
|
80
|
+
"author": "beachball",
|
81
|
+
"package": "@fluentui/react-overflow",
|
82
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
83
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
39
84
|
}
|
40
85
|
]
|
41
86
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,21 +1,35 @@
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Wed, 22 Mar 2023 04:46:46 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-20230322-0439.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20230322-0439.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.
|
9
|
+
Wed, 22 Mar 2023 04:46:46 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.12..@fluentui/react-overflow_v0.0.0-nightly-20230322-0439.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-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
16
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
19
|
+
|
20
|
+
## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.12)
|
21
|
+
|
22
|
+
Tue, 21 Mar 2023 21:23:41 GMT
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.11..@fluentui/react-overflow_v9.0.12)
|
24
|
+
|
25
|
+
### Patches
|
26
|
+
|
27
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
28
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
29
|
+
- Bump @fluentui/priority-overflow to v9.0.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
30
|
+
- Bump @fluentui/react-context-selector to v9.1.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
31
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
32
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
19
33
|
|
20
34
|
## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.11)
|
21
35
|
|
@@ -1,9 +1,9 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { __styles, mergeClasses } from
|
3
|
-
import { applyTriggerPropsToChildren, useMergedRefs } from
|
4
|
-
import { OverflowContext } from
|
5
|
-
import { updateVisibilityAttribute, useOverflowContainer } from
|
6
|
-
import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
3
|
+
import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
|
4
|
+
import { OverflowContext } from '../overflowContext';
|
5
|
+
import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
|
6
|
+
import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
|
7
7
|
const useStyles = /*#__PURE__*/__styles({
|
8
8
|
overflowMenu: {
|
9
9
|
Brvla84: "fyfkpbf"
|
@@ -22,7 +22,7 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
22
22
|
const {
|
23
23
|
children,
|
24
24
|
minimumVisible,
|
25
|
-
overflowAxis =
|
25
|
+
overflowAxis = 'horizontal',
|
26
26
|
overflowDirection,
|
27
27
|
padding
|
28
28
|
} = props;
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { applyTriggerPropsToChildren, useMergedRefs } from
|
3
|
-
import { useOverflowItem } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
|
3
|
+
import { useOverflowItem } from '../../useOverflowItem';
|
4
4
|
/**
|
5
5
|
* Attaches overflow item behavior to its child registered with the OverflowContext.
|
6
6
|
* It does not render an element of its own.
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import * as React from
|
1
|
+
import * as React from 'react';
|
2
2
|
//# sourceMappingURL=OverflowItem.types.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export { OverflowItem } from
|
1
|
+
export { OverflowItem } from './OverflowItem';
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/constants.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export const DATA_OVERFLOWING =
|
2
|
-
export const DATA_OVERFLOW_ITEM =
|
3
|
-
export const DATA_OVERFLOW_MENU =
|
1
|
+
export const DATA_OVERFLOWING = 'data-overflowing';
|
2
|
+
export const DATA_OVERFLOW_ITEM = 'data-overflow-item';
|
3
|
+
export const DATA_OVERFLOW_MENU = 'data-overflow-menu';
|
4
4
|
//# sourceMappingURL=constants.js.map
|
package/lib/index.js
CHANGED
@@ -1,11 +1,11 @@
|
|
1
|
-
export { Overflow } from
|
2
|
-
export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from
|
3
|
-
export { useIsOverflowGroupVisible } from
|
4
|
-
export { useIsOverflowItemVisible } from
|
5
|
-
export { useOverflowContainer } from
|
6
|
-
export { useOverflowCount } from
|
7
|
-
export { useOverflowItem } from
|
8
|
-
export { useOverflowMenu } from
|
9
|
-
export { useOverflowContext } from
|
10
|
-
export { OverflowItem } from
|
1
|
+
export { Overflow } from './components/Overflow';
|
2
|
+
export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
|
3
|
+
export { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';
|
4
|
+
export { useIsOverflowItemVisible } from './useIsOverflowItemVisible';
|
5
|
+
export { useOverflowContainer } from './useOverflowContainer';
|
6
|
+
export { useOverflowCount } from './useOverflowCount';
|
7
|
+
export { useOverflowItem } from './useOverflowItem';
|
8
|
+
export { useOverflowMenu } from './useOverflowMenu';
|
9
|
+
export { useOverflowContext } from './overflowContext';
|
10
|
+
export { OverflowItem } from './components/OverflowItem/OverflowItem';
|
11
11
|
//# sourceMappingURL=index.js.map
|
package/lib/overflowContext.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { createContext, useContextSelector } from
|
1
|
+
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
2
2
|
export const OverflowContext = /*#__PURE__*/createContext(undefined);
|
3
3
|
const overflowContextDefaultValue = {
|
4
4
|
itemVisibility: {},
|
package/lib/types.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
import * as React from
|
1
|
+
import * as React from 'react';
|
2
2
|
//# sourceMappingURL=types.js.map
|
@@ -1,7 +1,7 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { createOverflowManager } from
|
3
|
-
import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from
|
4
|
-
import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import { createOverflowManager } from '@fluentui/priority-overflow';
|
3
|
+
import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
4
|
+
import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
|
5
5
|
/**
|
6
6
|
* @internal
|
7
7
|
* @param update - Callback when overflow state changes
|
@@ -26,12 +26,12 @@ export const useOverflowContainer = (update, options) => {
|
|
26
26
|
}
|
27
27
|
if (overflowManager) {
|
28
28
|
overflowManager.observe(containerRef.current, {
|
29
|
-
overflowDirection: overflowDirection
|
30
|
-
overflowAxis: overflowAxis
|
31
|
-
padding: padding
|
32
|
-
minimumVisible: minimumVisible
|
33
|
-
onUpdateItemVisibility: onUpdateItemVisibility
|
34
|
-
onUpdateOverflow: updateOverflowItems
|
29
|
+
overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
|
30
|
+
overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
|
31
|
+
padding: padding !== null && padding !== void 0 ? padding : 10,
|
32
|
+
minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
|
33
|
+
onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => undefined,
|
34
|
+
onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined
|
35
35
|
});
|
36
36
|
return () => {
|
37
37
|
overflowManager.disconnect();
|
@@ -39,22 +39,22 @@ export const useOverflowContainer = (update, options) => {
|
|
39
39
|
}
|
40
40
|
}, [updateOverflowItems, overflowManager, overflowDirection, overflowAxis, padding, minimumVisible, onUpdateItemVisibility]);
|
41
41
|
const registerItem = React.useCallback(item => {
|
42
|
-
overflowManager
|
43
|
-
item.element.setAttribute(DATA_OVERFLOW_ITEM,
|
42
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
43
|
+
item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
|
44
44
|
return () => {
|
45
45
|
item.element.removeAttribute(DATA_OVERFLOWING);
|
46
46
|
item.element.removeAttribute(DATA_OVERFLOW_ITEM);
|
47
|
-
overflowManager
|
47
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
|
48
48
|
};
|
49
49
|
}, [overflowManager]);
|
50
50
|
const updateOverflow = React.useCallback(() => {
|
51
|
-
overflowManager
|
51
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
52
52
|
}, [overflowManager]);
|
53
53
|
const registerOverflowMenu = React.useCallback(el => {
|
54
|
-
overflowManager
|
55
|
-
el.setAttribute(DATA_OVERFLOW_MENU,
|
54
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
55
|
+
el.setAttribute(DATA_OVERFLOW_MENU, '');
|
56
56
|
return () => {
|
57
|
-
overflowManager
|
57
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
|
58
58
|
el.removeAttribute(DATA_OVERFLOW_MENU);
|
59
59
|
};
|
60
60
|
}, [overflowManager]);
|
@@ -72,7 +72,7 @@ export const updateVisibilityAttribute = ({
|
|
72
72
|
if (visible) {
|
73
73
|
item.element.removeAttribute(DATA_OVERFLOWING);
|
74
74
|
} else {
|
75
|
-
item.element.setAttribute(DATA_OVERFLOWING,
|
75
|
+
item.element.setAttribute(DATA_OVERFLOWING, '');
|
76
76
|
}
|
77
77
|
};
|
78
78
|
//# sourceMappingURL=useOverflowContainer.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","createOverflowManager","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","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","updateOverflow","registerOverflowMenu","el","addOverflowMenu","removeOverflowMenu","updateVisibilityAttribute","visible"],"sources":["../src/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 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_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 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 };\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAYtC,SAASC,SAAS,EAAEC,gBAAgB,EAAEC,yBAAyB,QAAQ;AAEvE,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ;AAEzE;;;;;;AAMA,OAAO,MAAMC,oBAAA,GAAuBA,CAClCC,MAAA,EACAC,OAAA,KACyC;EACzC,MAAM;IAAEC,YAAA;IAAcC,iBAAA;IAAmBC,OAAA;IAASC,cAAA;IAAgBC;EAAsB,CAAE,GAAGL,OAAA;EAE7F;EACA,MAAMM,YAAA,GAAehB,KAAA,CAAMiB,MAAM,CAAW,IAAI;EAChD,MAAMC,mBAAA,GAAsBf,gBAAA,CAAiBM,MAAA;EAE7C,MAAM,CAACU,eAAA,CAAgB,GAAGnB,KAAA,CAAMoB,QAAQ,CAAyB,MAC/DlB,SAAA,KAAcD,qBAAA,KAA0B,IAAI;EAG9CG,yBAAA,CAA0B,MAAM;IAC9B,IAAI,CAACY,YAAA,CAAaK,OAAO,EAAE;MACzB;IACF;IAEA,IAAIF,eAAA,EAAiB;MACnBA,eAAA,CAAgBG,OAAO,CAACN,YAAA,CAAaK,OAAO,EAAE;QAC5CT,iBAAA,EAAmBA,iBAAA,
|
1
|
+
{"version":3,"names":["React","createOverflowManager","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","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","updateOverflow","registerOverflowMenu","el","addOverflowMenu","removeOverflowMenu","updateVisibilityAttribute","visible"],"sources":["../src/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 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_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 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 };\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"],"mappings":"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"}
|
package/lib/useOverflowCount.js
CHANGED
package/lib/useOverflowItem.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { useIsomorphicLayoutEffect } from
|
3
|
-
import { useOverflowContext } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
3
|
+
import { useOverflowContext } from './overflowContext';
|
4
4
|
/**
|
5
5
|
* @internal
|
6
6
|
* Registers an overflow item
|
@@ -17,7 +17,7 @@ export function useOverflowItem(id, priority, groupId) {
|
|
17
17
|
return registerItem({
|
18
18
|
element: ref.current,
|
19
19
|
id,
|
20
|
-
priority: priority
|
20
|
+
priority: priority !== null && priority !== void 0 ? priority : 0,
|
21
21
|
groupId
|
22
22
|
});
|
23
23
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"sources":["../src/useOverflowItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;AAQA,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB,EAAE;EAC7G,MAAMC,GAAA,GAAMP,KAAA,CAAMQ,MAAM,CAAW,IAAI;EACvC,MAAMC,YAAA,GAAeP,kBAAA,CAAmBQ,CAAA,IAAKA,CAAA,CAAED,YAAY;EAE3DR,yBAAA,CAA0B,MAAM;IAC9B,IAAIM,GAAA,CAAII,OAAO,EAAE;MACf,OAAOF,YAAA,CAAa;QAClBG,OAAA,EAASL,GAAA,CAAII,OAAO;QACpBP,EAAA;QACAC,QAAA,EAAUA,QAAA,
|
1
|
+
{"version":3,"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"sources":["../src/useOverflowItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;AAQA,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB,EAAE;EAC7G,MAAMC,GAAA,GAAMP,KAAA,CAAMQ,MAAM,CAAW,IAAI;EACvC,MAAMC,YAAA,GAAeP,kBAAA,CAAmBQ,CAAA,IAAKA,CAAA,CAAED,YAAY;EAE3DR,yBAAA,CAA0B,MAAM;IAC9B,IAAIM,GAAA,CAAII,OAAO,EAAE;MACf,OAAOF,YAAA,CAAa;QAClBG,OAAA,EAASL,GAAA,CAAII,OAAO;QACpBP,EAAA;QACAC,QAAA,EAAUA,QAAA,aAAAA,QAAA,cAAAA,QAAA,GAAY,CAAC;QACvBC;MACF;IACF;EACF,GAAG,CAACF,EAAA,EAAIC,QAAA,EAAUI,YAAA,EAAcH,OAAA,CAAQ;EAExC,OAAOC,GAAA;AACT"}
|
package/lib/useOverflowMenu.js
CHANGED
@@ -1,9 +1,9 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { useId, useIsomorphicLayoutEffect } from
|
3
|
-
import { useOverflowContext } from
|
4
|
-
import { useOverflowCount } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
3
|
+
import { useOverflowContext } from './overflowContext';
|
4
|
+
import { useOverflowCount } from './useOverflowCount';
|
5
5
|
export function useOverflowMenu(id) {
|
6
|
-
const elementId = useId(
|
6
|
+
const elementId = useId('overflow-menu', id);
|
7
7
|
const overflowCount = useOverflowCount();
|
8
8
|
const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);
|
9
9
|
const updateOverflow = useOverflowContext(v => v.updateOverflow);
|
@@ -27,7 +27,7 @@ const useStyles = /*#__PURE__*/ (0, _react1["__styles"])({
|
|
27
27
|
});
|
28
28
|
const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
29
29
|
const styles = useStyles();
|
30
|
-
const { children , minimumVisible , overflowAxis =
|
30
|
+
const { children , minimumVisible , overflowAxis ='horizontal' , overflowDirection , padding } = props;
|
31
31
|
const [hasOverflow, setHasOverflow] = _react.useState(false);
|
32
32
|
const [itemVisibility, setItemVisibility] = _react.useState({});
|
33
33
|
const [groupVisibility, setGroupVisibility] = _react.useState({});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../lib/components/Overflow.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../../lib/components/Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nconst useStyles = /*#__PURE__*/__styles({\n overflowMenu: {\n Brvla84: \"fyfkpbf\"\n },\n overflowingItems: {\n Hevnzl: \"ftz08xh\"\n }\n}, {\n d: [\".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".ftz08xh>[data-overflowing]{display:none;}\"]\n});\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {\n const styles = useStyles();\n const {\n children,\n minimumVisible,\n overflowAxis = 'horizontal',\n overflowDirection,\n padding\n } = props;\n const [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState({});\n const [groupVisibility, setGroupVisibility] = React.useState({});\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState = {};\n data.visibleItems.forEach(x => newState[x.id] = true);\n data.invisibleItems.forEach(x => newState[x.id] = false);\n return newState;\n });\n setGroupVisibility(data.groupVisibility);\n };\n const {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute\n });\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n }\n }, clonedChild);\n});\n//# sourceMappingURL=Overflow.js.map"],"names":["Overflow","useStyles","__styles","overflowMenu","Brvla84","overflowingItems","Hevnzl","d","React","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","hasOverflow","setHasOverflow","useState","itemVisibility","setItemVisibility","groupVisibility","setGroupVisibility","update","data","invisibleItems","length","newState","visibleItems","forEach","x","id","containerRef","registerItem","updateOverflow","registerOverflowMenu","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAmBaA;;aAAAA;;;6DAnBU;wBACgB;gCACoB;iCAC3B;sCACgC;AAEhE,MAAMC,YAAY,WAAW,GAAEC,IAAAA,mBAAQ,EAAC;IACtCC,cAAc;QACZC,SAAS;IACX;IACAC,kBAAkB;QAChBC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA2F;KAA6C;AAC9I;AAIO,MAAMP,WAAW,WAAW,GAAEQ,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,SAASX;IACf,MAAM,EACJY,SAAQ,EACRC,eAAc,EACdC,cAAe,aAAY,EAC3BC,kBAAiB,EACjBC,QAAO,EACR,GAAGP;IACJ,MAAM,CAACQ,aAAaC,eAAe,GAAGX,OAAMY,QAAQ,CAAC,KAAK;IAC1D,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGd,OAAMY,QAAQ,CAAC,CAAC;IAC5D,MAAM,CAACG,iBAAiBC,mBAAmB,GAAGhB,OAAMY,QAAQ,CAAC,CAAC;IAC9D,gEAAgE;IAChE,gDAAgD;IAChD,MAAMK,SAASC,CAAAA,OAAQ;QACrBP,eAAe,IAAMO,KAAKC,cAAc,CAACC,MAAM,GAAG;QAClDN,kBAAkB,IAAM;YACtB,MAAMO,WAAW,CAAC;YAClBH,KAAKI,YAAY,CAACC,OAAO,CAACC,CAAAA,IAAKH,QAAQ,CAACG,EAAEC,EAAE,CAAC,GAAG,IAAI;YACpDP,KAAKC,cAAc,CAACI,OAAO,CAACC,CAAAA,IAAKH,QAAQ,CAACG,EAAEC,EAAE,CAAC,GAAG,KAAK;YACvD,OAAOJ;QACT;QACAL,mBAAmBE,KAAKH,eAAe;IACzC;IACA,MAAM,EACJW,aAAY,EACZC,aAAY,EACZC,eAAc,EACdC,qBAAoB,EACrB,GAAGC,IAAAA,0CAAoB,EAACb,QAAQ;QAC/BT;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACnD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC7B,UAAU;QACxDF,KAAKgC,IAAAA,6BAAa,EAACT,cAAcvB;QACjCiC,WAAWC,IAAAA,oBAAY,EAACjC,OAAOT,YAAY,EAAES,OAAOP,gBAAgB,EAAEQ,SAASH,KAAK,CAACkC,SAAS;IAChG;IACA,OAAO,WAAW,GAAEpC,OAAMsC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAChEC,OAAO;YACL5B;YACAE;YACAL;YACAiB;YACAC;YACAC;QACF;IACF,GAAGI;AACL,IACA,oCAAoC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/OverflowItem/OverflowItem.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../../../lib/components/OverflowItem/OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {\n const {\n id,\n groupId,\n priority,\n children\n } = props;\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref)\n });\n});\n//# sourceMappingURL=OverflowItem.js.map"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","applyTriggerPropsToChildren","useMergedRefs"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;gCACoC;iCAC3B;AAKzB,MAAMA,eAAe,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACxE,MAAM,EACJC,GAAE,EACFC,QAAO,EACPC,SAAQ,EACRC,SAAQ,EACT,GAAGL;IACJ,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,OAAOK,IAAAA,2CAA2B,EAACH,UAAU;QAC3CJ,KAAKQ,IAAAA,6BAAa,EAACH,cAAcL;IACnC;AACF,IACA,wCAAwC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/OverflowItem/OverflowItem.types.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../../../lib/components/OverflowItem/OverflowItem.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=OverflowItem.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,8CAA8C"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/OverflowItem/index.js"],"sourcesContent":["export { OverflowItem } from
|
1
|
+
{"version":3,"sources":["../../../lib/components/OverflowItem/index.js"],"sourcesContent":["export { OverflowItem } from './OverflowItem';\n//# sourceMappingURL=index.js.map"],"names":["OverflowItem"],"mappings":";;;;+BAASA;;aAAAA,0BAAY;;8BAAQ;CAC7B,iCAAiC"}
|
@@ -13,8 +13,8 @@ _export(exports, {
|
|
13
13
|
DATA_OVERFLOW_ITEM: ()=>DATA_OVERFLOW_ITEM,
|
14
14
|
DATA_OVERFLOW_MENU: ()=>DATA_OVERFLOW_MENU
|
15
15
|
});
|
16
|
-
const DATA_OVERFLOWING =
|
17
|
-
const DATA_OVERFLOW_ITEM =
|
18
|
-
const DATA_OVERFLOW_MENU =
|
16
|
+
const DATA_OVERFLOWING = 'data-overflowing';
|
17
|
+
const DATA_OVERFLOW_ITEM = 'data-overflow-item';
|
18
|
+
const DATA_OVERFLOW_MENU = 'data-overflow-menu'; //# sourceMappingURL=constants.js.map
|
19
19
|
|
20
20
|
//# sourceMappingURL=constants.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/constants.js"],"sourcesContent":["export const DATA_OVERFLOWING =
|
1
|
+
{"version":3,"sources":["../lib/constants.js"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n//# sourceMappingURL=constants.js.map"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"mappings":";;;;;;;;;;;IAAaA,gBAAgB,MAAhBA;IACAC,kBAAkB,MAAlBA;IACAC,kBAAkB,MAAlBA;;AAFN,MAAMF,mBAAmB;AACzB,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB,sBAClC,qCAAqC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Overflow } from
|
1
|
+
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n//# sourceMappingURL=index.js.map"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowContext","OverflowItem"],"mappings":";;;;;;;;;;;IAASA,QAAQ,MAARA,kBAAQ;IACRC,gBAAgB,MAAhBA,2BAAgB;IAAEC,kBAAkB,MAAlBA,6BAAkB;IAAEC,kBAAkB,MAAlBA,6BAAkB;IACxDC,yBAAyB,MAAzBA,oDAAyB;IACzBC,wBAAwB,MAAxBA,kDAAwB;IACxBC,oBAAoB,MAApBA,0CAAoB;IACpBC,gBAAgB,MAAhBA,kCAAgB;IAChBC,eAAe,MAAfA,gCAAe;IACfC,eAAe,MAAfA,gCAAe;IACfC,kBAAkB,MAAlBA,mCAAkB;IAClBC,YAAY,MAAZA,0BAAY;;0BATI;2BACgD;2CAC/B;0CACD;sCACJ;kCACJ;iCACD;iCACA;iCACG;8BACN;CAC7B,iCAAiC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/overflowContext.js"],"sourcesContent":["import { createContext, useContextSelector } from
|
1
|
+
{"version":3,"sources":["../lib/overflowContext.js"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nexport const OverflowContext = /*#__PURE__*/createContext(undefined);\nconst overflowContextDefaultValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null\n};\n/**\n * @internal\n */\nexport const useOverflowContext = selector => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n//# sourceMappingURL=overflowContext.js.map"],"names":["OverflowContext","useOverflowContext","createContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IACaA,eAAe,MAAfA;IAYAC,kBAAkB,MAAlBA;;sCAbqC;AAC3C,MAAMD,kBAAkB,WAAW,GAAEE,IAAAA,mCAAa,EAACC;AAC1D,MAAMC,8BAA8B;IAClCC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa,KAAK;IAClBC,cAAc,IAAM,IAAM,IAAI;IAC9BC,gBAAgB,IAAM,IAAI;IAC1BC,sBAAsB,IAAM,IAAM,IAAI;AACxC;AAIO,MAAMT,qBAAqBU,CAAAA,WAAYC,IAAAA,wCAAkB,EAACZ,iBAAiB,CAACa,MAAMT,2BAA2B,GAAKO,SAASE,OAClI,2CAA2C"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/types.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../lib/types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,iCAAiC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/useIsOverflowGroupVisible.js"],"sourcesContent":["import { useOverflowContext } from
|
1
|
+
{"version":3,"sources":["../lib/useIsOverflowGroupVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id) {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n//# sourceMappingURL=useIsOverflowGroupVisible.js.map"],"names":["useIsOverflowGroupVisible","id","useOverflowContext","ctx","groupVisibility"],"mappings":";;;;+BAKgBA;;aAAAA;;iCALmB;AAK5B,SAASA,0BAA0BC,EAAE,EAAE;IAC5C,OAAOC,IAAAA,mCAAkB,EAACC,CAAAA,MAAOA,IAAIC,eAAe,CAACH,GAAG;AAC1D,EACA,qDAAqD"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/useIsOverflowItemVisible.js"],"sourcesContent":["import { useOverflowContext } from
|
1
|
+
{"version":3,"sources":["../lib/useIsOverflowItemVisible.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id) {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n//# sourceMappingURL=useIsOverflowItemVisible.js.map"],"names":["useIsOverflowItemVisible","id","useOverflowContext","ctx","itemVisibility"],"mappings":";;;;+BAKgBA;;aAAAA;;iCALmB;AAK5B,SAASA,yBAAyBC,EAAE,EAAE;IAC3C,OAAO,CAAC,CAACC,IAAAA,mCAAkB,EAACC,CAAAA,MAAOA,IAAIC,cAAc,CAACH,GAAG;AAC3D,EACA,oDAAoD"}
|
@@ -29,12 +29,12 @@ const useOverflowContainer = (update, options)=>{
|
|
29
29
|
}
|
30
30
|
if (overflowManager) {
|
31
31
|
overflowManager.observe(containerRef.current, {
|
32
|
-
overflowDirection: overflowDirection
|
33
|
-
overflowAxis: overflowAxis
|
34
|
-
padding: padding
|
35
|
-
minimumVisible: minimumVisible
|
36
|
-
onUpdateItemVisibility: onUpdateItemVisibility
|
37
|
-
onUpdateOverflow: updateOverflowItems
|
32
|
+
overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
|
33
|
+
overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
|
34
|
+
padding: padding !== null && padding !== void 0 ? padding : 10,
|
35
|
+
minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
|
36
|
+
onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,
|
37
|
+
onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined
|
38
38
|
});
|
39
39
|
return ()=>{
|
40
40
|
overflowManager.disconnect();
|
@@ -50,26 +50,26 @@ const useOverflowContainer = (update, options)=>{
|
|
50
50
|
onUpdateItemVisibility
|
51
51
|
]);
|
52
52
|
const registerItem = _react.useCallback((item)=>{
|
53
|
-
overflowManager
|
54
|
-
item.element.setAttribute(_constants.DATA_OVERFLOW_ITEM,
|
53
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
54
|
+
item.element.setAttribute(_constants.DATA_OVERFLOW_ITEM, '');
|
55
55
|
return ()=>{
|
56
56
|
item.element.removeAttribute(_constants.DATA_OVERFLOWING);
|
57
57
|
item.element.removeAttribute(_constants.DATA_OVERFLOW_ITEM);
|
58
|
-
overflowManager
|
58
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
|
59
59
|
};
|
60
60
|
}, [
|
61
61
|
overflowManager
|
62
62
|
]);
|
63
63
|
const updateOverflow = _react.useCallback(()=>{
|
64
|
-
overflowManager
|
64
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
65
65
|
}, [
|
66
66
|
overflowManager
|
67
67
|
]);
|
68
68
|
const registerOverflowMenu = _react.useCallback((el)=>{
|
69
|
-
overflowManager
|
70
|
-
el.setAttribute(_constants.DATA_OVERFLOW_MENU,
|
69
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
70
|
+
el.setAttribute(_constants.DATA_OVERFLOW_MENU, '');
|
71
71
|
return ()=>{
|
72
|
-
overflowManager
|
72
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
|
73
73
|
el.removeAttribute(_constants.DATA_OVERFLOW_MENU);
|
74
74
|
};
|
75
75
|
}, [
|
@@ -86,7 +86,7 @@ const updateVisibilityAttribute = ({ item , visible })=>{
|
|
86
86
|
if (visible) {
|
87
87
|
item.element.removeAttribute(_constants.DATA_OVERFLOWING);
|
88
88
|
} else {
|
89
|
-
item.element.setAttribute(_constants.DATA_OVERFLOWING,
|
89
|
+
item.element.setAttribute(_constants.DATA_OVERFLOWING, '');
|
90
90
|
}
|
91
91
|
}; //# sourceMappingURL=useOverflowContainer.js.map
|
92
92
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/useOverflowContainer.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../lib/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_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 */\nexport const useOverflowContainer = (update, options) => {\n const {\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility\n } = 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 }, [updateOverflowItems, overflowManager, overflowDirection, overflowAxis, padding, minimumVisible, onUpdateItemVisibility]);\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 }, [overflowManager]);\n const updateOverflow = React.useCallback(() => {\n overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();\n }, [overflowManager]);\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 }, [overflowManager]);\n return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n };\n};\nexport const updateVisibilityAttribute = ({\n item,\n visible\n}) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n//# sourceMappingURL=useOverflowContainer.js.map"],"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","updateOverflow","registerOverflowMenu","el","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","visible"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/useOverflowCount.js"],"sourcesContent":["import { useOverflowContext } from
|
1
|
+
{"version":3,"sources":["../lib/useOverflowCount.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () => useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n return acc;\n }, 0);\n});\n//# sourceMappingURL=useOverflowCount.js.map"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":";;;;+BAIaA;;aAAAA;;iCAJsB;AAI5B,MAAMA,mBAAmB,IAAMC,IAAAA,mCAAkB,EAACC,CAAAA,IAAK;QAC5D,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAK;YACrE,IAAI,CAACA,SAAS;gBACZF;YACF,CAAC;YACD,OAAOA;QACT,GAAG;IACL,IACA,4CAA4C"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/useOverflowItem.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../lib/useOverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem(id, priority, groupId) {\n const ref = React.useRef(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority !== null && priority !== void 0 ? priority : 0,\n groupId\n });\n }\n }, [id, priority, registerItem, groupId]);\n return ref;\n}\n//# sourceMappingURL=useOverflowItem.js.map"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAWgBA;;aAAAA;;;6DAXO;gCACmB;iCACP;AAS5B,SAASA,gBAAgBC,EAAE,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IACrD,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,eAAeC,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEF,YAAY;IAC3DG,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIN,IAAIO,OAAO,EAAE;YACf,OAAOJ,aAAa;gBAClBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAIA,WAAW,CAAC;gBACjEC;YACF;QACF,CAAC;IACH,GAAG;QAACF;QAAIC;QAAUK;QAAcJ;KAAQ;IACxC,OAAOC;AACT,EACA,2CAA2C"}
|
@@ -12,7 +12,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
12
|
const _overflowContext = require("./overflowContext");
|
13
13
|
const _useOverflowCount = require("./useOverflowCount");
|
14
14
|
function useOverflowMenu(id) {
|
15
|
-
const elementId = (0, _reactUtilities.useId)(
|
15
|
+
const elementId = (0, _reactUtilities.useId)('overflow-menu', id);
|
16
16
|
const overflowCount = (0, _useOverflowCount.useOverflowCount)();
|
17
17
|
const registerOverflowMenu = (0, _overflowContext.useOverflowContext)((v)=>v.registerOverflowMenu);
|
18
18
|
const updateOverflow = (0, _overflowContext.useOverflowContext)((v)=>v.updateOverflow);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/useOverflowMenu.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../lib/useOverflowMenu.js"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nexport function useOverflowMenu(id) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef(null);\n const isOverflowing = overflowCount > 0;\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n return {\n ref,\n overflowCount,\n isOverflowing\n };\n}\n//# sourceMappingURL=useOverflowMenu.js.map"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"mappings":";;;;+BAIgBA;;aAAAA;;;6DAJO;gCAC0B;iCACd;kCACF;AAC1B,SAASA,gBAAgBC,EAAE,EAAE;IAClC,MAAMC,YAAYC,IAAAA,qBAAK,EAAC,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAgB;IACtC,MAAMC,uBAAuBC,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,gBAAgBT,gBAAgB;IACtCU,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIJ,IAAIK,OAAO,EAAE;YACf,OAAOT,qBAAqBI,IAAIK,OAAO;QACzC,CAAC;IACH,GAAG;QAACT;QAAsBO;QAAeX;KAAU;IACnDY,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAID,eAAe;YACjBJ;QACF,CAAC;IACH,GAAG;QAACI;QAAeJ;QAAgBC;KAAI;IACvC,OAAO;QACLA;QACAN;QACAS;IACF;AACF,EACA,2CAA2C"}
|
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-20230322-0439.1",
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -33,10 +33,10 @@
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
34
34
|
},
|
35
35
|
"dependencies": {
|
36
|
-
"@fluentui/priority-overflow": "0.0.0-nightly-
|
37
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
36
|
+
"@fluentui/priority-overflow": "0.0.0-nightly-20230322-0439.1",
|
37
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230322-0439.1",
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230322-0439.1",
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230322-0439.1",
|
40
40
|
"@griffel/react": "^1.5.2",
|
41
41
|
"@swc/helpers": "^0.4.14"
|
42
42
|
},
|
@@ -51,6 +51,7 @@
|
|
51
51
|
"exports": {
|
52
52
|
".": {
|
53
53
|
"types": "./dist/index.d.ts",
|
54
|
+
"node": "./lib-commonjs/index.js",
|
54
55
|
"import": "./lib/index.js",
|
55
56
|
"require": "./lib-commonjs/index.js"
|
56
57
|
},
|