@fluentui/react-overflow 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +11 -11
- package/CHANGELOG.md +8 -8
- package/lib/components/Overflow.js +7 -7
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js +3 -3
- 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 +1 -1
- package/lib/components/OverflowItem/index.js.map +1 -1
- package/lib/constants.js +3 -3
- package/lib/constants.js.map +1 -1
- package/lib/index.js +10 -10
- package/lib/index.js.map +1 -1
- package/lib/overflowContext.js +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 +1 -1
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useIsOverflowItemVisible.js +1 -1
- package/lib/useIsOverflowItemVisible.js.map +1 -1
- package/lib/useOverflowContainer.js +18 -18
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowCount.js +1 -1
- package/lib/useOverflowCount.js.map +1 -1
- package/lib/useOverflowItem.js +4 -4
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js +5 -5
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +70 -62
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +21 -16
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +2 -5
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/index.js +8 -6
- package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
- package/lib-commonjs/constants.js +6 -16
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/index.js +86 -34
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/overflowContext.js +16 -21
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js +2 -5
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js +11 -9
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useIsOverflowItemVisible.js +11 -9
- package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +80 -87
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowCount.js +15 -14
- 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 +30 -41
- package/lib-commonjs/useOverflowMenu.js.map +1 -1
- package/package.json +8 -7
- package/.swcrc +0 -39
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": "Tue, 21 Mar 2023 04:50:00 GMT",
|
6
|
+
"tag": "@fluentui/react-overflow_v0.0.0-nightly-20230321-0440.1",
|
7
|
+
"version": "0.0.0-nightly-20230321-0440.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
@@ -16,26 +16,26 @@
|
|
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-20230321-0440.1",
|
20
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
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-20230321-0440.1",
|
26
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
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-20230321-0440.1",
|
32
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
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-20230321-0440.1",
|
38
|
+
"commit": "e913db5700c77cb74564f4422c775d52ef302e91"
|
39
39
|
}
|
40
40
|
]
|
41
41
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,21 +1,21 @@
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 21 Mar 2023 04:50:00 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-20230321-0440.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20230321-0440.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.11..@fluentui/react-overflow_v0.0.0-nightly-
|
9
|
+
Tue, 21 Mar 2023 04:50:00 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.11..@fluentui/react-overflow_v0.0.0-nightly-20230321-0440.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-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
16
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230321-0440.1 ([commit](https://github.com/microsoft/fluentui/commit/e913db5700c77cb74564f4422c775d52ef302e91) by beachball)
|
19
19
|
|
20
20
|
## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.11)
|
21
21
|
|
@@ -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 +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":["../../../../../../../../packages/react-components/react-overflow/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AAEzD,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,2BAA2B;AAEtF,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,yBAAyB;AACzF,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,cAAc;AAEnE,MAAMC,SAAS,gBAAGT,QAAA;EAAAU,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAYhB;AAWF;;;AAGA,OAAO,MAAMC,QAAQ,gBAAGhB,KAAK,CAACiB,UAAU,CAAC,CAACC,KAAoB,EAAEC,GAAG,KAAI;EACrE,MAAMC,MAAM,GAAGV,SAAS,EAAE;EAE1B,MAAM;IAAEW,QAAQ;IAAEC,cAAc;IAAEC,YAAY,GAAG,YAAY;IAAEC,iBAAiB;IAAEC;EAAO,CAAE,GAAGP,KAAK;EAEnG,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAG3B,KAAK,CAAC4B,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG9B,KAAK,CAAC4B,QAAQ,CAA0B,EAAE,CAAC;EACvF,MAAM,CAACG,eAAe,EAAEC,kBAAkB,CAAC,GAAGhC,KAAK,CAAC4B,QAAQ,CAAqC,EAAE,CAAC;EAEpG;EACA;EACA,MAAMK,MAAM,GAAqBC,IAAI,IAAG;IACtCP,cAAc,CAAC,MAAMO,IAAI,CAACC,cAAc,CAACC,MAAM,GAAG,CAAC,CAAC;IACpDN,iBAAiB,CAAC,MAAK;MACrB,MAAMO,QAAQ,GAA4B,EAAE;MAC5CH,IAAI,CAACI,YAAY,CAACC,OAAO,CAACC,CAAC,IAAKH,QAAQ,CAACG,CAAC,CAACC,EAAE,CAAC,GAAG,IAAK,CAAC;MACvDP,IAAI,CAACC,cAAc,CAACI,OAAO,CAACC,CAAC,IAAKH,QAAQ,CAACG,CAAC,CAACC,EAAE,CAAC,GAAG,KAAM,CAAC;MAC1D,OAAOJ,QAAQ;IACjB,CAAC,CAAC;IACFL,kBAAkB,CAACE,IAAI,CAACH,eAAe,CAAC;EAC1C,CAAC;EAED,MAAM;IAAEW,YAAY;IAAEC,YAAY;IAAEC,cAAc;IAAEC;EAAoB,CAAE,GAAGtC,oBAAoB,CAAC0B,MAAM,EAAE;IACxGT,iBAAiB;IACjBD,YAAY;IACZE,OAAO;IACPH,cAAc;IACdwB,sBAAsB,EAAExC;GACzB,CAAC;EAEF,MAAMyC,WAAW,GAAG5C,2BAA2B,CAACkB,QAAQ,EAAE;IACxDF,GAAG,EAAEf,aAAa,CAACsC,YAAY,EAAEvB,GAAG,CAAC;IACrC6B,SAAS,EAAE9C,YAAY,CAACkB,MAAM,CAACT,YAAY,EAAES,MAAM,CAACP,gBAAgB,EAAEQ,QAAQ,CAACH,KAAK,CAAC8B,SAAS;GAC/F,CAAC;EAEF,oBACEhD,KAAA,CAAAiD,aAAA,CAAC5C,eAAe,CAAC6C,QAAQ;IACvBC,KAAK,EAAE;MACLtB,cAAc;MACdE,eAAe;MACfL,WAAW;MACXiB,YAAY;MACZC,cAAc;MACdC;;EACD,GAEAE,WAAW,CACa;AAE/B,CAAC,CAAC"}
|
@@ -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 +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":["../../../../../../../../../packages/react-components/react-overflow/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,2BAA2B;AACtF,SAASC,eAAe,QAAQ,uBAAuB;AAGvD;;;;AAIA,OAAO,MAAMC,YAAY,gBAAGJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAwB,EAAEC,GAAG,KAAI;EAC7E,MAAM;IAAEC,EAAE;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAQ,CAAE,GAAGL,KAAK;EAEjD,MAAMM,YAAY,GAAGT,eAAe,CAACK,EAAE,EAAEE,QAAQ,EAAED,OAAO,CAAC;EAC3D,OAAOR,2BAA2B,CAACU,QAAQ,EAAE;IAC3CJ,GAAG,EAAEL,aAAa,CAACU,YAAY,EAAEL,GAAG;GACrC,CAAC;AACJ,CAAC,CAAC"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
|
1
|
+
export {};
|
2
2
|
//# sourceMappingURL=OverflowItem.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"file":"OverflowItem.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.types.ts"],"names":[],"mappings":"","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"]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export { OverflowItem } from
|
1
|
+
export { OverflowItem } from './OverflowItem';
|
2
2
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-overflow/src/components/OverflowItem/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"]}
|
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/constants.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AACnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AACvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"]}
|
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/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC","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"]}
|
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: {},
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"sources":["
|
1
|
+
{"version":3,"names":["createContext","useContextSelector","OverflowContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","useOverflowContext","selector","ctx"],"sources":["../../../../../../../packages/react-components/react-overflow/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,kCAAkC;AAc9G,OAAO,MAAMC,eAAe,gBAAGF,aAAa,CAC1CG,SAAS,CACuB;AAElC,MAAMC,2BAA2B,GAAyB;EACxDC,cAAc,EAAE,EAAE;EAClBC,eAAe,EAAE,EAAE;EACnBC,WAAW,EAAE,KAAK;EAClBC,YAAY,EAAEA,CAAA,KAAM,MAAM,IAAI;EAC9BC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,oBAAoB,EAAEA,CAAA,KAAM,MAAM;CACnC;AAED;;;AAGA,OAAO,MAAMC,kBAAkB,GAAmBC,QAA8D,IAC9GX,kBAAkB,CAACC,eAAe,EAAE,CAACW,GAAG,GAAGT,2BAA2B,KAAKQ,QAAQ,CAACC,GAAG,CAAC,CAAC"}
|
package/lib/types.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
|
1
|
+
export {};
|
2
2
|
//# sourceMappingURL=types.js.map
|
package/lib/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/types.ts"],"names":[],"mappings":"","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"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"sources":["
|
1
|
+
{"version":3,"names":["useOverflowContext","useIsOverflowGroupVisible","id","ctx","groupVisibility"],"sources":["../../../../../../../packages/react-components/react-overflow/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,mBAAmB;AAEtD;;;;AAIA,OAAM,SAAUC,yBAAyBA,CAACC,EAAU;EAClD,OAAOF,kBAAkB,CAACG,GAAG,IAAIA,GAAG,CAACC,eAAe,CAACF,EAAE,CAAC,CAAC;AAC3D"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"sources":["
|
1
|
+
{"version":3,"names":["useOverflowContext","useIsOverflowItemVisible","id","ctx","itemVisibility"],"sources":["../../../../../../../packages/react-components/react-overflow/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,mBAAmB;AAEtD;;;;AAIA,OAAM,SAAUC,wBAAwBA,CAACC,EAAU;EACjD,OAAO,CAAC,CAACF,kBAAkB,CAACG,GAAG,IAAIA,GAAG,CAACC,cAAc,CAACF,EAAE,CAAC,CAAC;AAC5D"}
|
@@ -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":["
|
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":["../../../../../../../packages/react-components/react-overflow/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
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"sources":["
|
1
|
+
{"version":3,"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"sources":["../../../../../../../packages/react-components/react-overflow/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,mBAAmB;AAEtD;;;AAGA,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAC9BD,kBAAkB,CAACE,CAAC,IAAG;EACrB,OAAOC,MAAM,CAACC,OAAO,CAACF,CAAC,CAACG,cAAc,CAAC,CAACC,MAAM,CAAC,CAACC,GAAG,EAAE,CAACC,EAAE,EAAEC,OAAO,CAAC,KAAI;IACpE,IAAI,CAACA,OAAO,EAAE;MACZF,GAAG,EAAE;;IAGP,OAAOA,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC;AACP,CAAC,CAAC"}
|
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":["
|
1
|
+
{"version":3,"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"sources":["../../../../../../../packages/react-components/react-overflow/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,yBAAyB,QAAQ,2BAA2B;AACrE,SAASC,kBAAkB,QAAQ,mBAAmB;AAEtD;;;;;;;;AAQA,OAAM,SAAUC,eAAeA,CAA+BC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;EAC3G,MAAMC,GAAG,GAAGP,KAAK,CAACQ,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,YAAY,GAAGP,kBAAkB,CAACQ,CAAC,IAAIA,CAAC,CAACD,YAAY,CAAC;EAE5DR,yBAAyB,CAAC,MAAK;IAC7B,IAAIM,GAAG,CAACI,OAAO,EAAE;MACf,OAAOF,YAAY,CAAC;QAClBG,OAAO,EAAEL,GAAG,CAACI,OAAO;QACpBP,EAAE;QACFC,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,CAAC;QACvBC;OACD,CAAC;;EAEN,CAAC,EAAE,CAACF,EAAE,EAAEC,QAAQ,EAAEI,YAAY,EAAEH,OAAO,CAAC,CAAC;EAEzC,OAAOC,GAAG;AACZ"}
|
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);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"sources":["
|
1
|
+
{"version":3,"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"sources":["../../../../../../../packages/react-components/react-overflow/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,2BAA2B;AAC5E,SAASC,kBAAkB,QAAQ,mBAAmB;AACtD,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,OAAM,SAAUC,eAAeA,CAA+BC,EAAW;EACvE,MAAMC,SAAS,GAAGN,KAAK,CAAC,eAAe,EAAEK,EAAE,CAAC;EAC5C,MAAME,aAAa,GAAGJ,gBAAgB,EAAE;EACxC,MAAMK,oBAAoB,GAAGN,kBAAkB,CAACO,CAAC,IAAIA,CAAC,CAACD,oBAAoB,CAAC;EAC5E,MAAME,cAAc,GAAGR,kBAAkB,CAACO,CAAC,IAAIA,CAAC,CAACC,cAAc,CAAC;EAChE,MAAMC,GAAG,GAAGZ,KAAK,CAACa,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,aAAa,GAAGN,aAAa,GAAG,CAAC;EAEvCN,yBAAyB,CAAC,MAAK;IAC7B,IAAIU,GAAG,CAACG,OAAO,EAAE;MACf,OAAON,oBAAoB,CAACG,GAAG,CAACG,OAAO,CAAC;;EAE5C,CAAC,EAAE,CAACN,oBAAoB,EAAEK,aAAa,EAAEP,SAAS,CAAC,CAAC;EAEpDL,yBAAyB,CAAC,MAAK;IAC7B,IAAIY,aAAa,EAAE;MACjBH,cAAc,EAAE;;EAEpB,CAAC,EAAE,CAACG,aAAa,EAAEH,cAAc,EAAEC,GAAG,CAAC,CAAC;EAExC,OAAO;IAAEA,GAAG;IAAEJ,aAAa;IAAEM;EAAa,CAAE;AAC9C"}
|