@fluentui/react-overflow 9.0.15 → 9.0.17
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +89 -1
- package/CHANGELOG.md +27 -2
- package/lib/components/Overflow.js +25 -27
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/useOverflowStyles.styles.js +13 -0
- package/lib/components/useOverflowStyles.styles.js.map +1 -0
- package/lib-commonjs/components/Overflow.js +20 -28
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/useOverflowStyles.styles.js +24 -0
- package/lib-commonjs/components/useOverflowStyles.styles.js.map +1 -0
- package/package.json +7 -6
- package/.swcrc +0 -30
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,95 @@
|
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 18 May 2023 00:35:40 GMT",
|
|
6
|
+
"tag": "@fluentui/react-overflow_v9.0.17",
|
|
7
|
+
"version": "9.0.17",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-overflow",
|
|
13
|
+
"commit": "06cd515eda59a3078bfe32f9cc7c1f281cd20208",
|
|
14
|
+
"comment": "chore: add test-ssr script to v9 packages"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"patch": [
|
|
18
|
+
{
|
|
19
|
+
"author": "beachball",
|
|
20
|
+
"package": "@fluentui/react-overflow",
|
|
21
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.20",
|
|
22
|
+
"commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui/react-overflow",
|
|
27
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.0",
|
|
28
|
+
"commit": "c496a1cf1ec82c08753df72c9061e84b77b7daeb"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Fri, 12 May 2023 20:27:29 GMT",
|
|
35
|
+
"tag": "@fluentui/react-overflow_v9.0.16",
|
|
36
|
+
"version": "9.0.16",
|
|
37
|
+
"comments": {
|
|
38
|
+
"patch": [
|
|
39
|
+
{
|
|
40
|
+
"author": "lingfangao@hotmail.com",
|
|
41
|
+
"package": "@fluentui/react-overflow",
|
|
42
|
+
"commit": "4e90c5c22a67d62d9da2a9a186ad01051dad7f46",
|
|
43
|
+
"comment": "refactor: Consolidate all overflow state into one object"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"author": "olfedias@microsoft.com",
|
|
47
|
+
"package": "@fluentui/react-overflow",
|
|
48
|
+
"commit": "9d6394b6c751092fd1d4e26ccc618b5ba05086ec",
|
|
49
|
+
"comment": "chore: move makeStyles() calls to .styles.ts files"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"author": "olfedias@microsoft.com",
|
|
53
|
+
"package": "@fluentui/react-overflow",
|
|
54
|
+
"commit": "c28decb23d191a0daaaf6d5d1832429715102129",
|
|
55
|
+
"comment": "chore: exclude .swcrc from being published"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"author": "beachball",
|
|
59
|
+
"package": "@fluentui/react-overflow",
|
|
60
|
+
"comment": "Bump @fluentui/priority-overflow to v9.0.3",
|
|
61
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"author": "beachball",
|
|
65
|
+
"package": "@fluentui/react-overflow",
|
|
66
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.19",
|
|
67
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"author": "beachball",
|
|
71
|
+
"package": "@fluentui/react-overflow",
|
|
72
|
+
"comment": "Bump @fluentui/react-theme to v9.1.8",
|
|
73
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"author": "beachball",
|
|
77
|
+
"package": "@fluentui/react-overflow",
|
|
78
|
+
"comment": "Bump @fluentui/react-utilities to v9.8.1",
|
|
79
|
+
"commit": "79c08ce5bbf6387b2b18ba4c3d2d5681e0177d4b"
|
|
80
|
+
}
|
|
81
|
+
],
|
|
82
|
+
"none": [
|
|
83
|
+
{
|
|
84
|
+
"author": "martinhochel@microsoft.com",
|
|
85
|
+
"package": "@fluentui/react-overflow",
|
|
86
|
+
"commit": "dbda7fa69e3000aaf8dd4a061e254ebd35198b8e",
|
|
87
|
+
"comment": "fix: update npmignore files to fix npm8/node16 regression how npm publish works"
|
|
88
|
+
}
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"date": "Mon, 17 Apr 2023 17:54:02 GMT",
|
|
6
94
|
"tag": "@fluentui/react-overflow_v9.0.15",
|
|
7
95
|
"version": "9.0.15",
|
|
8
96
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 18 May 2023 00:35:40 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.17)
|
|
8
|
+
|
|
9
|
+
Thu, 18 May 2023 00:35:40 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.16..@fluentui/react-overflow_v9.0.17)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-context-selector to v9.1.20 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.9.0 ([PR #27834](https://github.com/microsoft/fluentui/pull/27834) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.16)
|
|
18
|
+
|
|
19
|
+
Fri, 12 May 2023 20:27:29 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.15..@fluentui/react-overflow_v9.0.16)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- refactor: Consolidate all overflow state into one object ([PR #27756](https://github.com/microsoft/fluentui/pull/27756) by lingfangao@hotmail.com)
|
|
25
|
+
- chore: move makeStyles() calls to .styles.ts files ([PR #27698](https://github.com/microsoft/fluentui/pull/27698) by olfedias@microsoft.com)
|
|
26
|
+
- chore: exclude .swcrc from being published ([PR #27740](https://github.com/microsoft/fluentui/pull/27740) by olfedias@microsoft.com)
|
|
27
|
+
- Bump @fluentui/priority-overflow to v9.0.3 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
|
28
|
+
- Bump @fluentui/react-context-selector to v9.1.19 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
|
29
|
+
- Bump @fluentui/react-theme to v9.1.8 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.8.1 ([PR #27827](https://github.com/microsoft/fluentui/pull/27827) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.15)
|
|
8
33
|
|
|
9
|
-
Mon, 17 Apr 2023 17:
|
|
34
|
+
Mon, 17 Apr 2023 17:54:02 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.14..@fluentui/react-overflow_v9.0.15)
|
|
11
36
|
|
|
12
37
|
### Patches
|
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { mergeClasses } from '@griffel/react';
|
|
3
3
|
import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
4
|
import { OverflowContext } from '../overflowContext';
|
|
5
5
|
import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
|
|
6
|
-
import {
|
|
7
|
-
const useStyles = /*#__PURE__*/__styles({
|
|
8
|
-
overflowMenu: {
|
|
9
|
-
Brvla84: "fyfkpbf"
|
|
10
|
-
},
|
|
11
|
-
overflowingItems: {
|
|
12
|
-
zb22lx: "f10570jf"
|
|
13
|
-
}
|
|
14
|
-
}, {
|
|
15
|
-
d: [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10570jf [data-overflowing]{display:none;}"]
|
|
16
|
-
});
|
|
6
|
+
import { useOverflowStyles } from './useOverflowStyles.styles';
|
|
17
7
|
/**
|
|
18
8
|
* Provides an OverflowContext for OverflowItem descendants.
|
|
19
9
|
*/
|
|
20
10
|
export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
|
-
const styles =
|
|
11
|
+
const styles = useOverflowStyles();
|
|
22
12
|
const {
|
|
23
13
|
children,
|
|
24
14
|
minimumVisible,
|
|
@@ -26,20 +16,28 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
26
16
|
overflowDirection,
|
|
27
17
|
padding
|
|
28
18
|
} = props;
|
|
29
|
-
const [
|
|
30
|
-
|
|
31
|
-
|
|
19
|
+
const [overflowState, setOverflowState] = React.useState({
|
|
20
|
+
hasOverflow: false,
|
|
21
|
+
itemVisibility: {},
|
|
22
|
+
groupVisibility: {}
|
|
23
|
+
});
|
|
32
24
|
// useOverflowContainer wraps this method in a useEventCallback.
|
|
33
|
-
// TODO: Do we need a useEventCallback here too?
|
|
34
25
|
const update = data => {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
26
|
+
const {
|
|
27
|
+
visibleItems,
|
|
28
|
+
invisibleItems,
|
|
29
|
+
groupVisibility
|
|
30
|
+
} = data;
|
|
31
|
+
const itemVisibility = {};
|
|
32
|
+
visibleItems.forEach(x => itemVisibility[x.id] = true);
|
|
33
|
+
invisibleItems.forEach(x => itemVisibility[x.id] = false);
|
|
34
|
+
setOverflowState(() => {
|
|
35
|
+
return {
|
|
36
|
+
hasOverflow: data.invisibleItems.length > 0,
|
|
37
|
+
itemVisibility,
|
|
38
|
+
groupVisibility
|
|
39
|
+
};
|
|
41
40
|
});
|
|
42
|
-
setGroupVisibility(data.groupVisibility);
|
|
43
41
|
};
|
|
44
42
|
const {
|
|
45
43
|
containerRef,
|
|
@@ -59,9 +57,9 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
59
57
|
});
|
|
60
58
|
return /*#__PURE__*/React.createElement(OverflowContext.Provider, {
|
|
61
59
|
value: {
|
|
62
|
-
itemVisibility,
|
|
63
|
-
groupVisibility,
|
|
64
|
-
hasOverflow,
|
|
60
|
+
itemVisibility: overflowState.itemVisibility,
|
|
61
|
+
groupVisibility: overflowState.groupVisibility,
|
|
62
|
+
hasOverflow: overflowState.hasOverflow,
|
|
65
63
|
registerItem,
|
|
66
64
|
updateOverflow,
|
|
67
65
|
registerOverflowMenu
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","createElement","Provider","value"],"sources":["../../src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(x => (itemVisibility[x.id] = true));\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAE7B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAE3D,SAASC,eAAe,QAAQ;AAChC,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ;AAChE,SAASC,iBAAiB,QAAQ;AAiBlC;;;AAGA,OAAO,MAAMC,QAAA,gBAAWR,KAAA,CAAMS,UAAU,CAAC,CAACC,KAAA,EAAsBC,GAAA,KAAQ;EACtE,MAAMC,MAAA,GAASL,iBAAA;EAEf,MAAM;IAAEM,QAAA;IAAUC,cAAA;IAAgBC,YAAA,GAAe;IAAcC,iBAAA;IAAmBC;EAAO,CAAE,GAAGP,KAAA;EAE9F,MAAM,CAACQ,aAAA,EAAeC,gBAAA,CAAiB,GAAGnB,KAAA,CAAMoB,QAAQ,CAAgB;IACtEC,WAAA,EAAa,KAAK;IAClBC,cAAA,EAAgB,CAAC;IACjBC,eAAA,EAAiB,CAAC;EACpB;EAEA;EACA,MAAMC,MAAA,GAA2BC,IAAA,IAAQ;IACvC,MAAM;MAAEC,YAAA;MAAcC,cAAA;MAAgBJ;IAAe,CAAE,GAAGE,IAAA;IAE1D,MAAMH,cAAA,GAA0C,CAAC;IACjDI,YAAA,CAAaE,OAAO,CAACC,CAAA,IAAMP,cAAc,CAACO,CAAA,CAAEC,EAAE,CAAC,GAAG,IAAI;IACtDH,cAAA,CAAeC,OAAO,CAACC,CAAA,IAAMP,cAAc,CAACO,CAAA,CAAEC,EAAE,CAAC,GAAG,KAAK;IAEzDX,gBAAA,CAAiB,MAAM;MACrB,OAAO;QACLE,WAAA,EAAaI,IAAA,CAAKE,cAAc,CAACI,MAAM,GAAG;QAC1CT,cAAA;QACAC;MACF;IACF;EACF;EAEA,MAAM;IAAES,YAAA;IAAcC,YAAA;IAAcC,cAAA;IAAgBC;EAAoB,CAAE,GAAG7B,oBAAA,CAAqBkB,MAAA,EAAQ;IACxGR,iBAAA;IACAD,YAAA;IACAE,OAAA;IACAH,cAAA;IACAsB,sBAAA,EAAwB/B;EAC1B;EAEA,MAAMgC,WAAA,GAAcnC,2BAAA,CAA4BW,QAAA,EAAU;IACxDF,GAAA,EAAKR,aAAA,CAAc6B,YAAA,EAAcrB,GAAA;IACjC2B,SAAA,EAAWrC,YAAA,CAAaW,MAAA,CAAO2B,YAAY,EAAE3B,MAAA,CAAO4B,gBAAgB,EAAE3B,QAAA,CAASH,KAAK,CAAC4B,SAAS;EAChG;EAEA,oBACEtC,KAAA,CAAAyC,aAAA,CAACrC,eAAA,CAAgBsC,QAAQ;IACvBC,KAAA,EAAO;MACLrB,cAAA,EAAgBJ,aAAA,CAAcI,cAAc;MAC5CC,eAAA,EAAiBL,aAAA,CAAcK,eAAe;MAC9CF,WAAA,EAAaH,aAAA,CAAcG,WAAW;MACtCY,YAAA;MACAC,cAAA;MACAC;IACF;KAECE,WAAA;AAGP"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { __styles } from '@griffel/react';
|
|
2
|
+
import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
|
|
3
|
+
export const useOverflowStyles = /*#__PURE__*/__styles({
|
|
4
|
+
overflowMenu: {
|
|
5
|
+
Brvla84: "fyfkpbf"
|
|
6
|
+
},
|
|
7
|
+
overflowingItems: {
|
|
8
|
+
zb22lx: "f10570jf"
|
|
9
|
+
}
|
|
10
|
+
}, {
|
|
11
|
+
d: [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10570jf [data-overflowing]{display:none;}"]
|
|
12
|
+
});
|
|
13
|
+
//# sourceMappingURL=useOverflowStyles.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"sources":["../../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B;AAC3B,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ;AAErD,OAAO,MAAMC,iBAAA,gBAAoBH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAYjC"}
|
|
@@ -12,36 +12,28 @@ const _react1 = require("@griffel/react");
|
|
|
12
12
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
13
13
|
const _overflowContext = require("../overflowContext");
|
|
14
14
|
const _useOverflowContainer = require("../useOverflowContainer");
|
|
15
|
-
const
|
|
16
|
-
overflowMenu: {
|
|
17
|
-
Brvla84: "fyfkpbf"
|
|
18
|
-
},
|
|
19
|
-
overflowingItems: {
|
|
20
|
-
zb22lx: "f10570jf"
|
|
21
|
-
}
|
|
22
|
-
}, {
|
|
23
|
-
d: [
|
|
24
|
-
".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}",
|
|
25
|
-
".f10570jf [data-overflowing]{display:none;}"
|
|
26
|
-
]
|
|
27
|
-
});
|
|
15
|
+
const _useOverflowStylesStyles = require("./useOverflowStyles.styles");
|
|
28
16
|
const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
29
|
-
const styles =
|
|
17
|
+
const styles = (0, _useOverflowStylesStyles.useOverflowStyles)();
|
|
30
18
|
const { children , minimumVisible , overflowAxis ='horizontal' , overflowDirection , padding } = props;
|
|
31
|
-
const [
|
|
32
|
-
|
|
33
|
-
|
|
19
|
+
const [overflowState, setOverflowState] = _react.useState({
|
|
20
|
+
hasOverflow: false,
|
|
21
|
+
itemVisibility: {},
|
|
22
|
+
groupVisibility: {}
|
|
23
|
+
});
|
|
34
24
|
// useOverflowContainer wraps this method in a useEventCallback.
|
|
35
|
-
// TODO: Do we need a useEventCallback here too?
|
|
36
25
|
const update = (data)=>{
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
return
|
|
26
|
+
const { visibleItems , invisibleItems , groupVisibility } = data;
|
|
27
|
+
const itemVisibility = {};
|
|
28
|
+
visibleItems.forEach((x)=>itemVisibility[x.id] = true);
|
|
29
|
+
invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
|
|
30
|
+
setOverflowState(()=>{
|
|
31
|
+
return {
|
|
32
|
+
hasOverflow: data.invisibleItems.length > 0,
|
|
33
|
+
itemVisibility,
|
|
34
|
+
groupVisibility
|
|
35
|
+
};
|
|
43
36
|
});
|
|
44
|
-
setGroupVisibility(data.groupVisibility);
|
|
45
37
|
};
|
|
46
38
|
const { containerRef , registerItem , updateOverflow , registerOverflowMenu } = (0, _useOverflowContainer.useOverflowContainer)(update, {
|
|
47
39
|
overflowDirection,
|
|
@@ -56,9 +48,9 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
56
48
|
});
|
|
57
49
|
return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
|
|
58
50
|
value: {
|
|
59
|
-
itemVisibility,
|
|
60
|
-
groupVisibility,
|
|
61
|
-
hasOverflow,
|
|
51
|
+
itemVisibility: overflowState.itemVisibility,
|
|
52
|
+
groupVisibility: overflowState.groupVisibility,
|
|
53
|
+
hasOverflow: overflowState.hasOverflow,
|
|
62
54
|
registerItem,
|
|
63
55
|
updateOverflow,
|
|
64
56
|
registerOverflowMenu
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../lib/components/Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../lib/components/Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {\n const styles = useOverflowStyles();\n const {\n children,\n minimumVisible,\n overflowAxis = 'horizontal',\n overflowDirection,\n padding\n } = props;\n const [overflowState, setOverflowState] = React.useState({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {}\n });\n // useOverflowContainer wraps this method in a useEventCallback.\n const update = data => {\n const {\n visibleItems,\n invisibleItems,\n groupVisibility\n } = data;\n const itemVisibility = {};\n visibleItems.forEach(x => itemVisibility[x.id] = true);\n invisibleItems.forEach(x => itemVisibility[x.id] = false);\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility\n };\n });\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: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n }\n }, clonedChild);\n});\n//# sourceMappingURL=Overflow.js.map"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAI3B,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EACJC,SAAQ,EACRC,eAAc,EACdC,cAAe,aAAY,EAC3BC,kBAAiB,EACjBC,QAAO,EACR,GAAGR;IACJ,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACvDC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IACA,gEAAgE;IAChE,MAAMC,SAASC,CAAAA,OAAQ;QACrB,MAAM,EACJC,aAAY,EACZC,eAAc,EACdJ,gBAAe,EAChB,GAAGE;QACJ,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAACC,CAAAA,IAAKP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,IAAI;QACrDH,eAAeC,OAAO,CAACC,CAAAA,IAAKP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,KAAK;QACxDX,iBAAiB,IAAM;YACrB,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACI,MAAM,GAAG;gBAC1CT;gBACAC;YACF;QACF;IACF;IACA,MAAM,EACJS,aAAY,EACZC,aAAY,EACZC,eAAc,EACdC,qBAAoB,EACrB,GAAGC,IAAAA,0CAAoB,EAACZ,QAAQ;QAC/BR;QACAD;QACAE;QACAH;QACAuB,wBAAwBC,+CAAyB;IACnD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC3B,UAAU;QACxDH,KAAK+B,IAAAA,6BAAa,EAACT,cAActB;QACjCgC,WAAWC,IAAAA,oBAAY,EAAChC,OAAOiC,YAAY,EAAEjC,OAAOkC,gBAAgB,EAAEhC,SAASJ,KAAK,CAACiC,SAAS;IAChG;IACA,OAAO,WAAW,GAAEnC,OAAMuC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAChEC,OAAO;YACL3B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCY;YACAC;YACAC;QACF;IACF,GAAGI;AACL,IACA,oCAAoC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useOverflowStyles", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>useOverflowStyles
|
|
8
|
+
});
|
|
9
|
+
const _react = require("@griffel/react");
|
|
10
|
+
const useOverflowStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
11
|
+
overflowMenu: {
|
|
12
|
+
Brvla84: "fyfkpbf"
|
|
13
|
+
},
|
|
14
|
+
overflowingItems: {
|
|
15
|
+
zb22lx: "f10570jf"
|
|
16
|
+
}
|
|
17
|
+
}, {
|
|
18
|
+
d: [
|
|
19
|
+
".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}",
|
|
20
|
+
".f10570jf [data-overflowing]{display:none;}"
|
|
21
|
+
]
|
|
22
|
+
}); //# sourceMappingURL=useOverflowStyles.styles.js.map
|
|
23
|
+
|
|
24
|
+
//# sourceMappingURL=useOverflowStyles.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../lib/components/useOverflowStyles.styles.js"],"sourcesContent":["import { __styles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = /*#__PURE__*/__styles({\n overflowMenu: {\n Brvla84: \"fyfkpbf\"\n },\n overflowingItems: {\n zb22lx: \"f10570jf\"\n }\n}, {\n d: [\".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f10570jf [data-overflowing]{display:none;}\"]\n});\n//# sourceMappingURL=useOverflowStyles.styles.js.map"],"names":["useOverflowStyles","__styles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"mappings":";;;;+BAEaA;;aAAAA;;uBAFY;AAElB,MAAMA,oBAAoB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACrDC,cAAc;QACZC,SAAS;IACX;IACAC,kBAAkB;QAChBC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA2F;KAA8C;AAC/I,IACA,oDAAoD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.17",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"test": "jest --passWithNoTests",
|
|
25
25
|
"storybook": "start-storybook",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json",
|
|
27
|
-
"generate-api": "just-scripts generate-api"
|
|
27
|
+
"generate-api": "just-scripts generate-api",
|
|
28
|
+
"test-ssr": "test-ssr ./stories/**/*.stories.tsx"
|
|
28
29
|
},
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"@fluentui/eslint-plugin": "*",
|
|
@@ -33,10 +34,10 @@
|
|
|
33
34
|
"@fluentui/scripts-tasks": "*"
|
|
34
35
|
},
|
|
35
36
|
"dependencies": {
|
|
36
|
-
"@fluentui/priority-overflow": "^9.0.
|
|
37
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
38
|
-
"@fluentui/react-theme": "^9.1.
|
|
39
|
-
"@fluentui/react-utilities": "^9.
|
|
37
|
+
"@fluentui/priority-overflow": "^9.0.3",
|
|
38
|
+
"@fluentui/react-context-selector": "^9.1.20",
|
|
39
|
+
"@fluentui/react-theme": "^9.1.8",
|
|
40
|
+
"@fluentui/react-utilities": "^9.9.0",
|
|
40
41
|
"@griffel/react": "^1.5.2",
|
|
41
42
|
"@swc/helpers": "^0.4.14"
|
|
42
43
|
},
|
package/.swcrc
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
-
"exclude": [
|
|
4
|
-
"/testing",
|
|
5
|
-
"/**/*.cy.ts",
|
|
6
|
-
"/**/*.cy.tsx",
|
|
7
|
-
"/**/*.spec.ts",
|
|
8
|
-
"/**/*.spec.tsx",
|
|
9
|
-
"/**/*.test.ts",
|
|
10
|
-
"/**/*.test.tsx"
|
|
11
|
-
],
|
|
12
|
-
"jsc": {
|
|
13
|
-
"parser": {
|
|
14
|
-
"syntax": "typescript",
|
|
15
|
-
"tsx": true,
|
|
16
|
-
"decorators": false,
|
|
17
|
-
"dynamicImport": false
|
|
18
|
-
},
|
|
19
|
-
"externalHelpers": true,
|
|
20
|
-
"transform": {
|
|
21
|
-
"react": {
|
|
22
|
-
"runtime": "classic",
|
|
23
|
-
"useSpread": true
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
"target": "es2019"
|
|
27
|
-
},
|
|
28
|
-
"minify": false,
|
|
29
|
-
"sourceMaps": true
|
|
30
|
-
}
|