@fluentui/react-overflow 0.0.0-nightly-20231110-0405.1 → 0.0.0-nightly-20231114-0405.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -8
- 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 +5 -5
package/CHANGELOG.md
CHANGED
@@ -1,21 +1,30 @@
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 14 Nov 2023 04:19:48 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-
|
7
|
+
## [0.0.0-nightly-20231114-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20231114-0405.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0
|
9
|
+
Tue, 14 Nov 2023 04:19:48 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.0..@fluentui/react-overflow_v0.0.0-nightly-20231114-0405.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
15
|
-
- Bump @fluentui/priority-overflow to v0.0.0-nightly-
|
16
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
15
|
+
- Bump @fluentui/priority-overflow to v0.0.0-nightly-20231114-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/d111f46239f45bda1205b7bc64010f649aa6839b) by beachball)
|
16
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20231114-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/d111f46239f45bda1205b7bc64010f649aa6839b) by beachball)
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20231114-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/d111f46239f45bda1205b7bc64010f649aa6839b) by beachball)
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20231114-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/d111f46239f45bda1205b7bc64010f649aa6839b) by beachball)
|
19
|
+
|
20
|
+
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.0)
|
21
|
+
|
22
|
+
Fri, 10 Nov 2023 13:46:33 GMT
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.43..@fluentui/react-overflow_v9.1.0)
|
24
|
+
|
25
|
+
### Minor changes
|
26
|
+
|
27
|
+
- feat: Implement useOverflowVisibility hook ([PR #29809](https://github.com/microsoft/fluentui/pull/29809) by lingfangao@hotmail.com)
|
19
28
|
|
20
29
|
## [9.0.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.43)
|
21
30
|
|
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": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20231114-0405.1",
|
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": "0.0.0-nightly-
|
38
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
39
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
40
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
37
|
+
"@fluentui/priority-overflow": "0.0.0-nightly-20231114-0405.1",
|
38
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20231114-0405.1",
|
39
|
+
"@fluentui/react-theme": "0.0.0-nightly-20231114-0405.1",
|
40
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20231114-0405.1",
|
41
41
|
"@griffel/react": "^1.5.14",
|
42
42
|
"@swc/helpers": "^0.5.1"
|
43
43
|
},
|