@fluentui/react-message-bar 9.2.18 → 9.3.0

package/lib-commonjs/components/MessageBar/useMessageBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\nimport type { MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n  const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n  const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n  const autoReflow = layout === 'auto';\n  const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n  const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n  const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n  const actionsRef = React.useRef<HTMLDivElement | null>(null);\n  const bodyRef = React.useRef<HTMLDivElement | null>(null);\n  const { announce } = useAnnounce();\n  const titleId = useId();\n\n  React.useEffect(() => {\n    const bodyMessage = bodyRef.current?.textContent;\n    const actionsMessage = actionsRef.current?.textContent;\n\n    const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n    announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n  }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n  return {\n    components: {\n      root: 'div',\n      icon: 'div',\n      bottomReflowSpacer: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, reflowRef, nodeRef),\n        role: 'group',\n        'aria-labelledby': titleId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n\n    icon: slot.optional(props.icon, {\n      renderByDefault: true,\n      elementType: 'div',\n      defaultProps: { children: getIntentIcon(intent) },\n    }),\n    bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n      renderByDefault: computedLayout === 'multiline',\n      elementType: 'div',\n    }),\n    layout: computedLayout,\n    intent,\n    transitionClassName,\n    actionsRef,\n    bodyRef,\n    titleId,\n    shape,\n  };\n};\n"],"names":["useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","useMessageBarReflow","computedLayout","className","transitionClassName","nodeRef","useMessageBarTransitionContext","actionsRef","React","useRef","bodyRef","announce","useAnnounce","titleId","useId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType","optional","renderByDefault","defaultProps","children","getIntentIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;iEAjBU;gCAC8C;qCACzC;+BAEE;qCACM;6CACW;AAWxC,MAAMA,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqBF,CAAAA,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,aAAcD,WAAW,MAAA,IAAS,WAAW;IACxE,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGC,IAAAA,wCAAAA,EAAoBH;IAC1D,MAAMI,iBAAiBJ,aAAcE,YAAY,cAAc,eAAgBP;IAC/E,MAAM,EAAEU,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGC,IAAAA,2DAAAA;IACpD,MAAMC,aAAaC,OAAMC,MAAM,CAAwB;IACvD,MAAMC,UAAUF,OAAMC,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGC,IAAAA,gCAAAA;IACrB,MAAMC,UAAUC,IAAAA,qBAAAA;IAEhBN,OAAMO,SAAS,CAAC;YACML,kBACGH;QADvB,MAAMS,cAAAA,AAAcN,CAAAA,mBAAAA,QAAQO,OAAO,AAAPA,MAAO,QAAfP,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBQ,WAAW;QAChD,MAAMC,iBAAAA,AAAiBZ,CAAAA,sBAAAA,WAAWU,OAAO,AAAPA,MAAO,QAAlBV,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBW,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEZ,SAASS,SAAS;YAAEI,QAAQ3B,uBAAuB;YAAU4B,OAAO5B,uBAAuB;QAAY;IACzG,GAAG;QAACa;QAASH;QAAYI;QAAUd;KAAmB;IAEtD,OAAO;QACL6B,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BxC,KAAKyC,IAAAA,6BAAAA,EAAczC,KAAKO,WAAWM;YACnC6B,MAAM;YACN,mBAAmBrB;YACnB,GAAGtB,KAAK;QACV,IACA;YAAE4C,aAAa;QAAM;QAGvBP,MAAME,oBAAAA,CAAKM,QAAQ,CAAC7C,MAAMqC,IAAI,EAAE;YAC9BS,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAUC,IAAAA,4BAAAA,EAAc9C;YAAQ;QAClD;QACAmC,oBAAoBC,oBAAAA,CAAKM,QAAQ,CAAC7C,MAAMsC,kBAAkB,EAAE;YAC1DQ,iBAAiBnC,mBAAmB;YACpCiC,aAAa;QACf;QACA1C,QAAQS;QACRR;QACAU;QACAG;QACAG;QACAG;QACAjB;IACF;AACF"}
+{"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\nimport type { MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n  const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n  const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n  const autoReflow = layout === 'auto';\n  const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n  const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n  // eslint-disable-next-line deprecation/deprecation\n  const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n  const actionsRef = React.useRef<HTMLDivElement | null>(null);\n  const bodyRef = React.useRef<HTMLDivElement | null>(null);\n  const { announce } = useAnnounce();\n  const titleId = useId();\n\n  React.useEffect(() => {\n    const bodyMessage = bodyRef.current?.textContent;\n    const actionsMessage = actionsRef.current?.textContent;\n\n    const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n    announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n  }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n  return {\n    components: {\n      root: 'div',\n      icon: 'div',\n      bottomReflowSpacer: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, reflowRef, nodeRef),\n        role: 'group',\n        'aria-labelledby': titleId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n\n    icon: slot.optional(props.icon, {\n      renderByDefault: true,\n      elementType: 'div',\n      defaultProps: { children: getIntentIcon(intent) },\n    }),\n    bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n      renderByDefault: computedLayout === 'multiline',\n      elementType: 'div',\n    }),\n    layout: computedLayout,\n    intent,\n    transitionClassName,\n    actionsRef,\n    bodyRef,\n    titleId,\n    shape,\n  };\n};\n"],"names":["useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","useMessageBarReflow","computedLayout","className","transitionClassName","nodeRef","useMessageBarTransitionContext","actionsRef","React","useRef","bodyRef","announce","useAnnounce","titleId","useId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType","optional","renderByDefault","defaultProps","children","getIntentIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;;iEAjBU;gCAC8C;qCACzC;+BAEE;qCACM;6CACW;AAWxC,MAAMA,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqBF,CAAAA,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,aAAcD,WAAW,MAAA,IAAS,WAAW;IACxE,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGC,IAAAA,wCAAAA,EAAoBH;IAC1D,MAAMI,iBAAiBJ,aAAcE,YAAY,cAAc,eAAgBP;IAC/E,mDAAmD;IACnD,MAAM,EAAEU,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGC,IAAAA,2DAAAA;IACpD,MAAMC,aAAaC,OAAMC,MAAM,CAAwB;IACvD,MAAMC,UAAUF,OAAMC,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGC,IAAAA,gCAAAA;IACrB,MAAMC,UAAUC,IAAAA,qBAAAA;IAEhBN,OAAMO,SAAS,CAAC;YACML,kBACGH;QADvB,MAAMS,cAAAA,AAAcN,CAAAA,mBAAAA,QAAQO,OAAO,AAAPA,MAAO,QAAfP,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBQ,WAAW;QAChD,MAAMC,iBAAAA,AAAiBZ,CAAAA,sBAAAA,WAAWU,OAAO,AAAPA,MAAO,QAAlBV,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBW,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEZ,SAASS,SAAS;YAAEI,QAAQ3B,uBAAuB;YAAU4B,OAAO5B,uBAAuB;QAAY;IACzG,GAAG;QAACa;QAASH;QAAYI;QAAUd;KAAmB;IAEtD,OAAO;QACL6B,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BxC,KAAKyC,IAAAA,6BAAAA,EAAczC,KAAKO,WAAWM;YACnC6B,MAAM;YACN,mBAAmBrB;YACnB,GAAGtB,KAAK;QACV,IACA;YAAE4C,aAAa;QAAM;QAGvBP,MAAME,oBAAAA,CAAKM,QAAQ,CAAC7C,MAAMqC,IAAI,EAAE;YAC9BS,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAUC,IAAAA,4BAAAA,EAAc9C;YAAQ;QAClD;QACAmC,oBAAoBC,oBAAAA,CAAKM,QAAQ,CAAC7C,MAAMsC,kBAAkB,EAAE;YAC1DQ,iBAAiBnC,mBAAmB;YACpCiC,aAAa;QACf;QACA1C,QAAQS;QACRR;QACAU;QACAG;QACAG;QACAG;QACAjB;IACF;AACF"}

package/lib-commonjs/components/MessageBar/useMessageBarReflow.js

@@ -14,81 +14,79 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _reactutilities = require("@fluentui/react-utilities");
 function useMessageBarReflow(enabled = false) {
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const forceUpdate = _react.useReducer(()=>({}), {})[1];
-    const reflowingRef = _react.useRef(false);
-    // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
-    const resizeObserverRef = _react.useRef(null);
     const prevInlineSizeRef = _react.useRef(-1);
-    const handleResize = _react.useCallback((entries)=>{
-        var _entry_borderBoxSize_, _entry_borderBoxSize;
-        // Resize observer is only owned by this component - one resize observer entry expected
-        // No need to support multiple fragments - one border box entry expected
-        if (process.env.NODE_ENV !== 'production' && entries.length > 1) {
-            // eslint-disable-next-line no-console
-            console.error([
-                'useMessageBarReflow: Resize observer should only have one entry. ',
-                'If multiple entries are observed, the first entry will be used.',
-                'This is a bug, please report it to the Fluent UI team.'
-            ].join(' '));
-        }
-        const entry = entries[0];
-        var _entry_borderBoxSize__inlineSize;
-        // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
-        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;
-        if (inlineSize === undefined || !entry) {
-            return;
-        }
-        const { target } = entry;
-        if (!(0, _reactutilities.isHTMLElement)(target)) {
+    const messageBarRef = _react.useRef(null);
+    const [reflowing, setReflowing] = _react.useState(false);
+    // This layout effect 'sanity checks' what observers have done
+    // since DOM has not been flushed when observers run
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (!messageBarRef.current) {
             return;
         }
-        let nextReflowing;
-        // No easy way to really determine when the single line layout will fit
-        // Just keep try to set single line layout as long as the size is growing
-        // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
-        if (reflowingRef.current) {
-            if (prevInlineSizeRef.current < inlineSize) {
-                nextReflowing = false;
-            }
-        } else {
-            const scrollWidth = target.scrollWidth;
-            if (inlineSize < scrollWidth) {
-                nextReflowing = true;
+        setReflowing((prevReflowing)=>{
+            if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {
+                return true;
             }
-        }
-        prevInlineSizeRef.current = inlineSize;
-        if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
-            reflowingRef.current = nextReflowing;
-            forceUpdate();
-        }
+            return prevReflowing;
+        });
     }, [
-        forceUpdate
+        reflowing
     ]);
-    const ref = _react.useCallback((el)=>{
-        var _resizeObserverRef_current;
-        if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
+    const handleResize = _react.useCallback(()=>{
+        if (!messageBarRef.current) {
             return;
         }
-        (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
-        const win = targetDocument.defaultView;
-        const resizeObserver = new win.ResizeObserver(handleResize);
-        resizeObserverRef.current = resizeObserver;
-        resizeObserver.observe(el, {
-            box: 'border-box'
-        });
+        const inlineSize = messageBarRef.current.getBoundingClientRect().width;
+        const scrollWidth = messageBarRef.current.scrollWidth;
+        const expanding = prevInlineSizeRef.current < inlineSize;
+        const overflowing = inlineSize < scrollWidth;
+        setReflowing(!expanding || overflowing);
+    }, []);
+    const handleIntersection = _react.useCallback((entries)=>{
+        if (entries[0].intersectionRatio < 1) {
+            setReflowing(true);
+        }
+    }, []);
+    const ref = _react.useMemo(()=>{
+        let resizeObserver = null;
+        let intersectionObserer = null;
+        return (el)=>{
+            if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
+                resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+                intersectionObserer === null || intersectionObserer === void 0 ? void 0 : intersectionObserer.disconnect();
+                return;
+            }
+            messageBarRef.current = el;
+            const win = targetDocument.defaultView;
+            resizeObserver = new win.ResizeObserver(handleResize);
+            intersectionObserer = new win.IntersectionObserver(handleIntersection, {
+                threshold: 1
+            });
+            intersectionObserer.observe(el);
+            resizeObserver.observe(el, {
+                box: 'border-box'
+            });
+        };
     }, [
-        targetDocument,
         handleResize,
-        enabled
+        handleIntersection,
+        enabled,
+        targetDocument
     ]);
-    _react.useEffect(()=>{
-        return ()=>{
-            var _resizeObserverRef_current;
-            (_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
-        };
-    }, []);
     return {
         ref,
-        reflowing: reflowingRef.current
+        reflowing
     };
 }
+const isReflowing = (el)=>{
+    return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);
+};
+const isFullyInViewport = (el)=>{
+    const rect = el.getBoundingClientRect();
+    const doc = el.ownerDocument;
+    const win = doc.defaultView;
+    if (!win) {
+        return true;
+    }
+    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) && rect.right <= (win.innerWidth || doc.documentElement.clientWidth);
+};

package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map

@@ -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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"}
+{"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/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js

@@ -163,7 +163,7 @@ const useMessageBarStyles_unstable = (state)=>{
     const rootIntentStyles = useRootIntentStyles();
     const reflowSpacerStyles = useReflowSpacerBaseStyles();
     const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
     if (state.icon) {
         state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
     }

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n    root: 'fui-MessageBar',\n    icon: 'fui-MessageBar__icon',\n    bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n    whiteSpace: 'nowrap',\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto auto',\n    gridTemplateRows: '1fr',\n    gridTemplateAreas: '\"icon body secondaryActions actions\"',\n    paddingLeft: tokens.spacingHorizontalM,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderRadius: tokens.borderRadiusMedium,\n    alignItems: 'center',\n    minHeight: '36px',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground3\n});\nconst useIconBaseStyles = makeResetStyles({\n    gridArea: 'icon',\n    fontSize: tokens.fontSizeBase500,\n    marginRight: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground3,\n    display: 'flex',\n    alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n    marginBottom: tokens.spacingVerticalS,\n    gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n    rootMultiline: {\n        whiteSpace: 'normal',\n        alignItems: 'start',\n        paddingTop: tokens.spacingVerticalMNudge,\n        gridTemplateColumns: 'auto 1fr auto',\n        gridTemplateAreas: `\n      \"icon body actions\"\n      \"secondaryActions secondaryActions secondaryActions\"\n    `\n    },\n    secondaryActionsMultiline: {\n        justifyContent: 'end',\n        marginTop: tokens.spacingVerticalMNudge,\n        marginBottom: tokens.spacingVerticalS,\n        marginRight: '0px'\n    },\n    square: {\n        borderRadius: '0'\n    }\n});\nconst useIconIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        color: tokens.colorStatusDangerForeground1\n    },\n    warning: {\n        color: tokens.colorStatusWarningForeground3\n    },\n    success: {\n        color: tokens.colorStatusSuccessForeground1\n    }\n});\nconst useRootIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        backgroundColor: tokens.colorStatusDangerBackground1,\n        ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n    },\n    warning: {\n        backgroundColor: tokens.colorStatusWarningBackground1,\n        ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n    },\n    success: {\n        backgroundColor: tokens.colorStatusSuccessBackground1,\n        ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n    }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconIntentStyles = useIconIntentStyles();\n    const rootIntentStyles = useRootIntentStyles();\n    const reflowSpacerStyles = useReflowSpacerBaseStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.transitionClassName, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n    }\n    if (state.bottomReflowSpacer) {\n        state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n    }\n    return state;\n};\n"],"names":["messageBarClassNames","useMessageBarStyles_unstable","root","icon","bottomReflowSpacer","useRootBaseStyles","__resetStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","__styles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","mergeClasses","layout","shape","intent","transitionClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useMessageBarStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarClassNames = {\n    root: 'fui-MessageBar',\n    icon: 'fui-MessageBar__icon',\n    bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer'\n};\nconst useRootBaseStyles = makeResetStyles({\n    whiteSpace: 'nowrap',\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto auto',\n    gridTemplateRows: '1fr',\n    gridTemplateAreas: '\"icon body secondaryActions actions\"',\n    paddingLeft: tokens.spacingHorizontalM,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderRadius: tokens.borderRadiusMedium,\n    alignItems: 'center',\n    minHeight: '36px',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground3\n});\nconst useIconBaseStyles = makeResetStyles({\n    gridArea: 'icon',\n    fontSize: tokens.fontSizeBase500,\n    marginRight: tokens.spacingHorizontalS,\n    color: tokens.colorNeutralForeground3,\n    display: 'flex',\n    alignItems: 'center'\n});\nconst useReflowSpacerBaseStyles = makeResetStyles({\n    marginBottom: tokens.spacingVerticalS,\n    gridArea: 'secondaryActions'\n});\nconst useStyles = makeStyles({\n    rootMultiline: {\n        whiteSpace: 'normal',\n        alignItems: 'start',\n        paddingTop: tokens.spacingVerticalMNudge,\n        gridTemplateColumns: 'auto 1fr auto',\n        gridTemplateAreas: `\n      \"icon body actions\"\n      \"secondaryActions secondaryActions secondaryActions\"\n    `\n    },\n    secondaryActionsMultiline: {\n        justifyContent: 'end',\n        marginTop: tokens.spacingVerticalMNudge,\n        marginBottom: tokens.spacingVerticalS,\n        marginRight: '0px'\n    },\n    square: {\n        borderRadius: '0'\n    }\n});\nconst useIconIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        color: tokens.colorStatusDangerForeground1\n    },\n    warning: {\n        color: tokens.colorStatusWarningForeground3\n    },\n    success: {\n        color: tokens.colorStatusSuccessForeground1\n    }\n});\nconst useRootIntentStyles = makeStyles({\n    info: {\n    },\n    error: {\n        backgroundColor: tokens.colorStatusDangerBackground1,\n        ...shorthands.borderColor(tokens.colorStatusDangerBorder1)\n    },\n    warning: {\n        backgroundColor: tokens.colorStatusWarningBackground1,\n        ...shorthands.borderColor(tokens.colorStatusWarningBorder1)\n    },\n    success: {\n        backgroundColor: tokens.colorStatusSuccessBackground1,\n        ...shorthands.borderColor(tokens.colorStatusSuccessBorder1)\n    }\n});\n/**\n * Apply styling to the MessageBar slots based on the state\n */ export const useMessageBarStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconIntentStyles = useIconIntentStyles();\n    const rootIntentStyles = useRootIntentStyles();\n    const reflowSpacerStyles = useReflowSpacerBaseStyles();\n    const styles = useStyles();\n    state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);\n    }\n    if (state.bottomReflowSpacer) {\n        state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n    }\n    return state;\n};\n"],"names":["messageBarClassNames","useMessageBarStyles_unstable","root","icon","bottomReflowSpacer","useRootBaseStyles","__resetStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","__styles","rootMultiline","Huce71","Bt984gj","z8tnut","Budl1dq","zoa1oz","secondaryActionsMultiline","Brf1p80","B6of3ja","jrapky","t21cq0","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","useIconIntentStyles","info","error","sj55zd","warning","success","useRootIntentStyles","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","mergeClasses","layout","shape","intent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.motions.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MessageBarMotion", {
+    enumerable: true,
+    get: function() {
+        return MessageBarMotion;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+/**
+ * Generates a motion atom object for a fade in or fade out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param fromValue - The starting opacity value. Defaults to 0.
+ * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
+ */ const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromValue = 0 })=>{
+    const keyframes = [
+        {
+            opacity: fromValue
+        },
+        {
+            opacity: 1
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};
+/**
+ * Generates a motion atom object for an X or Y translation, from a specified distance to zero.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param axis - The axis of the translation: 'X' or 'Y'.
+ * @param fromValue - The starting position of the slide; it can be a percentage or pixels.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.
+ */ const slideAtom = ({ direction, axis, fromValue, duration, easing = _reactmotion.motionTokens.curveDecelerateMid })=>{
+    const keyframes = [
+        {
+            transform: `translate${axis}(${fromValue})`
+        },
+        {
+            transform: `translate${axis}(0)`
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};
+const MessageBarMotion = (0, _reactmotion.createPresenceComponent)(({ animate })=>{
+    const duration = _reactmotion.motionTokens.durationGentle;
+    return {
+        enter: animate === 'both' ? [
+            fadeAtom({
+                direction: 'enter',
+                duration
+            }),
+            slideAtom({
+                direction: 'enter',
+                axis: 'Y',
+                fromValue: '-100%',
+                duration
+            })
+        ] : [],
+        // Always exit with a fade
+        exit: fadeAtom({
+            direction: 'exit',
+            duration
+        })
+    };
+});

package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.motions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.motions.tsx"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } from '@fluentui/react-motion';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\n// TODO: import these atoms from react-motion-components-preview once they're available there\n\ninterface FadeAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromValue?: number;\n}\n\n/**\n * Generates a motion atom object for a fade in or fade out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nconst fadeAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  fromValue = 0,\n}: FadeAtomParams): AtomMotion => {\n  const keyframes = [{ opacity: fromValue }, { opacity: 1 }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n\n/**\n * Generates a motion atom object for an X or Y translation, from a specified distance to zero.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param axis - The axis of the translation: 'X' or 'Y'.\n * @param fromValue - The starting position of the slide; it can be a percentage or pixels.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.\n */\nconst slideAtom = ({\n  direction,\n  axis,\n  fromValue,\n  duration,\n  easing = motionTokens.curveDecelerateMid,\n}: {\n  direction: PresenceDirection;\n  axis: 'X' | 'Y';\n  fromValue: string;\n  duration: number;\n  easing?: string;\n}): AtomMotion => {\n  const keyframes = [{ transform: `translate${axis}(${fromValue})` }, { transform: `translate${axis}(0)` }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n\n/**\n * A presence component for a MessageBar to enter and exit from a MessageBarGroup.\n * It has an optional enter transition of a slide-in and fade-in,\n * when the `animate` prop is set to `'both'`.\n * It always has an exit transition of a fade-out.\n */\nexport const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>(\n  ({ animate }) => {\n    const duration = motionTokens.durationGentle;\n\n    return {\n      enter:\n        animate === 'both'\n          ? // enter with slide and fade\n            [\n              fadeAtom({ direction: 'enter', duration }),\n              slideAtom({ direction: 'enter', axis: 'Y', fromValue: '-100%', duration }),\n            ]\n          : [], // no enter motion\n\n      // Always exit with a fade\n      exit: fadeAtom({ direction: 'exit', duration }),\n    };\n  },\n);\n"],"names":["MessageBarMotion","fadeAtom","direction","duration","easing","motionTokens","curveLinear","fromValue","keyframes","opacity","reverse","slideAtom","axis","curveDecelerateMid","transform","createPresenceComponent","animate","durationGentle","enter","exit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2EaA;;;eAAAA;;;6BA3EwE;AAYrF;;;;;;;CAOC,GACD,MAAMC,WAAW,CAAC,EAChBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAAA,CAAaC,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF;AAEA;;;;;;;CAOC,GACD,MAAMO,YAAY,CAAC,EACjBT,SAAS,EACTU,IAAI,EACJL,SAAS,EACTJ,QAAQ,EACRC,SAASC,yBAAAA,CAAaQ,kBAAkB,EAOzC;IACC,MAAML,YAAY;QAAC;YAAEM,WAAW,CAAC,SAAS,EAAEF,KAAK,CAAC,EAAEL,UAAU,CAAC,CAAC;QAAC;QAAG;YAAEO,WAAW,CAAC,SAAS,EAAEF,KAAK,GAAG,CAAC;QAAC;KAAE;IACzG,IAAIV,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF;AAQO,MAAMJ,mBAAmBe,IAAAA,oCAAAA,EAC9B,CAAC,EAAEC,OAAO,EAAE;IACV,MAAMb,WAAWE,yBAAAA,CAAaY,cAAc;IAE5C,OAAO;QACLC,OACEF,YAAY,SAER;YACEf,SAAS;gBAAEC,WAAW;gBAASC;YAAS;YACxCQ,UAAU;gBAAET,WAAW;gBAASU,MAAM;gBAAKL,WAAW;gBAASJ;YAAS;SACzE,GACD,EAAE;QAER,0BAA0B;QAC1BgB,MAAMlB,SAAS;YAAEC,WAAW;YAAQC;QAAS;IAC/C;AACF"}

package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MessageBarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MessageBarGroup Props\n */\nexport type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {\n  children: React.ReactElement[] | React.ReactElement;\n  animate?: 'exit-only' | 'both';\n};\n\n/**\n * State used in rendering MessageBarGroup\n */\nexport type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &\n  Pick<MessageBarGroupProps, 'animate'> & {\n    enterStyles: string;\n    exitStyles: string;\n    children: React.ReactElement[];\n  };\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEACuB"}
+{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MessageBarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MessageBarGroup Props\n */\nexport type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {\n  children: React.ReactElement[] | React.ReactElement;\n  animate?: 'exit-only' | 'both';\n};\n\n/**\n * State used in rendering MessageBarGroup\n */\nexport type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &\n  Pick<MessageBarGroupProps, 'animate'> & {\n    /** @deprecated property is unused; these CSS animations were replaced by motion components */\n    enterStyles: string;\n    /** @deprecated property is unused; these CSS animations were replaced by motion components */\n    exitStyles: string;\n    children: React.ReactElement[];\n  };\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEACuB"}

package/lib-commonjs/components/MessageBarGroup/renderMessageBarGroup.js

@@ -10,17 +10,14 @@ Object.defineProperty(exports, "renderMessageBarGroup_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const _reacttransitiongroup = require("react-transition-group");
-const _MessageBarTransition = require("./MessageBarTransition");
+const _reactmotion = require("@fluentui/react-motion");
+const _MessageBarGroupmotions = require("./MessageBarGroup.motions");
 const renderMessageBarGroup_unstable = (state)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttransitiongroup.TransitionGroup, {
-            component: null,
-            children: state.children.map((child)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MessageBarTransition.MessageBarTransition, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.PresenceGroup, {
+            children: state.children.map((child)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MessageBarGroupmotions.MessageBarMotion, {
                     animate: state.animate,
-                    enterClassName: state.enterStyles,
-                    exitClassName: state.exitStyles,
                     children: child
                 }, child.key))
         })

package/lib-commonjs/components/MessageBarGroup/renderMessageBarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarGroup/renderMessageBarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport { TransitionGroup } from 'react-transition-group';\nimport { MessageBarTransition } from './MessageBarTransition';\n\n/**\n * Render the final JSX of MessageBarGroup\n */\nexport const renderMessageBarGroup_unstable = (state: MessageBarGroupState) => {\n  assertSlots<MessageBarGroupSlots>(state);\n\n  return (\n    <state.root>\n      <TransitionGroup component={null}>\n        {state.children.map(child => (\n          <MessageBarTransition\n            animate={state.animate}\n            key={child.key}\n            enterClassName={state.enterStyles}\n            exitClassName={state.exitStyles}\n          >\n            {child}\n          </MessageBarTransition>\n        ))}\n      </TransitionGroup>\n    </state.root>\n  );\n};\n"],"names":["renderMessageBarGroup_unstable","state","assertSlots","_jsx","root","TransitionGroup","component","children","map","child","MessageBarTransition","animate","enterClassName","enterStyles","exitClassName","exitStyles","key"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;sCAEI;sCACK;AAK9B,MAAMA,iCAAiC,CAACC;IAC7CC,IAAAA,2BAAAA,EAAkCD;IAElC,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,qCAAAA,EAAAA;YAAgBC,WAAW;sBACzBL,MAAMM,QAAQ,CAACC,GAAG,CAACC,CAAAA,QAAAA,WAAAA,GAClBN,IAAAA,eAAA,EAACO,0CAAAA,EAAAA;oBACCC,SAASV,MAAMU,OAAO;oBAEtBC,gBAAgBX,MAAMY,WAAW;oBACjCC,eAAeb,MAAMc,UAAU;8BAE9BN;mBAJIA,MAAMO,GAAG;;;AAU1B"}
+{"version":3,"sources":["../src/components/MessageBarGroup/renderMessageBarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport { PresenceGroup } from '@fluentui/react-motion';\nimport { MessageBarMotion } from './MessageBarGroup.motions';\n\n/**\n * Render the final JSX of MessageBarGroup\n */\nexport const renderMessageBarGroup_unstable = (state: MessageBarGroupState) => {\n  assertSlots<MessageBarGroupSlots>(state);\n\n  return (\n    <state.root>\n      <PresenceGroup>\n        {state.children.map(child => (\n          <MessageBarMotion key={child.key} animate={state.animate}>\n            {child}\n          </MessageBarMotion>\n        ))}\n      </PresenceGroup>\n    </state.root>\n  );\n};\n"],"names":["renderMessageBarGroup_unstable","state","assertSlots","_jsx","root","PresenceGroup","children","map","child","MessageBarMotion","animate","key"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;6BAEE;wCACG;AAK1B,MAAMA,iCAAiC,CAACC;IAC7CC,IAAAA,2BAAAA,EAAkCD;IAElC,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0BAAAA,EAAAA;sBACEJ,MAAMK,QAAQ,CAACC,GAAG,CAACC,CAAAA,QAAAA,WAAAA,GAClBL,IAAAA,eAAA,EAACM,wCAAAA,EAAAA;oBAAiCC,SAAST,MAAMS,OAAO;8BACrDF;mBADoBA,MAAMG,GAAG;;;AAO1C"}

package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js

@@ -20,36 +20,8 @@ const _react = require("@griffel/react");
 const messageBarGroupClassNames = {
     root: 'fui-MessageBarGroup'
 };
-/**
- * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    base: {
-        Bf5fcs: "f4cll0y",
-        vin17d: "fy8si0b"
-    },
-    enter: {
-        Bv12yb3: "f1dg9w1v"
-    },
-    exit: {
-        Bv12yb3: "fu80iee"
-    }
-}, {
-    d: [
-        ".f4cll0y{animation-fill-mode:forwards;}",
-        ".fy8si0b{animation-duration:var(--durationNormal);}",
-        ".f1dg9w1v{animation-name:fngeioi;}",
-        ".fu80iee{animation-name:fk0lfw7;}"
-    ],
-    k: [
-        "@keyframes fngeioi{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}}",
-        "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}"
-    ]
-});
 const useMessageBarGroupStyles_unstable = (state)=>{
     'use no memo';
-    const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(messageBarGroupClassNames.root, state.root.className);
-    state.enterStyles = (0, _react.mergeClasses)(styles.base, styles.enter);
-    state.exitStyles = (0, _react.mergeClasses)(styles.base, styles.exit);
     return state;
 };

package/lib-commonjs/components/MessageBarGroup/useMessageBarGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarGroupClassNames = {\n    root: 'fui-MessageBarGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    base: {\n        animationFillMode: 'forwards',\n        animationDuration: tokens.durationNormal\n    },\n    enter: {\n        animationName: {\n            from: {\n                opacity: 0,\n                transform: 'translateY(-100%)'\n            },\n            to: {\n                opacity: 1,\n                transform: 'translateY(0)'\n            }\n        }\n    },\n    exit: {\n        animationName: {\n            from: {\n                opacity: 1\n            },\n            to: {\n                opacity: 0\n            }\n        }\n    }\n});\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n    state.enterStyles = mergeClasses(styles.base, styles.enter);\n    state.exitStyles = mergeClasses(styles.base, styles.exit);\n    return state;\n};\n"],"names":["messageBarGroupClassNames","useMessageBarGroupStyles_unstable","root","useStyles","__styles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","state","styles","className","mergeClasses","enterStyles","exitStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,yBAAyB;eAAzBA;;IAmCIC,iCAAiC;eAAjCA;;;uBArCwB;AAElC,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAD,SAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AA8BX,MAAMX,oCAAqCY,CAAAA;IAClD;IACA,MAAMC,SAASX;IACfU,MAAMX,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,0BAA0BE,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IACxFF,MAAMI,WAAW,GAAGD,IAAAA,mBAAY,EAACF,OAAOT,IAAI,EAAES,OAAON,KAAK;IAC1DK,MAAMK,UAAU,GAAGF,IAAAA,mBAAY,EAACF,OAAOT,IAAI,EAAES,OAAOJ,IAAI;IACxD,OAAOG;AACX"}
+{"version":3,"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const messageBarGroupClassNames = {\n    root: 'fui-MessageBarGroup'\n};\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n    return state;\n};\n"],"names":["messageBarGroupClassNames","useMessageBarGroupStyles_unstable","root","state","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,yBAAyB;eAAzBA;;IAKIC,iCAAiC;eAAjCA;;;uBANY;AACtB,MAAMD,4BAA4B;IACrCE,MAAM;AACV;AAGW,MAAMD,oCAAqCE,CAAAA;IAClD;IACAA,MAAMD,IAAI,CAACE,SAAS,GAAGC,IAAAA,mBAAY,EAACL,0BAA0BE,IAAI,EAAEC,MAAMD,IAAI,CAACE,SAAS;IACxF,OAAOD;AACX"}

package/lib-commonjs/contexts/messageBarTransitionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/messageBarTransitionContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MessageBarTransitionContextValue = {\n  className: string;\n  nodeRef: React.Ref<HTMLDivElement | null>;\n};\n\nconst messageBarTransitionContext = React.createContext<MessageBarTransitionContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue = {\n  className: '',\n  nodeRef: React.createRef<HTMLDivElement | null>(),\n};\n\n/**\n * Context to pass animation className to MessageBar components\n * @internal\n */\nexport const MessageBarTransitionContextProvider = messageBarTransitionContext.Provider;\n/**\n * @internal\n */\nexport const useMessageBarTransitionContext = () =>\n  React.useContext(messageBarTransitionContext) ?? messageBarTransitionContextDefaultValue;\n"],"names":["MessageBarTransitionContextProvider","messageBarTransitionContextDefaultValue","useMessageBarTransitionContext","messageBarTransitionContext","React","createContext","undefined","className","nodeRef","createRef","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqBaA,mCAAAA;eAAAA;;IATAC,uCAAAA;eAAAA;;IAaAC,8BAAAA;eAAAA;;;;iEAzBU;AAOvB,MAAMC,4CAA8BC,OAAMC,aAAa,CAA+CC;AAK/F,MAAML,0CAA4E;IACvFM,WAAW;IACXC,uBAASJ,OAAMK,SAAS;AAC1B;AAMO,MAAMT,sCAAsCG,4BAA4BO,QAAQ;AAIhF,MAAMR,iCAAiC;QAC5CE;WAAAA,CAAAA,oBAAAA,OAAMO,UAAU,CAACR,4BAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAiDH;AAAsC"}
+{"version":3,"sources":["../src/contexts/messageBarTransitionContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type MessageBarTransitionContextValue = {\n  /**\n   * @deprecated CSS className is no longer used for this transition, replaced by motion components\n   */\n  className: string;\n  nodeRef: React.Ref<HTMLDivElement | null>;\n};\n\nconst messageBarTransitionContext = React.createContext<MessageBarTransitionContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue = {\n  className: '',\n  nodeRef: React.createRef<HTMLDivElement | null>(),\n};\n\n/**\n * Context to pass nodeRef for animation to MessageBar components\n * @internal\n */\nexport const MessageBarTransitionContextProvider = messageBarTransitionContext.Provider;\n/**\n * @internal\n */\nexport const useMessageBarTransitionContext = () =>\n  React.useContext(messageBarTransitionContext) ?? messageBarTransitionContextDefaultValue;\n"],"names":["MessageBarTransitionContextProvider","messageBarTransitionContextDefaultValue","useMessageBarTransitionContext","messageBarTransitionContext","React","createContext","undefined","className","nodeRef","createRef","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAwBaA,mCAAAA;eAAAA;;IATAC,uCAAAA;eAAAA;;IAaAC,8BAAAA;eAAAA;;;;iEA5BU;AAUvB,MAAMC,4CAA8BC,OAAMC,aAAa,CAA+CC;AAK/F,MAAML,0CAA4E;IACvFM,WAAW;IACXC,uBAASJ,OAAMK,SAAS;AAC1B;AAMO,MAAMT,sCAAsCG,4BAA4BO,QAAQ;AAIhF,MAAMR,iCAAiC;QAC5CE;WAAAA,CAAAA,oBAAAA,OAAMO,UAAU,CAACR,4BAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAiDH;AAAsC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-message-bar",
-  "version": "9.2.18",
+  "version": "9.3.0",
   "description": "Fluent UI MessageBar component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,16 +18,17 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.3.98",
+    "@fluentui/react-button": "^9.3.99",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.0.48",
+    "@fluentui/react-jsx-runtime": "^9.0.49",
+    "@fluentui/react-motion": "^9.6.6",
+    "@fluentui/react-motion-components-preview": "^0.4.2",
     "@fluentui/react-shared-contexts": "^9.21.2",
-    "@fluentui/react-link": "^9.3.5",
+    "@fluentui/react-link": "^9.3.6",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.18.19",
     "@griffel/react": "^1.5.22",
-    "@swc/helpers": "^0.5.1",
-    "react-transition-group": "^4.4.1"
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",

package/lib/components/MessageBarGroup/MessageBarTransition.js

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { Transition } from 'react-transition-group';
-import { MessageBarTransitionContextProvider } from '../../contexts/messageBarTransitionContext';
-const getClassName = (status, enterClassName, exitClassName, animate)=>{
-    switch(status){
-        case 'entering':
-        case 'entered':
-            return animate === 'both' ? enterClassName : '';
-        case 'exiting':
-        case 'exited':
-            return exitClassName;
-        default:
-            return '';
-    }
-};
-/**
- * Internal component that controls the animation transition for MessageBar components
- * @internal
- */ export const MessageBarTransition = ({ children, enterClassName, exitClassName, animate, ...rest })=>{
-    const nodeRef = React.useRef(null);
-    return /*#__PURE__*/ React.createElement(Transition, {
-        timeout: 250,
-        nodeRef: nodeRef,
-        ...rest
-    }, (state)=>/*#__PURE__*/ React.createElement(MessageBarTransitionInner, {
-            animate: animate,
-            enterClassName: enterClassName,
-            exitClassName: exitClassName,
-            nodeRef: nodeRef,
-            state: state
-        }, children));
-};
-const MessageBarTransitionInner = ({ children, state, enterClassName, exitClassName, animate, nodeRef })=>{
-    const className = getClassName(state, enterClassName, exitClassName, animate);
-    const context = React.useMemo(()=>({
-            className,
-            nodeRef
-        }), [
-        className,
-        nodeRef
-    ]);
-    return /*#__PURE__*/ React.createElement(MessageBarTransitionContextProvider, {
-        value: context
-    }, children);
-};

package/lib/components/MessageBarGroup/MessageBarTransition.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarTransition.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Transition, TransitionStatus } from 'react-transition-group';\nimport { MessageBarTransitionContextProvider } from '../../contexts/messageBarTransitionContext';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\nconst getClassName = (\n  status: TransitionStatus,\n  enterClassName: string,\n  exitClassName: string,\n  animate: MessageBarGroupProps['animate'],\n) => {\n  switch (status) {\n    case 'entering':\n    case 'entered':\n      return animate === 'both' ? enterClassName : '';\n    case 'exiting':\n    case 'exited':\n      return exitClassName;\n    default:\n      return '';\n  }\n};\n\n/**\n * Internal component that controls the animation transition for MessageBar components\n * @internal\n */\nexport const MessageBarTransition: React.FC<{\n  children: React.ReactElement;\n  enterClassName: string;\n  exitClassName: string;\n  animate: MessageBarGroupProps['animate'];\n}> = ({ children, enterClassName, exitClassName, animate, ...rest }) => {\n  const nodeRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <Transition timeout={250} nodeRef={nodeRef} {...rest}>\n      {state => (\n        <MessageBarTransitionInner\n          animate={animate}\n          enterClassName={enterClassName}\n          exitClassName={exitClassName}\n          nodeRef={nodeRef}\n          state={state}\n        >\n          {children}\n        </MessageBarTransitionInner>\n      )}\n    </Transition>\n  );\n};\n\nconst MessageBarTransitionInner: React.FC<{\n  children: React.ReactElement;\n  enterClassName: string;\n  exitClassName: string;\n  animate: MessageBarGroupProps['animate'];\n  nodeRef: React.Ref<HTMLDivElement | null>;\n  state: TransitionStatus;\n}> = ({ children, state, enterClassName, exitClassName, animate, nodeRef }) => {\n  const className = getClassName(state, enterClassName, exitClassName, animate);\n  const context = React.useMemo(\n    () => ({\n      className,\n      nodeRef,\n    }),\n    [className, nodeRef],\n  );\n\n  return <MessageBarTransitionContextProvider value={context}>{children}</MessageBarTransitionContextProvider>;\n};\n"],"names":["React","Transition","MessageBarTransitionContextProvider","getClassName","status","enterClassName","exitClassName","animate","MessageBarTransition","children","rest","nodeRef","useRef","timeout","state","MessageBarTransitionInner","className","context","useMemo","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAA0B,yBAAyB;AACtE,SAASC,mCAAmC,QAAQ,6CAA6C;AAGjG,MAAMC,eAAe,CACnBC,QACAC,gBACAC,eACAC;IAEA,OAAQH;QACN,KAAK;QACL,KAAK;YACH,OAAOG,YAAY,SAASF,iBAAiB;QAC/C,KAAK;QACL,KAAK;YACH,OAAOC;QACT;YACE,OAAO;IACX;AACF;AAEA;;;CAGC,GACD,OAAO,MAAME,uBAKR,CAAC,EAAEC,QAAQ,EAAEJ,cAAc,EAAEC,aAAa,EAAEC,OAAO,EAAE,GAAGG,MAAM;IACjE,MAAMC,UAAUX,MAAMY,MAAM,CAAiB;IAE7C,qBACE,oBAACX;QAAWY,SAAS;QAAKF,SAASA;QAAU,GAAGD,IAAI;OACjDI,CAAAA,sBACC,oBAACC;YACCR,SAASA;YACTF,gBAAgBA;YAChBC,eAAeA;YACfK,SAASA;YACTG,OAAOA;WAENL;AAKX,EAAE;AAEF,MAAMM,4BAOD,CAAC,EAAEN,QAAQ,EAAEK,KAAK,EAAET,cAAc,EAAEC,aAAa,EAAEC,OAAO,EAAEI,OAAO,EAAE;IACxE,MAAMK,YAAYb,aAAaW,OAAOT,gBAAgBC,eAAeC;IACrE,MAAMU,UAAUjB,MAAMkB,OAAO,CAC3B,IAAO,CAAA;YACLF;YACAL;QACF,CAAA,GACA;QAACK;QAAWL;KAAQ;IAGtB,qBAAO,oBAACT;QAAoCiB,OAAOF;OAAUR;AAC/D"}

package/lib-commonjs/components/MessageBarGroup/MessageBarTransition.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "MessageBarTransition", {
-    enumerable: true,
-    get: function() {
-        return MessageBarTransition;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _reacttransitiongroup = require("react-transition-group");
-const _messageBarTransitionContext = require("../../contexts/messageBarTransitionContext");
-const getClassName = (status, enterClassName, exitClassName, animate)=>{
-    switch(status){
-        case 'entering':
-        case 'entered':
-            return animate === 'both' ? enterClassName : '';
-        case 'exiting':
-        case 'exited':
-            return exitClassName;
-        default:
-            return '';
-    }
-};
-const MessageBarTransition = ({ children, enterClassName, exitClassName, animate, ...rest })=>{
-    const nodeRef = _react.useRef(null);
-    return /*#__PURE__*/ _react.createElement(_reacttransitiongroup.Transition, {
-        timeout: 250,
-        nodeRef: nodeRef,
-        ...rest
-    }, (state)=>/*#__PURE__*/ _react.createElement(MessageBarTransitionInner, {
-            animate: animate,
-            enterClassName: enterClassName,
-            exitClassName: exitClassName,
-            nodeRef: nodeRef,
-            state: state
-        }, children));
-};
-const MessageBarTransitionInner = ({ children, state, enterClassName, exitClassName, animate, nodeRef })=>{
-    const className = getClassName(state, enterClassName, exitClassName, animate);
-    const context = _react.useMemo(()=>({
-            className,
-            nodeRef
-        }), [
-        className,
-        nodeRef
-    ]);
-    return /*#__PURE__*/ _react.createElement(_messageBarTransitionContext.MessageBarTransitionContextProvider, {
-        value: context
-    }, children);
-};