@fluentui/react-message-bar 9.4.2 → 9.4.3

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-message-bar
 
-This log was last generated on Wed, 19 Mar 2025 15:36:13 GMT and should not be manually modified.
+This log was last generated on Wed, 19 Mar 2025 18:10:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.4.3)
+
+Wed, 19 Mar 2025 18:10:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.4.2..@fluentui/react-message-bar_v9.4.3)
+
+### Patches
+
+- fix(MessageBar): revert motion migration to resolve validation errors ([PR #34037](https://github.com/microsoft/fluentui/pull/34037) by robertpenner@microsoft.com)
+
 ## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.4.2)
 
-Wed, 19 Mar 2025 15:36:13 GMT 
+Wed, 19 Mar 2025 15:40:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.4.1..@fluentui/react-message-bar_v9.4.2)
 
 ### Patches

package/dist/index.d.ts

@@ -114,9 +114,7 @@ export declare type MessageBarGroupSlots = {
  * State used in rendering MessageBarGroup
  */
 export declare type MessageBarGroupState = ComponentState<MessageBarGroupSlots> & Pick<MessageBarGroupProps, 'animate'> & {
-    /** @deprecated property is unused; these CSS animations were replaced by motion components */
     enterStyles: string;
-    /** @deprecated property is unused; these CSS animations were replaced by motion components */
     exitStyles: string;
     children: React_2.ReactElement[];
 };
@@ -161,9 +159,6 @@ export declare type MessageBarSlots = {
  * State used in rendering MessageBar
  */
 export declare type MessageBarState = ComponentState<MessageBarSlots> & Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> & Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
-    /**
-     * @deprecated Code is unused, replaced by motion components
-     */
     transitionClassName: string;
 };
 
@@ -194,15 +189,12 @@ export declare type MessageBarTitleState = ComponentState<MessageBarTitleSlots>;
 export declare const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue;
 
 /**
- * Context to pass nodeRef for animation to MessageBar components
+ * Context to pass animation className to MessageBar components
  * @internal
  */
 export declare const MessageBarTransitionContextProvider: React_2.Provider<MessageBarTransitionContextValue | undefined>;
 
 export declare type MessageBarTransitionContextValue = {
-    /**
-     * @deprecated CSS className is no longer used for this transition, replaced by motion components
-     */
     className: string;
     nodeRef: React_2.Ref<HTMLDivElement | null>;
 };

package/lib/components/MessageBar/MessageBar.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/MessageBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'div'>;\n  /**\n   * Rendered when the component is in multiline layout to guarantee correct spacing even\n   * if no actions are rendered. When actions are rendered, the default actions grid area will render\n   * over this element\n   *\n   * NOTE: If you are using this slot, this probably means that you are using the MessageBar without\n   * actions, this is not recommended from an accesibility point of view\n   */\n  bottomReflowSpacer?: Slot<'div'>;\n};\n\nexport type MessageBarContextValues = {\n  messageBar: MessageBarContextValue;\n};\n\nexport type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * MessageBar Props\n */\nexport type MessageBarProps = ComponentProps<MessageBarSlots> &\n  Pick<Partial<MessageBarContextValue>, 'layout'> & {\n    /**\n     * Default designs announcement presets\n     * @default info\n     */\n    intent?: MessageBarIntent;\n    /**\n     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n     */\n    politeness?: 'assertive' | 'polite';\n    /**\n     * Use squal for page level messages and rounded for component level messages\n     * @default rounded\n     */\n    shape?: 'square' | 'rounded';\n  };\n\n/**\n * State used in rendering MessageBar\n */\nexport type MessageBarState = ComponentState<MessageBarSlots> &\n  Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &\n  Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {\n    /**\n     * @deprecated Code is unused, replaced by motion components\n     */\n    transitionClassName: string;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC,GACD,WAOI"}
+{"version":3,"sources":["../src/components/MessageBar/MessageBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'div'>;\n  /**\n   * Rendered when the component is in multiline layout to guarantee correct spacing even\n   * if no actions are rendered. When actions are rendered, the default actions grid area will render\n   * over this element\n   *\n   * NOTE: If you are using this slot, this probably means that you are using the MessageBar without\n   * actions, this is not recommended from an accesibility point of view\n   */\n  bottomReflowSpacer?: Slot<'div'>;\n};\n\nexport type MessageBarContextValues = {\n  messageBar: MessageBarContextValue;\n};\n\nexport type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * MessageBar Props\n */\nexport type MessageBarProps = ComponentProps<MessageBarSlots> &\n  Pick<Partial<MessageBarContextValue>, 'layout'> & {\n    /**\n     * Default designs announcement presets\n     * @default info\n     */\n    intent?: MessageBarIntent;\n    /**\n     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n     */\n    politeness?: 'assertive' | 'polite';\n    /**\n     * Use squal for page level messages and rounded for component level messages\n     * @default rounded\n     */\n    shape?: 'square' | 'rounded';\n  };\n\n/**\n * State used in rendering MessageBar\n */\nexport type MessageBarState = ComponentState<MessageBarSlots> &\n  Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &\n  Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {\n    transitionClassName: string;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC,GACD,WAII"}

package/lib/components/MessageBar/useMessageBarStyles.styles.js

@@ -86,7 +86,7 @@ export const useMessageBarStyles_unstable = state => {
   const rootIntentStyles = useRootIntentStyles();
   const reflowSpacerStyles = useReflowSpacerBaseStyles();
   const styles = useStyles();
-  state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
+  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);
   if (state.icon) {
     state.icon.className = mergeClasses(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
   }

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","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","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","useIconBaseStyles","useReflowSpacerBaseStyles","useStyles","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","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent","transitionClassName"],"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"],"mappings":"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","ignoreList":[]}

package/lib/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    /** @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":["React"],"rangeMappings":"","mappings":"AACA,YAAYA,WAAW,QAAQ"}
+{"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":["React"],"rangeMappings":"","mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/components/MessageBarGroup/MessageBarTransition.js

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1 @@
+{"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/components/MessageBarGroup/renderMessageBarGroup.js

@@ -1,15 +1,18 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
-import { PresenceGroup } from '@fluentui/react-motion';
-import { MessageBarMotion } from './MessageBarGroup.motions';
+import { TransitionGroup } from 'react-transition-group';
+import { MessageBarTransition } from './MessageBarTransition';
 /**
  * Render the final JSX of MessageBarGroup
  */ export const renderMessageBarGroup_unstable = (state)=>{
     assertSlots(state);
     return /*#__PURE__*/ _jsx(state.root, {
-        children: /*#__PURE__*/ _jsx(PresenceGroup, {
-            children: state.children.map((child)=>/*#__PURE__*/ _jsx(MessageBarMotion, {
+        children: /*#__PURE__*/ _jsx(TransitionGroup, {
+            component: null,
+            children: state.children.map((child)=>/*#__PURE__*/ _jsx(MessageBarTransition, {
                     animate: state.animate,
+                    enterClassName: state.enterStyles,
+                    exitClassName: state.exitStyles,
                     children: child
                 }, child.key))
         })

package/lib/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 { 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":["assertSlots","PresenceGroup","MessageBarMotion","renderMessageBarGroup_unstable","state","root","children","map","child","animate","key"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CJ,YAAkCI;IAElC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACJ;sBACEG,MAAME,QAAQ,CAACC,GAAG,CAACC,CAAAA,sBAClB,KAACN;oBAAiCO,SAASL,MAAMK,OAAO;8BACrDD;mBADoBA,MAAME,GAAG;;;AAO1C,EAAE"}
+{"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":["assertSlots","TransitionGroup","MessageBarTransition","renderMessageBarGroup_unstable","state","root","component","children","map","child","animate","enterClassName","enterStyles","exitClassName","exitStyles","key"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CJ,YAAkCI;IAElC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACJ;YAAgBK,WAAW;sBACzBF,MAAMG,QAAQ,CAACC,GAAG,CAACC,CAAAA,sBAClB,KAACP;oBACCQ,SAASN,MAAMM,OAAO;oBAEtBC,gBAAgBP,MAAMQ,WAAW;oBACjCC,eAAeT,MAAMU,UAAU;8BAE9BL;mBAJIA,MAAMM,GAAG;;;AAU1B,EAAE"}

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

@@ -1,13 +1,35 @@
-import { mergeClasses } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const messageBarGroupClassNames = {
   root: 'fui-MessageBarGroup'
 };
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__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;}}"]
+});
 /**
  * Apply styling to the MessageBarGroup slots based on the state
  */
 export const useMessageBarGroupStyles_unstable = state => {
   'use no memo';
 
+  const styles = useStyles();
   state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);
+  state.enterStyles = mergeClasses(styles.base, styles.enter);
+  state.exitStyles = mergeClasses(styles.base, styles.exit);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"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"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACzF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","messageBarGroupClassNames","root","useStyles","base","Bf5fcs","vin17d","enter","Bv12yb3","exit","d","k","useMessageBarGroupStyles_unstable","state","styles","className","enterStyles","exitStyles"],"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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BU,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EACzFF,KAAK,CAACG,WAAW,GAAGjB,YAAY,CAACe,MAAM,CAACV,IAAI,EAAEU,MAAM,CAACP,KAAK,CAAC;EAC3DM,KAAK,CAACI,UAAU,GAAGlB,YAAY,CAACe,MAAM,CAACV,IAAI,EAAEU,MAAM,CAACL,IAAI,CAAC;EACzD,OAAOI,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/contexts/messageBarTransitionContext.js

@@ -7,7 +7,7 @@ const messageBarTransitionContext = React.createContext(undefined);
     nodeRef: React.createRef()
 };
 /**
- * Context to pass nodeRef for animation to MessageBar components
+ * Context to pass animation className to MessageBar components
  * @internal
  */ export const MessageBarTransitionContextProvider = messageBarTransitionContext.Provider;
 /**

package/lib/contexts/messageBarTransitionContext.js.map

@@ -1 +1 @@
-{"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":["React","messageBarTransitionContext","createContext","undefined","messageBarTransitionContextDefaultValue","className","nodeRef","createRef","MessageBarTransitionContextProvider","Provider","useMessageBarTransitionContext","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,8BAA8BD,MAAME,aAAa,CAA+CC;AAEtG;;CAEC,GACD,OAAO,MAAMC,0CAA4E;IACvFC,WAAW;IACXC,SAASN,MAAMO,SAAS;AAC1B,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMC,sCAAsCP,4BAA4BQ,QAAQ,CAAC;AACxF;;CAEC,GACD,OAAO,MAAMC,iCAAiC;QAC5CV;WAAAA,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,0CAAjBD,+BAAAA,oBAAiDI;AAAsC,EAAE"}
+{"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":["React","messageBarTransitionContext","createContext","undefined","messageBarTransitionContextDefaultValue","className","nodeRef","createRef","MessageBarTransitionContextProvider","Provider","useMessageBarTransitionContext","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,8BAA8BD,MAAME,aAAa,CAA+CC;AAEtG;;CAEC,GACD,OAAO,MAAMC,0CAA4E;IACvFC,WAAW;IACXC,SAASN,MAAMO,SAAS;AAC1B,EAAE;AAEF;;;CAGC,GACD,OAAO,MAAMC,sCAAsCP,4BAA4BQ,QAAQ,CAAC;AACxF;;CAEC,GACD,OAAO,MAAMC,iCAAiC;QAC5CV;WAAAA,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,0CAAjBD,+BAAAA,oBAAiDI;AAAsC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/MessageBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'div'>;\n  /**\n   * Rendered when the component is in multiline layout to guarantee correct spacing even\n   * if no actions are rendered. When actions are rendered, the default actions grid area will render\n   * over this element\n   *\n   * NOTE: If you are using this slot, this probably means that you are using the MessageBar without\n   * actions, this is not recommended from an accesibility point of view\n   */\n  bottomReflowSpacer?: Slot<'div'>;\n};\n\nexport type MessageBarContextValues = {\n  messageBar: MessageBarContextValue;\n};\n\nexport type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * MessageBar Props\n */\nexport type MessageBarProps = ComponentProps<MessageBarSlots> &\n  Pick<Partial<MessageBarContextValue>, 'layout'> & {\n    /**\n     * Default designs announcement presets\n     * @default info\n     */\n    intent?: MessageBarIntent;\n    /**\n     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n     */\n    politeness?: 'assertive' | 'polite';\n    /**\n     * Use squal for page level messages and rounded for component level messages\n     * @default rounded\n     */\n    shape?: 'square' | 'rounded';\n  };\n\n/**\n * State used in rendering MessageBar\n */\nexport type MessageBarState = ComponentState<MessageBarSlots> &\n  Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &\n  Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {\n    /**\n     * @deprecated Code is unused, replaced by motion components\n     */\n    transitionClassName: string;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC"}
+{"version":3,"sources":["../src/components/MessageBar/MessageBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MessageBarContextValue } from '../../contexts/messageBarContext';\n\nexport type MessageBarSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'div'>;\n  /**\n   * Rendered when the component is in multiline layout to guarantee correct spacing even\n   * if no actions are rendered. When actions are rendered, the default actions grid area will render\n   * over this element\n   *\n   * NOTE: If you are using this slot, this probably means that you are using the MessageBar without\n   * actions, this is not recommended from an accesibility point of view\n   */\n  bottomReflowSpacer?: Slot<'div'>;\n};\n\nexport type MessageBarContextValues = {\n  messageBar: MessageBarContextValue;\n};\n\nexport type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * MessageBar Props\n */\nexport type MessageBarProps = ComponentProps<MessageBarSlots> &\n  Pick<Partial<MessageBarContextValue>, 'layout'> & {\n    /**\n     * Default designs announcement presets\n     * @default info\n     */\n    intent?: MessageBarIntent;\n    /**\n     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n     */\n    politeness?: 'assertive' | 'polite';\n    /**\n     * Use squal for page level messages and rounded for component level messages\n     * @default rounded\n     */\n    shape?: 'square' | 'rounded';\n  };\n\n/**\n * State used in rendering MessageBar\n */\nexport type MessageBarState = ComponentState<MessageBarSlots> &\n  Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &\n  Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {\n    transitionClassName: string;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC"}

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.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.transitionClassName, 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.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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"}
+{"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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"}

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    /** @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"}
+{"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"}

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

@@ -0,0 +1,53 @@
+"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);
+};

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

@@ -0,0 +1 @@
+{"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":["MessageBarTransition","getClassName","status","enterClassName","exitClassName","animate","children","rest","nodeRef","React","useRef","createElement","Transition","timeout","state","MessageBarTransitionInner","className","context","useMemo","MessageBarTransitionContextProvider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BaA;;;eAAAA;;;;iEA3BU;sCACsB;6CACO;AAGpD,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;AAMO,MAAMJ,uBAKR,CAAC,EAAEM,QAAQ,EAAEH,cAAc,EAAEC,aAAa,EAAEC,OAAO,EAAE,GAAGE,MAAM;IACjE,MAAMC,UAAUC,OAAMC,MAAM,CAAiB;IAE7C,OAAA,WAAA,GACED,OAAAE,aAAA,CAACC,gCAAAA,EAAAA;QAAWC,SAAS;QAAKL,SAASA;QAAU,GAAGD,IAAI;OACjDO,CAAAA,QAAAA,WAAAA,GACCL,OAAAE,aAAA,CAACI,2BAAAA;YACCV,SAASA;YACTF,gBAAgBA;YAChBC,eAAeA;YACfI,SAASA;YACTM,OAAOA;WAENR;AAKX;AAEA,MAAMS,4BAOD,CAAC,EAAET,QAAQ,EAAEQ,KAAK,EAAEX,cAAc,EAAEC,aAAa,EAAEC,OAAO,EAAEG,OAAO,EAAE;IACxE,MAAMQ,YAAYf,aAAaa,OAAOX,gBAAgBC,eAAeC;IACrE,MAAMY,UAAUR,OAAMS,OAAO,CAC3B,IAAO,CAAA;YACLF;YACAR;QACF,CAAA,GACA;QAACQ;QAAWR;KAAQ;IAGtB,OAAA,WAAA,GAAOC,OAAAE,aAAA,CAACQ,gEAAAA,EAAAA;QAAoCC,OAAOH;OAAUX;AAC/D"}

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

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

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

@@ -20,8 +20,36 @@ 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 { 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"}
+{"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"}

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  /**\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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-message-bar",
-  "version": "9.4.2",
+  "version": "9.4.3",
   "description": "Fluent UI MessageBar component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,14 +21,13 @@
     "@fluentui/react-button": "^9.4.2",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.0.52",
-    "@fluentui/react-motion": "^9.6.9",
-    "@fluentui/react-motion-components-preview": "^0.4.5",
     "@fluentui/react-shared-contexts": "^9.23.0",
     "@fluentui/react-link": "^9.4.2",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.18.22",
     "@griffel/react": "^1.5.22",
-    "@swc/helpers": "^0.5.1"
+    "@swc/helpers": "^0.5.1",
+    "react-transition-group": "^4.4.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",

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

@@ -1,78 +0,0 @@
-import { motionTokens, createPresenceComponent } from '@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 = 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 = motionTokens.curveDecelerateMid })=>{
-    const keyframes = [
-        {
-            transform: `translate${axis}(${fromValue})`
-        },
-        {
-            transform: `translate${axis}(0)`
-        }
-    ];
-    if (direction === 'exit') {
-        keyframes.reverse();
-    }
-    return {
-        keyframes,
-        duration,
-        easing
-    };
-};
-/**
- * A presence component for a MessageBar to enter and exit from a MessageBarGroup.
- * It has an optional enter transition of a slide-in and fade-in,
- * when the `animate` prop is set to `'both'`.
- * It always has an exit transition of a fade-out.
- */ export const MessageBarMotion = createPresenceComponent(({ animate })=>{
-    const duration = 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/components/MessageBarGroup/MessageBarGroup.motions.js.map

@@ -1 +0,0 @@
-{"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":["motionTokens","createPresenceComponent","fadeAtom","direction","duration","easing","curveLinear","fromValue","keyframes","opacity","reverse","slideAtom","axis","curveDecelerateMid","transform","MessageBarMotion","animate","durationGentle","enter","exit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAuC,yBAAyB;AAY9G;;;;;;;CAOC,GACD,MAAMC,WAAW,CAAC,EAChBC,SAAS,EACTC,QAAQ,EACRC,SAASL,aAAaM,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF;AAEA;;;;;;;CAOC,GACD,MAAMM,YAAY,CAAC,EACjBR,SAAS,EACTS,IAAI,EACJL,SAAS,EACTH,QAAQ,EACRC,SAASL,aAAaa,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,IAAIT,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF;AAEA;;;;;CAKC,GACD,OAAO,MAAMU,mBAAmBd,wBAC9B,CAAC,EAAEe,OAAO,EAAE;IACV,MAAMZ,WAAWJ,aAAaiB,cAAc;IAE5C,OAAO;QACLC,OACEF,YAAY,SAER;YACEd,SAAS;gBAAEC,WAAW;gBAASC;YAAS;YACxCO,UAAU;gBAAER,WAAW;gBAASS,MAAM;gBAAKL,WAAW;gBAASH;YAAS;SACzE,GACD,EAAE;QAER,0BAA0B;QAC1Be,MAAMjB,SAAS;YAAEC,WAAW;YAAQC;QAAS;IAC/C;AACF,GACA"}

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

@@ -1,83 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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"}