@fluentui/react-overflow 9.0.11 → 9.0.12
Sign up to get free protection for your applications and to get access to all the features.
- package/.swcrc +30 -0
- package/CHANGELOG.json +46 -1
- package/CHANGELOG.md +16 -2
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.types.js +1 -1
- package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib/components/OverflowItem/index.js.map +1 -1
- package/lib/constants.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/overflowContext.js.map +1 -1
- package/lib/types.js +1 -1
- package/lib/types.js.map +1 -1
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useIsOverflowItemVisible.js.map +1 -1
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowCount.js.map +1 -1
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +62 -70
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +16 -21
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +5 -2
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/index.js +6 -8
- package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
- package/lib-commonjs/constants.js +16 -6
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/index.js +34 -86
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/overflowContext.js +21 -16
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js +5 -2
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js +9 -11
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useIsOverflowItemVisible.js +9 -11
- package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +87 -80
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowCount.js +14 -15
- package/lib-commonjs/useOverflowCount.js.map +1 -1
- package/lib-commonjs/useOverflowItem.js +27 -27
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/lib-commonjs/useOverflowMenu.js +41 -30
- package/lib-commonjs/useOverflowMenu.js.map +1 -1
- package/package.json +8 -7
- package/lib-amd/components/Overflow.js +0 -60
- package/lib-amd/components/Overflow.js.map +0 -1
- package/lib-amd/components/OverflowItem/OverflowItem.js +0 -17
- package/lib-amd/components/OverflowItem/OverflowItem.js.map +0 -1
- package/lib-amd/components/OverflowItem/OverflowItem.types.js +0 -5
- package/lib-amd/components/OverflowItem/OverflowItem.types.js.map +0 -1
- package/lib-amd/constants.js +0 -9
- package/lib-amd/constants.js.map +0 -1
- package/lib-amd/index.js +0 -18
- package/lib-amd/index.js.map +0 -1
- package/lib-amd/overflowContext.js +0 -25
- package/lib-amd/overflowContext.js.map +0 -1
- package/lib-amd/types.js +0 -5
- package/lib-amd/types.js.map +0 -1
- package/lib-amd/useIsOverflowGroupVisible.js +0 -14
- package/lib-amd/useIsOverflowGroupVisible.js.map +0 -1
- package/lib-amd/useIsOverflowItemVisible.js +0 -14
- package/lib-amd/useIsOverflowItemVisible.js.map +0 -1
- package/lib-amd/useOverflowContainer.js +0 -84
- package/lib-amd/useOverflowContainer.js.map +0 -1
- package/lib-amd/useOverflowCount.js +0 -21
- package/lib-amd/useOverflowCount.js.map +0 -1
- package/lib-amd/useOverflowItem.js +0 -30
- package/lib-amd/useOverflowItem.js.map +0 -1
- package/lib-amd/useOverflowMenu.js +0 -26
- package/lib-amd/useOverflowMenu.js.map +0 -1
package/.swcrc
ADDED
@@ -0,0 +1,30 @@
|
|
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
|
+
}
|
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,52 @@
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Tue, 21 Mar 2023 21:18:54 GMT",
|
6
|
+
"tag": "@fluentui/react-overflow_v9.0.12",
|
7
|
+
"version": "9.0.12",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "tristan.watanabe@gmail.com",
|
12
|
+
"package": "@fluentui/react-overflow",
|
13
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
14
|
+
"comment": "fix: add node field to package.json exports map."
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "tristan.watanabe@gmail.com",
|
18
|
+
"package": "@fluentui/react-overflow",
|
19
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
20
|
+
"comment": "chore: migrate to swc transpilation approach."
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-overflow",
|
25
|
+
"comment": "Bump @fluentui/priority-overflow to v9.0.2",
|
26
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-overflow",
|
31
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.15",
|
32
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "beachball",
|
36
|
+
"package": "@fluentui/react-overflow",
|
37
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
38
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "beachball",
|
42
|
+
"package": "@fluentui/react-overflow",
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
44
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
45
|
+
}
|
46
|
+
]
|
47
|
+
}
|
48
|
+
},
|
49
|
+
{
|
50
|
+
"date": "Thu, 16 Mar 2023 14:36:59 GMT",
|
6
51
|
"tag": "@fluentui/react-overflow_v9.0.11",
|
7
52
|
"version": "9.0.11",
|
8
53
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,26 @@
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 21 Mar 2023 21:18:54 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.12)
|
8
|
+
|
9
|
+
Tue, 21 Mar 2023 21:18:54 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.11..@fluentui/react-overflow_v9.0.12)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
15
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
16
|
+
- Bump @fluentui/priority-overflow to v9.0.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
17
|
+
- Bump @fluentui/react-context-selector to v9.1.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
18
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
19
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
20
|
+
|
7
21
|
## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.11)
|
8
22
|
|
9
|
-
Thu, 16 Mar 2023 14:
|
23
|
+
Thu, 16 Mar 2023 14:36:59 GMT
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.10..@fluentui/react-overflow_v9.0.11)
|
11
25
|
|
12
26
|
### Patches
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","__styles","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useStyles","overflowMenu","Brvla84","overflowingItems","Hevnzl","d","Overflow","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","onUpdateItemVisibility","clonedChild","className","createElement","Provider","value"],"sources":["
|
1
|
+
{"version":3,"names":["React","__styles","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useStyles","overflowMenu","Brvla84","overflowingItems","Hevnzl","d","Overflow","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","onUpdateItemVisibility","clonedChild","className","createElement","Provider","value"],"sources":["../../src/components/Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { makeStyles, 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 { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = 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\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 = useStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update: OnUpdateOverflow = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState: Record<string, boolean> = {};\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\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,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAAAC,QAAA,EAAqBC,YAAY,QAAQ;AAEzC,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAE3D,SAASC,eAAe,QAAQ;AAChC,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ;AAChE,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ;AAErD,MAAMC,SAAA,gBAAYT,QAAA;EAAAU,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAYlB;AAWA;;;AAGA,OAAO,MAAMC,QAAA,gBAAWhB,KAAA,CAAMiB,UAAU,CAAC,CAACC,KAAA,EAAsBC,GAAA,KAAQ;EACtE,MAAMC,MAAA,GAASV,SAAA;EAEf,MAAM;IAAEW,QAAA;IAAUC,cAAA;IAAgBC,YAAA,GAAe;IAAcC,iBAAA;IAAmBC;EAAO,CAAE,GAAGP,KAAA;EAE9F,MAAM,CAACQ,WAAA,EAAaC,cAAA,CAAe,GAAG3B,KAAA,CAAM4B,QAAQ,CAAC,KAAK;EAC1D,MAAM,CAACC,cAAA,EAAgBC,iBAAA,CAAkB,GAAG9B,KAAA,CAAM4B,QAAQ,CAA0B,CAAC;EACrF,MAAM,CAACG,eAAA,EAAiBC,kBAAA,CAAmB,GAAGhC,KAAA,CAAM4B,QAAQ,CAAqC,CAAC;EAElG;EACA;EACA,MAAMK,MAAA,GAA2BC,IAAA,IAAQ;IACvCP,cAAA,CAAe,MAAMO,IAAA,CAAKC,cAAc,CAACC,MAAM,GAAG;IAClDN,iBAAA,CAAkB,MAAM;MACtB,MAAMO,QAAA,GAAoC,CAAC;MAC3CH,IAAA,CAAKI,YAAY,CAACC,OAAO,CAACC,CAAA,IAAMH,QAAQ,CAACG,CAAA,CAAEC,EAAE,CAAC,GAAG,IAAI;MACrDP,IAAA,CAAKC,cAAc,CAACI,OAAO,CAACC,CAAA,IAAMH,QAAQ,CAACG,CAAA,CAAEC,EAAE,CAAC,GAAG,KAAK;MACxD,OAAOJ,QAAA;IACT;IACAL,kBAAA,CAAmBE,IAAA,CAAKH,eAAe;EACzC;EAEA,MAAM;IAAEW,YAAA;IAAcC,YAAA;IAAcC,cAAA;IAAgBC;EAAoB,CAAE,GAAGtC,oBAAA,CAAqB0B,MAAA,EAAQ;IACxGT,iBAAA;IACAD,YAAA;IACAE,OAAA;IACAH,cAAA;IACAwB,sBAAA,EAAwBxC;EAC1B;EAEA,MAAMyC,WAAA,GAAc5C,2BAAA,CAA4BkB,QAAA,EAAU;IACxDF,GAAA,EAAKf,aAAA,CAAcsC,YAAA,EAAcvB,GAAA;IACjC6B,SAAA,EAAW9C,YAAA,CAAakB,MAAA,CAAOT,YAAY,EAAES,MAAA,CAAOP,gBAAgB,EAAEQ,QAAA,CAASH,KAAK,CAAC8B,SAAS;EAChG;EAEA,oBACEhD,KAAA,CAAAiD,aAAA,CAAC5C,eAAA,CAAgB6C,QAAQ;IACvBC,KAAA,EAAO;MACLtB,cAAA;MACAE,eAAA;MACAL,WAAA;MACAiB,YAAA;MACAC,cAAA;MACAC;IACF;KAECE,WAAA;AAGP"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef"],"sources":["
|
1
|
+
{"version":3,"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef"],"sources":["../../../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\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 = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAC3D,SAASC,eAAe,QAAQ;AAGhC;;;;AAIA,OAAO,MAAMC,YAAA,gBAAeJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAA0BC,GAAA,KAAQ;EAC9E,MAAM;IAAEC,EAAA;IAAIC,OAAA;IAASC,QAAA;IAAUC;EAAQ,CAAE,GAAGL,KAAA;EAE5C,MAAMM,YAAA,GAAeT,eAAA,CAAgBK,EAAA,EAAIE,QAAA,EAAUD,OAAA;EACnD,OAAOR,2BAAA,CAA4BU,QAAA,EAAU;IAC3CJ,GAAA,EAAKL,aAAA,CAAcU,YAAA,EAAcL,GAAA;EACnC;AACF"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
|
1
|
+
import * as React from 'react';
|
2
2
|
//# sourceMappingURL=OverflowItem.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React"],"sources":["../../../src/components/OverflowItem/OverflowItem.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n /**\n * The unique identifier for the item used by the overflow manager.\n */\n id: string;\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId?: string;\n /**\n * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["OverflowItem"],"sources":["../../../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"mappings":"AACA,SAASA,YAAY,QAAQ"}
|
package/lib/constants.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"mappings":"AAAA,OAAO,MAAMA,gBAAA,GAAmB;AAChC,OAAO,MAAMC,kBAAA,GAAqB;AAClC,OAAO,MAAMC,kBAAA,GAAqB"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowContext","OverflowItem"],"sources":["../src/index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ;AAEzB,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ;AAEzE,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,wBAAwB,QAAQ;AACzC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,eAAe,QAAQ;AAChC,SAASC,eAAe,QAAQ;AAEhC,SAASC,kBAAkB,QAAQ;AAGnC,SAASC,YAAY,QAAQ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"sources":["../src/
|
1
|
+
{"version":3,"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"sources":["../src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\n/**\n * @internal\n */\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n registerOverflowMenu: (el: HTMLElement) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"mappings":"AACA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAiB;AAc5E,OAAO,MAAMC,eAAA,gBAAkBF,aAAA,CAC7BG,SAAA;AAGF,MAAMC,2BAAA,GAAoD;EACxDC,cAAA,EAAgB,CAAC;EACjBC,eAAA,EAAiB,CAAC;EAClBC,WAAA,EAAa,KAAK;EAClBC,YAAA,EAAcA,CAAA,KAAM,MAAM,IAAI;EAC9BC,cAAA,EAAgBA,CAAA,KAAM,IAAI;EAC1BC,oBAAA,EAAsBA,CAAA,KAAM,MAAM;AACpC;AAEA;;;AAGA,OAAO,MAAMC,kBAAA,GAAqCC,QAAA,IAChDX,kBAAA,CAAmBC,eAAA,EAAiB,CAACW,GAAA,GAAMT,2BAA2B,KAAKQ,QAAA,CAASC,GAAA"}
|
package/lib/types.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
|
1
|
+
import * as React from 'react';
|
2
2
|
//# sourceMappingURL=types.js.map
|
package/lib/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React"],"sources":["../src/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"sources":["../src/
|
1
|
+
{"version":3,"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"mappings":"AACA,SAASA,kBAAkB,QAAQ;AAEnC;;;;AAIA,OAAO,SAASC,0BAA0BC,EAAU,EAAsB;EACxE,OAAOF,kBAAA,CAAmBG,GAAA,IAAOA,GAAA,CAAIC,eAAe,CAACF,EAAA,CAAG;AAC1D"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"sources":["../src/
|
1
|
+
{"version":3,"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"sources":["../src/useIsOverflowItemVisible.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\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: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ;AAEnC;;;;AAIA,OAAO,SAASC,yBAAyBC,EAAU,EAAW;EAC5D,OAAO,CAAC,CAACF,kBAAA,CAAmBG,GAAA,IAAOA,GAAA,CAAIC,cAAc,CAACF,EAAA,CAAG;AAC3D"}
|
@@ -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/
|
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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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"sources":["../src/
|
1
|
+
{"version":3,"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"sources":["../src/useOverflowCount.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ;AAEnC;;;AAGA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAC9BD,kBAAA,CAAmBE,CAAA,IAAK;EACtB,OAAOC,MAAA,CAAOC,OAAO,CAACF,CAAA,CAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,GAAA,EAAK,CAACC,EAAA,EAAIC,OAAA,CAAQ,KAAK;IACrE,IAAI,CAACA,OAAA,EAAS;MACZF,GAAA;IACF;IAEA,OAAOA,GAAA;EACT,GAAG;AACL"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"sources":["../src/
|
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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"sources":["../src/
|
1
|
+
{"version":3,"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\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<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,KAAK,EAAEC,yBAAyB,QAAQ;AACjD,SAASC,kBAAkB,QAAQ;AACnC,SAASC,gBAAgB,QAAQ;AAEjC,OAAO,SAASC,gBAA8CC,EAAW,EAAE;EACzE,MAAMC,SAAA,GAAYN,KAAA,CAAM,iBAAiBK,EAAA;EACzC,MAAME,aAAA,GAAgBJ,gBAAA;EACtB,MAAMK,oBAAA,GAAuBN,kBAAA,CAAmBO,CAAA,IAAKA,CAAA,CAAED,oBAAoB;EAC3E,MAAME,cAAA,GAAiBR,kBAAA,CAAmBO,CAAA,IAAKA,CAAA,CAAEC,cAAc;EAC/D,MAAMC,GAAA,GAAMZ,KAAA,CAAMa,MAAM,CAAW,IAAI;EACvC,MAAMC,aAAA,GAAgBN,aAAA,GAAgB;EAEtCN,yBAAA,CAA0B,MAAM;IAC9B,IAAIU,GAAA,CAAIG,OAAO,EAAE;MACf,OAAON,oBAAA,CAAqBG,GAAA,CAAIG,OAAO;IACzC;EACF,GAAG,CAACN,oBAAA,EAAsBK,aAAA,EAAeP,SAAA,CAAU;EAEnDL,yBAAA,CAA0B,MAAM;IAC9B,IAAIY,aAAA,EAAe;MACjBH,cAAA;IACF;EACF,GAAG,CAACG,aAAA,EAAeH,cAAA,EAAgBC,GAAA,CAAI;EAEvC,OAAO;IAAEA,GAAA;IAAKJ,aAAA;IAAeM;EAAc;AAC7C"}
|
@@ -1,77 +1,69 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
exports
|
7
|
-
|
8
|
-
|
9
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
10
|
-
const overflowContext_1 = /*#__PURE__*/require("../overflowContext");
|
11
|
-
const useOverflowContainer_1 = /*#__PURE__*/require("../useOverflowContainer");
|
12
|
-
const constants_1 = /*#__PURE__*/require("../constants");
|
13
|
-
const useStyles = /*#__PURE__*/react_1.__styles({
|
14
|
-
overflowMenu: {
|
15
|
-
Brvla84: "fyfkpbf"
|
16
|
-
},
|
17
|
-
overflowingItems: {
|
18
|
-
Hevnzl: "ftz08xh"
|
19
|
-
}
|
20
|
-
}, {
|
21
|
-
d: [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
|
5
|
+
Object.defineProperty(exports, "Overflow", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>Overflow
|
22
8
|
});
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
const [hasOverflow, setHasOverflow] = React.useState(false);
|
36
|
-
const [itemVisibility, setItemVisibility] = React.useState({});
|
37
|
-
const [groupVisibility, setGroupVisibility] = React.useState({});
|
38
|
-
// useOverflowContainer wraps this method in a useEventCallback.
|
39
|
-
// TODO: Do we need a useEventCallback here too?
|
40
|
-
const update = data => {
|
41
|
-
setHasOverflow(() => data.invisibleItems.length > 0);
|
42
|
-
setItemVisibility(() => {
|
43
|
-
const newState = {};
|
44
|
-
data.visibleItems.forEach(x => newState[x.id] = true);
|
45
|
-
data.invisibleItems.forEach(x => newState[x.id] = false);
|
46
|
-
return newState;
|
47
|
-
});
|
48
|
-
setGroupVisibility(data.groupVisibility);
|
49
|
-
};
|
50
|
-
const {
|
51
|
-
containerRef,
|
52
|
-
registerItem,
|
53
|
-
updateOverflow,
|
54
|
-
registerOverflowMenu
|
55
|
-
} = useOverflowContainer_1.useOverflowContainer(update, {
|
56
|
-
overflowDirection,
|
57
|
-
overflowAxis,
|
58
|
-
padding,
|
59
|
-
minimumVisible,
|
60
|
-
onUpdateItemVisibility: useOverflowContainer_1.updateVisibilityAttribute
|
61
|
-
});
|
62
|
-
const clonedChild = react_utilities_1.applyTriggerPropsToChildren(children, {
|
63
|
-
ref: react_utilities_1.useMergedRefs(containerRef, ref),
|
64
|
-
className: react_1.mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)
|
65
|
-
});
|
66
|
-
return React.createElement(overflowContext_1.OverflowContext.Provider, {
|
67
|
-
value: {
|
68
|
-
itemVisibility,
|
69
|
-
groupVisibility,
|
70
|
-
hasOverflow,
|
71
|
-
registerItem,
|
72
|
-
updateOverflow,
|
73
|
-
registerOverflowMenu
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _react1 = require("@griffel/react");
|
12
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
13
|
+
const _overflowContext = require("../overflowContext");
|
14
|
+
const _useOverflowContainer = require("../useOverflowContainer");
|
15
|
+
const useStyles = /*#__PURE__*/ (0, _react1["__styles"])({
|
16
|
+
overflowMenu: {
|
17
|
+
Brvla84: "fyfkpbf"
|
18
|
+
},
|
19
|
+
overflowingItems: {
|
20
|
+
Hevnzl: "ftz08xh"
|
74
21
|
}
|
75
|
-
|
22
|
+
}, {
|
23
|
+
d: [
|
24
|
+
".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}",
|
25
|
+
".ftz08xh>[data-overflowing]{display:none;}"
|
26
|
+
]
|
76
27
|
});
|
28
|
+
const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
29
|
+
const styles = useStyles();
|
30
|
+
const { children , minimumVisible , overflowAxis ='horizontal' , overflowDirection , padding } = props;
|
31
|
+
const [hasOverflow, setHasOverflow] = _react.useState(false);
|
32
|
+
const [itemVisibility, setItemVisibility] = _react.useState({});
|
33
|
+
const [groupVisibility, setGroupVisibility] = _react.useState({});
|
34
|
+
// useOverflowContainer wraps this method in a useEventCallback.
|
35
|
+
// TODO: Do we need a useEventCallback here too?
|
36
|
+
const update = (data)=>{
|
37
|
+
setHasOverflow(()=>data.invisibleItems.length > 0);
|
38
|
+
setItemVisibility(()=>{
|
39
|
+
const newState = {};
|
40
|
+
data.visibleItems.forEach((x)=>newState[x.id] = true);
|
41
|
+
data.invisibleItems.forEach((x)=>newState[x.id] = false);
|
42
|
+
return newState;
|
43
|
+
});
|
44
|
+
setGroupVisibility(data.groupVisibility);
|
45
|
+
};
|
46
|
+
const { containerRef , registerItem , updateOverflow , registerOverflowMenu } = (0, _useOverflowContainer.useOverflowContainer)(update, {
|
47
|
+
overflowDirection,
|
48
|
+
overflowAxis,
|
49
|
+
padding,
|
50
|
+
minimumVisible,
|
51
|
+
onUpdateItemVisibility: _useOverflowContainer.updateVisibilityAttribute
|
52
|
+
});
|
53
|
+
const clonedChild = (0, _reactUtilities.applyTriggerPropsToChildren)(children, {
|
54
|
+
ref: (0, _reactUtilities.useMergedRefs)(containerRef, ref),
|
55
|
+
className: (0, _react1.mergeClasses)(styles.overflowMenu, styles.overflowingItems, children.props.className)
|
56
|
+
});
|
57
|
+
return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
|
58
|
+
value: {
|
59
|
+
itemVisibility,
|
60
|
+
groupVisibility,
|
61
|
+
hasOverflow,
|
62
|
+
registerItem,
|
63
|
+
updateOverflow,
|
64
|
+
registerOverflowMenu
|
65
|
+
}
|
66
|
+
}, clonedChild);
|
67
|
+
}); //# sourceMappingURL=Overflow.js.map
|
68
|
+
|
77
69
|
//# sourceMappingURL=Overflow.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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,26 +1,21 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
exports
|
7
|
-
|
8
|
-
|
9
|
-
const useOverflowItem_1 = /*#__PURE__*/require("../../useOverflowItem");
|
10
|
-
/**
|
11
|
-
* Attaches overflow item behavior to its child registered with the OverflowContext.
|
12
|
-
* It does not render an element of its own.
|
13
|
-
*/
|
14
|
-
exports.OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {
|
15
|
-
const {
|
16
|
-
id,
|
17
|
-
groupId,
|
18
|
-
priority,
|
19
|
-
children
|
20
|
-
} = props;
|
21
|
-
const containerRef = useOverflowItem_1.useOverflowItem(id, priority, groupId);
|
22
|
-
return react_utilities_1.applyTriggerPropsToChildren(children, {
|
23
|
-
ref: react_utilities_1.useMergedRefs(containerRef, ref)
|
24
|
-
});
|
5
|
+
Object.defineProperty(exports, "OverflowItem", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>OverflowItem
|
25
8
|
});
|
9
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
10
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
11
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
12
|
+
const _useOverflowItem = require("../../useOverflowItem");
|
13
|
+
const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
14
|
+
const { id , groupId , priority , children } = props;
|
15
|
+
const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId);
|
16
|
+
return (0, _reactUtilities.applyTriggerPropsToChildren)(children, {
|
17
|
+
ref: (0, _reactUtilities.useMergedRefs)(containerRef, ref)
|
18
|
+
});
|
19
|
+
}); //# sourceMappingURL=OverflowItem.js.map
|
20
|
+
|
26
21
|
//# sourceMappingURL=OverflowItem.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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,6 +1,9 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
5
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
6
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
7
|
+
//# sourceMappingURL=OverflowItem.types.js.map
|
8
|
+
|
6
9
|
//# sourceMappingURL=OverflowItem.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
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"}
|