@fluentui/react-message-bar 9.2.17 → 9.2.19

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +25 -2
  2. package/lib/components/MessageBar/useMessageBarReflow.js +62 -64
  3. package/lib/components/MessageBar/useMessageBarReflow.js.map +1 -1
  4. package/lib-commonjs/components/MessageBar/useMessageBarReflow.js +61 -63
  5. package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map +1 -1
  6. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,12 +1,35 @@
1
1
  # Change Log - @fluentui/react-message-bar
2
2
 
3
- This log was last generated on Mon, 09 Dec 2024 17:34:10 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 19 Dec 2024 14:30:31 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.2.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.19)
8
+
9
+ Thu, 19 Dec 2024 14:30:31 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.18..@fluentui/react-message-bar_v9.2.19)
11
+
12
+ ### Patches
13
+
14
+ - fix: MessageBar auto reflow should handle document reflow with `min-content` ([PR #33409](https://github.com/microsoft/fluentui/pull/33409) by lingfangao@hotmail.com)
15
+
16
+ ## [9.2.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.18)
17
+
18
+ Mon, 16 Dec 2024 16:26:49 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.17..@fluentui/react-message-bar_v9.2.18)
20
+
21
+ ### Patches
22
+
23
+ - Bump @fluentui/react-button to v9.3.98 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
24
+ - Bump @fluentui/react-jsx-runtime to v9.0.48 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
25
+ - Bump @fluentui/react-shared-contexts to v9.21.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
26
+ - Bump @fluentui/react-link to v9.3.5 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
27
+ - Bump @fluentui/react-theme to v9.1.24 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.18.19 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
29
+
7
30
  ## [9.2.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.17)
8
31
 
9
- Mon, 09 Dec 2024 17:34:10 GMT
32
+ Mon, 09 Dec 2024 17:38:16 GMT
10
33
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.16..@fluentui/react-message-bar_v9.2.17)
11
34
 
12
35
  ### Patches
package/lib/components/MessageBar/useMessageBarReflow.js CHANGED
@@ -1,83 +1,81 @@
1
1
  import * as React from 'react';
2
2
  import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
3
- import { isHTMLElement } from '@fluentui/react-utilities';
3
+ import { useIsomorphicLayoutEffect } 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);
10
6
  const prevInlineSizeRef = React.useRef(-1);
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)) {
7
+ const messageBarRef = React.useRef(null);
8
+ const [reflowing, setReflowing] = React.useState(false);
9
+ // This layout effect 'sanity checks' what observers have done
10
+ // since DOM has not been flushed when observers run
11
+ useIsomorphicLayoutEffect(()=>{
12
+ if (!messageBarRef.current) {
32
13
  return;
33
14
  }
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;
41
- }
42
- } else {
43
- const scrollWidth = target.scrollWidth;
44
- if (inlineSize < scrollWidth) {
45
- nextReflowing = true;
15
+ setReflowing((prevReflowing)=>{
16
+ if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {
17
+ return true;
46
18
  }
47
- }
48
- prevInlineSizeRef.current = inlineSize;
49
- if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
50
- reflowingRef.current = nextReflowing;
51
- forceUpdate();
52
- }
19
+ return prevReflowing;
20
+ });
53
21
  }, [
54
- forceUpdate
22
+ reflowing
55
23
  ]);
56
- const ref = React.useCallback((el)=>{
57
- var _resizeObserverRef_current;
58
- if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
24
+ const handleResize = React.useCallback(()=>{
25
+ if (!messageBarRef.current) {
59
26
  return;
60
27
  }
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
- });
28
+ const inlineSize = messageBarRef.current.getBoundingClientRect().width;
29
+ const scrollWidth = messageBarRef.current.scrollWidth;
30
+ const expanding = prevInlineSizeRef.current < inlineSize;
31
+ const overflowing = inlineSize < scrollWidth;
32
+ setReflowing(!expanding || overflowing);
33
+ }, []);
34
+ const handleIntersection = React.useCallback((entries)=>{
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
+ };
68
59
  }, [
69
- targetDocument,
70
60
  handleResize,
71
- enabled
61
+ handleIntersection,
62
+ enabled,
63
+ targetDocument
72
64
  ]);
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
- }, []);
79
65
  return {
80
66
  ref,
81
- reflowing: reflowingRef.current
67
+ reflowing
82
68
  };
83
69
  }
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
+ };
package/lib/components/MessageBar/useMessageBarReflow.js.map CHANGED
@@ -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 { 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"}
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 { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n const { targetDocument } = useFluent();\n const prevInlineSizeRef = React.useRef(-1);\n const messageBarRef = React.useRef<HTMLElement | null>(null);\n\n const [reflowing, setReflowing] = React.useState(false);\n\n // This layout effect 'sanity checks' what observers have done\n // since DOM has not been flushed when observers run\n useIsomorphicLayoutEffect(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n setReflowing(prevReflowing => {\n if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {\n return true;\n }\n\n return prevReflowing;\n });\n }, [reflowing]);\n\n const handleResize: ResizeObserverCallback = React.useCallback(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n const inlineSize = messageBarRef.current.getBoundingClientRect().width;\n const scrollWidth = messageBarRef.current.scrollWidth;\n\n const expanding = prevInlineSizeRef.current < inlineSize;\n const overflowing = inlineSize < scrollWidth;\n\n setReflowing(!expanding || overflowing);\n }, []);\n\n const handleIntersection: IntersectionObserverCallback = React.useCallback(entries => {\n if (entries[0].intersectionRatio < 1) {\n setReflowing(true);\n }\n }, []);\n\n const ref = React.useMemo(() => {\n let resizeObserver: ResizeObserver | null = null;\n let intersectionObserer: IntersectionObserver | null = null;\n\n return (el: HTMLElement | null) => {\n if (!enabled || !el || !targetDocument?.defaultView) {\n resizeObserver?.disconnect();\n intersectionObserer?.disconnect();\n return;\n }\n\n messageBarRef.current = el;\n\n const win = targetDocument.defaultView;\n resizeObserver = new win.ResizeObserver(handleResize);\n intersectionObserer = new win.IntersectionObserver(handleIntersection, { threshold: 1 });\n\n intersectionObserer.observe(el);\n resizeObserver.observe(el, { box: 'border-box' });\n };\n }, [handleResize, handleIntersection, enabled, targetDocument]);\n\n return { ref, reflowing };\n}\n\nconst isReflowing = (el: HTMLElement) => {\n return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);\n};\n\nconst isFullyInViewport = (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const doc = el.ownerDocument;\n const win = doc.defaultView;\n\n if (!win) {\n return true;\n }\n\n return (\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&\n rect.right <= (win.innerWidth || doc.documentElement.clientWidth)\n );\n};\n"],"names":["React","useFluent_unstable","useFluent","useIsomorphicLayoutEffect","useMessageBarReflow","enabled","targetDocument","prevInlineSizeRef","useRef","messageBarRef","reflowing","setReflowing","useState","current","prevReflowing","isReflowing","handleResize","useCallback","inlineSize","getBoundingClientRect","width","scrollWidth","expanding","overflowing","handleIntersection","entries","intersectionRatio","ref","useMemo","resizeObserver","intersectionObserer","el","defaultView","disconnect","win","ResizeObserver","IntersectionObserver","threshold","observe","box","offsetWidth","isFullyInViewport","rect","doc","ownerDocument","top","left","bottom","innerHeight","documentElement","clientHeight","right","innerWidth","clientWidth"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,OAAO,SAASC,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAC3B,MAAMK,oBAAoBP,MAAMQ,MAAM,CAAC,CAAC;IACxC,MAAMC,gBAAgBT,MAAMQ,MAAM,CAAqB;IAEvD,MAAM,CAACE,WAAWC,aAAa,GAAGX,MAAMY,QAAQ,CAAC;IAEjD,8DAA8D;IAC9D,oDAAoD;IACpDT,0BAA0B;QACxB,IAAI,CAACM,cAAcI,OAAO,EAAE;YAC1B;QACF;QAEAF,aAAaG,CAAAA;YACX,IAAI,CAACA,iBAAiBL,cAAcI,OAAO,IAAIE,YAAYN,cAAcI,OAAO,GAAG;gBACjF,OAAO;YACT;YAEA,OAAOC;QACT;IACF,GAAG;QAACJ;KAAU;IAEd,MAAMM,eAAuChB,MAAMiB,WAAW,CAAC;QAC7D,IAAI,CAACR,cAAcI,OAAO,EAAE;YAC1B;QACF;QAEA,MAAMK,aAAaT,cAAcI,OAAO,CAACM,qBAAqB,GAAGC,KAAK;QACtE,MAAMC,cAAcZ,cAAcI,OAAO,CAACQ,WAAW;QAErD,MAAMC,YAAYf,kBAAkBM,OAAO,GAAGK;QAC9C,MAAMK,cAAcL,aAAaG;QAEjCV,aAAa,CAACW,aAAaC;IAC7B,GAAG,EAAE;IAEL,MAAMC,qBAAmDxB,MAAMiB,WAAW,CAACQ,CAAAA;QACzE,IAAIA,OAAO,CAAC,EAAE,CAACC,iBAAiB,GAAG,GAAG;YACpCf,aAAa;QACf;IACF,GAAG,EAAE;IAEL,MAAMgB,MAAM3B,MAAM4B,OAAO,CAAC;QACxB,IAAIC,iBAAwC;QAC5C,IAAIC,sBAAmD;QAEvD,OAAO,CAACC;YACN,IAAI,CAAC1B,WAAW,CAAC0B,MAAM,EAACzB,2BAAAA,qCAAAA,eAAgB0B,WAAW,GAAE;gBACnDH,2BAAAA,qCAAAA,eAAgBI,UAAU;gBAC1BH,gCAAAA,0CAAAA,oBAAqBG,UAAU;gBAC/B;YACF;YAEAxB,cAAcI,OAAO,GAAGkB;YAExB,MAAMG,MAAM5B,eAAe0B,WAAW;YACtCH,iBAAiB,IAAIK,IAAIC,cAAc,CAACnB;YACxCc,sBAAsB,IAAII,IAAIE,oBAAoB,CAACZ,oBAAoB;gBAAEa,WAAW;YAAE;YAEtFP,oBAAoBQ,OAAO,CAACP;YAC5BF,eAAeS,OAAO,CAACP,IAAI;gBAAEQ,KAAK;YAAa;QACjD;IACF,GAAG;QAACvB;QAAcQ;QAAoBnB;QAASC;KAAe;IAE9D,OAAO;QAAEqB;QAAKjB;IAAU;AAC1B;AAEA,MAAMK,cAAc,CAACgB;IACnB,OAAOA,GAAGV,WAAW,GAAGU,GAAGS,WAAW,IAAI,CAACC,kBAAkBV;AAC/D;AAEA,MAAMU,oBAAoB,CAACV;IACzB,MAAMW,OAAOX,GAAGZ,qBAAqB;IACrC,MAAMwB,MAAMZ,GAAGa,aAAa;IAC5B,MAAMV,MAAMS,IAAIX,WAAW;IAE3B,IAAI,CAACE,KAAK;QACR,OAAO;IACT;IAEA,OACEQ,KAAKG,GAAG,IAAI,KACZH,KAAKI,IAAI,IAAI,KACbJ,KAAKK,MAAM,IAAKb,CAAAA,IAAIc,WAAW,IAAIL,IAAIM,eAAe,CAACC,YAAY,AAAD,KAClER,KAAKS,KAAK,IAAKjB,CAAAA,IAAIkB,UAAU,IAAIT,IAAIM,eAAe,CAACI,WAAW,AAAD;AAEnE"}
package/lib-commonjs/components/MessageBar/useMessageBarReflow.js CHANGED
@@ -14,81 +14,79 @@ 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);
21
17
  const prevInlineSizeRef = _react.useRef(-1);
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)) {
18
+ const messageBarRef = _react.useRef(null);
19
+ const [reflowing, setReflowing] = _react.useState(false);
20
+ // This layout effect 'sanity checks' what observers have done
21
+ // since DOM has not been flushed when observers run
22
+ (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
23
+ if (!messageBarRef.current) {
43
24
  return;
44
25
  }
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;
52
- }
53
- } else {
54
- const scrollWidth = target.scrollWidth;
55
- if (inlineSize < scrollWidth) {
56
- nextReflowing = true;
26
+ setReflowing((prevReflowing)=>{
27
+ if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {
28
+ return true;
57
29
  }
58
- }
59
- prevInlineSizeRef.current = inlineSize;
60
- if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
61
- reflowingRef.current = nextReflowing;
62
- forceUpdate();
63
- }
30
+ return prevReflowing;
31
+ });
64
32
  }, [
65
- forceUpdate
33
+ reflowing
66
34
  ]);
67
- const ref = _react.useCallback((el)=>{
68
- var _resizeObserverRef_current;
69
- if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
35
+ const handleResize = _react.useCallback(()=>{
36
+ if (!messageBarRef.current) {
70
37
  return;
71
38
  }
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
- });
39
+ const inlineSize = messageBarRef.current.getBoundingClientRect().width;
40
+ const scrollWidth = messageBarRef.current.scrollWidth;
41
+ const expanding = prevInlineSizeRef.current < inlineSize;
42
+ const overflowing = inlineSize < scrollWidth;
43
+ setReflowing(!expanding || overflowing);
44
+ }, []);
45
+ const handleIntersection = _react.useCallback((entries)=>{
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
+ };
79
70
  }, [
80
- targetDocument,
81
71
  handleResize,
82
- enabled
72
+ handleIntersection,
73
+ enabled,
74
+ targetDocument
83
75
  ]);
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
- }, []);
90
76
  return {
91
77
  ref,
92
- reflowing: reflowingRef.current
78
+ reflowing
93
79
  };
94
80
  }
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
+ };
package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map CHANGED
@@ -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 { 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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"}
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 { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n const { targetDocument } = useFluent();\n const prevInlineSizeRef = React.useRef(-1);\n const messageBarRef = React.useRef<HTMLElement | null>(null);\n\n const [reflowing, setReflowing] = React.useState(false);\n\n // This layout effect 'sanity checks' what observers have done\n // since DOM has not been flushed when observers run\n useIsomorphicLayoutEffect(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n setReflowing(prevReflowing => {\n if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {\n return true;\n }\n\n return prevReflowing;\n });\n }, [reflowing]);\n\n const handleResize: ResizeObserverCallback = React.useCallback(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n const inlineSize = messageBarRef.current.getBoundingClientRect().width;\n const scrollWidth = messageBarRef.current.scrollWidth;\n\n const expanding = prevInlineSizeRef.current < inlineSize;\n const overflowing = inlineSize < scrollWidth;\n\n setReflowing(!expanding || overflowing);\n }, []);\n\n const handleIntersection: IntersectionObserverCallback = React.useCallback(entries => {\n if (entries[0].intersectionRatio < 1) {\n setReflowing(true);\n }\n }, []);\n\n const ref = React.useMemo(() => {\n let resizeObserver: ResizeObserver | null = null;\n let intersectionObserer: IntersectionObserver | null = null;\n\n return (el: HTMLElement | null) => {\n if (!enabled || !el || !targetDocument?.defaultView) {\n resizeObserver?.disconnect();\n intersectionObserer?.disconnect();\n return;\n }\n\n messageBarRef.current = el;\n\n const win = targetDocument.defaultView;\n resizeObserver = new win.ResizeObserver(handleResize);\n intersectionObserer = new win.IntersectionObserver(handleIntersection, { threshold: 1 });\n\n intersectionObserer.observe(el);\n resizeObserver.observe(el, { box: 'border-box' });\n };\n }, [handleResize, handleIntersection, enabled, targetDocument]);\n\n return { ref, reflowing };\n}\n\nconst isReflowing = (el: HTMLElement) => {\n return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);\n};\n\nconst isFullyInViewport = (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const doc = el.ownerDocument;\n const win = doc.defaultView;\n\n if (!win) {\n return true;\n }\n\n return (\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&\n rect.right <= (win.innerWidth || doc.documentElement.clientWidth)\n );\n};\n"],"names":["useMessageBarReflow","enabled","targetDocument","useFluent","prevInlineSizeRef","React","useRef","messageBarRef","reflowing","setReflowing","useState","useIsomorphicLayoutEffect","current","prevReflowing","isReflowing","handleResize","useCallback","inlineSize","getBoundingClientRect","width","scrollWidth","expanding","overflowing","handleIntersection","entries","intersectionRatio","ref","useMemo","resizeObserver","intersectionObserer","el","defaultView","disconnect","win","ResizeObserver","IntersectionObserver","threshold","observe","box","offsetWidth","isFullyInViewport","rect","doc","ownerDocument","top","left","bottom","innerHeight","documentElement","clientHeight","right","innerWidth","clientWidth"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;qCACyB;gCACN;AAEnC,SAASA,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,oBAAoBC,OAAMC,MAAM,CAAC,CAAC;IACxC,MAAMC,gBAAgBF,OAAMC,MAAM,CAAqB;IAEvD,MAAM,CAACE,WAAWC,aAAa,GAAGJ,OAAMK,QAAQ,CAAC;IAEjD,8DAA8D;IAC9D,oDAAoD;IACpDC,IAAAA,yCAAAA,EAA0B;QACxB,IAAI,CAACJ,cAAcK,OAAO,EAAE;YAC1B;QACF;QAEAH,aAAaI,CAAAA;YACX,IAAI,CAACA,iBAAiBN,cAAcK,OAAO,IAAIE,YAAYP,cAAcK,OAAO,GAAG;gBACjF,OAAO;YACT;YAEA,OAAOC;QACT;IACF,GAAG;QAACL;KAAU;IAEd,MAAMO,eAAuCV,OAAMW,WAAW,CAAC;QAC7D,IAAI,CAACT,cAAcK,OAAO,EAAE;YAC1B;QACF;QAEA,MAAMK,aAAaV,cAAcK,OAAO,CAACM,qBAAqB,GAAGC,KAAK;QACtE,MAAMC,cAAcb,cAAcK,OAAO,CAACQ,WAAW;QAErD,MAAMC,YAAYjB,kBAAkBQ,OAAO,GAAGK;QAC9C,MAAMK,cAAcL,aAAaG;QAEjCX,aAAa,CAACY,aAAaC;IAC7B,GAAG,EAAE;IAEL,MAAMC,qBAAmDlB,OAAMW,WAAW,CAACQ,CAAAA;QACzE,IAAIA,OAAO,CAAC,EAAE,CAACC,iBAAiB,GAAG,GAAG;YACpChB,aAAa;QACf;IACF,GAAG,EAAE;IAEL,MAAMiB,MAAMrB,OAAMsB,OAAO,CAAC;QACxB,IAAIC,iBAAwC;QAC5C,IAAIC,sBAAmD;QAEvD,OAAO,CAACC;YACN,IAAI,CAAC7B,WAAW,CAAC6B,MAAM,CAAC5B,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB6B,WAAW,AAAXA,GAAa;gBACnDH,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBI,UAAU;gBAC1BH,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAqBG,UAAU;gBAC/B;YACF;YAEAzB,cAAcK,OAAO,GAAGkB;YAExB,MAAMG,MAAM/B,eAAe6B,WAAW;YACtCH,iBAAiB,IAAIK,IAAIC,cAAc,CAACnB;YACxCc,sBAAsB,IAAII,IAAIE,oBAAoB,CAACZ,oBAAoB;gBAAEa,WAAW;YAAE;YAEtFP,oBAAoBQ,OAAO,CAACP;YAC5BF,eAAeS,OAAO,CAACP,IAAI;gBAAEQ,KAAK;YAAa;QACjD;IACF,GAAG;QAACvB;QAAcQ;QAAoBtB;QAASC;KAAe;IAE9D,OAAO;QAAEwB;QAAKlB;IAAU;AAC1B;AAEA,MAAMM,cAAc,CAACgB;IACnB,OAAOA,GAAGV,WAAW,GAAGU,GAAGS,WAAW,IAAI,CAACC,kBAAkBV;AAC/D;AAEA,MAAMU,oBAAoB,CAACV;IACzB,MAAMW,OAAOX,GAAGZ,qBAAqB;IACrC,MAAMwB,MAAMZ,GAAGa,aAAa;IAC5B,MAAMV,MAAMS,IAAIX,WAAW;IAE3B,IAAI,CAACE,KAAK;QACR,OAAO;IACT;IAEA,OACEQ,KAAKG,GAAG,IAAI,KACZH,KAAKI,IAAI,IAAI,KACbJ,KAAKK,MAAM,IAAKb,CAAAA,IAAIc,WAAW,IAAIL,IAAIM,eAAe,CAACC,YAAY,AAAZA,KACvDR,KAAKS,KAAK,IAAKjB,CAAAA,IAAIkB,UAAU,IAAIT,IAAIM,eAAe,CAACI,WAAW,AAAXA;AAEzD"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-message-bar",
3
- "version": "9.2.17",
3
+ "version": "9.2.19",
4
4
  "description": "Fluent UI MessageBar component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -18,13 +18,13 @@
18
18
  "@fluentui/scripts-api-extractor": "*"
19
19
  },
20
20
  "dependencies": {
21
- "@fluentui/react-button": "^9.3.97",
21
+ "@fluentui/react-button": "^9.3.98",
22
22
  "@fluentui/react-icons": "^2.0.245",
23
- "@fluentui/react-jsx-runtime": "^9.0.47",
24
- "@fluentui/react-shared-contexts": "^9.21.1",
25
- "@fluentui/react-link": "^9.3.4",
26
- "@fluentui/react-theme": "^9.1.23",
27
- "@fluentui/react-utilities": "^9.18.18",
23
+ "@fluentui/react-jsx-runtime": "^9.0.48",
24
+ "@fluentui/react-shared-contexts": "^9.21.2",
25
+ "@fluentui/react-link": "^9.3.5",
26
+ "@fluentui/react-theme": "^9.1.24",
27
+ "@fluentui/react-utilities": "^9.18.19",
28
28
  "@griffel/react": "^1.5.22",
29
29
  "@swc/helpers": "^0.5.1",
30
30
  "react-transition-group": "^4.4.1"