@fluentui/react-overflow 9.0.0-rc.6 → 9.0.0

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,49 @@
2
2
  "name": "@fluentui/react-overflow",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 09 Jan 2023 14:31:45 GMT",
5
+ "date": "Wed, 18 Jan 2023 16:30:56 GMT",
6
+ "tag": "@fluentui/react-overflow_v9.0.0",
7
+ "version": "9.0.0",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-overflow",
13
+ "commit": "e59f114d3244739a7917813ea02c59d53406d902",
14
+ "comment": "Release as stable"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-overflow",
19
+ "comment": "Bump @fluentui/priority-overflow to v9.0.0",
20
+ "commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Mon, 16 Jan 2023 08:39:05 GMT",
27
+ "tag": "@fluentui/react-overflow_v9.0.0-rc.7",
28
+ "version": "9.0.0-rc.7",
29
+ "comments": {
30
+ "none": [
31
+ {
32
+ "author": "lingfangao@hotmail.com",
33
+ "package": "@fluentui/react-overflow",
34
+ "commit": "eda8aa8b9dbeb393739368e717f9d90ecf047b9a",
35
+ "comment": "docs: Add documentation for package"
36
+ },
37
+ {
38
+ "author": "martinhochel@microsoft.com",
39
+ "package": "@fluentui/react-overflow",
40
+ "commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
41
+ "comment": "chore: migrate to packaged scripts"
42
+ }
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "date": "Mon, 09 Jan 2023 14:34:57 GMT",
6
48
  "tag": "@fluentui/react-overflow_v9.0.0-rc.6",
7
49
  "version": "9.0.0-rc.6",
8
50
  "comments": {
@@ -25,19 +67,19 @@
25
67
  "author": "beachball",
26
68
  "package": "@fluentui/react-overflow",
27
69
  "comment": "Bump @fluentui/priority-overflow to v9.0.0-rc.2",
28
- "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
70
+ "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
29
71
  },
30
72
  {
31
73
  "author": "beachball",
32
74
  "package": "@fluentui/react-overflow",
33
75
  "comment": "Bump @fluentui/react-context-selector to v9.1.5",
34
- "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
76
+ "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
35
77
  },
36
78
  {
37
79
  "author": "beachball",
38
80
  "package": "@fluentui/react-overflow",
39
81
  "comment": "Bump @fluentui/react-utilities to v9.4.0",
40
- "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
82
+ "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
41
83
  }
42
84
  ]
43
85
  }
package/CHANGELOG.md CHANGED
@@ -1,19 +1,29 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Mon, 09 Jan 2023 14:31:45 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 18 Jan 2023 16:30:56 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0)
8
+
9
+ Wed, 18 Jan 2023 16:30:56 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.7..@fluentui/react-overflow_v9.0.0)
11
+
12
+ ### Patches
13
+
14
+ - Release as stable ([PR #26380](https://github.com/microsoft/fluentui/pull/26380) by lingfangao@hotmail.com)
15
+ - Bump @fluentui/priority-overflow to v9.0.0 ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by beachball)
16
+
7
17
  ## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.6)
8
18
 
9
- Mon, 09 Jan 2023 14:31:45 GMT
19
+ Mon, 09 Jan 2023 14:34:57 GMT
10
20
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.5..@fluentui/react-overflow_v9.0.0-rc.6)
11
21
 
12
22
  ### Changes
13
23
 
14
- - Bump @fluentui/priority-overflow to v9.0.0-rc.2 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
15
- - Bump @fluentui/react-context-selector to v9.1.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
16
- - Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
24
+ - Bump @fluentui/priority-overflow to v9.0.0-rc.2 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
25
+ - Bump @fluentui/react-context-selector to v9.1.5 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
26
+ - Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
17
27
 
18
28
  ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.5)
19
29
 
@@ -0,0 +1,60 @@
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
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,17 @@
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
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# sourceMappingURL=OverflowItem.types.js.map
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,9 @@
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
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,17 @@
1
+ define(["require", "exports", "./components/Overflow", "./constants", "./useIsOverflowGroupVisible", "./useIsOverflowItemVisible", "./useOverflowContainer", "./useOverflowCount", "./useOverflowItem", "./useOverflowMenu", "./components/OverflowItem/OverflowItem"], function (require, exports, Overflow_1, constants_1, useIsOverflowGroupVisible_1, useIsOverflowItemVisible_1, useOverflowContainer_1, useOverflowCount_1, useOverflowItem_1, useOverflowMenu_1, OverflowItem_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.OverflowItem = 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, "OverflowItem", { enumerable: true, get: function () { return OverflowItem_1.OverflowItem; } });
16
+ });
17
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
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;IAGf,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 type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"]}
@@ -0,0 +1,22 @@
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
+ var useOverflowContext = function (selector) {
15
+ return react_context_selector_1.useContextSelector(exports.OverflowContext, function (ctx) {
16
+ if (ctx === void 0) { ctx = overflowContextDefaultValue; }
17
+ return selector(ctx);
18
+ });
19
+ };
20
+ exports.useOverflowContext = useOverflowContext;
21
+ });
22
+ //# sourceMappingURL=overflowContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"overflowContext.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/overflowContext.ts"],"names":[],"mappings":";;;;IAYa,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;IAEK,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\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\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"]}
@@ -0,0 +1,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,14 @@
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
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,14 @@
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
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,84 @@
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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useOverflowContainer.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowContainer.ts"],"names":[],"mappings":"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","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"]}
@@ -0,0 +1,21 @@
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
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,30 @@
1
+ define(["require", "exports", "react", "@fluentui/react-utilities", "./overflowContext"], function (require, exports, React, react_utilities_1, overflowContext_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useOverflowItem = void 0;
5
+ /**
6
+ * @internal
7
+ * Registers an overflow item
8
+ * @param id - unique identifier for the item used by the overflow manager
9
+ * @param priority - higher priority means the item overflows later
10
+ * @param groupId - assigns the item to a group, group visibility can be watched
11
+ * @returns ref to assign to an intrinsic HTML element
12
+ */
13
+ function useOverflowItem(id, priority, groupId) {
14
+ var ref = React.useRef(null);
15
+ var registerItem = overflowContext_1.useOverflowContext(function (v) { return v.registerItem; });
16
+ react_utilities_1.useIsomorphicLayoutEffect(function () {
17
+ if (ref.current) {
18
+ return registerItem({
19
+ element: ref.current,
20
+ id: id,
21
+ priority: priority !== null && priority !== void 0 ? priority : 0,
22
+ groupId: groupId,
23
+ });
24
+ }
25
+ }, [id, priority, registerItem, groupId]);
26
+ return ref;
27
+ }
28
+ exports.useOverflowItem = useOverflowItem;
29
+ });
30
+ //# sourceMappingURL=useOverflowItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useOverflowItem.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowItem.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;OAOG;IACH,SAAgB,eAAe,CAA+B,EAAU,EAAE,QAAiB,EAAE,OAAgB;QAC3G,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QACzC,IAAM,YAAY,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,YAAY,EAAd,CAAc,CAAC,CAAC;QAE7D,2CAAyB,CAAC;YACxB,IAAI,GAAG,CAAC,OAAO,EAAE;gBACf,OAAO,YAAY,CAAC;oBAClB,OAAO,EAAE,GAAG,CAAC,OAAO;oBACpB,EAAE,IAAA;oBACF,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC;oBACvB,OAAO,SAAA;iBACR,CAAC,CAAC;aACJ;QACH,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;QAE1C,OAAO,GAAG,CAAC;IACb,CAAC;IAhBD,0CAgBC","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"]}
@@ -0,0 +1,26 @@
1
+ define(["require", "exports", "react", "@fluentui/react-utilities", "./overflowContext", "./useOverflowCount"], function (require, exports, React, react_utilities_1, overflowContext_1, useOverflowCount_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useOverflowMenu = void 0;
5
+ function useOverflowMenu(id) {
6
+ var elementId = react_utilities_1.useId('overflow-menu', id);
7
+ var overflowCount = useOverflowCount_1.useOverflowCount();
8
+ var registerOverflowMenu = overflowContext_1.useOverflowContext(function (v) { return v.registerOverflowMenu; });
9
+ var updateOverflow = overflowContext_1.useOverflowContext(function (v) { return v.updateOverflow; });
10
+ var ref = React.useRef(null);
11
+ var isOverflowing = overflowCount > 0;
12
+ react_utilities_1.useIsomorphicLayoutEffect(function () {
13
+ if (ref.current) {
14
+ return registerOverflowMenu(ref.current);
15
+ }
16
+ }, [registerOverflowMenu, isOverflowing, elementId]);
17
+ react_utilities_1.useIsomorphicLayoutEffect(function () {
18
+ if (isOverflowing) {
19
+ updateOverflow();
20
+ }
21
+ }, [isOverflowing, updateOverflow, ref]);
22
+ return { ref: ref, overflowCount: overflowCount, isOverflowing: isOverflowing };
23
+ }
24
+ exports.useOverflowMenu = useOverflowMenu;
25
+ });
26
+ //# sourceMappingURL=useOverflowMenu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useOverflowMenu.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowMenu.ts"],"names":[],"mappings":";;;;IAKA,SAAgB,eAAe,CAA+B,EAAW;QACvE,IAAM,SAAS,GAAG,uBAAK,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAC7C,IAAM,aAAa,GAAG,mCAAgB,EAAE,CAAC;QACzC,IAAM,oBAAoB,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,oBAAoB,EAAtB,CAAsB,CAAC,CAAC;QAC7E,IAAM,cAAc,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,cAAc,EAAhB,CAAgB,CAAC,CAAC;QACjE,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QACzC,IAAM,aAAa,GAAG,aAAa,GAAG,CAAC,CAAC;QAExC,2CAAyB,CAAC;YACxB,IAAI,GAAG,CAAC,OAAO,EAAE;gBACf,OAAO,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;QAErD,2CAAyB,CAAC;YACxB,IAAI,aAAa,EAAE;gBACjB,cAAc,EAAE,CAAC;aAClB;QACH,CAAC,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC;QAEzC,OAAO,EAAE,GAAG,KAAA,EAAE,aAAa,eAAA,EAAE,aAAa,eAAA,EAAE,CAAC;IAC/C,CAAC;IArBD,0CAqBC","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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-overflow",
3
- "version": "9.0.0-rc.6",
3
+ "version": "9.0.0",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,10 +28,12 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "@fluentui/eslint-plugin": "*",
31
- "@fluentui/scripts": "*"
31
+ "@fluentui/scripts-api-extractor": "*",
32
+ "@fluentui/scripts-cypress": "*",
33
+ "@fluentui/scripts-tasks": "*"
32
34
  },
33
35
  "dependencies": {
34
- "@fluentui/priority-overflow": "^9.0.0-rc.2",
36
+ "@fluentui/priority-overflow": "^9.0.0",
35
37
  "@fluentui/react-context-selector": "^9.1.5",
36
38
  "@fluentui/react-theme": "^9.1.5",
37
39
  "@fluentui/react-utilities": "^9.4.0",
@@ -47,9 +49,8 @@
47
49
  },
48
50
  "beachball": {
49
51
  "disallowedChangeTypes": [
50
- "major",
51
- "minor",
52
- "patch"
52
+ "prerelease",
53
+ "major"
53
54
  ]
54
55
  },
55
56
  "exports": {