npm - @fluentui/react-message-bar - Versions diffs - 9.2.19 → 9.3.1 - Mend

@fluentui/react-message-bar 9.2.19 → 9.3.1

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 (34) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-message-bar
-This log was last generated on Thu, 19 Dec 2024 14:30:31 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Jan 2025 13:55:29 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.3.1)
+Wed, 22 Jan 2025 13:55:29 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.3.0..@fluentui/react-message-bar_v9.3.1)
+### Patches
+- Bump @fluentui/react-button to v9.3.100 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.50 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-motion to v9.6.7 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.4.3 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-link to v9.3.7 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.3.0)
+Wed, 08 Jan 2025 18:33:34 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.19..@fluentui/react-message-bar_v9.3.0)
+### Minor changes
+- refactor(MessageBar): migrate slide & fade to motion components ([PR #33465](https://github.com/microsoft/fluentui/pull/33465) by robertpenner@microsoft.com)
+- Bump @fluentui/react-button to v9.3.99 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.49 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-motion to v9.6.6 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.4.2 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
+- Bump @fluentui/react-link to v9.3.6 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
 ## [9.2.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.19)
-Thu, 19 Dec 2024 14:30:31 GMT
+Thu, 19 Dec 2024 14:30:56 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.18..@fluentui/react-message-bar_v9.2.19)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -114,7 +114,9 @@ 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[];
 };
@@ -159,6 +161,9 @@ 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;
 };
@@ -189,12 +194,15 @@ export declare type MessageBarTitleState = ComponentState<MessageBarTitleSlots>;
 export declare const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue;
 /**
- * Context to pass animation className to MessageBar components
+ * Context to pass nodeRef for animation 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 transitionClassName: string;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC,GACD,~~WAII~~"}
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"}

package/lib/components/MessageBar/useMessageBar.js CHANGED Viewed

@@ -18,6 +18,7 @@ import { useMessageBarTransitionContext } from '../../contexts/messageBarTransit
     const autoReflow = layout === 'auto';
     const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);
     const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();
     const actionsRef = React.useRef(null);
     const bodyRef = React.useRef(null);

package/lib/components/MessageBar/useMessageBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\nimport type { MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n\n/*\n Create the state required to render MessageBar.\n \n The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n \n @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n const autoReflow = layout === 'auto';\n const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const actionsRef = React.useRef<HTMLDivElement \| null>(null);\n const bodyRef = React.useRef<HTMLDivElement \| null>(null);\n const { announce } = useAnnounce();\n const titleId = useId();\n\n React.useEffect(() => {\n const bodyMessage = bodyRef.current?.textContent;\n const actionsMessage = actionsRef.current?.textContent;\n\n const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n return {\n components: {\n root: 'div',\n icon: 'div',\n bottomReflowSpacer: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, reflowRef, nodeRef),\n role: 'group',\n 'aria-labelledby': titleId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n icon: slot.optional(props.icon, {\n renderByDefault: true,\n elementType: 'div',\n defaultProps: { children: getIntentIcon(intent) },\n }),\n bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n renderByDefault: computedLayout === 'multiline',\n elementType: 'div',\n }),\n layout: computedLayout,\n intent,\n transitionClassName,\n actionsRef,\n bodyRef,\n titleId,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","always","role","elementType","optional","renderByDefault","defaultProps","children"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,4BAA4B;AACjG,SAASC,WAAW,QAAQ,kCAAkC;AAE9D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqBF,CAAAA,uBAAAA,wBAAAA,aAAcD,WAAW,MAAK,IAAI,WAAW;IACxE,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGZ,oBAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBP;IAC/E,MAAM,EAAES,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf;IACpD,MAAMgB,aAAaxB,MAAMyB,MAAM,CAAwB;IACvD,MAAMC,UAAU1B,MAAMyB,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAUzB;IAEhBH,MAAM6B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,eAAcJ,mBAAAA,QAAQK,OAAO,cAAfL,uCAAAA,iBAAiBM,WAAW;QAChD,MAAMC,kBAAiBT,sBAAAA,WAAWO,OAAO,cAAlBP,0CAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQtB,uBAAuB;YAAUuB,OAAOvB,uBAAuB;QAAY;IACzG,GAAG;QAACU;QAASF;QAAYG;QAAUX;KAAmB;IAEtD,OAAO;QACLwB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMvC,KAAK0C,MAAM,CACf3C,yBAAyB,OAAO;YAC9BU,KAAKP,cAAcO,KAAKO,WAAWK;YACnCsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEoC,aAAa;QAAM;QAGvBJ,MAAMxC,KAAK6C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAU5C,cAAcO;YAAQ;QAClD;QACA8B,oBAAoBzC,KAAK6C,QAAQ,CAACrC,MAAMiC,kBAAkB,EAAE;YAC1DK,iBAAiB5B,mBAAmB;YACpC0B,aAAa;QACf;QACAlC,QAAQQ;QACRP;QACAS;QACAE;QACAE;QACAE;QACAb;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\nimport type { MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n\n/*\n Create the state required to render MessageBar.\n \n The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n \n @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n const autoReflow = layout === 'auto';\n const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n const actionsRef = React.useRef<HTMLDivElement \| null>(null);\n const bodyRef = React.useRef<HTMLDivElement \| null>(null);\n const { announce } = useAnnounce();\n const titleId = useId();\n\n React.useEffect(() => {\n const bodyMessage = bodyRef.current?.textContent;\n const actionsMessage = actionsRef.current?.textContent;\n\n const message = [bodyMessage, actionsMessage].filter(Boolean).join(',');\n announce(message, { polite: computedPoliteness === 'polite', alert: computedPoliteness === 'assertive' });\n }, [bodyRef, actionsRef, announce, computedPoliteness]);\n\n return {\n components: {\n root: 'div',\n icon: 'div',\n bottomReflowSpacer: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, reflowRef, nodeRef),\n role: 'group',\n 'aria-labelledby': titleId,\n ...props,\n }),\n { elementType: 'div' },\n ),\n\n icon: slot.optional(props.icon, {\n renderByDefault: true,\n elementType: 'div',\n defaultProps: { children: getIntentIcon(intent) },\n }),\n bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {\n renderByDefault: computedLayout === 'multiline',\n elementType: 'div',\n }),\n layout: computedLayout,\n intent,\n transitionClassName,\n actionsRef,\n bodyRef,\n titleId,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","actionsRef","useRef","bodyRef","announce","titleId","useEffect","bodyMessage","current","textContent","actionsMessage","message","filter","Boolean","join","polite","alert","components","root","icon","bottomReflowSpacer","always","role","elementType","optional","renderByDefault","defaultProps","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,4BAA4B;AACjG,SAASC,WAAW,QAAQ,kCAAkC;AAE9D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAEC,QAAQ,SAAS,EAAE,GAAGL;IAC5E,MAAMM,qBAAqBF,CAAAA,uBAAAA,wBAAAA,aAAcD,WAAW,MAAK,IAAI,WAAW;IACxE,MAAMI,aAAaL,WAAW;IAC9B,MAAM,EAAED,KAAKO,SAAS,EAAEC,SAAS,EAAE,GAAGZ,oBAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBP;IAC/E,4DAA4D;IAC5D,MAAM,EAAES,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf;IACpD,MAAMgB,aAAaxB,MAAMyB,MAAM,CAAwB;IACvD,MAAMC,UAAU1B,MAAMyB,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAUzB;IAEhBH,MAAM6B,SAAS,CAAC;YACMH,kBACGF;QADvB,MAAMM,eAAcJ,mBAAAA,QAAQK,OAAO,cAAfL,uCAAAA,iBAAiBM,WAAW;QAChD,MAAMC,kBAAiBT,sBAAAA,WAAWO,OAAO,cAAlBP,0CAAAA,oBAAoBQ,WAAW;QAEtD,MAAME,UAAU;YAACJ;YAAaG;SAAe,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;QACnEV,SAASO,SAAS;YAAEI,QAAQtB,uBAAuB;YAAUuB,OAAOvB,uBAAuB;QAAY;IACzG,GAAG;QAACU;QAASF;QAAYG;QAAUX;KAAmB;IAEtD,OAAO;QACLwB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMvC,KAAK0C,MAAM,CACf3C,yBAAyB,OAAO;YAC9BU,KAAKP,cAAcO,KAAKO,WAAWK;YACnCsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEoC,aAAa;QAAM;QAGvBJ,MAAMxC,KAAK6C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAU5C,cAAcO;YAAQ;QAClD;QACA8B,oBAAoBzC,KAAK6C,QAAQ,CAACrC,MAAMiC,kBAAkB,EAAE;YAC1DK,iBAAiB5B,mBAAmB;YACpC0B,aAAa;QACf;QACAlC,QAAQQ;QACRP;QACAS;QACAE;QACAE;QACAE;QACAb;IACF;AACF,EAAE"}

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.transitionClassName, state.root.className);
+  state.root.className = mergeClasses(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
   if (state.icon) {
     state.icon.className = 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"~~,"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":"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,~~CAACW,mBAAmB,EAAEX,KAAK,~~CAACvC,IAAI,CAAC8C,SAAS,CAAC;~~EAChQ~~,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"],"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":[]}

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

@@ -0,0 +1,78 @@
+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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.motions.tsx"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } from '@fluentui/react-motion';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\n// TODO: import these atoms from react-motion-components-preview once they're available there\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n}\n\n/**\n * Generates a motion atom object for a fade in or fade out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nconst fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromValue }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n\n/**\n * Generates a motion atom object for an X or Y translation, from a specified distance to zero.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param axis - The axis of the translation: 'X' or 'Y'.\n * @param fromValue - The starting position of the slide; it can be a percentage or pixels.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.\n */\nconst slideAtom = ({\n direction,\n axis,\n fromValue,\n duration,\n easing = motionTokens.curveDecelerateMid,\n}: {\n direction: PresenceDirection;\n axis: 'X' | 'Y';\n fromValue: string;\n duration: number;\n easing?: string;\n}): AtomMotion => {\n const keyframes = [{ transform: `translate${axis}(${fromValue})` }, { transform: `translate${axis}(0)` }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n\n/**\n * A presence component for a MessageBar to enter and exit from a MessageBarGroup.\n * It has an optional enter transition of a slide-in and fade-in,\n * when the `animate` prop is set to `'both'`.\n * It always has an exit transition of a fade-out.\n */\nexport const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>(\n ({ animate }) => {\n const duration = motionTokens.durationGentle;\n\n return {\n enter:\n animate === 'both'\n ? // enter with slide and fade\n [\n fadeAtom({ direction: 'enter', duration }),\n slideAtom({ direction: 'enter', axis: 'Y', fromValue: '-100%', duration }),\n ]\n : [], // no enter motion\n\n // Always exit with a fade\n exit: fadeAtom({ direction: 'exit', duration }),\n };\n },\n);\n"],"names":["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/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 enterStyles: string;\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 /* @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"}

package/lib/components/MessageBarGroup/renderMessageBarGroup.js CHANGED Viewed

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

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

@@ -1,35 +1,13 @@
-import { __styles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { mergeClasses } from '@griffel/react';
 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":["~~__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":[]}
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":[]}

package/lib/contexts/messageBarTransitionContext.js CHANGED Viewed

@@ -7,7 +7,7 @@ const messageBarTransitionContext = React.createContext(undefined);
     nodeRef: React.createRef()
 };
 /**
- * Context to pass animation className to MessageBar components
+ * Context to pass nodeRef for animation 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 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"}
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"}

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 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 /\n @deprecated Code is unused, replaced by motion components\n */\n transitionClassName: string;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA4CA;;CAEC"}

package/lib-commonjs/components/MessageBar/useMessageBar.js CHANGED Viewed

@@ -21,6 +21,7 @@ const useMessageBar_unstable = (props, ref)=>{
     const autoReflow = layout === 'auto';
     const { ref: reflowRef, reflowing } = (0, _useMessageBarReflow.useMessageBarReflow)(autoReflow);
     const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const { className: transitionClassName, nodeRef } = (0, _messageBarTransitionContext.useMessageBarTransitionContext)();
     const actionsRef = _react.useRef(null);
     const bodyRef = _react.useRef(null);

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

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

package/lib-commonjs/components/MessageBar/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.transitionClassName, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(messageBarClassNames.root, rootBaseStyles, state.layout === 'multiline' && styles.rootMultiline, state.shape === 'square' && styles.square, rootIntentStyles[state.intent], state.root.className);
     if (state.icon) {
         state.icon.className = (0, _react.mergeClasses)(messageBarClassNames.icon, iconBaseStyles, iconIntentStyles[state.intent], state.icon.className);
     }

package/lib-commonjs/components/MessageBar/useMessageBarStyles.styles.js.map 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.~~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":";;;;;;;;;;;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,~~MAAMY,mBAAmB,EAAEZ,~~MAAMxC,IAAI,CAAC+C,SAAS;~~IAC/P~~,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.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"}

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

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

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

@@ -0,0 +1 @@

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

package/lib-commonjs/components/MessageBarGroup/MessageBarGroup.types.js.map 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 enterStyles: string;\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 /* @deprecated property is unused; these CSS animations were replaced by motion components /\n enterStyles: string;\n /* @deprecated property is unused; these CSS animations were replaced by motion components */\n exitStyles: string;\n children: React.ReactElement[];\n };\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEACuB"}

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

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

package/lib-commonjs/components/MessageBarGroup/renderMessageBarGroup.js.map 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 { ~~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~~"}
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"}

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

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

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

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

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

package/package.json CHANGED Viewed

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

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

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

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

@@ -1 +0,0 @@

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

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

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

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

@@ -1 +0,0 @@

- {"version":3,"sources":["../src/components/MessageBarGroup/MessageBarTransition.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Transition, TransitionStatus } from 'react-transition-group';\nimport { MessageBarTransitionContextProvider } from '../../contexts/messageBarTransitionContext';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\nconst getClassName = (\n status: TransitionStatus,\n enterClassName: string,\n exitClassName: string,\n animate: MessageBarGroupProps['animate'],\n) => {\n switch (status) {\n case 'entering':\n case 'entered':\n return animate === 'both' ? enterClassName : '';\n case 'exiting':\n case 'exited':\n return exitClassName;\n default:\n return '';\n }\n};\n\n/**\n * Internal component that controls the animation transition for MessageBar components\n * @internal\n */\nexport const MessageBarTransition: React.FC<{\n children: React.ReactElement;\n enterClassName: string;\n exitClassName: string;\n animate: MessageBarGroupProps['animate'];\n}> = ({ children, enterClassName, exitClassName, animate, ...rest }) => {\n const nodeRef = React.useRef<HTMLDivElement>(null);\n\n return (\n <Transition timeout={250} nodeRef={nodeRef} {...rest}>\n {state => (\n <MessageBarTransitionInner\n animate={animate}\n enterClassName={enterClassName}\n exitClassName={exitClassName}\n nodeRef={nodeRef}\n state={state}\n >\n {children}\n </MessageBarTransitionInner>\n )}\n </Transition>\n );\n};\n\nconst MessageBarTransitionInner: React.FC<{\n children: React.ReactElement;\n enterClassName: string;\n exitClassName: string;\n animate: MessageBarGroupProps['animate'];\n nodeRef: React.Ref<HTMLDivElement | null>;\n state: TransitionStatus;\n}> = ({ children, state, enterClassName, exitClassName, animate, nodeRef }) => {\n const className = getClassName(state, enterClassName, exitClassName, animate);\n const context = React.useMemo(\n () => ({\n className,\n nodeRef,\n }),\n [className, nodeRef],\n );\n\n return <MessageBarTransitionContextProvider value={context}>{children}</MessageBarTransitionContextProvider>;\n};\n"],"names":["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"}