@fluentui/react-overflow 9.0.11 → 9.0.12
Sign up to get free protection for your applications and to get access to all the features.
- package/.swcrc +30 -0
- package/CHANGELOG.json +46 -1
- package/CHANGELOG.md +16 -2
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.types.js +1 -1
- package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib/components/OverflowItem/index.js.map +1 -1
- package/lib/constants.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/overflowContext.js.map +1 -1
- package/lib/types.js +1 -1
- package/lib/types.js.map +1 -1
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useIsOverflowItemVisible.js.map +1 -1
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowCount.js.map +1 -1
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +62 -70
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +16 -21
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +5 -2
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/index.js +6 -8
- package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
- package/lib-commonjs/constants.js +16 -6
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/index.js +34 -86
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/overflowContext.js +21 -16
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js +5 -2
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js +9 -11
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useIsOverflowItemVisible.js +9 -11
- package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +87 -80
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowCount.js +14 -15
- package/lib-commonjs/useOverflowCount.js.map +1 -1
- package/lib-commonjs/useOverflowItem.js +27 -27
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/lib-commonjs/useOverflowMenu.js +41 -30
- package/lib-commonjs/useOverflowMenu.js.map +1 -1
- package/package.json +8 -7
- package/lib-amd/components/Overflow.js +0 -60
- package/lib-amd/components/Overflow.js.map +0 -1
- package/lib-amd/components/OverflowItem/OverflowItem.js +0 -17
- package/lib-amd/components/OverflowItem/OverflowItem.js.map +0 -1
- package/lib-amd/components/OverflowItem/OverflowItem.types.js +0 -5
- package/lib-amd/components/OverflowItem/OverflowItem.types.js.map +0 -1
- package/lib-amd/constants.js +0 -9
- package/lib-amd/constants.js.map +0 -1
- package/lib-amd/index.js +0 -18
- package/lib-amd/index.js.map +0 -1
- package/lib-amd/overflowContext.js +0 -25
- package/lib-amd/overflowContext.js.map +0 -1
- package/lib-amd/types.js +0 -5
- package/lib-amd/types.js.map +0 -1
- package/lib-amd/useIsOverflowGroupVisible.js +0 -14
- package/lib-amd/useIsOverflowGroupVisible.js.map +0 -1
- package/lib-amd/useIsOverflowItemVisible.js +0 -14
- package/lib-amd/useIsOverflowItemVisible.js.map +0 -1
- package/lib-amd/useOverflowContainer.js +0 -84
- package/lib-amd/useOverflowContainer.js.map +0 -1
- package/lib-amd/useOverflowCount.js +0 -21
- package/lib-amd/useOverflowCount.js.map +0 -1
- package/lib-amd/useOverflowItem.js +0 -30
- package/lib-amd/useOverflowItem.js.map +0 -1
- package/lib-amd/useOverflowMenu.js +0 -26
- package/lib-amd/useOverflowMenu.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/useOverflowCount.js"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () => useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n return acc;\n }, 0);\n});\n//# sourceMappingURL=useOverflowCount.js.map"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"mappings":";;;;+BAIaA;;aAAAA;;iCAJsB;AAI5B,MAAMA,mBAAmB,IAAMC,IAAAA,mCAAkB,EAACC,CAAAA,IAAK;QAC5D,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ,GAAK;YACrE,IAAI,CAACA,SAAS;gBACZF;YACF,CAAC;YACD,OAAOA;QACT,GAAG;IACL,IACA,4CAA4C"}
|
@@ -1,34 +1,34 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useOverflowItem", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useOverflowItem
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
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
|
-
*/
|
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 _overflowContext = require("./overflowContext");
|
18
13
|
function useOverflowItem(id, priority, groupId) {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
14
|
+
const ref = _react.useRef(null);
|
15
|
+
const registerItem = (0, _overflowContext.useOverflowContext)((v)=>v.registerItem);
|
16
|
+
(0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
|
17
|
+
if (ref.current) {
|
18
|
+
return registerItem({
|
19
|
+
element: ref.current,
|
20
|
+
id,
|
21
|
+
priority: priority !== null && priority !== void 0 ? priority : 0,
|
22
|
+
groupId
|
23
|
+
});
|
24
|
+
}
|
25
|
+
}, [
|
25
26
|
id,
|
26
|
-
priority
|
27
|
+
priority,
|
28
|
+
registerItem,
|
27
29
|
groupId
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
}
|
33
|
-
exports.useOverflowItem = useOverflowItem;
|
30
|
+
]);
|
31
|
+
return ref;
|
32
|
+
} //# sourceMappingURL=useOverflowItem.js.map
|
33
|
+
|
34
34
|
//# sourceMappingURL=useOverflowItem.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/useOverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\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(id, priority, groupId) {\n const ref = React.useRef(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority !== null && priority !== void 0 ? priority : 0,\n groupId\n });\n }\n }, [id, priority, registerItem, groupId]);\n return ref;\n}\n//# sourceMappingURL=useOverflowItem.js.map"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"mappings":";;;;+BAWgBA;;aAAAA;;;6DAXO;gCACmB;iCACP;AAS5B,SAASA,gBAAgBC,EAAE,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IACrD,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,eAAeC,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEF,YAAY;IAC3DG,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIN,IAAIO,OAAO,EAAE;YACf,OAAOJ,aAAa;gBAClBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAIA,WAAW,CAAC;gBACjEC;YACF;QACF,CAAC;IACH,GAAG;QAACF;QAAIC;QAAUK;QAAcJ;KAAQ;IACxC,OAAOC;AACT,EACA,2CAA2C"}
|
@@ -1,35 +1,46 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useOverflowMenu", {
|
6
|
+
enumerable: true,
|
7
|
+
get: ()=>useOverflowMenu
|
5
8
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
const
|
9
|
-
const
|
10
|
-
const
|
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 _overflowContext = require("./overflowContext");
|
13
|
+
const _useOverflowCount = require("./useOverflowCount");
|
11
14
|
function useOverflowMenu(id) {
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
15
|
+
const elementId = (0, _reactUtilities.useId)('overflow-menu', id);
|
16
|
+
const overflowCount = (0, _useOverflowCount.useOverflowCount)();
|
17
|
+
const registerOverflowMenu = (0, _overflowContext.useOverflowContext)((v)=>v.registerOverflowMenu);
|
18
|
+
const updateOverflow = (0, _overflowContext.useOverflowContext)((v)=>v.updateOverflow);
|
19
|
+
const ref = _react.useRef(null);
|
20
|
+
const isOverflowing = overflowCount > 0;
|
21
|
+
(0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
|
22
|
+
if (ref.current) {
|
23
|
+
return registerOverflowMenu(ref.current);
|
24
|
+
}
|
25
|
+
}, [
|
26
|
+
registerOverflowMenu,
|
27
|
+
isOverflowing,
|
28
|
+
elementId
|
29
|
+
]);
|
30
|
+
(0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
|
31
|
+
if (isOverflowing) {
|
32
|
+
updateOverflow();
|
33
|
+
}
|
34
|
+
}, [
|
35
|
+
isOverflowing,
|
36
|
+
updateOverflow,
|
37
|
+
ref
|
38
|
+
]);
|
39
|
+
return {
|
40
|
+
ref,
|
41
|
+
overflowCount,
|
42
|
+
isOverflowing
|
43
|
+
};
|
44
|
+
} //# sourceMappingURL=useOverflowMenu.js.map
|
45
|
+
|
35
46
|
//# sourceMappingURL=useOverflowMenu.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/useOverflowMenu.js"],"sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nexport function useOverflowMenu(id) {\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(null);\n const isOverflowing = overflowCount > 0;\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n return {\n ref,\n overflowCount,\n isOverflowing\n };\n}\n//# sourceMappingURL=useOverflowMenu.js.map"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"mappings":";;;;+BAIgBA;;aAAAA;;;6DAJO;gCAC0B;iCACd;kCACF;AAC1B,SAASA,gBAAgBC,EAAE,EAAE;IAClC,MAAMC,YAAYC,IAAAA,qBAAK,EAAC,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAgB;IACtC,MAAMC,uBAAuBC,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAkB,EAACC,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAC,IAAI;IAC7B,MAAMC,gBAAgBT,gBAAgB;IACtCU,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAIJ,IAAIK,OAAO,EAAE;YACf,OAAOT,qBAAqBI,IAAIK,OAAO;QACzC,CAAC;IACH,GAAG;QAACT;QAAsBO;QAAeX;KAAU;IACnDY,IAAAA,yCAAyB,EAAC,IAAM;QAC9B,IAAID,eAAe;YACjBJ;QACF,CAAC;IACH,GAAG;QAACI;QAAeJ;QAAgBC;KAAI;IACvC,OAAO;QACLA;QACAN;QACAS;IACF;AACF,EACA,2CAA2C"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-overflow",
|
3
|
-
"version": "9.0.
|
3
|
+
"version": "9.0.12",
|
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": "
|
27
|
+
"generate-api": "just-scripts generate-api"
|
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": "^9.0.
|
37
|
-
"@fluentui/react-context-selector": "^9.1.
|
38
|
-
"@fluentui/react-theme": "^9.1.
|
39
|
-
"@fluentui/react-utilities": "^9.7.
|
36
|
+
"@fluentui/priority-overflow": "^9.0.2",
|
37
|
+
"@fluentui/react-context-selector": "^9.1.15",
|
38
|
+
"@fluentui/react-theme": "^9.1.7",
|
39
|
+
"@fluentui/react-utilities": "^9.7.2",
|
40
40
|
"@griffel/react": "^1.5.2",
|
41
|
-
"
|
41
|
+
"@swc/helpers": "^0.4.14"
|
42
42
|
},
|
43
43
|
"peerDependencies": {
|
44
44
|
"@types/react": ">=16.8.0 <19.0.0",
|
@@ -56,6 +56,7 @@
|
|
56
56
|
"exports": {
|
57
57
|
".": {
|
58
58
|
"types": "./dist/index.d.ts",
|
59
|
+
"node": "./lib-commonjs/index.js",
|
59
60
|
"import": "./lib/index.js",
|
60
61
|
"require": "./lib-commonjs/index.js"
|
61
62
|
},
|
@@ -1,60 +0,0 @@
|
|
1
|
-
define(["require", "exports", "react", "@griffel/react", "@fluentui/react-utilities", "../overflowContext", "../useOverflowContainer", "../constants"], function (require, exports, React, react_1, react_utilities_1, overflowContext_1, useOverflowContainer_1, constants_1) {
|
2
|
-
"use strict";
|
3
|
-
var _a, _b;
|
4
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
5
|
-
exports.Overflow = void 0;
|
6
|
-
var useStyles = react_1.makeStyles({
|
7
|
-
overflowMenu: (_a = {},
|
8
|
-
_a["& [" + constants_1.DATA_OVERFLOW_MENU + "]"] = {
|
9
|
-
flexShrink: 0,
|
10
|
-
},
|
11
|
-
_a),
|
12
|
-
overflowingItems: (_b = {},
|
13
|
-
_b["& > [" + constants_1.DATA_OVERFLOWING + "]"] = {
|
14
|
-
display: 'none',
|
15
|
-
},
|
16
|
-
_b),
|
17
|
-
});
|
18
|
-
/**
|
19
|
-
* Provides an OverflowContext for OverflowItem descendants.
|
20
|
-
*/
|
21
|
-
exports.Overflow = React.forwardRef(function (props, ref) {
|
22
|
-
var styles = useStyles();
|
23
|
-
var children = props.children, minimumVisible = props.minimumVisible, _a = props.overflowAxis, overflowAxis = _a === void 0 ? 'horizontal' : _a, overflowDirection = props.overflowDirection, padding = props.padding;
|
24
|
-
var _b = React.useState(false), hasOverflow = _b[0], setHasOverflow = _b[1];
|
25
|
-
var _c = React.useState({}), itemVisibility = _c[0], setItemVisibility = _c[1];
|
26
|
-
var _d = React.useState({}), groupVisibility = _d[0], setGroupVisibility = _d[1];
|
27
|
-
// useOverflowContainer wraps this method in a useEventCallback.
|
28
|
-
// TODO: Do we need a useEventCallback here too?
|
29
|
-
var update = function (data) {
|
30
|
-
setHasOverflow(function () { return data.invisibleItems.length > 0; });
|
31
|
-
setItemVisibility(function () {
|
32
|
-
var newState = {};
|
33
|
-
data.visibleItems.forEach(function (x) { return (newState[x.id] = true); });
|
34
|
-
data.invisibleItems.forEach(function (x) { return (newState[x.id] = false); });
|
35
|
-
return newState;
|
36
|
-
});
|
37
|
-
setGroupVisibility(data.groupVisibility);
|
38
|
-
};
|
39
|
-
var _e = useOverflowContainer_1.useOverflowContainer(update, {
|
40
|
-
overflowDirection: overflowDirection,
|
41
|
-
overflowAxis: overflowAxis,
|
42
|
-
padding: padding,
|
43
|
-
minimumVisible: minimumVisible,
|
44
|
-
onUpdateItemVisibility: useOverflowContainer_1.updateVisibilityAttribute,
|
45
|
-
}), containerRef = _e.containerRef, registerItem = _e.registerItem, updateOverflow = _e.updateOverflow, registerOverflowMenu = _e.registerOverflowMenu;
|
46
|
-
var clonedChild = react_utilities_1.applyTriggerPropsToChildren(children, {
|
47
|
-
ref: react_utilities_1.useMergedRefs(containerRef, ref),
|
48
|
-
className: react_1.mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),
|
49
|
-
});
|
50
|
-
return (React.createElement(overflowContext_1.OverflowContext.Provider, { value: {
|
51
|
-
itemVisibility: itemVisibility,
|
52
|
-
groupVisibility: groupVisibility,
|
53
|
-
hasOverflow: hasOverflow,
|
54
|
-
registerItem: registerItem,
|
55
|
-
updateOverflow: updateOverflow,
|
56
|
-
registerOverflowMenu: registerOverflowMenu,
|
57
|
-
} }, clonedChild));
|
58
|
-
});
|
59
|
-
});
|
60
|
-
//# sourceMappingURL=Overflow.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Overflow.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-overflow/src/components/Overflow.tsx"],"names":[],"mappings":";;;;;IASA,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,YAAY;YACV,GAAC,QAAM,8BAAkB,MAAG,IAAG;gBAC7B,UAAU,EAAE,CAAC;aACd;eACF;QAED,gBAAgB;YACd,GAAC,UAAQ,4BAAgB,MAAG,IAAG;gBAC7B,OAAO,EAAE,MAAM;aAChB;eACF;KACF,CAAC,CAAC;IAWH;;OAEG;IACU,QAAA,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAoB,EAAE,GAAG;QACjE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAEnB,IAAA,QAAQ,GAA8E,KAAK,SAAnF,EAAE,cAAc,GAA8D,KAAK,eAAnE,EAAE,KAA4D,KAAK,aAAtC,EAA3B,YAAY,mBAAG,YAAY,KAAA,EAAE,iBAAiB,GAAc,KAAK,kBAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;QAE9F,IAAA,KAAgC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAApD,WAAW,QAAA,EAAE,cAAc,QAAyB,CAAC;QACtD,IAAA,KAAsC,KAAK,CAAC,QAAQ,CAA0B,EAAE,CAAC,EAAhF,cAAc,QAAA,EAAE,iBAAiB,QAA+C,CAAC;QAClF,IAAA,KAAwC,KAAK,CAAC,QAAQ,CAAqC,EAAE,CAAC,EAA7F,eAAe,QAAA,EAAE,kBAAkB,QAA0D,CAAC;QAErG,gEAAgE;QAChE,gDAAgD;QAChD,IAAM,MAAM,GAAqB,UAAA,IAAI;YACnC,cAAc,CAAC,cAAM,OAAA,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAA9B,CAA8B,CAAC,CAAC;YACrD,iBAAiB,CAAC;gBAChB,IAAM,QAAQ,GAA4B,EAAE,CAAC;gBAC7C,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAvB,CAAuB,CAAC,CAAC;gBACxD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,EAAxB,CAAwB,CAAC,CAAC;gBAC3D,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;YACH,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3C,CAAC,CAAC;QAEI,IAAA,KAAuE,2CAAoB,CAAC,MAAM,EAAE;YACxG,iBAAiB,mBAAA;YACjB,YAAY,cAAA;YACZ,OAAO,SAAA;YACP,cAAc,gBAAA;YACd,sBAAsB,EAAE,gDAAyB;SAClD,CAAC,EANM,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAE,cAAc,oBAAA,EAAE,oBAAoB,0BAMtE,CAAC;QAEH,IAAM,WAAW,GAAG,6CAA2B,CAAC,QAAQ,EAAE;YACxD,GAAG,EAAE,+BAAa,CAAC,YAAY,EAAE,GAAG,CAAC;YACrC,SAAS,EAAE,oBAAY,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC;SAChG,CAAC,CAAC;QAEH,OAAO,CACL,oBAAC,iCAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;gBACL,cAAc,gBAAA;gBACd,eAAe,iBAAA;gBACf,WAAW,aAAA;gBACX,YAAY,cAAA;gBACZ,cAAc,gBAAA;gBACd,oBAAoB,sBAAA;aACrB,IAEA,WAAW,CACa,CAC5B,CAAC;IACJ,CAAC,CAAC,CAAC","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"]}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
define(["require", "exports", "react", "@fluentui/react-utilities", "../../useOverflowItem"], function (require, exports, React, react_utilities_1, useOverflowItem_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.OverflowItem = void 0;
|
5
|
-
/**
|
6
|
-
* Attaches overflow item behavior to its child registered with the OverflowContext.
|
7
|
-
* It does not render an element of its own.
|
8
|
-
*/
|
9
|
-
exports.OverflowItem = React.forwardRef(function (props, ref) {
|
10
|
-
var id = props.id, groupId = props.groupId, priority = props.priority, children = props.children;
|
11
|
-
var containerRef = useOverflowItem_1.useOverflowItem(id, priority, groupId);
|
12
|
-
return react_utilities_1.applyTriggerPropsToChildren(children, {
|
13
|
-
ref: react_utilities_1.useMergedRefs(containerRef, ref),
|
14
|
-
});
|
15
|
-
});
|
16
|
-
});
|
17
|
-
//# sourceMappingURL=OverflowItem.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"OverflowItem.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACU,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAwB,EAAE,GAAG;QACjE,IAAA,EAAE,GAAkC,KAAK,GAAvC,EAAE,OAAO,GAAyB,KAAK,QAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;QAElD,IAAM,YAAY,GAAG,iCAAe,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;QAC5D,OAAO,6CAA2B,CAAC,QAAQ,EAAE;YAC3C,GAAG,EAAE,+BAAa,CAAC,YAAY,EAAE,GAAG,CAAC;SACtC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC","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"]}
|
@@ -1 +0,0 @@
|
|
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"]}
|
package/lib-amd/constants.js
DELETED
@@ -1,9 +0,0 @@
|
|
1
|
-
define(["require", "exports"], function (require, exports) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = void 0;
|
5
|
-
exports.DATA_OVERFLOWING = 'data-overflowing';
|
6
|
-
exports.DATA_OVERFLOW_ITEM = 'data-overflow-item';
|
7
|
-
exports.DATA_OVERFLOW_MENU = 'data-overflow-menu';
|
8
|
-
});
|
9
|
-
//# sourceMappingURL=constants.js.map
|
package/lib-amd/constants.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/constants.ts"],"names":[],"mappings":";;;;IAAa,QAAA,gBAAgB,GAAG,kBAAkB,CAAC;IACtC,QAAA,kBAAkB,GAAG,oBAAoB,CAAC;IAC1C,QAAA,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-amd/index.js
DELETED
@@ -1,18 +0,0 @@
|
|
1
|
-
define(["require", "exports", "./components/Overflow", "./constants", "./useIsOverflowGroupVisible", "./useIsOverflowItemVisible", "./useOverflowContainer", "./useOverflowCount", "./useOverflowItem", "./useOverflowMenu", "./overflowContext", "./components/OverflowItem/OverflowItem"], function (require, exports, Overflow_1, constants_1, useIsOverflowGroupVisible_1, useIsOverflowItemVisible_1, useOverflowContainer_1, useOverflowCount_1, useOverflowItem_1, useOverflowMenu_1, overflowContext_1, OverflowItem_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.OverflowItem = exports.useOverflowContext = exports.useOverflowMenu = exports.useOverflowItem = exports.useOverflowCount = exports.useOverflowContainer = exports.useIsOverflowItemVisible = exports.useIsOverflowGroupVisible = exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = exports.Overflow = void 0;
|
5
|
-
Object.defineProperty(exports, "Overflow", { enumerable: true, get: function () { return Overflow_1.Overflow; } });
|
6
|
-
Object.defineProperty(exports, "DATA_OVERFLOWING", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOWING; } });
|
7
|
-
Object.defineProperty(exports, "DATA_OVERFLOW_ITEM", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOW_ITEM; } });
|
8
|
-
Object.defineProperty(exports, "DATA_OVERFLOW_MENU", { enumerable: true, get: function () { return constants_1.DATA_OVERFLOW_MENU; } });
|
9
|
-
Object.defineProperty(exports, "useIsOverflowGroupVisible", { enumerable: true, get: function () { return useIsOverflowGroupVisible_1.useIsOverflowGroupVisible; } });
|
10
|
-
Object.defineProperty(exports, "useIsOverflowItemVisible", { enumerable: true, get: function () { return useIsOverflowItemVisible_1.useIsOverflowItemVisible; } });
|
11
|
-
Object.defineProperty(exports, "useOverflowContainer", { enumerable: true, get: function () { return useOverflowContainer_1.useOverflowContainer; } });
|
12
|
-
Object.defineProperty(exports, "useOverflowCount", { enumerable: true, get: function () { return useOverflowCount_1.useOverflowCount; } });
|
13
|
-
Object.defineProperty(exports, "useOverflowItem", { enumerable: true, get: function () { return useOverflowItem_1.useOverflowItem; } });
|
14
|
-
Object.defineProperty(exports, "useOverflowMenu", { enumerable: true, get: function () { return useOverflowMenu_1.useOverflowMenu; } });
|
15
|
-
Object.defineProperty(exports, "useOverflowContext", { enumerable: true, get: function () { return overflowContext_1.useOverflowContext; } });
|
16
|
-
Object.defineProperty(exports, "OverflowItem", { enumerable: true, get: function () { return OverflowItem_1.OverflowItem; } });
|
17
|
-
});
|
18
|
-
//# sourceMappingURL=index.js.map
|
package/lib-amd/index.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/index.ts"],"names":[],"mappings":";;;;IAAS,oGAAA,QAAQ,OAAA;IAER,6GAAA,gBAAgB,OAAA;IAAE,+GAAA,kBAAkB,OAAA;IAAE,+GAAA,kBAAkB,OAAA;IAExD,sIAAA,yBAAyB,OAAA;IACzB,oIAAA,wBAAwB,OAAA;IACxB,4HAAA,oBAAoB,OAAA;IACpB,oHAAA,gBAAgB,OAAA;IAChB,kHAAA,eAAe,OAAA;IACf,kHAAA,eAAe,OAAA;IAEf,qHAAA,kBAAkB,OAAA;IAGlB,4GAAA,YAAY,OAAA","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"]}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useOverflowContext = exports.OverflowContext = void 0;
|
5
|
-
exports.OverflowContext = react_context_selector_1.createContext(undefined);
|
6
|
-
var overflowContextDefaultValue = {
|
7
|
-
itemVisibility: {},
|
8
|
-
groupVisibility: {},
|
9
|
-
hasOverflow: false,
|
10
|
-
registerItem: function () { return function () { return null; }; },
|
11
|
-
updateOverflow: function () { return null; },
|
12
|
-
registerOverflowMenu: function () { return function () { return null; }; },
|
13
|
-
};
|
14
|
-
/**
|
15
|
-
* @internal
|
16
|
-
*/
|
17
|
-
var useOverflowContext = function (selector) {
|
18
|
-
return react_context_selector_1.useContextSelector(exports.OverflowContext, function (ctx) {
|
19
|
-
if (ctx === void 0) { ctx = overflowContextDefaultValue; }
|
20
|
-
return selector(ctx);
|
21
|
-
});
|
22
|
-
};
|
23
|
-
exports.useOverflowContext = useOverflowContext;
|
24
|
-
});
|
25
|
-
//# sourceMappingURL=overflowContext.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"overflowContext.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/overflowContext.ts"],"names":[],"mappings":";;;;IAea,QAAA,eAAe,GAAG,sCAAa,CAC1C,SAAS,CACuB,CAAC;IAEnC,IAAM,2BAA2B,GAAyB;QACxD,cAAc,EAAE,EAAE;QAClB,eAAe,EAAE,EAAE;QACnB,WAAW,EAAE,KAAK;QAClB,YAAY,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;QAC9B,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAC1B,oBAAoB,EAAE,cAAM,OAAA,cAAM,OAAA,IAAI,EAAJ,CAAI,EAAV,CAAU;KACvC,CAAC;IAEF;;OAEG;IACI,IAAM,kBAAkB,GAAG,UAAgB,QAA8D;QAC9G,OAAA,2CAAkB,CAAC,uBAAe,EAAE,UAAC,GAAiC;YAAjC,oBAAA,EAAA,iCAAiC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAAzF,CAAyF,CAAC;IAD/E,QAAA,kBAAkB,sBAC6D","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"]}
|
package/lib-amd/types.js
DELETED
package/lib-amd/types.js.map
DELETED
@@ -1 +0,0 @@
|
|
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,14 +0,0 @@
|
|
1
|
-
define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useIsOverflowGroupVisible = void 0;
|
5
|
-
/**
|
6
|
-
* @param id - unique identifier for a group of overflow items
|
7
|
-
* @returns visibility state of the group
|
8
|
-
*/
|
9
|
-
function useIsOverflowGroupVisible(id) {
|
10
|
-
return overflowContext_1.useOverflowContext(function (ctx) { return ctx.groupVisibility[id]; });
|
11
|
-
}
|
12
|
-
exports.useIsOverflowGroupVisible = useIsOverflowGroupVisible;
|
13
|
-
});
|
14
|
-
//# sourceMappingURL=useIsOverflowGroupVisible.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useIsOverflowGroupVisible.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;IAGA;;;OAGG;IACH,SAAgB,yBAAyB,CAAC,EAAU;QAClD,OAAO,oCAAkB,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC,EAAvB,CAAuB,CAAC,CAAC;IAC5D,CAAC;IAFD,8DAEC","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"]}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useIsOverflowItemVisible = void 0;
|
5
|
-
/**
|
6
|
-
* @param id - unique identifier for the item used by the overflow manager
|
7
|
-
* @returns visibility state of an overflow item
|
8
|
-
*/
|
9
|
-
function useIsOverflowItemVisible(id) {
|
10
|
-
return !!overflowContext_1.useOverflowContext(function (ctx) { return ctx.itemVisibility[id]; });
|
11
|
-
}
|
12
|
-
exports.useIsOverflowItemVisible = useIsOverflowItemVisible;
|
13
|
-
});
|
14
|
-
//# sourceMappingURL=useIsOverflowItemVisible.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useIsOverflowItemVisible.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;IAEA;;;OAGG;IACH,SAAgB,wBAAwB,CAAC,EAAU;QACjD,OAAO,CAAC,CAAC,oCAAkB,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,EAAtB,CAAsB,CAAC,CAAC;IAC7D,CAAC;IAFD,4DAEC","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"]}
|
@@ -1,84 +0,0 @@
|
|
1
|
-
define(["require", "exports", "react", "@fluentui/priority-overflow", "@fluentui/react-utilities", "./constants"], function (require, exports, React, priority_overflow_1, react_utilities_1, constants_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.updateVisibilityAttribute = exports.useOverflowContainer = void 0;
|
5
|
-
/**
|
6
|
-
* @internal
|
7
|
-
* @param update - Callback when overflow state changes
|
8
|
-
* @param options - Options to configure the overflow container
|
9
|
-
* @returns - ref to attach to an intrinsic HTML element and imperative functions
|
10
|
-
*/
|
11
|
-
var useOverflowContainer = function (update, options) {
|
12
|
-
var overflowAxis = options.overflowAxis, overflowDirection = options.overflowDirection, padding = options.padding, minimumVisible = options.minimumVisible, onUpdateItemVisibility = options.onUpdateItemVisibility;
|
13
|
-
// DOM ref to the overflow container element
|
14
|
-
var containerRef = React.useRef(null);
|
15
|
-
var updateOverflowItems = react_utilities_1.useEventCallback(update);
|
16
|
-
var overflowManager = React.useState(function () {
|
17
|
-
return react_utilities_1.canUseDOM() ? priority_overflow_1.createOverflowManager() : null;
|
18
|
-
})[0];
|
19
|
-
react_utilities_1.useIsomorphicLayoutEffect(function () {
|
20
|
-
if (!containerRef.current) {
|
21
|
-
return;
|
22
|
-
}
|
23
|
-
if (overflowManager) {
|
24
|
-
overflowManager.observe(containerRef.current, {
|
25
|
-
overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
|
26
|
-
overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
|
27
|
-
padding: padding !== null && padding !== void 0 ? padding : 10,
|
28
|
-
minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
|
29
|
-
onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : (function () { return undefined; }),
|
30
|
-
onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : (function () { return undefined; }),
|
31
|
-
});
|
32
|
-
return function () {
|
33
|
-
overflowManager.disconnect();
|
34
|
-
};
|
35
|
-
}
|
36
|
-
}, [
|
37
|
-
updateOverflowItems,
|
38
|
-
overflowManager,
|
39
|
-
overflowDirection,
|
40
|
-
overflowAxis,
|
41
|
-
padding,
|
42
|
-
minimumVisible,
|
43
|
-
onUpdateItemVisibility,
|
44
|
-
]);
|
45
|
-
var registerItem = React.useCallback(function (item) {
|
46
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
|
47
|
-
item.element.setAttribute(constants_1.DATA_OVERFLOW_ITEM, '');
|
48
|
-
return function () {
|
49
|
-
item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
|
50
|
-
item.element.removeAttribute(constants_1.DATA_OVERFLOW_ITEM);
|
51
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
|
52
|
-
};
|
53
|
-
}, [overflowManager]);
|
54
|
-
var updateOverflow = React.useCallback(function () {
|
55
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
|
56
|
-
}, [overflowManager]);
|
57
|
-
var registerOverflowMenu = React.useCallback(function (el) {
|
58
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
|
59
|
-
el.setAttribute(constants_1.DATA_OVERFLOW_MENU, '');
|
60
|
-
return function () {
|
61
|
-
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
|
62
|
-
el.removeAttribute(constants_1.DATA_OVERFLOW_MENU);
|
63
|
-
};
|
64
|
-
}, [overflowManager]);
|
65
|
-
return {
|
66
|
-
containerRef: containerRef,
|
67
|
-
registerItem: registerItem,
|
68
|
-
updateOverflow: updateOverflow,
|
69
|
-
registerOverflowMenu: registerOverflowMenu,
|
70
|
-
};
|
71
|
-
};
|
72
|
-
exports.useOverflowContainer = useOverflowContainer;
|
73
|
-
var updateVisibilityAttribute = function (_a) {
|
74
|
-
var item = _a.item, visible = _a.visible;
|
75
|
-
if (visible) {
|
76
|
-
item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
|
77
|
-
}
|
78
|
-
else {
|
79
|
-
item.element.setAttribute(constants_1.DATA_OVERFLOWING, '');
|
80
|
-
}
|
81
|
-
};
|
82
|
-
exports.updateVisibilityAttribute = updateVisibilityAttribute;
|
83
|
-
});
|
84
|
-
//# sourceMappingURL=useOverflowContainer.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useOverflowContainer.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowContainer.ts"],"names":[],"mappings":";;;;IAiBA;;;;;OAKG;IACI,IAAM,oBAAoB,GAAG,UAClC,MAAwB,EACxB,OAAiD;QAEzC,IAAA,YAAY,GAAyE,OAAO,aAAhF,EAAE,iBAAiB,GAAsD,OAAO,kBAA7D,EAAE,OAAO,GAA6C,OAAO,QAApD,EAAE,cAAc,GAA6B,OAAO,eAApC,EAAE,sBAAsB,GAAK,OAAO,uBAAZ,CAAa;QAErG,4CAA4C;QAC5C,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QAClD,IAAM,mBAAmB,GAAG,kCAAgB,CAAC,MAAM,CAAC,CAAC;QAE9C,IAAA,eAAe,GAAI,KAAK,CAAC,QAAQ,CAAyB;YAC/D,OAAA,2BAAS,EAAE,CAAC,CAAC,CAAC,yCAAqB,EAAE,CAAC,CAAC,CAAC,IAAI;QAA5C,CAA4C,CAC7C,GAFqB,CAEpB;QAEF,2CAAyB,CAAC;YACxB,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;gBACzB,OAAO;aACR;YAED,IAAI,eAAe,EAAE;gBACnB,eAAe,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE;oBAC5C,iBAAiB,EAAE,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,KAAK;oBAC7C,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,YAAY;oBAC1C,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE;oBACtB,cAAc,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC;oBACnC,sBAAsB,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,CAAC,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;oBACnE,gBAAgB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;iBAC3D,CAAC,CAAC;gBAEH,OAAO;oBACL,eAAe,CAAC,UAAU,EAAE,CAAC;gBAC/B,CAAC,CAAC;aACH;QACH,CAAC,EAAE;YACD,mBAAmB;YACnB,eAAe;YACf,iBAAiB;YACjB,YAAY;YACZ,OAAO;YACP,cAAc;YACd,sBAAsB;SACvB,CAAC,CAAC;QAEH,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,IAAuB;YACtB,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,8BAAkB,EAAE,EAAE,CAAC,CAAC;YAElD,OAAO;gBACL,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,4BAAgB,CAAC,CAAC;gBAC/C,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,8BAAkB,CAAC,CAAC;gBACjD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACvC,CAAC,CAAC;QACJ,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;QAEF,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC;YACvC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,EAAE,CAAC;QAC5B,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;QAEtB,IAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAC5C,UAAC,EAAe;YACd,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,eAAe,CAAC,EAAE,CAAC,CAAC;YACrC,EAAE,CAAC,YAAY,CAAC,8BAAkB,EAAE,EAAE,CAAC,CAAC;YAExC,OAAO;gBACL,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,kBAAkB,EAAE,CAAC;gBACtC,EAAE,CAAC,eAAe,CAAC,8BAAkB,CAAC,CAAC;YACzC,CAAC,CAAC;QACJ,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;QAEF,OAAO;YACL,YAAY,cAAA;YACZ,YAAY,cAAA;YACZ,cAAc,gBAAA;YACd,oBAAoB,sBAAA;SACrB,CAAC;IACJ,CAAC,CAAC;IAhFW,QAAA,oBAAoB,wBAgF/B;IAEK,IAAM,yBAAyB,GAA2B,UAAC,EAAiB;YAAf,IAAI,UAAA,EAAE,OAAO,aAAA;QAC/E,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,4BAAgB,CAAC,CAAC;SAChD;aAAM;YACL,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,4BAAgB,EAAE,EAAE,CAAC,CAAC;SACjD;IACH,CAAC,CAAC;IANW,QAAA,yBAAyB,6BAMpC","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"]}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
|
2
|
-
"use strict";
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
exports.useOverflowCount = void 0;
|
5
|
-
/**
|
6
|
-
* @returns Number of items that are overflowing
|
7
|
-
*/
|
8
|
-
var useOverflowCount = function () {
|
9
|
-
return overflowContext_1.useOverflowContext(function (v) {
|
10
|
-
return Object.entries(v.itemVisibility).reduce(function (acc, _a) {
|
11
|
-
var id = _a[0], visible = _a[1];
|
12
|
-
if (!visible) {
|
13
|
-
acc++;
|
14
|
-
}
|
15
|
-
return acc;
|
16
|
-
}, 0);
|
17
|
-
});
|
18
|
-
};
|
19
|
-
exports.useOverflowCount = useOverflowCount;
|
20
|
-
});
|
21
|
-
//# sourceMappingURL=useOverflowCount.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useOverflowCount.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowCount.ts"],"names":[],"mappings":";;;;IAEA;;OAEG;IACI,IAAM,gBAAgB,GAAG;QAC9B,OAAA,oCAAkB,CAAC,UAAA,CAAC;YAClB,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,EAAa;oBAAZ,EAAE,QAAA,EAAE,OAAO,QAAA;gBAC/D,IAAI,CAAC,OAAO,EAAE;oBACZ,GAAG,EAAE,CAAC;iBACP;gBAED,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IARF,CAQE,CAAC;IATQ,QAAA,gBAAgB,oBASxB","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"]}
|