@fluentui/react-overflow 9.0.42 → 9.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +24 -2
- package/dist/index.d.ts +14 -0
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/useOverflowVisibility.js +21 -0
- package/lib/useOverflowVisibility.js.map +1 -0
- package/lib-commonjs/index.js +4 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/useOverflowVisibility.js +24 -0
- package/lib-commonjs/useOverflowVisibility.js.map +1 -0
- package/package.json +12 -6
- package/CHANGELOG.json +0 -1973
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,34 @@
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Fri, 10 Nov 2023 13:45:57 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.0)
|
8
|
+
|
9
|
+
Fri, 10 Nov 2023 13:45:57 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.43..@fluentui/react-overflow_v9.1.0)
|
11
|
+
|
12
|
+
### Minor changes
|
13
|
+
|
14
|
+
- feat: Implement useOverflowVisibility hook ([PR #29809](https://github.com/microsoft/fluentui/pull/29809) by lingfangao@hotmail.com)
|
15
|
+
|
16
|
+
## [9.0.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.43)
|
17
|
+
|
18
|
+
Thu, 09 Nov 2023 17:29:38 GMT
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.42..@fluentui/react-overflow_v9.0.43)
|
20
|
+
|
21
|
+
### Patches
|
22
|
+
|
23
|
+
- chore: use package.json#files setup instead of npmignore for all v9 libraries ([PR #29734](https://github.com/microsoft/fluentui/pull/29734) by martinhochel@microsoft.com)
|
24
|
+
- Bump @fluentui/priority-overflow to v9.1.9 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
|
25
|
+
- Bump @fluentui/react-context-selector to v9.1.42 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
|
26
|
+
- Bump @fluentui/react-theme to v9.1.16 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
|
27
|
+
- Bump @fluentui/react-utilities to v9.15.2 ([PR #29800](https://github.com/microsoft/fluentui/pull/29800) by beachball)
|
28
|
+
|
7
29
|
## [9.0.42](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.42)
|
8
30
|
|
9
|
-
Wed, 01 Nov 2023 12:
|
31
|
+
Wed, 01 Nov 2023 12:55:59 GMT
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.41..@fluentui/react-overflow_v9.0.42)
|
11
33
|
|
12
34
|
### Patches
|
package/dist/index.d.ts
CHANGED
@@ -153,4 +153,18 @@ export declare function useOverflowMenu<TElement extends HTMLElement>(id?: strin
|
|
153
153
|
isOverflowing: boolean;
|
154
154
|
};
|
155
155
|
|
156
|
+
/**
|
157
|
+
* A hook that returns the visibility status of all items and groups.
|
158
|
+
*
|
159
|
+
* ⚠️ Heads up!
|
160
|
+
*
|
161
|
+
* This hook will cause the component it is in to re-render for every single time an item overflows or becomes
|
162
|
+
* visible - use with caution
|
163
|
+
* @returns visibility status of all items and groups
|
164
|
+
*/
|
165
|
+
export declare function useOverflowVisibility(): {
|
166
|
+
itemVisibility: Record<string, boolean>;
|
167
|
+
groupVisibility: Record<string, OverflowGroupState>;
|
168
|
+
};
|
169
|
+
|
156
170
|
export { }
|
package/lib/index.js
CHANGED
@@ -7,6 +7,7 @@ export { useOverflowCount } from './useOverflowCount';
|
|
7
7
|
export { useOverflowItem } from './useOverflowItem';
|
8
8
|
export { useOverflowMenu } from './useOverflowMenu';
|
9
9
|
export { useOverflowDivider } from './useOverflowDivider';
|
10
|
+
export { useOverflowVisibility } from './useOverflowVisibility';
|
10
11
|
export { useOverflowContext } from './overflowContext';
|
11
12
|
export { OverflowItem } from './components/OverflowItem/OverflowItem';
|
12
13
|
export { OverflowDivider } from './components/OverflowDivider/OverflowDivider';
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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';\nexport { useOverflowDivider } from './useOverflowDivider';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } 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';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,qBAAqB,QAAQ,0BAA0B;AAEhE,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useOverflowContext } from './overflowContext';
|
3
|
+
/**
|
4
|
+
* A hook that returns the visibility status of all items and groups.
|
5
|
+
*
|
6
|
+
* ⚠️ Heads up!
|
7
|
+
*
|
8
|
+
* This hook will cause the component it is in to re-render for every single time an item overflows or becomes
|
9
|
+
* visible - use with caution
|
10
|
+
* @returns visibility status of all items and groups
|
11
|
+
*/ export function useOverflowVisibility() {
|
12
|
+
const itemVisibility = useOverflowContext((ctx)=>ctx.itemVisibility);
|
13
|
+
const groupVisibility = useOverflowContext((ctx)=>ctx.groupVisibility);
|
14
|
+
return React.useMemo(()=>({
|
15
|
+
itemVisibility,
|
16
|
+
groupVisibility
|
17
|
+
}), [
|
18
|
+
itemVisibility,
|
19
|
+
groupVisibility
|
20
|
+
]);
|
21
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useOverflowVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility() {\n const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["React","useOverflowContext","useOverflowVisibility","itemVisibility","ctx","groupVisibility","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;CAQC,GACD,OAAO,SAASC;IACd,MAAMC,iBAAiBF,mBAAmBG,CAAAA,MAAOA,IAAID,cAAc;IACnE,MAAME,kBAAkBJ,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOL,MAAMM,OAAO,CAAC,IAAO,CAAA;YAAEH;YAAgBE;QAAgB,CAAA,GAAI;QAACF;QAAgBE;KAAgB;AACrG"}
|
package/lib-commonjs/index.js
CHANGED
@@ -45,6 +45,9 @@ _export(exports, {
|
|
45
45
|
useOverflowDivider: function() {
|
46
46
|
return _useOverflowDivider.useOverflowDivider;
|
47
47
|
},
|
48
|
+
useOverflowVisibility: function() {
|
49
|
+
return _useOverflowVisibility.useOverflowVisibility;
|
50
|
+
},
|
48
51
|
useOverflowContext: function() {
|
49
52
|
return _overflowContext.useOverflowContext;
|
50
53
|
},
|
@@ -64,6 +67,7 @@ const _useOverflowCount = require("./useOverflowCount");
|
|
64
67
|
const _useOverflowItem = require("./useOverflowItem");
|
65
68
|
const _useOverflowMenu = require("./useOverflowMenu");
|
66
69
|
const _useOverflowDivider = require("./useOverflowDivider");
|
70
|
+
const _useOverflowVisibility = require("./useOverflowVisibility");
|
67
71
|
const _overflowContext = require("./overflowContext");
|
68
72
|
const _OverflowItem = require("./components/OverflowItem/OverflowItem");
|
69
73
|
const _OverflowDivider = require("./components/OverflowDivider/OverflowDivider");
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IACRC,gBAAgB;eAAhBA,2BAAgB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAC/EC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IACpBC,gBAAgB;eAAhBA,kCAAgB;;IAChBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IACfC,kBAAkB;eAAlBA,sCAAkB;;IAClBC,kBAAkB;eAAlBA,mCAAkB;;IAClBC,YAAY;eAAZA,0BAAY;;IACZC,eAAe;eAAfA,gCAAe;;;
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IACRC,gBAAgB;eAAhBA,2BAAgB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAC/EC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IACpBC,gBAAgB;eAAhBA,kCAAgB;;IAChBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IACfC,kBAAkB;eAAlBA,sCAAkB;;IAClBC,qBAAqB;eAArBA,4CAAqB;;IACrBC,kBAAkB;eAAlBA,mCAAkB;;IAClBC,YAAY;eAAZA,0BAAY;;IACZC,eAAe;eAAfA,gCAAe;;;0BAZC;2BACuE;2CACtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;uCACG;iCACH;8BACN;iCACG"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "useOverflowVisibility", {
|
6
|
+
enumerable: true,
|
7
|
+
get: function() {
|
8
|
+
return useOverflowVisibility;
|
9
|
+
}
|
10
|
+
});
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
+
const _overflowContext = require("./overflowContext");
|
14
|
+
function useOverflowVisibility() {
|
15
|
+
const itemVisibility = (0, _overflowContext.useOverflowContext)((ctx)=>ctx.itemVisibility);
|
16
|
+
const groupVisibility = (0, _overflowContext.useOverflowContext)((ctx)=>ctx.groupVisibility);
|
17
|
+
return _react.useMemo(()=>({
|
18
|
+
itemVisibility,
|
19
|
+
groupVisibility
|
20
|
+
}), [
|
21
|
+
itemVisibility,
|
22
|
+
groupVisibility
|
23
|
+
]);
|
24
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["useOverflowVisibility.js"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */ export function useOverflowVisibility() {\n const itemVisibility = useOverflowContext((ctx)=>ctx.itemVisibility);\n const groupVisibility = useOverflowContext((ctx)=>ctx.groupVisibility);\n return React.useMemo(()=>({\n itemVisibility,\n groupVisibility\n }), [\n itemVisibility,\n groupVisibility\n ]);\n}\n"],"names":["useOverflowVisibility","itemVisibility","useOverflowContext","ctx","groupVisibility","React","useMemo"],"mappings":";;;;+BAUoBA;;;eAAAA;;;;iEAVG;iCACY;AASxB,SAASA;IAChB,MAAMC,iBAAiBC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIF,cAAc;IACnE,MAAMG,kBAAkBF,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,eAAe;IACrE,OAAOC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClBL;YACAG;QACJ,CAAA,GAAI;QACJH;QACAG;KACH;AACL"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-overflow",
|
3
|
-
"version": "9.0
|
3
|
+
"version": "9.1.0",
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -34,10 +34,10 @@
|
|
34
34
|
"@fluentui/scripts-tasks": "*"
|
35
35
|
},
|
36
36
|
"dependencies": {
|
37
|
-
"@fluentui/priority-overflow": "^9.1.
|
38
|
-
"@fluentui/react-context-selector": "^9.1.
|
39
|
-
"@fluentui/react-theme": "^9.1.
|
40
|
-
"@fluentui/react-utilities": "^9.15.
|
37
|
+
"@fluentui/priority-overflow": "^9.1.9",
|
38
|
+
"@fluentui/react-context-selector": "^9.1.42",
|
39
|
+
"@fluentui/react-theme": "^9.1.16",
|
40
|
+
"@fluentui/react-utilities": "^9.15.2",
|
41
41
|
"@griffel/react": "^1.5.14",
|
42
42
|
"@swc/helpers": "^0.5.1"
|
43
43
|
},
|
@@ -62,5 +62,11 @@
|
|
62
62
|
"require": "./lib-commonjs/index.js"
|
63
63
|
},
|
64
64
|
"./package.json": "./package.json"
|
65
|
-
}
|
65
|
+
},
|
66
|
+
"files": [
|
67
|
+
"*.md",
|
68
|
+
"dist/*.d.ts",
|
69
|
+
"lib",
|
70
|
+
"lib-commonjs"
|
71
|
+
]
|
66
72
|
}
|