@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
|
@@ -1,93 +1,86 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
useOverflowContainer: ()=>useOverflowContainer,
|
|
13
|
-
updateVisibilityAttribute: ()=>updateVisibilityAttribute
|
|
4
|
+
value: true
|
|
14
5
|
});
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
const
|
|
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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
const updateOverflow = _react.useCallback(()=>{
|
|
64
|
-
overflowManager?.update();
|
|
65
|
-
}, [
|
|
66
|
-
overflowManager
|
|
67
|
-
]);
|
|
68
|
-
const registerOverflowMenu = _react.useCallback((el)=>{
|
|
69
|
-
overflowManager?.addOverflowMenu(el);
|
|
70
|
-
el.setAttribute(_constants.DATA_OVERFLOW_MENU, "");
|
|
71
|
-
return ()=>{
|
|
72
|
-
overflowManager?.removeOverflowMenu();
|
|
73
|
-
el.removeAttribute(_constants.DATA_OVERFLOW_MENU);
|
|
74
|
-
};
|
|
75
|
-
}, [
|
|
76
|
-
overflowManager
|
|
77
|
-
]);
|
|
78
|
-
return {
|
|
79
|
-
containerRef,
|
|
80
|
-
registerItem,
|
|
81
|
-
updateOverflow,
|
|
82
|
-
registerOverflowMenu
|
|
6
|
+
exports.updateVisibilityAttribute = exports.useOverflowContainer = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const priority_overflow_1 = /*#__PURE__*/require("@fluentui/priority-overflow");
|
|
9
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
10
|
+
const constants_1 = /*#__PURE__*/require("./constants");
|
|
11
|
+
/**
|
|
12
|
+
* @internal
|
|
13
|
+
* @param update - Callback when overflow state changes
|
|
14
|
+
* @param options - Options to configure the overflow container
|
|
15
|
+
* @returns - ref to attach to an intrinsic HTML element and imperative functions
|
|
16
|
+
*/
|
|
17
|
+
const useOverflowContainer = (update, options) => {
|
|
18
|
+
const {
|
|
19
|
+
overflowAxis,
|
|
20
|
+
overflowDirection,
|
|
21
|
+
padding,
|
|
22
|
+
minimumVisible,
|
|
23
|
+
onUpdateItemVisibility
|
|
24
|
+
} = options;
|
|
25
|
+
// DOM ref to the overflow container element
|
|
26
|
+
const containerRef = React.useRef(null);
|
|
27
|
+
const updateOverflowItems = react_utilities_1.useEventCallback(update);
|
|
28
|
+
const [overflowManager] = React.useState(() => react_utilities_1.canUseDOM() ? priority_overflow_1.createOverflowManager() : null);
|
|
29
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
|
30
|
+
if (!containerRef.current) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
if (overflowManager) {
|
|
34
|
+
overflowManager.observe(containerRef.current, {
|
|
35
|
+
overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
|
|
36
|
+
overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
|
|
37
|
+
padding: padding !== null && padding !== void 0 ? padding : 10,
|
|
38
|
+
minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
|
|
39
|
+
onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : () => undefined,
|
|
40
|
+
onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined
|
|
41
|
+
});
|
|
42
|
+
return () => {
|
|
43
|
+
overflowManager.disconnect();
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
}, [updateOverflowItems, overflowManager, overflowDirection, overflowAxis, padding, minimumVisible, onUpdateItemVisibility]);
|
|
47
|
+
const registerItem = React.useCallback(item => {
|
|
48
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
|
49
|
+
item.element.setAttribute(constants_1.DATA_OVERFLOW_ITEM, '');
|
|
50
|
+
return () => {
|
|
51
|
+
item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
|
|
52
|
+
item.element.removeAttribute(constants_1.DATA_OVERFLOW_ITEM);
|
|
53
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
|
|
83
54
|
};
|
|
55
|
+
}, [overflowManager]);
|
|
56
|
+
const updateOverflow = React.useCallback(() => {
|
|
57
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
|
58
|
+
}, [overflowManager]);
|
|
59
|
+
const registerOverflowMenu = React.useCallback(el => {
|
|
60
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
|
61
|
+
el.setAttribute(constants_1.DATA_OVERFLOW_MENU, '');
|
|
62
|
+
return () => {
|
|
63
|
+
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
|
|
64
|
+
el.removeAttribute(constants_1.DATA_OVERFLOW_MENU);
|
|
65
|
+
};
|
|
66
|
+
}, [overflowManager]);
|
|
67
|
+
return {
|
|
68
|
+
containerRef,
|
|
69
|
+
registerItem,
|
|
70
|
+
updateOverflow,
|
|
71
|
+
registerOverflowMenu
|
|
72
|
+
};
|
|
84
73
|
};
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
74
|
+
exports.useOverflowContainer = useOverflowContainer;
|
|
75
|
+
const updateVisibilityAttribute = ({
|
|
76
|
+
item,
|
|
77
|
+
visible
|
|
78
|
+
}) => {
|
|
79
|
+
if (visible) {
|
|
80
|
+
item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
|
|
81
|
+
} else {
|
|
82
|
+
item.element.setAttribute(constants_1.DATA_OVERFLOWING, '');
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
exports.updateVisibilityAttribute = updateVisibilityAttribute;
|
|
93
86
|
//# sourceMappingURL=useOverflowContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["React","require","priority_overflow_1","react_utilities_1","constants_1","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","containerRef","useRef","updateOverflowItems","useEventCallback","overflowManager","useState","canUseDOM","createOverflowManager","useIsomorphicLayoutEffect","current","observe","undefined","onUpdateOverflow","disconnect","registerItem","useCallback","item","addItem","element","setAttribute","DATA_OVERFLOW_ITEM","removeAttribute","DATA_OVERFLOWING","removeItem","id","updateOverflow","registerOverflowMenu","el","addOverflowMenu","DATA_OVERFLOW_MENU","removeOverflowMenu","exports","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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"}
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
+
value: true
|
|
4
5
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
exports.useOverflowCount = void 0;
|
|
7
|
+
const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
|
|
8
|
+
/**
|
|
9
|
+
* @returns Number of items that are overflowing
|
|
10
|
+
*/
|
|
11
|
+
const useOverflowCount = () => overflowContext_1.useOverflowContext(v => {
|
|
12
|
+
return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
|
|
13
|
+
if (!visible) {
|
|
14
|
+
acc++;
|
|
15
|
+
}
|
|
16
|
+
return acc;
|
|
17
|
+
}, 0);
|
|
8
18
|
});
|
|
9
|
-
|
|
10
|
-
const useOverflowCount = ()=>(0, _overflowContext.useOverflowContext)((v)=>{
|
|
11
|
-
return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{
|
|
12
|
-
if (!visible) {
|
|
13
|
-
acc++;
|
|
14
|
-
}
|
|
15
|
-
return acc;
|
|
16
|
-
}, 0);
|
|
17
|
-
}); //# sourceMappingURL=useOverflowCount.js.map
|
|
18
|
-
|
|
19
|
+
exports.useOverflowCount = useOverflowCount;
|
|
19
20
|
//# sourceMappingURL=useOverflowCount.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["overflowContext_1","require","useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible","exports"],"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,MAAAA,iBAAA,gBAAAC,OAAA;AAEA;;;AAGO,MAAMC,gBAAgB,GAAGA,CAAA,KAC9BF,iBAAA,CAAAG,kBAAkB,CAACC,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;AATSG,OAAA,CAAAV,gBAAgB,GAAAA,gBAAA"}
|
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "useOverflowItem", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>useOverflowItem
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
6
|
+
exports.useOverflowItem = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
+
const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
|
|
10
|
+
/**
|
|
11
|
+
* @internal
|
|
12
|
+
* Registers an overflow item
|
|
13
|
+
* @param id - unique identifier for the item used by the overflow manager
|
|
14
|
+
* @param priority - higher priority means the item overflows later
|
|
15
|
+
* @param groupId - assigns the item to a group, group visibility can be watched
|
|
16
|
+
* @returns ref to assign to an intrinsic HTML element
|
|
17
|
+
*/
|
|
13
18
|
function useOverflowItem(id, priority, groupId) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
id,
|
|
21
|
-
priority: priority ?? 0,
|
|
22
|
-
groupId
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
}, [
|
|
19
|
+
const ref = React.useRef(null);
|
|
20
|
+
const registerItem = overflowContext_1.useOverflowContext(v => v.registerItem);
|
|
21
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
|
22
|
+
if (ref.current) {
|
|
23
|
+
return registerItem({
|
|
24
|
+
element: ref.current,
|
|
26
25
|
id,
|
|
27
|
-
priority,
|
|
28
|
-
registerItem,
|
|
26
|
+
priority: priority !== null && priority !== void 0 ? priority : 0,
|
|
29
27
|
groupId
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
}, [id, priority, registerItem, groupId]);
|
|
31
|
+
return ref;
|
|
32
|
+
}
|
|
33
|
+
exports.useOverflowItem = useOverflowItem;
|
|
34
34
|
//# sourceMappingURL=useOverflowItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","overflowContext_1","useOverflowItem","id","priority","groupId","ref","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element","exports"],"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,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AAEA;;;;;;;;AAQA,SAAgBG,eAAeA,CAA+BC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;EAC3G,MAAMC,GAAG,GAAGR,KAAK,CAACS,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,YAAY,GAAGP,iBAAA,CAAAQ,kBAAkB,CAACC,CAAC,IAAIA,CAAC,CAACF,YAAY,CAAC;EAE5DR,iBAAA,CAAAW,yBAAyB,CAAC,MAAK;IAC7B,IAAIL,GAAG,CAACM,OAAO,EAAE;MACf,OAAOJ,YAAY,CAAC;QAClBK,OAAO,EAAEP,GAAG,CAACM,OAAO;QACpBT,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;AAhBAQ,OAAA,CAAAZ,eAAA,GAAAA,eAAA"}
|
|
@@ -1,46 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "useOverflowMenu", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: ()=>useOverflowMenu
|
|
4
|
+
value: true
|
|
8
5
|
});
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
6
|
+
exports.useOverflowMenu = void 0;
|
|
7
|
+
const React = /*#__PURE__*/require("react");
|
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
+
const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
|
|
10
|
+
const useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
|
|
14
11
|
function useOverflowMenu(id) {
|
|
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
|
-
return {
|
|
40
|
-
ref,
|
|
41
|
-
overflowCount,
|
|
42
|
-
isOverflowing
|
|
43
|
-
};
|
|
44
|
-
} //# sourceMappingURL=useOverflowMenu.js.map
|
|
45
|
-
|
|
12
|
+
const elementId = react_utilities_1.useId('overflow-menu', id);
|
|
13
|
+
const overflowCount = useOverflowCount_1.useOverflowCount();
|
|
14
|
+
const registerOverflowMenu = overflowContext_1.useOverflowContext(v => v.registerOverflowMenu);
|
|
15
|
+
const updateOverflow = overflowContext_1.useOverflowContext(v => v.updateOverflow);
|
|
16
|
+
const ref = React.useRef(null);
|
|
17
|
+
const isOverflowing = overflowCount > 0;
|
|
18
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
|
19
|
+
if (ref.current) {
|
|
20
|
+
return registerOverflowMenu(ref.current);
|
|
21
|
+
}
|
|
22
|
+
}, [registerOverflowMenu, isOverflowing, elementId]);
|
|
23
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
|
24
|
+
if (isOverflowing) {
|
|
25
|
+
updateOverflow();
|
|
26
|
+
}
|
|
27
|
+
}, [isOverflowing, updateOverflow, ref]);
|
|
28
|
+
return {
|
|
29
|
+
ref,
|
|
30
|
+
overflowCount,
|
|
31
|
+
isOverflowing
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
exports.useOverflowMenu = useOverflowMenu;
|
|
46
35
|
//# sourceMappingURL=useOverflowMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","overflowContext_1","useOverflowCount_1","useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","useRef","isOverflowing","useIsomorphicLayoutEffect","current","exports"],"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,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,kBAAA,gBAAAH,OAAA;AAEA,SAAgBI,eAAeA,CAA+BC,EAAW;EACvE,MAAMC,SAAS,GAAGL,iBAAA,CAAAM,KAAK,CAAC,eAAe,EAAEF,EAAE,CAAC;EAC5C,MAAMG,aAAa,GAAGL,kBAAA,CAAAM,gBAAgB,EAAE;EACxC,MAAMC,oBAAoB,GAAGR,iBAAA,CAAAS,kBAAkB,CAACC,CAAC,IAAIA,CAAC,CAACF,oBAAoB,CAAC;EAC5E,MAAMG,cAAc,GAAGX,iBAAA,CAAAS,kBAAkB,CAACC,CAAC,IAAIA,CAAC,CAACC,cAAc,CAAC;EAChE,MAAMC,GAAG,GAAGf,KAAK,CAACgB,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,aAAa,GAAGR,aAAa,GAAG,CAAC;EAEvCP,iBAAA,CAAAgB,yBAAyB,CAAC,MAAK;IAC7B,IAAIH,GAAG,CAACI,OAAO,EAAE;MACf,OAAOR,oBAAoB,CAACI,GAAG,CAACI,OAAO,CAAC;;EAE5C,CAAC,EAAE,CAACR,oBAAoB,EAAEM,aAAa,EAAEV,SAAS,CAAC,CAAC;EAEpDL,iBAAA,CAAAgB,yBAAyB,CAAC,MAAK;IAC7B,IAAID,aAAa,EAAE;MACjBH,cAAc,EAAE;;EAEpB,CAAC,EAAE,CAACG,aAAa,EAAEH,cAAc,EAAEC,GAAG,CAAC,CAAC;EAExC,OAAO;IAAEA,GAAG;IAAEN,aAAa;IAAEQ;EAAa,CAAE;AAC9C;AArBAG,OAAA,CAAAf,eAAA,GAAAA,eAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230321-0440.1",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"test": "jest --passWithNoTests",
|
|
25
25
|
"storybook": "start-storybook",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json",
|
|
27
|
-
"generate-api": "just-scripts
|
|
27
|
+
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@fluentui/priority-overflow": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/priority-overflow": "0.0.0-nightly-20230321-0440.1",
|
|
37
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230321-0440.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230321-0440.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230321-0440.1",
|
|
40
40
|
"@griffel/react": "^1.5.2",
|
|
41
|
-
"
|
|
41
|
+
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@types/react": ">=16.8.0 <19.0.0",
|
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
"exports": {
|
|
52
52
|
".": {
|
|
53
53
|
"types": "./dist/index.d.ts",
|
|
54
|
+
"node": "./lib-commonjs/index.js",
|
|
54
55
|
"import": "./lib/index.js",
|
|
55
56
|
"require": "./lib-commonjs/index.js"
|
|
56
57
|
},
|
package/.swcrc
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
-
"env": {
|
|
4
|
-
"targets": {
|
|
5
|
-
"chrome": "84",
|
|
6
|
-
"edge": "84",
|
|
7
|
-
"firefox": "75",
|
|
8
|
-
"opera": "73",
|
|
9
|
-
"safari": "14.1"
|
|
10
|
-
},
|
|
11
|
-
"bugfixes": true
|
|
12
|
-
},
|
|
13
|
-
"exclude": [
|
|
14
|
-
"/testing",
|
|
15
|
-
"/**/*.cy.ts",
|
|
16
|
-
"/**/*.cy.tsx",
|
|
17
|
-
"/**/*.spec.ts",
|
|
18
|
-
"/**/*.spec.tsx",
|
|
19
|
-
"/**/*.test.ts",
|
|
20
|
-
"/**/*.test.tsx"
|
|
21
|
-
],
|
|
22
|
-
"jsc": {
|
|
23
|
-
"parser": {
|
|
24
|
-
"syntax": "typescript",
|
|
25
|
-
"tsx": true,
|
|
26
|
-
"decorators": false,
|
|
27
|
-
"dynamicImport": false
|
|
28
|
-
},
|
|
29
|
-
"externalHelpers": true,
|
|
30
|
-
"transform": {
|
|
31
|
-
"react": {
|
|
32
|
-
"runtime": "classic",
|
|
33
|
-
"useSpread": true
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
"minify": false,
|
|
38
|
-
"sourceMaps": true
|
|
39
|
-
}
|