@fluentui/react-message-bar 9.3.1 → 9.3.3
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 +21 -2
- package/lib/components/MessageBar/useMessageBarReflow.js +64 -62
- package/lib/components/MessageBar/useMessageBarReflow.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarReflow.js +63 -61
- package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-message-bar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 07 Feb 2025 10:40:52 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.3.3)
|
|
8
|
+
|
|
9
|
+
Fri, 07 Feb 2025 10:40:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.3.2..@fluentui/react-message-bar_v9.3.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Revert MessageBar auto reflow changes from #33409 ([PR #33797](https://github.com/microsoft/fluentui/pull/33797) by lingfangao@hotmail.com)
|
|
15
|
+
- Bump @fluentui/react-button to v9.3.102 ([PR #33797](https://github.com/microsoft/fluentui/pull/33797) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.3.2)
|
|
18
|
+
|
|
19
|
+
Tue, 28 Jan 2025 21:26:35 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.3.1..@fluentui/react-message-bar_v9.3.2)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-button to v9.3.101 ([PR #33736](https://github.com/microsoft/fluentui/pull/33736) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.3.1)
|
|
8
27
|
|
|
9
|
-
Wed, 22 Jan 2025
|
|
28
|
+
Wed, 22 Jan 2025 14:00:18 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.3.0..@fluentui/react-message-bar_v9.3.1)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -1,81 +1,83 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
|
-
import {
|
|
3
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
|
4
4
|
export function useMessageBarReflow(enabled = false) {
|
|
5
5
|
const { targetDocument } = useFluent();
|
|
6
|
+
const forceUpdate = React.useReducer(()=>({}), {})[1];
|
|
7
|
+
const reflowingRef = React.useRef(false);
|
|
8
|
+
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
|
|
9
|
+
const resizeObserverRef = React.useRef(null);
|
|
6
10
|
const prevInlineSizeRef = React.useRef(-1);
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const handleResize = React.useCallback((entries)=>{
|
|
12
|
+
var _entry_borderBoxSize_, _entry_borderBoxSize;
|
|
13
|
+
// Resize observer is only owned by this component - one resize observer entry expected
|
|
14
|
+
// No need to support multiple fragments - one border box entry expected
|
|
15
|
+
if (process.env.NODE_ENV !== 'production' && entries.length > 1) {
|
|
16
|
+
// eslint-disable-next-line no-console
|
|
17
|
+
console.error([
|
|
18
|
+
'useMessageBarReflow: Resize observer should only have one entry. ',
|
|
19
|
+
'If multiple entries are observed, the first entry will be used.',
|
|
20
|
+
'This is a bug, please report it to the Fluent UI team.'
|
|
21
|
+
].join(' '));
|
|
22
|
+
}
|
|
23
|
+
const entry = entries[0];
|
|
24
|
+
var _entry_borderBoxSize__inlineSize;
|
|
25
|
+
// `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
|
|
26
|
+
const inlineSize = (_entry_borderBoxSize__inlineSize = entry === null || entry === void 0 ? void 0 : (_entry_borderBoxSize = entry.borderBoxSize) === null || _entry_borderBoxSize === void 0 ? void 0 : (_entry_borderBoxSize_ = _entry_borderBoxSize[0]) === null || _entry_borderBoxSize_ === void 0 ? void 0 : _entry_borderBoxSize_.inlineSize) !== null && _entry_borderBoxSize__inlineSize !== void 0 ? _entry_borderBoxSize__inlineSize : entry === null || entry === void 0 ? void 0 : entry.target.getBoundingClientRect().width;
|
|
27
|
+
if (inlineSize === undefined || !entry) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
const { target } = entry;
|
|
31
|
+
if (!isHTMLElement(target)) {
|
|
13
32
|
return;
|
|
14
33
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
34
|
+
let nextReflowing;
|
|
35
|
+
// No easy way to really determine when the single line layout will fit
|
|
36
|
+
// Just keep try to set single line layout as long as the size is growing
|
|
37
|
+
// Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
|
|
38
|
+
if (reflowingRef.current) {
|
|
39
|
+
if (prevInlineSizeRef.current < inlineSize) {
|
|
40
|
+
nextReflowing = false;
|
|
18
41
|
}
|
|
19
|
-
|
|
20
|
-
|
|
42
|
+
} else {
|
|
43
|
+
const scrollWidth = target.scrollWidth;
|
|
44
|
+
if (inlineSize < scrollWidth) {
|
|
45
|
+
nextReflowing = true;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
prevInlineSizeRef.current = inlineSize;
|
|
49
|
+
if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
|
|
50
|
+
reflowingRef.current = nextReflowing;
|
|
51
|
+
forceUpdate();
|
|
52
|
+
}
|
|
21
53
|
}, [
|
|
22
|
-
|
|
54
|
+
forceUpdate
|
|
23
55
|
]);
|
|
24
|
-
const
|
|
25
|
-
|
|
56
|
+
const ref = React.useCallback((el)=>{
|
|
57
|
+
var _resizeObserverRef_current;
|
|
58
|
+
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
26
59
|
return;
|
|
27
60
|
}
|
|
28
|
-
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (entries[0].intersectionRatio < 1) {
|
|
36
|
-
setReflowing(true);
|
|
37
|
-
}
|
|
38
|
-
}, []);
|
|
39
|
-
const ref = React.useMemo(()=>{
|
|
40
|
-
let resizeObserver = null;
|
|
41
|
-
let intersectionObserer = null;
|
|
42
|
-
return (el)=>{
|
|
43
|
-
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
44
|
-
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
45
|
-
intersectionObserer === null || intersectionObserer === void 0 ? void 0 : intersectionObserer.disconnect();
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
messageBarRef.current = el;
|
|
49
|
-
const win = targetDocument.defaultView;
|
|
50
|
-
resizeObserver = new win.ResizeObserver(handleResize);
|
|
51
|
-
intersectionObserer = new win.IntersectionObserver(handleIntersection, {
|
|
52
|
-
threshold: 1
|
|
53
|
-
});
|
|
54
|
-
intersectionObserer.observe(el);
|
|
55
|
-
resizeObserver.observe(el, {
|
|
56
|
-
box: 'border-box'
|
|
57
|
-
});
|
|
58
|
-
};
|
|
61
|
+
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
|
|
62
|
+
const win = targetDocument.defaultView;
|
|
63
|
+
const resizeObserver = new win.ResizeObserver(handleResize);
|
|
64
|
+
resizeObserverRef.current = resizeObserver;
|
|
65
|
+
resizeObserver.observe(el, {
|
|
66
|
+
box: 'border-box'
|
|
67
|
+
});
|
|
59
68
|
}, [
|
|
69
|
+
targetDocument,
|
|
60
70
|
handleResize,
|
|
61
|
-
|
|
62
|
-
enabled,
|
|
63
|
-
targetDocument
|
|
71
|
+
enabled
|
|
64
72
|
]);
|
|
73
|
+
React.useEffect(()=>{
|
|
74
|
+
return ()=>{
|
|
75
|
+
var _resizeObserverRef_current;
|
|
76
|
+
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
|
|
77
|
+
};
|
|
78
|
+
}, []);
|
|
65
79
|
return {
|
|
66
80
|
ref,
|
|
67
|
-
reflowing
|
|
81
|
+
reflowing: reflowingRef.current
|
|
68
82
|
};
|
|
69
83
|
}
|
|
70
|
-
const isReflowing = (el)=>{
|
|
71
|
-
return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);
|
|
72
|
-
};
|
|
73
|
-
const isFullyInViewport = (el)=>{
|
|
74
|
-
const rect = el.getBoundingClientRect();
|
|
75
|
-
const doc = el.ownerDocument;
|
|
76
|
-
const win = doc.defaultView;
|
|
77
|
-
if (!win) {
|
|
78
|
-
return true;
|
|
79
|
-
}
|
|
80
|
-
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) && rect.right <= (win.innerWidth || doc.documentElement.clientWidth);
|
|
81
|
-
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n const { targetDocument } = useFluent();\n const forceUpdate = React.useReducer(() => ({}), {})[1];\n const reflowingRef = React.useRef(false);\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n const prevInlineSizeRef = React.useRef(-1);\n\n const handleResize: ResizeObserverCallback = React.useCallback(\n entries => {\n // Resize observer is only owned by this component - one resize observer entry expected\n // No need to support multiple fragments - one border box entry expected\n if (process.env.NODE_ENV !== 'production' && entries.length > 1) {\n // eslint-disable-next-line no-console\n console.error(\n [\n 'useMessageBarReflow: Resize observer should only have one entry. ',\n 'If multiple entries are observed, the first entry will be used.',\n 'This is a bug, please report it to the Fluent UI team.',\n ].join(' '),\n );\n }\n\n const entry = entries[0];\n // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4\n const inlineSize = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.target.getBoundingClientRect().width;\n\n if (inlineSize === undefined || !entry) {\n return;\n }\n\n const { target } = entry;\n\n if (!isHTMLElement(target)) {\n return;\n }\n\n let nextReflowing: boolean | undefined;\n\n // No easy way to really determine when the single line layout will fit\n // Just keep try to set single line layout as long as the size is growing\n // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case\n if (reflowingRef.current) {\n if (prevInlineSizeRef.current < inlineSize) {\n nextReflowing = false;\n }\n } else {\n const scrollWidth = target.scrollWidth;\n if (inlineSize < scrollWidth) {\n nextReflowing = true;\n }\n }\n\n prevInlineSizeRef.current = inlineSize;\n if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {\n reflowingRef.current = nextReflowing;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n const ref = React.useCallback(\n (el: HTMLElement | null) => {\n if (!enabled || !el || !targetDocument?.defaultView) {\n return;\n }\n\n resizeObserverRef.current?.disconnect();\n\n const win = targetDocument.defaultView;\n const resizeObserver = new win.ResizeObserver(handleResize);\n resizeObserverRef.current = resizeObserver;\n resizeObserver.observe(el, { box: 'border-box' });\n },\n [targetDocument, handleResize, enabled],\n );\n\n React.useEffect(() => {\n return () => {\n resizeObserverRef.current?.disconnect();\n };\n }, []);\n\n return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useMessageBarReflow","enabled","targetDocument","forceUpdate","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","entry","process","env","NODE_ENV","length","console","error","join","inlineSize","borderBoxSize","target","getBoundingClientRect","width","undefined","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAC3B,MAAMK,cAAcP,MAAMQ,UAAU,CAAC,IAAO,CAAA,CAAC,CAAA,GAAI,CAAC,EAAE,CAAC,EAAE;IACvD,MAAMC,eAAeT,MAAMU,MAAM,CAAC;IAClC,8FAA8F;IAE9F,MAAMC,oBAAoBX,MAAMU,MAAM,CAAwB;IAC9D,MAAME,oBAAoBZ,MAAMU,MAAM,CAAC,CAAC;IAExC,MAAMG,eAAuCb,MAAMc,WAAW,CAC5DC,CAAAA;YAgBqBC,uBAAAA;QAfnB,uFAAuF;QACvF,wEAAwE;QACxE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBJ,QAAQK,MAAM,GAAG,GAAG;YAC/D,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE;gBACA;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;QAEA,MAAMP,QAAQD,OAAO,CAAC,EAAE;YAELC;QADnB,iFAAiF;QACjF,MAAMQ,aAAaR,CAAAA,mCAAAA,kBAAAA,6BAAAA,uBAAAA,MAAOS,aAAa,cAApBT,4CAAAA,wBAAAA,oBAAsB,CAAC,EAAE,cAAzBA,4CAAAA,sBAA2BQ,UAAU,cAArCR,8CAAAA,mCAAyCA,kBAAAA,4BAAAA,MAAOU,MAAM,CAACC,qBAAqB,GAAGC,KAAK;QAEvG,IAAIJ,eAAeK,aAAa,CAACb,OAAO;YACtC;QACF;QAEA,MAAM,EAAEU,MAAM,EAAE,GAAGV;QAEnB,IAAI,CAACb,cAAcuB,SAAS;YAC1B;QACF;QAEA,IAAII;QAEJ,uEAAuE;QACvE,yEAAyE;QACzE,iHAAiH;QACjH,IAAIrB,aAAasB,OAAO,EAAE;YACxB,IAAInB,kBAAkBmB,OAAO,GAAGP,YAAY;gBAC1CM,gBAAgB;YAClB;QACF,OAAO;YACL,MAAME,cAAcN,OAAOM,WAAW;YACtC,IAAIR,aAAaQ,aAAa;gBAC5BF,gBAAgB;YAClB;QACF;QAEAlB,kBAAkBmB,OAAO,GAAGP;QAC5B,IAAI,OAAOM,kBAAkB,eAAerB,aAAasB,OAAO,KAAKD,eAAe;YAClFrB,aAAasB,OAAO,GAAGD;YACvBvB;QACF;IACF,GACA;QAACA;KAAY;IAGf,MAAM0B,MAAMjC,MAAMc,WAAW,CAC3B,CAACoB;YAKCvB;QAJA,IAAI,CAACN,WAAW,CAAC6B,MAAM,EAAC5B,2BAAAA,qCAAAA,eAAgB6B,WAAW,GAAE;YACnD;QACF;SAEAxB,6BAAAA,kBAAkBoB,OAAO,cAAzBpB,iDAAAA,2BAA2ByB,UAAU;QAErC,MAAMC,MAAM/B,eAAe6B,WAAW;QACtC,MAAMG,iBAAiB,IAAID,IAAIE,cAAc,CAAC1B;QAC9CF,kBAAkBoB,OAAO,GAAGO;QAC5BA,eAAeE,OAAO,CAACN,IAAI;YAAEO,KAAK;QAAa;IACjD,GACA;QAACnC;QAAgBO;QAAcR;KAAQ;IAGzCL,MAAM0C,SAAS,CAAC;QACd,OAAO;gBACL/B;aAAAA,6BAAAA,kBAAkBoB,OAAO,cAAzBpB,iDAAAA,2BAA2ByB,UAAU;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEH;QAAKU,WAAWlC,aAAasB,OAAO;IAAC;AAChD"}
|
|
@@ -14,79 +14,81 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
15
|
function useMessageBarReflow(enabled = false) {
|
|
16
16
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
17
|
+
const forceUpdate = _react.useReducer(()=>({}), {})[1];
|
|
18
|
+
const reflowingRef = _react.useRef(false);
|
|
19
|
+
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
|
|
20
|
+
const resizeObserverRef = _react.useRef(null);
|
|
17
21
|
const prevInlineSizeRef = _react.useRef(-1);
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
const handleResize = _react.useCallback((entries)=>{
|
|
23
|
+
var _entry_borderBoxSize_, _entry_borderBoxSize;
|
|
24
|
+
// Resize observer is only owned by this component - one resize observer entry expected
|
|
25
|
+
// No need to support multiple fragments - one border box entry expected
|
|
26
|
+
if (process.env.NODE_ENV !== 'production' && entries.length > 1) {
|
|
27
|
+
// eslint-disable-next-line no-console
|
|
28
|
+
console.error([
|
|
29
|
+
'useMessageBarReflow: Resize observer should only have one entry. ',
|
|
30
|
+
'If multiple entries are observed, the first entry will be used.',
|
|
31
|
+
'This is a bug, please report it to the Fluent UI team.'
|
|
32
|
+
].join(' '));
|
|
33
|
+
}
|
|
34
|
+
const entry = entries[0];
|
|
35
|
+
var _entry_borderBoxSize__inlineSize;
|
|
36
|
+
// `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
|
|
37
|
+
const inlineSize = (_entry_borderBoxSize__inlineSize = entry === null || entry === void 0 ? void 0 : (_entry_borderBoxSize = entry.borderBoxSize) === null || _entry_borderBoxSize === void 0 ? void 0 : (_entry_borderBoxSize_ = _entry_borderBoxSize[0]) === null || _entry_borderBoxSize_ === void 0 ? void 0 : _entry_borderBoxSize_.inlineSize) !== null && _entry_borderBoxSize__inlineSize !== void 0 ? _entry_borderBoxSize__inlineSize : entry === null || entry === void 0 ? void 0 : entry.target.getBoundingClientRect().width;
|
|
38
|
+
if (inlineSize === undefined || !entry) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
const { target } = entry;
|
|
42
|
+
if (!(0, _reactutilities.isHTMLElement)(target)) {
|
|
24
43
|
return;
|
|
25
44
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
45
|
+
let nextReflowing;
|
|
46
|
+
// No easy way to really determine when the single line layout will fit
|
|
47
|
+
// Just keep try to set single line layout as long as the size is growing
|
|
48
|
+
// Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
|
|
49
|
+
if (reflowingRef.current) {
|
|
50
|
+
if (prevInlineSizeRef.current < inlineSize) {
|
|
51
|
+
nextReflowing = false;
|
|
29
52
|
}
|
|
30
|
-
|
|
31
|
-
|
|
53
|
+
} else {
|
|
54
|
+
const scrollWidth = target.scrollWidth;
|
|
55
|
+
if (inlineSize < scrollWidth) {
|
|
56
|
+
nextReflowing = true;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
prevInlineSizeRef.current = inlineSize;
|
|
60
|
+
if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
|
|
61
|
+
reflowingRef.current = nextReflowing;
|
|
62
|
+
forceUpdate();
|
|
63
|
+
}
|
|
32
64
|
}, [
|
|
33
|
-
|
|
65
|
+
forceUpdate
|
|
34
66
|
]);
|
|
35
|
-
const
|
|
36
|
-
|
|
67
|
+
const ref = _react.useCallback((el)=>{
|
|
68
|
+
var _resizeObserverRef_current;
|
|
69
|
+
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
37
70
|
return;
|
|
38
71
|
}
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
if (entries[0].intersectionRatio < 1) {
|
|
47
|
-
setReflowing(true);
|
|
48
|
-
}
|
|
49
|
-
}, []);
|
|
50
|
-
const ref = _react.useMemo(()=>{
|
|
51
|
-
let resizeObserver = null;
|
|
52
|
-
let intersectionObserer = null;
|
|
53
|
-
return (el)=>{
|
|
54
|
-
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
55
|
-
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
56
|
-
intersectionObserer === null || intersectionObserer === void 0 ? void 0 : intersectionObserer.disconnect();
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
messageBarRef.current = el;
|
|
60
|
-
const win = targetDocument.defaultView;
|
|
61
|
-
resizeObserver = new win.ResizeObserver(handleResize);
|
|
62
|
-
intersectionObserer = new win.IntersectionObserver(handleIntersection, {
|
|
63
|
-
threshold: 1
|
|
64
|
-
});
|
|
65
|
-
intersectionObserer.observe(el);
|
|
66
|
-
resizeObserver.observe(el, {
|
|
67
|
-
box: 'border-box'
|
|
68
|
-
});
|
|
69
|
-
};
|
|
72
|
+
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
|
|
73
|
+
const win = targetDocument.defaultView;
|
|
74
|
+
const resizeObserver = new win.ResizeObserver(handleResize);
|
|
75
|
+
resizeObserverRef.current = resizeObserver;
|
|
76
|
+
resizeObserver.observe(el, {
|
|
77
|
+
box: 'border-box'
|
|
78
|
+
});
|
|
70
79
|
}, [
|
|
80
|
+
targetDocument,
|
|
71
81
|
handleResize,
|
|
72
|
-
|
|
73
|
-
enabled,
|
|
74
|
-
targetDocument
|
|
82
|
+
enabled
|
|
75
83
|
]);
|
|
84
|
+
_react.useEffect(()=>{
|
|
85
|
+
return ()=>{
|
|
86
|
+
var _resizeObserverRef_current;
|
|
87
|
+
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
|
|
88
|
+
};
|
|
89
|
+
}, []);
|
|
76
90
|
return {
|
|
77
91
|
ref,
|
|
78
|
-
reflowing
|
|
92
|
+
reflowing: reflowingRef.current
|
|
79
93
|
};
|
|
80
94
|
}
|
|
81
|
-
const isReflowing = (el)=>{
|
|
82
|
-
return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);
|
|
83
|
-
};
|
|
84
|
-
const isFullyInViewport = (el)=>{
|
|
85
|
-
const rect = el.getBoundingClientRect();
|
|
86
|
-
const doc = el.ownerDocument;
|
|
87
|
-
const win = doc.defaultView;
|
|
88
|
-
if (!win) {
|
|
89
|
-
return true;
|
|
90
|
-
}
|
|
91
|
-
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) && rect.right <= (win.innerWidth || doc.documentElement.clientWidth);
|
|
92
|
-
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n const { targetDocument } = useFluent();\n const forceUpdate = React.useReducer(() => ({}), {})[1];\n const reflowingRef = React.useRef(false);\n // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n const prevInlineSizeRef = React.useRef(-1);\n\n const handleResize: ResizeObserverCallback = React.useCallback(\n entries => {\n // Resize observer is only owned by this component - one resize observer entry expected\n // No need to support multiple fragments - one border box entry expected\n if (process.env.NODE_ENV !== 'production' && entries.length > 1) {\n // eslint-disable-next-line no-console\n console.error(\n [\n 'useMessageBarReflow: Resize observer should only have one entry. ',\n 'If multiple entries are observed, the first entry will be used.',\n 'This is a bug, please report it to the Fluent UI team.',\n ].join(' '),\n );\n }\n\n const entry = entries[0];\n // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4\n const inlineSize = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.target.getBoundingClientRect().width;\n\n if (inlineSize === undefined || !entry) {\n return;\n }\n\n const { target } = entry;\n\n if (!isHTMLElement(target)) {\n return;\n }\n\n let nextReflowing: boolean | undefined;\n\n // No easy way to really determine when the single line layout will fit\n // Just keep try to set single line layout as long as the size is growing\n // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case\n if (reflowingRef.current) {\n if (prevInlineSizeRef.current < inlineSize) {\n nextReflowing = false;\n }\n } else {\n const scrollWidth = target.scrollWidth;\n if (inlineSize < scrollWidth) {\n nextReflowing = true;\n }\n }\n\n prevInlineSizeRef.current = inlineSize;\n if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {\n reflowingRef.current = nextReflowing;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n const ref = React.useCallback(\n (el: HTMLElement | null) => {\n if (!enabled || !el || !targetDocument?.defaultView) {\n return;\n }\n\n resizeObserverRef.current?.disconnect();\n\n const win = targetDocument.defaultView;\n const resizeObserver = new win.ResizeObserver(handleResize);\n resizeObserverRef.current = resizeObserver;\n resizeObserver.observe(el, { box: 'border-box' });\n },\n [targetDocument, handleResize, enabled],\n );\n\n React.useEffect(() => {\n return () => {\n resizeObserverRef.current?.disconnect();\n };\n }, []);\n\n return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["useMessageBarReflow","enabled","targetDocument","useFluent","forceUpdate","React","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","entry","process","env","NODE_ENV","length","console","error","join","inlineSize","borderBoxSize","target","getBoundingClientRect","width","undefined","isHTMLElement","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-message-bar",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.3",
|
|
4
4
|
"description": "Fluent UI MessageBar component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-button": "^9.3.
|
|
21
|
+
"@fluentui/react-button": "^9.3.102",
|
|
22
22
|
"@fluentui/react-icons": "^2.0.245",
|
|
23
23
|
"@fluentui/react-jsx-runtime": "^9.0.50",
|
|
24
24
|
"@fluentui/react-motion": "^9.6.7",
|