npm - @fluentui/react-message-bar - Versions diffs - 9.4.2 → 9.4.4 - Mend

@fluentui/react-message-bar 9.4.2 → 9.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,34 @@
 # 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 Thu, 27 Mar 2025 21:08:38 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.4.4)
+Thu, 27 Mar 2025 21:08:38 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.4.3..@fluentui/react-message-bar_v9.4.4)
+### Patches
+- Bump @fluentui/react-button to v9.4.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.53 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-link to v9.4.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-utilities to v9.18.23 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.4.3)
+Wed, 19 Mar 2025 18:11:11 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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 transitionClassName: string;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC,GACD,WAII"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE,sBAAsB;EAC5BC,kBAAkB,EAAE;AACxB,CAAC;AACD,MAAMC,iBAAiB,gBAAGT,aAAA,01BAazB,CAAC;AACF,MAAMU,iBAAiB,gBAAGV,aAAA,4WAOzB,CAAC;AACF,MAAMW,yBAAyB,gBAAGX,aAAA,mGAGjC,CAAC;AACF,MAAMY,SAAS,gBAAGX,QAAA;EAAAY,aAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,yBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAoBjB,CAAC;AACF,MAAMC,mBAAmB,gBAAG/B,QAAA;EAAAgC,IAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAD,MAAA;EAAA;EAAAE,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAY3B,CAAC;AACF,MAAMQ,mBAAmB,gBAAGrC,QAAA;EAAAgC,IAAA;EAAAC,KAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAP,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,OAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAb,CAAA;AAAA,CAe3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMc,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;EAC1C,MAAMsC,cAAc,GAAGrC,iBAAiB,CAAC,CAAC;EAC1C,MAAMsC,gBAAgB,GAAGhB,mBAAmB,CAAC,CAAC;EAC9C,MAAMiB,gBAAgB,GAAGX,mBAAmB,CAAC,CAAC;EAC9C,MAAMY,kBAAkB,GAAGvC,yBAAyB,CAAC,CAAC;EACtD,MAAMwC,MAAM,GAAGvC,SAAS,CAAC,CAAC;EAC1BiC,KAAK,CAACvC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAEwC,cAAc,EAAED,KAAK,CAACQ,MAAM,KAAK,WAAW,IAAIF,MAAM,CAACtC,aAAa,EAAEgC,KAAK,CAACS,KAAK,KAAK,QAAQ,IAAIH,MAAM,CAAC3B,MAAM,EAAEyB,gBAAgB,CAACJ,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACvC,IAAI,CAAC8C,SAAS,CAAC;~~EACrO~~,IAAIP,KAAK,CAACtC,IAAI,EAAE;IACZsC,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACE,IAAI,EAAEwC,cAAc,EAAEC,gBAAgB,CAACH,KAAK,CAACU,MAAM,CAAC,EAAEV,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACxI;EACA,IAAIP,KAAK,CAACrC,kBAAkB,EAAE;IAC1BqC,KAAK,CAACrC,kBAAkB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,oBAAoB,CAACG,kBAAkB,EAAE0C,kBAAkB,CAAC;EAClH;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
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","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 CHANGED Viewed

	@@ -1 +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"}
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":["React"],"rangeMappings":"","mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/components/MessageBarGroup/MessageBarTransition.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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":["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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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":["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 CHANGED Viewed

	@@ -1 +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"}
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 transitionClassName: string;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC"}

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":";;;;;;;;;;;IAEaA,oBAAoB;eAApBA;;IAmFIC,4BAA4B;eAA5BA;;;uBArFqD;AAE/D,MAAMD,uBAAuB;IAChCE,MAAM;IACNC,MAAM;IACNC,oBAAoB;AACxB;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAazB;AACD,MAAMC,oBAAiB,WAAA,GAAGD,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;CAOzB;AACD,MAAME,4BAAyB,WAAA,GAAGF,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGjC;AACD,MAAMG,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,eAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,2BAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAqBlB,MAAMC,sBAAmB,WAAA,GAAGpB,IAAAA,eAAA,EAAA;IAAAqB,MAAA,CAAA;IAAAC,OAAA;QAAAC,QAAA;IAAA;IAAAC,SAAA;QAAAD,QAAA;IAAA;IAAAE,SAAA;QAAAF,QAAA;IAAA;AAAA,GAAA;IAAAL,GAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAa5B,MAAMQ,sBAAmB,WAAA,GAAG1B,IAAAA,eAAA,EAAA;IAAAqB,MAAA,CAAA;IAAAC,OAAA;QAAAK,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAP,SAAA;QAAAG,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAN,SAAA;QAAAE,QAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAb,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAkBjB,MAAM3B,+BAAgCyC,CAAAA;IAC7C;IACA,MAAMC,iBAAiBtC;IACvB,MAAMuC,iBAAiBrC;IACvB,MAAMsC,mBAAmBf;IACzB,MAAMgB,mBAAmBV;IACzB,MAAMW,qBAAqBvC;IAC3B,MAAMwC,SAASvC;IACfiC,MAAMxC,IAAI,CAAC+C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBE,IAAI,EAAEyC,gBAAgBD,MAAMS,MAAM,KAAK,eAAeH,OAAOrC,aAAa,EAAE+B,MAAMU,KAAK,KAAK,YAAYJ,OAAO1B,MAAM,EAAEwB,gBAAgB,CAACJ,MAAMW,MAAM,CAAC,EAAEX,MAAMxC,IAAI,CAAC+C,SAAS;~~IACpO~~,IAAIP,MAAMvC,IAAI,EAAE;QACZuC,MAAMvC,IAAI,CAAC8C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBG,IAAI,EAAEyC,gBAAgBC,gBAAgB,CAACH,MAAMW,MAAM,CAAC,EAAEX,MAAMvC,IAAI,CAAC8C,SAAS;IACvI;IACA,IAAIP,MAAMtC,kBAAkB,EAAE;QAC1BsC,MAAMtC,kBAAkB,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAAClD,qBAAqBI,kBAAkB,EAAE2C;IAC/F;IACA,OAAOL;AACX"}
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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"}

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

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

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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"}

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

@@ -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 CHANGED Viewed

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

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

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-message-bar",
-  "version": "9.4.2",
+  "version": "9.4.4",
   "description": "Fluent UI MessageBar component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,17 +18,16 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.4.2",
+    "@fluentui/react-button": "^9.4.3",
     "@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-jsx-runtime": "^9.0.53",
+    "@fluentui/react-shared-contexts": "^9.23.1",
+    "@fluentui/react-link": "^9.4.3",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.18.22",
+    "@fluentui/react-utilities": "^9.18.23",
     "@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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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"}