@fluentui/react-overflow 9.0.18 → 9.0.20
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +75 -1
- package/CHANGELOG.md +26 -2
- package/dist/index.d.ts +33 -1
- package/lib/components/Overflow.js +45 -59
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowDivider/OverflowDivider.js +13 -0
- package/lib/components/OverflowDivider/OverflowDivider.js.map +1 -0
- package/lib/components/OverflowDivider/OverflowDivider.types.js +1 -0
- package/lib/components/OverflowDivider/OverflowDivider.types.js.map +1 -0
- package/lib/components/OverflowItem/OverflowItem.js +6 -13
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.types.js +0 -1
- package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib/components/OverflowItem/index.js +0 -1
- package/lib/components/OverflowItem/index.js.map +1 -1
- package/lib/components/useOverflowStyles.styles.js.map +1 -1
- package/lib/constants.js +1 -1
- package/lib/constants.js.map +1 -1
- package/lib/index.js +3 -2
- package/lib/index.js.map +1 -1
- package/lib/overflowContext.js +9 -10
- package/lib/overflowContext.js.map +1 -1
- package/lib/types.js +0 -1
- package/lib/types.js.map +1 -1
- package/lib/useIsOverflowGroupVisible.js +2 -4
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useIsOverflowItemVisible.js +2 -4
- package/lib/useIsOverflowItemVisible.js.map +1 -1
- package/lib/useOverflowContainer.js +82 -67
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowCount.js +8 -10
- package/lib/useOverflowCount.js.map +1 -1
- package/lib/useOverflowDivider.js +24 -0
- package/lib/useOverflowDivider.js.map +1 -0
- package/lib/useOverflowItem.js +17 -14
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js +29 -22
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +7 -6
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.js +19 -0
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.js.map +1 -0
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js +6 -0
- package/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js.map +1 -0
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +1 -3
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +0 -3
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/index.js +0 -3
- package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
- package/lib-commonjs/components/useOverflowStyles.styles.js +0 -2
- package/lib-commonjs/components/useOverflowStyles.styles.js.map +1 -1
- package/lib-commonjs/constants.js +4 -4
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/index.js +6 -4
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/overflowContext.js +4 -5
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js +0 -3
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js +1 -3
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useIsOverflowItemVisible.js +1 -3
- package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +14 -4
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowCount.js +1 -3
- package/lib-commonjs/useOverflowCount.js.map +1 -1
- package/lib-commonjs/useOverflowDivider.js +28 -0
- package/lib-commonjs/useOverflowDivider.js.map +1 -0
- package/lib-commonjs/useOverflowItem.js +1 -3
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/lib-commonjs/useOverflowMenu.js +1 -3
- package/lib-commonjs/useOverflowMenu.js.map +1 -1
- package/package.json +6 -6
@@ -1,78 +1,93 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { createOverflowManager } from '@fluentui/priority-overflow';
|
3
3
|
import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
4
|
-
import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
|
4
|
+
import { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
|
5
5
|
/**
|
6
6
|
* @internal
|
7
7
|
* @param update - Callback when overflow state changes
|
8
8
|
* @param options - Options to configure the overflow container
|
9
9
|
* @returns - ref to attach to an intrinsic HTML element and imperative functions
|
10
|
-
*/
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
10
|
+
*/ export const useOverflowContainer = (update, options)=>{
|
11
|
+
const { overflowAxis , overflowDirection , padding , minimumVisible , onUpdateItemVisibility } = options;
|
12
|
+
// DOM ref to the overflow container element
|
13
|
+
const containerRef = React.useRef(null);
|
14
|
+
const updateOverflowItems = useEventCallback(update);
|
15
|
+
const [overflowManager] = React.useState(()=>canUseDOM() ? createOverflowManager() : null);
|
16
|
+
useIsomorphicLayoutEffect(()=>{
|
17
|
+
if (!containerRef.current) {
|
18
|
+
return;
|
19
|
+
}
|
20
|
+
if (overflowManager) {
|
21
|
+
overflowManager.observe(containerRef.current, {
|
22
|
+
overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
|
23
|
+
overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
|
24
|
+
padding: padding !== null && padding !== void 0 ? padding : 10,
|
25
|
+
minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
|
26
|
+
onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : ()=>undefined,
|
27
|
+
onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : ()=>undefined
|
28
|
+
});
|
29
|
+
return ()=>{
|
30
|
+
overflowManager.disconnect();
|
31
|
+
};
|
32
|
+
}
|
33
|
+
}, [
|
34
|
+
updateOverflowItems,
|
35
|
+
overflowManager,
|
36
|
+
overflowDirection,
|
37
|
+
overflowAxis,
|
38
|
+
padding,
|
39
|
+
minimumVisible,
|
40
|
+
onUpdateItemVisibility
|
41
|
+
]);
|
42
|
+
const registerItem = React.useCallback((item)=>{
|
43
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
44
|
+
item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
|
45
|
+
return ()=>{
|
46
|
+
item.element.removeAttribute(DATA_OVERFLOWING);
|
47
|
+
item.element.removeAttribute(DATA_OVERFLOW_ITEM);
|
48
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
|
49
|
+
};
|
50
|
+
}, [
|
51
|
+
overflowManager
|
52
|
+
]);
|
53
|
+
const registerDivider = React.useCallback((divider)=>{
|
54
|
+
const el = divider.element;
|
55
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
|
56
|
+
el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');
|
57
|
+
return ()=>{
|
58
|
+
divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
|
59
|
+
el.removeAttribute(DATA_OVERFLOW_DIVIDER);
|
60
|
+
};
|
61
|
+
}, [
|
62
|
+
overflowManager
|
63
|
+
]);
|
64
|
+
const updateOverflow = React.useCallback(()=>{
|
65
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
66
|
+
}, [
|
67
|
+
overflowManager
|
68
|
+
]);
|
69
|
+
const registerOverflowMenu = React.useCallback((el)=>{
|
70
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
71
|
+
el.setAttribute(DATA_OVERFLOW_MENU, '');
|
72
|
+
return ()=>{
|
73
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
|
74
|
+
el.removeAttribute(DATA_OVERFLOW_MENU);
|
75
|
+
};
|
76
|
+
}, [
|
77
|
+
overflowManager
|
78
|
+
]);
|
79
|
+
return {
|
80
|
+
containerRef,
|
81
|
+
registerItem,
|
82
|
+
updateOverflow,
|
83
|
+
registerOverflowMenu,
|
84
|
+
registerDivider
|
48
85
|
};
|
49
|
-
}, [overflowManager]);
|
50
|
-
const updateOverflow = React.useCallback(() => {
|
51
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
52
|
-
}, [overflowManager]);
|
53
|
-
const registerOverflowMenu = React.useCallback(el => {
|
54
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
55
|
-
el.setAttribute(DATA_OVERFLOW_MENU, '');
|
56
|
-
return () => {
|
57
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
|
58
|
-
el.removeAttribute(DATA_OVERFLOW_MENU);
|
59
|
-
};
|
60
|
-
}, [overflowManager]);
|
61
|
-
return {
|
62
|
-
containerRef,
|
63
|
-
registerItem,
|
64
|
-
updateOverflow,
|
65
|
-
registerOverflowMenu
|
66
|
-
};
|
67
86
|
};
|
68
|
-
export const updateVisibilityAttribute = ({
|
69
|
-
|
70
|
-
|
71
|
-
}
|
72
|
-
|
73
|
-
|
74
|
-
} else {
|
75
|
-
item.element.setAttribute(DATA_OVERFLOWING, '');
|
76
|
-
}
|
87
|
+
export const updateVisibilityAttribute = ({ item , visible })=>{
|
88
|
+
if (visible) {
|
89
|
+
item.element.removeAttribute(DATA_OVERFLOWING);
|
90
|
+
} else {
|
91
|
+
item.element.setAttribute(DATA_OVERFLOWING, '');
|
92
|
+
}
|
77
93
|
};
|
78
|
-
//# sourceMappingURL=useOverflowContainer.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["useOverflowContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { 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 registerDivider = React.useCallback(\n (divider: OverflowDividerEntry) => {\n const el = divider.element;\n overflowManager?.addDivider(divider);\n el && el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n divider.groupId && overflowManager?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n },\n [overflowManager],\n );\n\n const 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 registerDivider,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["React","createOverflowManager","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","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","registerDivider","divider","el","addDivider","groupId","removeDivider","updateOverflow","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateVisibilityAttribute","visible"],"mappings":"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"}
|
package/lib/useOverflowCount.js
CHANGED
@@ -1,13 +1,11 @@
|
|
1
1
|
import { useOverflowContext } from './overflowContext';
|
2
2
|
/**
|
3
3
|
* @returns Number of items that are overflowing
|
4
|
-
*/
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
});
|
13
|
-
//# sourceMappingURL=useOverflowCount.js.map
|
4
|
+
*/ export const useOverflowCount = ()=>useOverflowContext((v)=>{
|
5
|
+
return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{
|
6
|
+
if (!visible) {
|
7
|
+
acc++;
|
8
|
+
}
|
9
|
+
return acc;
|
10
|
+
}, 0);
|
11
|
+
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["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"],"names":["useOverflowContext","useOverflowCount","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,oBAAoB;AAEvD;;CAEC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,mBAAmBE,CAAAA,IAAK;QACtB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAK;YACrE,IAAI,CAACA,SAAS;gBACZF;YACF,CAAC;YAED,OAAOA;QACT,GAAG;IACL,GAAG"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
3
|
+
import { useOverflowContext } from './overflowContext';
|
4
|
+
/**
|
5
|
+
* @internal
|
6
|
+
* Registers an overflow item
|
7
|
+
* @param groupId - assigns the item to a group, group visibility can be watched
|
8
|
+
* @returns ref to assign to an intrinsic HTML element
|
9
|
+
*/ export function useOverflowDivider(groupId) {
|
10
|
+
const ref = React.useRef(null);
|
11
|
+
const registerDivider = useOverflowContext((v)=>v.registerDivider);
|
12
|
+
useIsomorphicLayoutEffect(()=>{
|
13
|
+
if (ref.current && groupId) {
|
14
|
+
return registerDivider({
|
15
|
+
element: ref.current,
|
16
|
+
groupId
|
17
|
+
});
|
18
|
+
}
|
19
|
+
}, [
|
20
|
+
registerDivider,
|
21
|
+
groupId
|
22
|
+
]);
|
23
|
+
return ref;
|
24
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useOverflowDivider.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 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 useOverflowDivider<TElement extends HTMLElement>(groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowDivider","groupId","ref","useRef","registerDivider","v","current","element"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;CAKC,GACD,OAAO,SAASC,mBAAiDC,OAAgB,EAAE;IACjF,MAAMC,MAAML,MAAMM,MAAM,CAAW,IAAI;IACvC,MAAMC,kBAAkBL,mBAAmBM,CAAAA,IAAKA,EAAED,eAAe;IAEjEN,0BAA0B,IAAM;QAC9B,IAAII,IAAII,OAAO,IAAIL,SAAS;YAC1B,OAAOG,gBAAgB;gBACrBG,SAASL,IAAII,OAAO;gBACpBL;YACF;QACF,CAAC;IACH,GAAG;QAACG;QAAiBH;KAAQ;IAE7B,OAAOC;AACT,CAAC"}
|
package/lib/useOverflowItem.js
CHANGED
@@ -8,20 +8,23 @@ import { useOverflowContext } from './overflowContext';
|
|
8
8
|
* @param priority - higher priority means the item overflows later
|
9
9
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
10
10
|
* @returns ref to assign to an intrinsic HTML element
|
11
|
-
*/
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
11
|
+
*/ export function useOverflowItem(id, priority, groupId) {
|
12
|
+
const ref = React.useRef(null);
|
13
|
+
const registerItem = useOverflowContext((v)=>v.registerItem);
|
14
|
+
useIsomorphicLayoutEffect(()=>{
|
15
|
+
if (ref.current) {
|
16
|
+
return registerItem({
|
17
|
+
element: ref.current,
|
18
|
+
id,
|
19
|
+
priority: priority !== null && priority !== void 0 ? priority : 0,
|
20
|
+
groupId
|
21
|
+
});
|
22
|
+
}
|
23
|
+
}, [
|
19
24
|
id,
|
20
|
-
priority
|
25
|
+
priority,
|
26
|
+
registerItem,
|
21
27
|
groupId
|
22
|
-
|
23
|
-
|
24
|
-
}, [id, priority, registerItem, groupId]);
|
25
|
-
return ref;
|
28
|
+
]);
|
29
|
+
return ref;
|
26
30
|
}
|
27
|
-
//# sourceMappingURL=useOverflowItem.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["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"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","v","current","element"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;CAOC,GACD,OAAO,SAASC,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB,EAAE;IAC7G,MAAMC,MAAMP,MAAMQ,MAAM,CAAW,IAAI;IACvC,MAAMC,eAAeP,mBAAmBQ,CAAAA,IAAKA,EAAED,YAAY;IAE3DR,0BAA0B,IAAM;QAC9B,IAAIM,IAAII,OAAO,EAAE;YACf,OAAOF,aAAa;gBAClBG,SAASL,IAAII,OAAO;gBACpBP;gBACAC,UAAUA,qBAAAA,sBAAAA,WAAY,CAAC;gBACvBC;YACF;QACF,CAAC;IACH,GAAG;QAACF;QAAIC;QAAUI;QAAcH;KAAQ;IAExC,OAAOC;AACT,CAAC"}
|
package/lib/useOverflowMenu.js
CHANGED
@@ -3,26 +3,33 @@ import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
3
3
|
import { useOverflowContext } from './overflowContext';
|
4
4
|
import { useOverflowCount } from './useOverflowCount';
|
5
5
|
export function useOverflowMenu(id) {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
6
|
+
const elementId = useId('overflow-menu', id);
|
7
|
+
const overflowCount = useOverflowCount();
|
8
|
+
const registerOverflowMenu = useOverflowContext((v)=>v.registerOverflowMenu);
|
9
|
+
const updateOverflow = useOverflowContext((v)=>v.updateOverflow);
|
10
|
+
const ref = React.useRef(null);
|
11
|
+
const isOverflowing = overflowCount > 0;
|
12
|
+
useIsomorphicLayoutEffect(()=>{
|
13
|
+
if (ref.current) {
|
14
|
+
return registerOverflowMenu(ref.current);
|
15
|
+
}
|
16
|
+
}, [
|
17
|
+
registerOverflowMenu,
|
18
|
+
isOverflowing,
|
19
|
+
elementId
|
20
|
+
]);
|
21
|
+
useIsomorphicLayoutEffect(()=>{
|
22
|
+
if (isOverflowing) {
|
23
|
+
updateOverflow();
|
24
|
+
}
|
25
|
+
}, [
|
26
|
+
isOverflowing,
|
27
|
+
updateOverflow,
|
28
|
+
ref
|
29
|
+
]);
|
30
|
+
return {
|
31
|
+
ref,
|
32
|
+
overflowCount,
|
33
|
+
isOverflowing
|
34
|
+
};
|
27
35
|
}
|
28
|
-
//# sourceMappingURL=useOverflowMenu.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["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"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC,gBAA8CC,EAAW,EAAE;IACzE,MAAMC,YAAYN,MAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ;IACtB,MAAMK,uBAAuBN,mBAAmBO,CAAAA,IAAKA,EAAED,oBAAoB;IAC3E,MAAME,iBAAiBR,mBAAmBO,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMZ,MAAMa,MAAM,CAAW,IAAI;IACvC,MAAMC,gBAAgBN,gBAAgB;IAEtCN,0BAA0B,IAAM;QAC9B,IAAIU,IAAIG,OAAO,EAAE;YACf,OAAON,qBAAqBG,IAAIG,OAAO;QACzC,CAAC;IACH,GAAG;QAACN;QAAsBK;QAAeP;KAAU;IAEnDL,0BAA0B,IAAM;QAC9B,IAAIY,eAAe;YACjBH;QACF,CAAC;IACH,GAAG;QAACG;QAAeH;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKJ;QAAeM;IAAc;AAC7C,CAAC"}
|
@@ -25,7 +25,9 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
25
25
|
const update = (data)=>{
|
26
26
|
const { visibleItems , invisibleItems , groupVisibility } = data;
|
27
27
|
const itemVisibility = {};
|
28
|
-
visibleItems.forEach((
|
28
|
+
visibleItems.forEach((item)=>{
|
29
|
+
itemVisibility[item.id] = true;
|
30
|
+
});
|
29
31
|
invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
|
30
32
|
setOverflowState(()=>{
|
31
33
|
return {
|
@@ -35,7 +37,7 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
35
37
|
};
|
36
38
|
});
|
37
39
|
};
|
38
|
-
const { containerRef , registerItem , updateOverflow , registerOverflowMenu } = (0, _useOverflowContainer.useOverflowContainer)(update, {
|
40
|
+
const { containerRef , registerItem , updateOverflow , registerOverflowMenu , registerDivider } = (0, _useOverflowContainer.useOverflowContainer)(update, {
|
39
41
|
overflowDirection,
|
40
42
|
overflowAxis,
|
41
43
|
padding,
|
@@ -53,9 +55,8 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
53
55
|
hasOverflow: overflowState.hasOverflow,
|
54
56
|
registerItem,
|
55
57
|
updateOverflow,
|
56
|
-
registerOverflowMenu
|
58
|
+
registerOverflowMenu,
|
59
|
+
registerDivider
|
57
60
|
}
|
58
61
|
}, clonedChild);
|
59
|
-
});
|
60
|
-
|
61
|
-
//# sourceMappingURL=Overflow.js.map
|
62
|
+
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["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 */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const styles = useOverflowStyles();\n const { children , minimumVisible , overflowAxis ='horizontal' , overflowDirection , padding } = 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 { visibleItems , invisibleItems , groupVisibility } = data;\n const itemVisibility = {};\n visibleItems.forEach((item)=>{\n itemVisibility[item.id] = true;\n });\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 { containerRef , registerItem , updateOverflow , registerOverflowMenu , registerDivider } = 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 registerDivider\n }\n }, clonedChild);\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;aAAAA;;;6DARM;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACrE,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,SAAQ,EAAGC,eAAc,EAAGC,cAAc,aAAY,EAAGC,kBAAiB,EAAGC,QAAO,EAAG,GAAGR;IAClG,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC,OAAO;QACnB,MAAM,EAAEC,aAAY,EAAGC,eAAc,EAAGJ,gBAAe,EAAG,GAAGE;QAC7D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC,OAAO;YACzBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG,IAAI;QAClC;QACAH,eAAeC,OAAO,CAAC,CAACG,IAAIT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG,KAAK;QACxDX,iBAAiB,IAAI;YACjB,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAEU,aAAY,EAAGC,aAAY,EAAGC,eAAc,EAAGC,qBAAoB,EAAGC,gBAAe,EAAG,GAAGC,IAAAA,0CAAoB,EAACd,QAAQ;QAC5HR;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC7B,UAAU;QACtDH,KAAKiC,IAAAA,6BAAa,EAACV,cAAcvB;QACjCkC,WAAWC,IAAAA,oBAAY,EAAClC,OAAOmC,YAAY,EAAEnC,OAAOoC,gBAAgB,EAAElC,SAASJ,KAAK,CAACmC,SAAS;IAClG;IACA,OAAO,WAAW,GAAGrC,OAAMyC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAC/DC,OAAO;YACH7B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACJ;IACJ,GAAGI;AACP"}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "OverflowDivider", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>OverflowDivider
|
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 _useOverflowDivider = require("../../useOverflowDivider");
|
13
|
+
const OverflowDivider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
14
|
+
const { groupId , children } = props;
|
15
|
+
const containerRef = (0, _useOverflowDivider.useOverflowDivider)(groupId);
|
16
|
+
return (0, _reactUtilities.applyTriggerPropsToChildren)(children, {
|
17
|
+
ref: (0, _reactUtilities.useMergedRefs)(containerRef, ref)
|
18
|
+
});
|
19
|
+
});
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["OverflowDivider.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */ export const OverflowDivider = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const { groupId , children } = props;\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref)\n });\n});\n"],"names":["OverflowDivider","React","forwardRef","props","ref","groupId","children","containerRef","useOverflowDivider","applyTriggerPropsToChildren","useMergedRefs"],"mappings":";;;;+BAMiBA;;aAAAA;;;6DANM;gCACoC;oCACxB;AAIxB,MAAMA,kBAAkB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IAC5E,MAAM,EAAEC,QAAO,EAAGC,SAAQ,EAAG,GAAGH;IAChC,MAAMI,eAAeC,IAAAA,sCAAkB,EAACH;IACxC,OAAOI,IAAAA,2CAA2B,EAACH,UAAU;QACzCF,KAAKM,IAAAA,6BAAa,EAACH,cAAcH;IACrC;AACJ"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["OverflowDivider.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}
|
@@ -16,6 +16,4 @@ const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
16
|
return (0, _reactUtilities.applyTriggerPropsToChildren)(children, {
|
17
17
|
ref: (0, _reactUtilities.useMergedRefs)(containerRef, ref)
|
18
18
|
});
|
19
|
-
});
|
20
|
-
|
21
|
-
//# sourceMappingURL=OverflowItem.js.map
|
19
|
+
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["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 */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const { id , groupId , priority , children } = props;\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref)\n });\n});\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","applyTriggerPropsToChildren","useMergedRefs"],"mappings":";;;;+BAMiBA;;aAAAA;;;6DANM;gCACoC;iCAC3B;AAIrB,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACzE,MAAM,EAAEC,GAAE,EAAGC,QAAO,EAAGC,SAAQ,EAAGC,SAAQ,EAAG,GAAGL;IAChD,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,OAAOK,IAAAA,2CAA2B,EAACH,UAAU;QACzCJ,KAAKQ,IAAAA,6BAAa,EAACH,cAAcL;IACrC;AACJ"}
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
6
6
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
7
|
-
//# sourceMappingURL=OverflowItem.types.js.map
|
8
|
-
|
9
|
-
//# sourceMappingURL=OverflowItem.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["OverflowItem.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":";;;;+BAASA;;aAAAA,0BAAY;;8BAAQ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["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"}
|
@@ -11,10 +11,10 @@ function _export(target, all) {
|
|
11
11
|
_export(exports, {
|
12
12
|
DATA_OVERFLOWING: ()=>DATA_OVERFLOWING,
|
13
13
|
DATA_OVERFLOW_ITEM: ()=>DATA_OVERFLOW_ITEM,
|
14
|
-
DATA_OVERFLOW_MENU: ()=>DATA_OVERFLOW_MENU
|
14
|
+
DATA_OVERFLOW_MENU: ()=>DATA_OVERFLOW_MENU,
|
15
|
+
DATA_OVERFLOW_DIVIDER: ()=>DATA_OVERFLOW_DIVIDER
|
15
16
|
});
|
16
17
|
const DATA_OVERFLOWING = 'data-overflowing';
|
17
18
|
const DATA_OVERFLOW_ITEM = 'data-overflow-item';
|
18
|
-
const DATA_OVERFLOW_MENU = 'data-overflow-menu';
|
19
|
-
|
20
|
-
//# sourceMappingURL=constants.js.map
|
19
|
+
const DATA_OVERFLOW_MENU = 'data-overflow-menu';
|
20
|
+
const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["constants.js"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER"],"mappings":";;;;;;;;;;;IAAaA,gBAAgB,MAAhBA;IACAC,kBAAkB,MAAlBA;IACAC,kBAAkB,MAAlBA;IACAC,qBAAqB,MAArBA;;AAHN,MAAMH,mBAAmB;AACzB,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAC3B,MAAMC,wBAAwB"}
|