@fluentui/react-message-bar 9.6.5 → 9.6.7

package/CHANGELOG.md

@@ -1,21 +1,54 @@
 # Change Log - @fluentui/react-message-bar
 
-This log was last generated on Thu, 21 Aug 2025 12:20:42 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.6.7)
+
+Thu, 02 Oct 2025 15:07:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.6.6..@fluentui/react-message-bar_v9.6.7)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- refactor(react-message-bar): migrate slide & fade to motion components ([PR #35168](https://github.com/microsoft/fluentui/pull/35168) by robertpenner@microsoft.com)
+- Bump @fluentui/react-button to v9.6.7 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-motion to v9.11.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.10.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-link to v9.6.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.6.6)
+
+Mon, 08 Sep 2025 12:51:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.6.5..@fluentui/react-message-bar_v9.6.6)
+
+### Patches
+
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-button to v9.6.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-link to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.6.5)
 
-Thu, 21 Aug 2025 12:20:42 GMT 
+Thu, 21 Aug 2025 12:25:38 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.6.4..@fluentui/react-message-bar_v9.6.5)
 
 ### Patches
 
-- Bump @fluentui/react-button to v9.6.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-link to v9.6.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-button to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-link to v9.6.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.6.4)
 

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import type { ButtonContextValue } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -112,7 +113,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[];
 };
@@ -157,6 +160,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;
 };
 
@@ -187,12 +193,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>;
 };
@@ -200,27 +209,27 @@ export declare type MessageBarTransitionContextValue = {
 /**
  * Render the final JSX of MessageBar
  */
-export declare const renderMessageBar_unstable: (state: MessageBarState, contexts: MessageBarContextValues) => JSX.Element;
+export declare const renderMessageBar_unstable: (state: MessageBarState, contexts: MessageBarContextValues) => JSXElement;
 
 /**
  * Render the final JSX of MessageBarActions
  */
-export declare const renderMessageBarActions_unstable: (state: MessageBarActionsState, contexts: MessageBarActionsContextValues) => JSX.Element;
+export declare const renderMessageBarActions_unstable: (state: MessageBarActionsState, contexts: MessageBarActionsContextValues) => JSXElement;
 
 /**
  * Render the final JSX of MessageBarBody
  */
-export declare const renderMessageBarBody_unstable: (state: MessageBarBodyState, contextValues: MessageBarBodyContextValues) => JSX.Element;
+export declare const renderMessageBarBody_unstable: (state: MessageBarBodyState, contextValues: MessageBarBodyContextValues) => JSXElement;
 
 /**
  * Render the final JSX of MessageBarGroup
  */
-export declare const renderMessageBarGroup_unstable: (state: MessageBarGroupState) => JSX.Element;
+export declare const renderMessageBarGroup_unstable: (state: MessageBarGroupState) => JSXElement;
 
 /**
  * Render the final JSX of MessageBarTitle
  */
-export declare const renderMessageBarTitle_unstable: (state: MessageBarTitleState) => JSX.Element;
+export declare const renderMessageBarTitle_unstable: (state: MessageBarTitleState) => JSXElement;
 
 /**
  * Create the state required to render MessageBar.

package/lib/components/MessageBar/MessageBar.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useMessageBar_unstable } from './useMessageBar';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/MessageBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBar_unstable } from './useMessageBar';\nimport { renderMessageBar_unstable } from './renderMessageBar';\nimport { useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nimport type { MessageBarProps } from './MessageBar.types';\nimport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n\n/**\n * MessageBar component\n */\nexport const MessageBar: ForwardRefComponent<MessageBarProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBar_unstable(props, ref);\n\n  useMessageBarStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarStyles_unstable')(state);\n  return renderMessageBar_unstable(state, useMessageBarContextValue_unstable(state));\n});\n\nMessageBar.displayName = 'MessageBar';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBar_unstable","renderMessageBar_unstable","useMessageBarStyles_unstable","useMessageBarContextValue_unstable","MessageBar","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,kCAAkC,QAAQ,+BAA+B;AAElF;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAC7BT,4BAA4B,gCAAgCS;IAC5D,OAAOP,0BAA0BO,OAAOL,mCAAmCK;AAC7E,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MessageBar/MessageBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBar_unstable } from './useMessageBar';\nimport { renderMessageBar_unstable } from './renderMessageBar';\nimport { useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nimport type { MessageBarProps } from './MessageBar.types';\nimport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n\n/**\n * MessageBar component\n */\nexport const MessageBar: ForwardRefComponent<MessageBarProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBar_unstable(props, ref);\n\n  useMessageBarStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarStyles_unstable')(state);\n  return renderMessageBar_unstable(state, useMessageBarContextValue_unstable(state));\n});\n\nMessageBar.displayName = 'MessageBar';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBar_unstable","renderMessageBar_unstable","useMessageBarStyles_unstable","useMessageBarContextValue_unstable","MessageBar","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,kCAAkC,QAAQ,+BAA+B;AAElF;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAC7BT,4BAA4B,gCAAgCS;IAC5D,OAAOP,0BAA0BO,OAAOL,mCAAmCK;AAC7E,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/getIntentIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageBarProps } from './MessageBar.types';\nimport { CheckmarkCircleFilled, InfoFilled, WarningFilled, DismissCircleFilled } from '@fluentui/react-icons';\n\nexport function getIntentIcon(intent: MessageBarProps['intent']) {\n  switch (intent) {\n    case 'info':\n      return <InfoFilled />;\n    case 'warning':\n      return <WarningFilled />;\n    case 'error':\n      return <DismissCircleFilled />;\n    case 'success':\n      return <CheckmarkCircleFilled />;\n\n    default:\n      return null;\n  }\n}\n"],"names":["React","CheckmarkCircleFilled","InfoFilled","WarningFilled","DismissCircleFilled","getIntentIcon","intent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,UAAU,EAAEC,aAAa,EAAEC,mBAAmB,QAAQ,wBAAwB;AAE9G,OAAO,SAASC,cAAcC,MAAiC;IAC7D,OAAQA;QACN,KAAK;YACH,qBAAO,oBAACJ;QACV,KAAK;YACH,qBAAO,oBAACC;QACV,KAAK;YACH,qBAAO,oBAACC;QACV,KAAK;YACH,qBAAO,oBAACH;QAEV;YACE,OAAO;IACX;AACF"}
+{"version":3,"sources":["../src/components/MessageBar/getIntentIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MessageBarProps } from './MessageBar.types';\nimport { CheckmarkCircleFilled, InfoFilled, WarningFilled, DismissCircleFilled } from '@fluentui/react-icons';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nexport function getIntentIcon(intent: MessageBarProps['intent']): JSXElement | null {\n  switch (intent) {\n    case 'info':\n      return <InfoFilled />;\n    case 'warning':\n      return <WarningFilled />;\n    case 'error':\n      return <DismissCircleFilled />;\n    case 'success':\n      return <CheckmarkCircleFilled />;\n\n    default:\n      return null;\n  }\n}\n"],"names":["React","CheckmarkCircleFilled","InfoFilled","WarningFilled","DismissCircleFilled","getIntentIcon","intent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,UAAU,EAAEC,aAAa,EAAEC,mBAAmB,QAAQ,wBAAwB;AAG9G,OAAO,SAASC,cAAcC,MAAiC;IAC7D,OAAQA;QACN,KAAK;YACH,qBAAO,oBAACJ;QACV,KAAK;YACH,qBAAO,oBAACC;QACV,KAAK;YACH,qBAAO,oBAACC;QACV,KAAK;YACH,qBAAO,oBAACH;QAEV;YACE,OAAO;IACX;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (state: MessageBarState, contexts: MessageBarContextValues) => {\n  assertSlots<MessageBarSlots>(state);\n\n  return (\n    <MessageBarContextProvider value={contexts.messageBar}>\n      <state.root>\n        {state.icon && <state.icon />}\n        {state.root.children}\n        {state.bottomReflowSpacer && <state.bottomReflowSpacer />}\n      </state.root>\n    </MessageBarContextProvider>\n  );\n};\n"],"names":["assertSlots","MessageBarContextProvider","renderMessageBar_unstable","state","contexts","value","messageBar","root","icon","children","bottomReflowSpacer"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,yBAAyB,QAAQ,mCAAmC;AAE7E;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,OAAwBC;IAChEJ,YAA6BG;IAE7B,qBACE,KAACF;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,kBAAI,KAACP,MAAMO,kBAAkB;;;;AAI9D,EAAE"}
+{"version":3,"sources":["../src/components/MessageBar/renderMessageBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (state: MessageBarState, contexts: MessageBarContextValues): JSXElement => {\n  assertSlots<MessageBarSlots>(state);\n\n  return (\n    <MessageBarContextProvider value={contexts.messageBar}>\n      <state.root>\n        {state.icon && <state.icon />}\n        {state.root.children}\n        {state.bottomReflowSpacer && <state.bottomReflowSpacer />}\n      </state.root>\n    </MessageBarContextProvider>\n  );\n};\n"],"names":["assertSlots","MessageBarContextProvider","renderMessageBar_unstable","state","contexts","value","messageBar","root","icon","children","bottomReflowSpacer"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,yBAAyB,QAAQ,mCAAmC;AAE7E;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,OAAwBC;IAChEJ,YAA6BG;IAE7B,qBACE,KAACF;QAA0BI,OAAOD,SAASE,UAAU;kBACnD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;gBACzBL,MAAMI,IAAI,CAACE,QAAQ;gBACnBN,MAAMO,kBAAkB,kBAAI,KAACP,MAAMO,kBAAkB;;;;AAI9D,EAAE"}

package/lib/components/MessageBar/useMessageBar.js

@@ -1,9 +1,11 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useAnnounce } from '@fluentui/react-shared-contexts';
 import { getIntentIcon } from './getIntentIcon';
 import { useMessageBarReflow } from './useMessageBarReflow';
 import { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';
+import { useMotionForwardedRef } from '../MotionRefForwarder';
 /**
  * Create the state required to render MessageBar.
  *
@@ -20,6 +22,7 @@ import { useMessageBarTransitionContext } from '../../contexts/messageBarTransit
     const computedLayout = autoReflow ? reflowing ? 'multiline' : 'singleline' : layout;
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();
+    const motionRef = useMotionForwardedRef();
     const actionsRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const { announce } = useAnnounce();
@@ -49,7 +52,7 @@ import { useMessageBarTransitionContext } from '../../contexts/messageBarTransit
             bottomReflowSpacer: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref: useMergedRefs(ref, reflowRef, nodeRef),
+            ref: useMergedRefs(ref, reflowRef, nodeRef, motionRef),
             role: 'group',
             'aria-labelledby': titleId,
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useAnnounce } from '@fluentui/react-shared-contexts';\nimport type { MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\n\n/**\n * Create the state required to render MessageBar.\n *\n * The returned state can be modified with hooks such as useMessageBarStyles_unstable,\n * before being passed to renderMessageBar_unstable.\n *\n * @param props - props from this instance of MessageBar\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {\n  const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;\n  const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';\n  const autoReflow = layout === 'auto';\n  const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);\n  const computedLayout = autoReflow ? (reflowing ? 'multiline' : 'singleline') : layout;\n  // 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"],"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"}
+{"version":3,"sources":["../src/components/MessageBar/useMessageBar.ts"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useMotionForwardedRef } from '../MotionRefForwarder';\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\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext();\n  const motionRef = useMotionForwardedRef();\n\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, motionRef),\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","useMotionForwardedRef","useMessageBar_unstable","props","ref","layout","intent","politeness","shape","computedPoliteness","autoReflow","reflowRef","reflowing","computedLayout","className","transitionClassName","nodeRef","motionRef","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"],"mappings":"AAAA;AAEA,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;AAC5F,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D;;;;;;;;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,GAAGb,oBAAoBW;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBP;IAE/E,4DAA4D;IAC5D,MAAM,EAAES,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGhB;IACpD,MAAMiB,YAAYhB;IAElB,MAAMiB,aAAa1B,MAAM2B,MAAM,CAAwB;IACvD,MAAMC,UAAU5B,MAAM2B,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGxB;IACrB,MAAMyB,UAAU3B;IAEhBH,MAAM+B,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,QAAQvB,uBAAuB;YAAUwB,OAAOxB,uBAAuB;QAAY;IACzG,GAAG;QAACW;QAASF;QAAYG;QAAUZ;KAAmB;IAEtD,OAAO;QACLyB,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,oBAAoB;QACtB;QACAF,MAAMzC,KAAK4C,MAAM,CACf7C,yBAAyB,OAAO;YAC9BW,KAAKR,cAAcQ,KAAKO,WAAWK,SAASC;YAC5CsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGnB,KAAK;QACV,IACA;YAAEqC,aAAa;QAAM;QAGvBJ,MAAM1C,KAAK+C,QAAQ,CAACtC,MAAMiC,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;YACbG,cAAc;gBAAEC,UAAU9C,cAAcQ;YAAQ;QAClD;QACA+B,oBAAoB3C,KAAK+C,QAAQ,CAACtC,MAAMkC,kBAAkB,EAAE;YAC1DK,iBAAiB7B,mBAAmB;YACpC2B,aAAa;QACf;QACAnC,QAAQQ;QACRP;QACAS;QACAG;QACAE;QACAE;QACAd;IACF;AACF,EAAE"}

package/lib/components/MessageBar/useMessageBarContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useMessageBarContextValue_unstable(state) {
     const { layout, actionsRef, bodyRef, titleId } = state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/useMessageBarContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { MessageBarContextValues, MessageBarState } from './MessageBar.types';\n\nexport function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues {\n  const { layout, actionsRef, bodyRef, titleId } = state;\n\n  const messageBarContext = React.useMemo(\n    () => ({\n      layout,\n      actionsRef,\n      bodyRef,\n      titleId,\n    }),\n    [layout, actionsRef, bodyRef, titleId],\n  );\n\n  return {\n    messageBar: messageBarContext,\n  };\n}\n"],"names":["React","useMessageBarContextValue_unstable","state","layout","actionsRef","bodyRef","titleId","messageBarContext","useMemo","messageBar"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,mCAAmCC,KAAsB;IACvE,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAEjD,MAAMK,oBAAoBP,MAAMQ,OAAO,CACrC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAQC;QAAYC;QAASC;KAAQ;IAGxC,OAAO;QACLG,YAAYF;IACd;AACF"}
+{"version":3,"sources":["../src/components/MessageBar/useMessageBarContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { MessageBarContextValues, MessageBarState } from './MessageBar.types';\n\nexport function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues {\n  const { layout, actionsRef, bodyRef, titleId } = state;\n\n  const messageBarContext = React.useMemo(\n    () => ({\n      layout,\n      actionsRef,\n      bodyRef,\n      titleId,\n    }),\n    [layout, actionsRef, bodyRef, titleId],\n  );\n\n  return {\n    messageBar: messageBarContext,\n  };\n}\n"],"names":["React","useMessageBarContextValue_unstable","state","layout","actionsRef","bodyRef","titleId","messageBarContext","useMemo","messageBar"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,mCAAmCC,KAAsB;IACvE,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAEjD,MAAMK,oBAAoBP,MAAMQ,OAAO,CACrC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAQC;QAAYC;QAASC;KAAQ;IAGxC,OAAO;QACLG,YAAYF;IACd;AACF"}

package/lib/components/MessageBar/useMessageBarReflow.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { isHTMLElement } from '@fluentui/react-utilities';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n  const { targetDocument } = useFluent();\n  const forceUpdate = React.useReducer(() => ({}), {})[1];\n  const reflowingRef = React.useRef(false);\n  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n  const prevInlineSizeRef = React.useRef(-1);\n\n  const handleResize: ResizeObserverCallback = React.useCallback(\n    entries => {\n      // Resize observer is only owned by this component - one resize observer entry expected\n      // No need to support multiple fragments - one border box entry expected\n      if (process.env.NODE_ENV !== 'production' && entries.length > 1) {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            'useMessageBarReflow: Resize observer should only have one entry. ',\n            'If multiple entries are observed, the first entry will be used.',\n            'This is a bug, please report it to the Fluent UI team.',\n          ].join(' '),\n        );\n      }\n\n      const entry = entries[0];\n      // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4\n      const inlineSize = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.target.getBoundingClientRect().width;\n\n      if (inlineSize === undefined || !entry) {\n        return;\n      }\n\n      const { target } = entry;\n\n      if (!isHTMLElement(target)) {\n        return;\n      }\n\n      let nextReflowing: boolean | undefined;\n\n      // No easy way to really determine when the single line layout will fit\n      // Just keep try to set single line layout as long as the size is growing\n      // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case\n      if (reflowingRef.current) {\n        if (prevInlineSizeRef.current < inlineSize) {\n          nextReflowing = false;\n        }\n      } else {\n        const scrollWidth = target.scrollWidth;\n        if (inlineSize < scrollWidth) {\n          nextReflowing = true;\n        }\n      }\n\n      prevInlineSizeRef.current = inlineSize;\n      if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {\n        reflowingRef.current = nextReflowing;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  const ref = React.useCallback(\n    (el: HTMLElement | null) => {\n      if (!enabled || !el || !targetDocument?.defaultView) {\n        return;\n      }\n\n      resizeObserverRef.current?.disconnect();\n\n      const win = targetDocument.defaultView;\n      const resizeObserver = new win.ResizeObserver(handleResize);\n      resizeObserverRef.current = resizeObserver;\n      resizeObserver.observe(el, { box: 'border-box' });\n    },\n    [targetDocument, handleResize, enabled],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      resizeObserverRef.current?.disconnect();\n    };\n  }, []);\n\n  return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useMessageBarReflow","enabled","targetDocument","forceUpdate","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","entry","process","env","NODE_ENV","length","console","error","join","inlineSize","borderBoxSize","target","getBoundingClientRect","width","undefined","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAC3B,MAAMK,cAAcP,MAAMQ,UAAU,CAAC,IAAO,CAAA,CAAC,CAAA,GAAI,CAAC,EAAE,CAAC,EAAE;IACvD,MAAMC,eAAeT,MAAMU,MAAM,CAAC;IAClC,8FAA8F;IAE9F,MAAMC,oBAAoBX,MAAMU,MAAM,CAAwB;IAC9D,MAAME,oBAAoBZ,MAAMU,MAAM,CAAC,CAAC;IAExC,MAAMG,eAAuCb,MAAMc,WAAW,CAC5DC,CAAAA;YAgBqBC,uBAAAA;QAfnB,uFAAuF;QACvF,wEAAwE;QACxE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBJ,QAAQK,MAAM,GAAG,GAAG;YAC/D,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE;gBACA;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;QAEA,MAAMP,QAAQD,OAAO,CAAC,EAAE;YAELC;QADnB,iFAAiF;QACjF,MAAMQ,aAAaR,CAAAA,mCAAAA,kBAAAA,6BAAAA,uBAAAA,MAAOS,aAAa,cAApBT,4CAAAA,wBAAAA,oBAAsB,CAAC,EAAE,cAAzBA,4CAAAA,sBAA2BQ,UAAU,cAArCR,8CAAAA,mCAAyCA,kBAAAA,4BAAAA,MAAOU,MAAM,CAACC,qBAAqB,GAAGC,KAAK;QAEvG,IAAIJ,eAAeK,aAAa,CAACb,OAAO;YACtC;QACF;QAEA,MAAM,EAAEU,MAAM,EAAE,GAAGV;QAEnB,IAAI,CAACb,cAAcuB,SAAS;YAC1B;QACF;QAEA,IAAII;QAEJ,uEAAuE;QACvE,yEAAyE;QACzE,iHAAiH;QACjH,IAAIrB,aAAasB,OAAO,EAAE;YACxB,IAAInB,kBAAkBmB,OAAO,GAAGP,YAAY;gBAC1CM,gBAAgB;YAClB;QACF,OAAO;YACL,MAAME,cAAcN,OAAOM,WAAW;YACtC,IAAIR,aAAaQ,aAAa;gBAC5BF,gBAAgB;YAClB;QACF;QAEAlB,kBAAkBmB,OAAO,GAAGP;QAC5B,IAAI,OAAOM,kBAAkB,eAAerB,aAAasB,OAAO,KAAKD,eAAe;YAClFrB,aAAasB,OAAO,GAAGD;YACvBvB;QACF;IACF,GACA;QAACA;KAAY;IAGf,MAAM0B,MAAMjC,MAAMc,WAAW,CAC3B,CAACoB;YAKCvB;QAJA,IAAI,CAACN,WAAW,CAAC6B,MAAM,EAAC5B,2BAAAA,qCAAAA,eAAgB6B,WAAW,GAAE;YACnD;QACF;SAEAxB,6BAAAA,kBAAkBoB,OAAO,cAAzBpB,iDAAAA,2BAA2ByB,UAAU;QAErC,MAAMC,MAAM/B,eAAe6B,WAAW;QACtC,MAAMG,iBAAiB,IAAID,IAAIE,cAAc,CAAC1B;QAC9CF,kBAAkBoB,OAAO,GAAGO;QAC5BA,eAAeE,OAAO,CAACN,IAAI;YAAEO,KAAK;QAAa;IACjD,GACA;QAACnC;QAAgBO;QAAcR;KAAQ;IAGzCL,MAAM0C,SAAS,CAAC;QACd,OAAO;gBACL/B;aAAAA,6BAAAA,kBAAkBoB,OAAO,cAAzBpB,iDAAAA,2BAA2ByB,UAAU;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEH;QAAKU,WAAWlC,aAAasB,OAAO;IAAC;AAChD"}
+{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false): {\n  ref: React.RefCallback<HTMLElement>;\n  reflowing: boolean;\n} {\n  const { targetDocument } = useFluent();\n  const forceUpdate = React.useReducer(() => ({}), {})[1];\n  const reflowingRef = React.useRef(false);\n  // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286\n\n  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);\n  const prevInlineSizeRef = React.useRef(-1);\n\n  const handleResize: ResizeObserverCallback = React.useCallback(\n    entries => {\n      // Resize observer is only owned by this component - one resize observer entry expected\n      // No need to support multiple fragments - one border box entry expected\n      if (process.env.NODE_ENV !== 'production' && entries.length > 1) {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            'useMessageBarReflow: Resize observer should only have one entry. ',\n            'If multiple entries are observed, the first entry will be used.',\n            'This is a bug, please report it to the Fluent UI team.',\n          ].join(' '),\n        );\n      }\n\n      const entry = entries[0];\n      // `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4\n      const inlineSize = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.target.getBoundingClientRect().width;\n\n      if (inlineSize === undefined || !entry) {\n        return;\n      }\n\n      const { target } = entry;\n\n      if (!isHTMLElement(target)) {\n        return;\n      }\n\n      let nextReflowing: boolean | undefined;\n\n      // No easy way to really determine when the single line layout will fit\n      // Just keep try to set single line layout as long as the size is growing\n      // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case\n      if (reflowingRef.current) {\n        if (prevInlineSizeRef.current < inlineSize) {\n          nextReflowing = false;\n        }\n      } else {\n        const scrollWidth = target.scrollWidth;\n        if (inlineSize < scrollWidth) {\n          nextReflowing = true;\n        }\n      }\n\n      prevInlineSizeRef.current = inlineSize;\n      if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {\n        reflowingRef.current = nextReflowing;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  const ref = React.useCallback(\n    (el: HTMLElement | null) => {\n      if (!enabled || !el || !targetDocument?.defaultView) {\n        return;\n      }\n\n      resizeObserverRef.current?.disconnect();\n\n      const win = targetDocument.defaultView;\n      const resizeObserver = new win.ResizeObserver(handleResize);\n      resizeObserverRef.current = resizeObserver;\n      resizeObserver.observe(el, { box: 'border-box' });\n    },\n    [targetDocument, handleResize, enabled],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      resizeObserverRef.current?.disconnect();\n    };\n  }, []);\n\n  return { ref, reflowing: reflowingRef.current };\n}\n"],"names":["React","useFluent_unstable","useFluent","isHTMLElement","useMessageBarReflow","enabled","targetDocument","forceUpdate","useReducer","reflowingRef","useRef","resizeObserverRef","prevInlineSizeRef","handleResize","useCallback","entries","entry","process","env","NODE_ENV","length","console","error","join","inlineSize","borderBoxSize","target","getBoundingClientRect","width","undefined","nextReflowing","current","scrollWidth","ref","el","defaultView","disconnect","win","resizeObserver","ResizeObserver","observe","box","useEffect","reflowing"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC,oBAAoBC,UAAmB,KAAK;IAI1D,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAC3B,MAAMK,cAAcP,MAAMQ,UAAU,CAAC,IAAO,CAAA,CAAC,CAAA,GAAI,CAAC,EAAE,CAAC,EAAE;IACvD,MAAMC,eAAeT,MAAMU,MAAM,CAAC;IAClC,8FAA8F;IAE9F,MAAMC,oBAAoBX,MAAMU,MAAM,CAAwB;IAC9D,MAAME,oBAAoBZ,MAAMU,MAAM,CAAC,CAAC;IAExC,MAAMG,eAAuCb,MAAMc,WAAW,CAC5DC,CAAAA;YAgBqBC,uBAAAA;QAfnB,uFAAuF;QACvF,wEAAwE;QACxE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBJ,QAAQK,MAAM,GAAG,GAAG;YAC/D,sCAAsC;YACtCC,QAAQC,KAAK,CACX;gBACE;gBACA;gBACA;aACD,CAACC,IAAI,CAAC;QAEX;QAEA,MAAMP,QAAQD,OAAO,CAAC,EAAE;YAELC;QADnB,iFAAiF;QACjF,MAAMQ,aAAaR,CAAAA,mCAAAA,kBAAAA,6BAAAA,uBAAAA,MAAOS,aAAa,cAApBT,4CAAAA,wBAAAA,oBAAsB,CAAC,EAAE,cAAzBA,4CAAAA,sBAA2BQ,UAAU,cAArCR,8CAAAA,mCAAyCA,kBAAAA,4BAAAA,MAAOU,MAAM,CAACC,qBAAqB,GAAGC,KAAK;QAEvG,IAAIJ,eAAeK,aAAa,CAACb,OAAO;YACtC;QACF;QAEA,MAAM,EAAEU,MAAM,EAAE,GAAGV;QAEnB,IAAI,CAACb,cAAcuB,SAAS;YAC1B;QACF;QAEA,IAAII;QAEJ,uEAAuE;QACvE,yEAAyE;QACzE,iHAAiH;QACjH,IAAIrB,aAAasB,OAAO,EAAE;YACxB,IAAInB,kBAAkBmB,OAAO,GAAGP,YAAY;gBAC1CM,gBAAgB;YAClB;QACF,OAAO;YACL,MAAME,cAAcN,OAAOM,WAAW;YACtC,IAAIR,aAAaQ,aAAa;gBAC5BF,gBAAgB;YAClB;QACF;QAEAlB,kBAAkBmB,OAAO,GAAGP;QAC5B,IAAI,OAAOM,kBAAkB,eAAerB,aAAasB,OAAO,KAAKD,eAAe;YAClFrB,aAAasB,OAAO,GAAGD;YACvBvB;QACF;IACF,GACA;QAACA;KAAY;IAGf,MAAM0B,MAAMjC,MAAMc,WAAW,CAC3B,CAACoB;YAKCvB;QAJA,IAAI,CAACN,WAAW,CAAC6B,MAAM,EAAC5B,2BAAAA,qCAAAA,eAAgB6B,WAAW,GAAE;YACnD;QACF;SAEAxB,6BAAAA,kBAAkBoB,OAAO,cAAzBpB,iDAAAA,2BAA2ByB,UAAU;QAErC,MAAMC,MAAM/B,eAAe6B,WAAW;QACtC,MAAMG,iBAAiB,IAAID,IAAIE,cAAc,CAAC1B;QAC9CF,kBAAkBoB,OAAO,GAAGO;QAC5BA,eAAeE,OAAO,CAACN,IAAI;YAAEO,KAAK;QAAa;IACjD,GACA;QAACnC;QAAgBO;QAAcR;KAAQ;IAGzCL,MAAM0C,SAAS,CAAC;QACd,OAAO;gBACL/B;aAAAA,6BAAAA,kBAAkBoB,OAAO,cAAzBpB,iDAAAA,2BAA2ByB,UAAU;QACvC;IACF,GAAG,EAAE;IAEL,OAAO;QAAEH;QAAKU,WAAWlC,aAAasB,OAAO;IAAC;AAChD"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const messageBarClassNames = {
@@ -86,7 +88,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

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

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const messageBarClassNames = {
@@ -91,7 +92,7 @@ const useRootIntentStyles = makeStyles({
     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.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n  root: 'fui-MessageBar',\n  icon: 'fui-MessageBar__icon',\n  bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\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});\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});\n\nconst useReflowSpacerBaseStyles = makeResetStyles({\n  marginBottom: tokens.spacingVerticalS,\n  gridArea: 'secondaryActions',\n});\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\n  secondaryActionsMultiline: {\n    justifyContent: 'end',\n    marginTop: tokens.spacingVerticalMNudge,\n    marginBottom: tokens.spacingVerticalS,\n    marginRight: '0px',\n  },\n\n  square: {\n    borderRadius: '0',\n  },\n});\n\nconst useIconIntentStyles = makeStyles({\n  info: {\n    /** already in base reset styles */\n  },\n  error: {\n    color: tokens.colorStatusDangerForeground1,\n  },\n  warning: {\n    color: tokens.colorStatusWarningForeground3,\n  },\n  success: {\n    color: tokens.colorStatusSuccessForeground1,\n  },\n});\n\nconst useRootIntentStyles = makeStyles({\n  info: {\n    /** already in base reset styles */\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/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n  'use no memo';\n\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\n  state.root.className = mergeClasses(\n    messageBarClassNames.root,\n    rootBaseStyles,\n    state.layout === 'multiline' && styles.rootMultiline,\n    state.shape === 'square' && styles.square,\n    rootIntentStyles[state.intent],\n    state.transitionClassName,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      messageBarClassNames.icon,\n      iconBaseStyles,\n      iconIntentStyles[state.intent],\n      state.icon.className,\n    );\n  }\n\n  if (state.bottomReflowSpacer) {\n    state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","whiteSpace","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","paddingLeft","spacingHorizontalM","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","alignItems","minHeight","boxSizing","backgroundColor","colorNeutralBackground3","useIconBaseStyles","gridArea","fontSize","fontSizeBase500","marginRight","spacingHorizontalS","color","colorNeutralForeground3","useReflowSpacerBaseStyles","marginBottom","spacingVerticalS","useStyles","rootMultiline","paddingTop","spacingVerticalMNudge","secondaryActionsMultiline","justifyContent","marginTop","square","useIconIntentStyles","info","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground3","success","colorStatusSuccessForeground1","useRootIntentStyles","colorStatusDangerBackground1","borderColor","colorStatusDangerBorder1","colorStatusWarningBackground1","colorStatusWarningBorder1","colorStatusSuccessBackground1","colorStatusSuccessBorder1","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent","transitionClassName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/MessageBar/useMessageBarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MessageBarSlots, MessageBarState } from './MessageBar.types';\n\nexport const messageBarClassNames: SlotClassNames<MessageBarSlots> = {\n  root: 'fui-MessageBar',\n  icon: 'fui-MessageBar__icon',\n  bottomReflowSpacer: 'fui-MessageBar__bottomReflowSpacer',\n};\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});\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});\n\nconst useReflowSpacerBaseStyles = makeResetStyles({\n  marginBottom: tokens.spacingVerticalS,\n  gridArea: 'secondaryActions',\n});\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\n  secondaryActionsMultiline: {\n    justifyContent: 'end',\n    marginTop: tokens.spacingVerticalMNudge,\n    marginBottom: tokens.spacingVerticalS,\n    marginRight: '0px',\n  },\n\n  square: {\n    borderRadius: '0',\n  },\n});\n\nconst useIconIntentStyles = makeStyles({\n  info: {\n    /** already in base reset styles */\n  },\n  error: {\n    color: tokens.colorStatusDangerForeground1,\n  },\n  warning: {\n    color: tokens.colorStatusWarningForeground3,\n  },\n  success: {\n    color: tokens.colorStatusSuccessForeground1,\n  },\n});\n\nconst useRootIntentStyles = makeStyles({\n  info: {\n    /** already in base reset styles */\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/**\n * Apply styling to the MessageBar slots based on the state\n */\nexport const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {\n  'use no memo';\n\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\n  state.root.className = mergeClasses(\n    messageBarClassNames.root,\n    rootBaseStyles,\n    state.layout === 'multiline' && styles.rootMultiline,\n    state.shape === 'square' && styles.square,\n    rootIntentStyles[state.intent],\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      messageBarClassNames.icon,\n      iconBaseStyles,\n      iconIntentStyles[state.intent],\n      state.icon.className,\n    );\n  }\n\n  if (state.bottomReflowSpacer) {\n    state.bottomReflowSpacer.className = mergeClasses(messageBarClassNames.bottomReflowSpacer, reflowSpacerStyles);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","messageBarClassNames","root","icon","bottomReflowSpacer","useRootBaseStyles","whiteSpace","display","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","paddingLeft","spacingHorizontalM","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","alignItems","minHeight","boxSizing","backgroundColor","colorNeutralBackground3","useIconBaseStyles","gridArea","fontSize","fontSizeBase500","marginRight","spacingHorizontalS","color","colorNeutralForeground3","useReflowSpacerBaseStyles","marginBottom","spacingVerticalS","useStyles","rootMultiline","paddingTop","spacingVerticalMNudge","secondaryActionsMultiline","justifyContent","marginTop","square","useIconIntentStyles","info","error","colorStatusDangerForeground1","warning","colorStatusWarningForeground3","success","colorStatusSuccessForeground1","useRootIntentStyles","colorStatusDangerBackground1","borderColor","colorStatusDangerBorder1","colorStatusWarningBackground1","colorStatusWarningBorder1","colorStatusSuccessBackground1","colorStatusSuccessBorder1","useMessageBarStyles_unstable","state","rootBaseStyles","iconBaseStyles","iconIntentStyles","rootIntentStyles","reflowSpacerStyles","styles","className","layout","shape","intent"],"mappings":"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"}

package/lib/components/MessageBarActions/MessageBarActions.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useMessageBarActions_unstable } from './useMessageBarActions';

package/lib/components/MessageBarActions/MessageBarActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarActions/MessageBarActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarActions_unstable } from './useMessageBarActions';\nimport { renderMessageBarActions_unstable } from './renderMessageBarActions';\nimport { useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';\nimport type { MessageBarActionsProps } from './MessageBarActions.types';\nimport { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';\n\n/**\n * MessageBarActions component\n */\nexport const MessageBarActions: ForwardRefComponent<MessageBarActionsProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarActions_unstable(props, ref);\n\n  useMessageBarActionsStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarActionsStyles_unstable')(state);\n  return renderMessageBarActions_unstable(state, useMessageBarActionsContextValue_unstable());\n});\n\nMessageBarActions.displayName = 'MessageBarActions';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsStyles_unstable","useMessageBarActionsContextValue_unstable","MessageBarActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAE1F,SAASC,yCAAyC,QAAQ,sCAAsC;AAEhG;;CAEC,GACD,OAAO,MAAMC,kCAAiEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IACpCT,4BAA4B,uCAAuCS;IACnE,OAAOP,iCAAiCO,OAAOL;AACjD,GAAG;AAEHC,kBAAkBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MessageBarActions/MessageBarActions.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarActions_unstable } from './useMessageBarActions';\nimport { renderMessageBarActions_unstable } from './renderMessageBarActions';\nimport { useMessageBarActionsStyles_unstable } from './useMessageBarActionsStyles.styles';\nimport type { MessageBarActionsProps } from './MessageBarActions.types';\nimport { useMessageBarActionsContextValue_unstable } from './useMessageBarActionsContextValues';\n\n/**\n * MessageBarActions component\n */\nexport const MessageBarActions: ForwardRefComponent<MessageBarActionsProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarActions_unstable(props, ref);\n\n  useMessageBarActionsStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarActionsStyles_unstable')(state);\n  return renderMessageBarActions_unstable(state, useMessageBarActionsContextValue_unstable());\n});\n\nMessageBarActions.displayName = 'MessageBarActions';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarActions_unstable","renderMessageBarActions_unstable","useMessageBarActionsStyles_unstable","useMessageBarActionsContextValue_unstable","MessageBarActions","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAE1F,SAASC,yCAAyC,QAAQ,sCAAsC;AAEhG;;CAEC,GACD,OAAO,MAAMC,kCAAiEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IACpCT,4BAA4B,uCAAuCS;IACnE,OAAOP,iCAAiCO,OAAOL;AACjD,GAAG;AAEHC,kBAAkBK,WAAW,GAAG"}

package/lib/components/MessageBarActions/renderMessageBarActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarActions/renderMessageBarActions.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n  MessageBarActionsState,\n  MessageBarActionsSlots,\n  MessageBarActionsContextValues,\n} from './MessageBarActions.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of MessageBarActions\n */\nexport const renderMessageBarActions_unstable = (\n  state: MessageBarActionsState,\n  contexts: MessageBarActionsContextValues,\n) => {\n  assertSlots<MessageBarActionsSlots>(state);\n\n  return (\n    <ButtonContextProvider value={contexts.button}>\n      {state.layout === 'multiline' && state.containerAction && <state.containerAction key=\"containerAction\" />}\n      <state.root />\n      {state.layout !== 'multiline' && state.containerAction && <state.containerAction key=\"containerAction\" />}\n    </ButtonContextProvider>\n  );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderMessageBarActions_unstable","state","contexts","value","button","layout","containerAction","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEAJ,YAAoCG;IAEpC,qBACE,MAACF;QAAsBI,OAAOD,SAASE,MAAM;;YAC1CH,MAAMI,MAAM,KAAK,eAAeJ,MAAMK,eAAe,kBAAI,KAACL,MAAMK,eAAe,MAAK;0BACrF,KAACL,MAAMM,IAAI;YACVN,MAAMI,MAAM,KAAK,eAAeJ,MAAMK,eAAe,kBAAI,KAACL,MAAMK,eAAe,MAAK;;;AAG3F,EAAE"}
+{"version":3,"sources":["../src/components/MessageBarActions/renderMessageBarActions.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n  MessageBarActionsState,\n  MessageBarActionsSlots,\n  MessageBarActionsContextValues,\n} from './MessageBarActions.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of MessageBarActions\n */\nexport const renderMessageBarActions_unstable = (\n  state: MessageBarActionsState,\n  contexts: MessageBarActionsContextValues,\n): JSXElement => {\n  assertSlots<MessageBarActionsSlots>(state);\n\n  return (\n    <ButtonContextProvider value={contexts.button}>\n      {state.layout === 'multiline' && state.containerAction && <state.containerAction key=\"containerAction\" />}\n      <state.root />\n      {state.layout !== 'multiline' && state.containerAction && <state.containerAction key=\"containerAction\" />}\n    </ButtonContextProvider>\n  );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderMessageBarActions_unstable","state","contexts","value","button","layout","containerAction","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEAJ,YAAoCG;IAEpC,qBACE,MAACF;QAAsBI,OAAOD,SAASE,MAAM;;YAC1CH,MAAMI,MAAM,KAAK,eAAeJ,MAAMK,eAAe,kBAAI,KAACL,MAAMK,eAAe,MAAK;0BACrF,KAACL,MAAMM,IAAI;YACVN,MAAMI,MAAM,KAAK,eAAeJ,MAAMK,eAAe,kBAAI,KAACL,MAAMK,eAAe,MAAK;;;AAG3F,EAAE"}

package/lib/components/MessageBarActions/useMessageBarActions.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
 import { useMessageBarContext } from '../../contexts/messageBarContext';

package/lib/components/MessageBarActions/useMessageBarActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActions.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { MessageBarActionsProps, MessageBarActionsState } from './MessageBarActions.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/**\n * Create the state required to render MessageBarActions.\n *\n * The returned state can be modified with hooks such as useMessageBarActionsStyles_unstable,\n * before being passed to renderMessageBarActions_unstable.\n *\n * @param props - props from this instance of MessageBarActions\n * @param ref - reference to root HTMLElement of MessageBarActions\n */\nexport const useMessageBarActions_unstable = (\n  props: MessageBarActionsProps,\n  ref: React.Ref<HTMLDivElement>,\n): MessageBarActionsState => {\n  const { layout = 'singleline', actionsRef } = useMessageBarContext();\n  return {\n    components: {\n      root: 'div',\n      containerAction: 'div',\n    },\n    containerAction: slot.optional(props.containerAction, { renderByDefault: false, elementType: 'div' }),\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, actionsRef),\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    layout,\n    hasActions: !!props.children,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMessageBarContext","useMessageBarActions_unstable","props","ref","layout","actionsRef","components","root","containerAction","optional","renderByDefault","elementType","always","hasActions","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAE1F,SAASC,oBAAoB,QAAQ,mCAAmC;AAExE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,SAAS,YAAY,EAAEC,UAAU,EAAE,GAAGL;IAC9C,OAAO;QACLM,YAAY;YACVC,MAAM;YACNC,iBAAiB;QACnB;QACAA,iBAAiBV,KAAKW,QAAQ,CAACP,MAAMM,eAAe,EAAE;YAAEE,iBAAiB;YAAOC,aAAa;QAAM;QACnGJ,MAAMT,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BM,KAAKJ,cAAcI,KAAKE;YACxB,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP;QACAS,YAAY,CAAC,CAACX,MAAMY,QAAQ;IAC9B;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActions.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { MessageBarActionsProps, MessageBarActionsState } from './MessageBarActions.types';\nimport { useMessageBarContext } from '../../contexts/messageBarContext';\n\n/**\n * Create the state required to render MessageBarActions.\n *\n * The returned state can be modified with hooks such as useMessageBarActionsStyles_unstable,\n * before being passed to renderMessageBarActions_unstable.\n *\n * @param props - props from this instance of MessageBarActions\n * @param ref - reference to root HTMLElement of MessageBarActions\n */\nexport const useMessageBarActions_unstable = (\n  props: MessageBarActionsProps,\n  ref: React.Ref<HTMLDivElement>,\n): MessageBarActionsState => {\n  const { layout = 'singleline', actionsRef } = useMessageBarContext();\n  return {\n    components: {\n      root: 'div',\n      containerAction: 'div',\n    },\n    containerAction: slot.optional(props.containerAction, { renderByDefault: false, elementType: 'div' }),\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, actionsRef),\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    layout,\n    hasActions: !!props.children,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useMessageBarContext","useMessageBarActions_unstable","props","ref","layout","actionsRef","components","root","containerAction","optional","renderByDefault","elementType","always","hasActions","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAE1F,SAASC,oBAAoB,QAAQ,mCAAmC;AAExE;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,SAAS,YAAY,EAAEC,UAAU,EAAE,GAAGL;IAC9C,OAAO;QACLM,YAAY;YACVC,MAAM;YACNC,iBAAiB;QACnB;QACAA,iBAAiBV,KAAKW,QAAQ,CAACP,MAAMM,eAAe,EAAE;YAAEE,iBAAiB;YAAOC,aAAa;QAAM;QACnGJ,MAAMT,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BM,KAAKJ,cAAcI,KAAKE;YACxB,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBP;QACAS,YAAY,CAAC,CAACX,MAAMY,QAAQ;IAC9B;AACF,EAAE"}

package/lib/components/MessageBarActions/useMessageBarActionsContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useMessageBarActionsContextValue_unstable() {
     const buttonContext = React.useMemo(()=>({

package/lib/components/MessageBarActions/useMessageBarActionsContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { MessageBarActionsContextValues } from './MessageBarActions.types';\n\nexport function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues {\n  const buttonContext = React.useMemo(\n    () => ({\n      size: 'small' as const,\n    }),\n    [],\n  );\n\n  return {\n    button: buttonContext,\n  };\n}\n"],"names":["React","useMessageBarActionsContextValue_unstable","buttonContext","useMemo","size","button"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC;IACd,MAAMC,gBAAgBF,MAAMG,OAAO,CACjC,IAAO,CAAA;YACLC,MAAM;QACR,CAAA,GACA,EAAE;IAGJ,OAAO;QACLC,QAAQH;IACV;AACF"}
+{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { MessageBarActionsContextValues } from './MessageBarActions.types';\n\nexport function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues {\n  const buttonContext = React.useMemo(\n    () => ({\n      size: 'small' as const,\n    }),\n    [],\n  );\n\n  return {\n    button: buttonContext,\n  };\n}\n"],"names":["React","useMessageBarActionsContextValue_unstable","buttonContext","useMemo","size","button"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC;IACd,MAAMC,gBAAgBF,MAAMG,OAAO,CACjC,IAAO,CAAA;YACLC,MAAM;QACR,CAAA,GACA,EAAE;IAGJ,OAAO;QACLC,QAAQH;IACV;AACF"}

package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const messageBarActionsClassNames = {

package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n    root: 'fui-MessageBarActions',\n    containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n    gridArea: 'secondaryActions',\n    display: 'flex',\n    columnGap: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n    gridArea: 'actions',\n    paddingRight: tokens.spacingHorizontalM\n});\nconst useMultilineStyles = makeStyles({\n    root: {\n        justifyContent: 'end',\n        marginTop: tokens.spacingVerticalMNudge,\n        marginBottom: tokens.spacingVerticalS,\n        marginRight: '0px',\n        paddingRight: tokens.spacingVerticalM\n    },\n    noActions: {\n        display: 'none'\n    }\n});\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    const containerActionBaseStyles = useContainerActionBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);\n    if (state.containerAction) {\n        state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGP,aAAA,gSAK7B,CAAC;AACF,MAAMQ,4BAA4B,gBAAGR,aAAA,wKAGpC,CAAC;AACF,MAAMS,kBAAkB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,cAAc,GAAGb,iBAAiB,CAAC,CAAC;EAC1C,MAAMc,yBAAyB,GAAGb,4BAA4B,CAAC,CAAC;EAChE,MAAMc,eAAe,GAAGb,kBAAkB,CAAC,CAAC;EAC5CU,KAAK,CAACd,IAAI,CAACkB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACC,IAAI,EAAEe,cAAc,EAAED,KAAK,CAACK,MAAM,KAAK,WAAW,IAAIF,eAAe,CAACjB,IAAI,EAAE,CAACc,KAAK,CAACM,UAAU,IAAIH,eAAe,CAACP,SAAS,EAAEI,KAAK,CAACd,IAAI,CAACkB,SAAS,CAAC;EACjN,IAAIJ,KAAK,CAACb,eAAe,EAAE;IACvBa,KAAK,CAACb,eAAe,CAACiB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACE,eAAe,EAAEe,yBAAyB,EAAEF,KAAK,CAACb,eAAe,CAACiB,SAAS,CAAC;EAC3J;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","useContainerActionBaseStyles","useMultilineStyles","Brf1p80","B6of3ja","jrapky","t21cq0","z189sj","noActions","mc9l5x","d","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"sources":["useMessageBarActionsStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const messageBarActionsClassNames = {\n    root: 'fui-MessageBarActions',\n    containerAction: 'fui-MessageBarActions__containerAction'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyles = makeResetStyles({\n    gridArea: 'secondaryActions',\n    display: 'flex',\n    columnGap: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalM\n});\nconst useContainerActionBaseStyles = makeResetStyles({\n    gridArea: 'actions',\n    paddingRight: tokens.spacingHorizontalM\n});\nconst useMultilineStyles = makeStyles({\n    root: {\n        justifyContent: 'end',\n        marginTop: tokens.spacingVerticalMNudge,\n        marginBottom: tokens.spacingVerticalS,\n        marginRight: '0px',\n        paddingRight: tokens.spacingVerticalM\n    },\n    noActions: {\n        display: 'none'\n    }\n});\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */ export const useMessageBarActionsStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    const containerActionBaseStyles = useContainerActionBaseStyles();\n    const multilineStyles = useMultilineStyles();\n    state.root.className = mergeClasses(messageBarActionsClassNames.root, rootBaseStyles, state.layout === 'multiline' && multilineStyles.root, !state.hasActions && multilineStyles.noActions, state.root.className);\n    if (state.containerAction) {\n        state.containerAction.className = mergeClasses(messageBarActionsClassNames.containerAction, containerActionBaseStyles, state.containerAction.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE,uBAAuB;EAC7BC,eAAe,EAAE;AACrB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,iBAAiB,gBAAGP,aAAA,gSAK7B,CAAC;AACF,MAAMQ,4BAA4B,gBAAGR,aAAA,wKAGpC,CAAC;AACF,MAAMS,kBAAkB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAW1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,cAAc,GAAGb,iBAAiB,CAAC,CAAC;EAC1C,MAAMc,yBAAyB,GAAGb,4BAA4B,CAAC,CAAC;EAChE,MAAMc,eAAe,GAAGb,kBAAkB,CAAC,CAAC;EAC5CU,KAAK,CAACd,IAAI,CAACkB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACC,IAAI,EAAEe,cAAc,EAAED,KAAK,CAACK,MAAM,KAAK,WAAW,IAAIF,eAAe,CAACjB,IAAI,EAAE,CAACc,KAAK,CAACM,UAAU,IAAIH,eAAe,CAACP,SAAS,EAAEI,KAAK,CAACd,IAAI,CAACkB,SAAS,CAAC;EACjN,IAAIJ,KAAK,CAACb,eAAe,EAAE;IACvBa,KAAK,CAACb,eAAe,CAACiB,SAAS,GAAGrB,YAAY,CAACE,2BAA2B,CAACE,eAAe,EAAEe,yBAAyB,EAAEF,KAAK,CAACb,eAAe,CAACiB,SAAS,CAAC;EAC3J;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const messageBarActionsClassNames = {

package/lib/components/MessageBarActions/useMessageBarActionsStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MessageBarActionsSlots, MessageBarActionsState } from './MessageBarActions.types';\n\nexport const messageBarActionsClassNames: SlotClassNames<MessageBarActionsSlots> = {\n  root: 'fui-MessageBarActions',\n  containerAction: 'fui-MessageBarActions__containerAction',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n  gridArea: 'secondaryActions',\n  display: 'flex',\n  columnGap: tokens.spacingHorizontalM,\n  paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useContainerActionBaseStyles = makeResetStyles({\n  gridArea: 'actions',\n  paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useMultilineStyles = makeStyles({\n  root: {\n    justifyContent: 'end',\n    marginTop: tokens.spacingVerticalMNudge,\n    marginBottom: tokens.spacingVerticalS,\n    marginRight: '0px',\n    paddingRight: tokens.spacingVerticalM,\n  },\n\n  noActions: {\n    display: 'none',\n  },\n});\n\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */\nexport const useMessageBarActionsStyles_unstable = (state: MessageBarActionsState): MessageBarActionsState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  const containerActionBaseStyles = useContainerActionBaseStyles();\n  const multilineStyles = useMultilineStyles();\n  state.root.className = mergeClasses(\n    messageBarActionsClassNames.root,\n    rootBaseStyles,\n    state.layout === 'multiline' && multilineStyles.root,\n    !state.hasActions && multilineStyles.noActions,\n    state.root.className,\n  );\n\n  if (state.containerAction) {\n    state.containerAction.className = mergeClasses(\n      messageBarActionsClassNames.containerAction,\n      containerActionBaseStyles,\n      state.containerAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","gridArea","display","columnGap","spacingHorizontalM","paddingRight","useContainerActionBaseStyles","useMultilineStyles","justifyContent","marginTop","spacingVerticalMNudge","marginBottom","spacingVerticalS","marginRight","spacingVerticalM","noActions","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAoBP,gBAAgB;IACxCQ,UAAU;IACVC,SAAS;IACTC,WAAWP,OAAOQ,kBAAkB;IACpCC,cAAcT,OAAOQ,kBAAkB;AACzC;AAEA,MAAME,+BAA+Bb,gBAAgB;IACnDQ,UAAU;IACVI,cAAcT,OAAOQ,kBAAkB;AACzC;AAEA,MAAMG,qBAAqBb,WAAW;IACpCI,MAAM;QACJU,gBAAgB;QAChBC,WAAWb,OAAOc,qBAAqB;QACvCC,cAAcf,OAAOgB,gBAAgB;QACrCC,aAAa;QACbR,cAAcT,OAAOkB,gBAAgB;IACvC;IAEAC,WAAW;QACTb,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMc,sCAAsC,CAACC;IAClD;IAEA,MAAMC,iBAAiBlB;IACvB,MAAMmB,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMnB,IAAI,CAACuB,SAAS,GAAG1B,aACrBE,4BAA4BC,IAAI,EAChCoB,gBACAD,MAAMK,MAAM,KAAK,eAAeF,gBAAgBtB,IAAI,EACpD,CAACmB,MAAMM,UAAU,IAAIH,gBAAgBL,SAAS,EAC9CE,MAAMnB,IAAI,CAACuB,SAAS;IAGtB,IAAIJ,MAAMlB,eAAe,EAAE;QACzBkB,MAAMlB,eAAe,CAACsB,SAAS,GAAG1B,aAChCE,4BAA4BE,eAAe,EAC3CoB,2BACAF,MAAMlB,eAAe,CAACsB,SAAS;IAEnC;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MessageBarActions/useMessageBarActionsStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MessageBarActionsSlots, MessageBarActionsState } from './MessageBarActions.types';\n\nexport const messageBarActionsClassNames: SlotClassNames<MessageBarActionsSlots> = {\n  root: 'fui-MessageBarActions',\n  containerAction: 'fui-MessageBarActions__containerAction',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyles = makeResetStyles({\n  gridArea: 'secondaryActions',\n  display: 'flex',\n  columnGap: tokens.spacingHorizontalM,\n  paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useContainerActionBaseStyles = makeResetStyles({\n  gridArea: 'actions',\n  paddingRight: tokens.spacingHorizontalM,\n});\n\nconst useMultilineStyles = makeStyles({\n  root: {\n    justifyContent: 'end',\n    marginTop: tokens.spacingVerticalMNudge,\n    marginBottom: tokens.spacingVerticalS,\n    marginRight: '0px',\n    paddingRight: tokens.spacingVerticalM,\n  },\n\n  noActions: {\n    display: 'none',\n  },\n});\n\n/**\n * Apply styling to the MessageBarActions slots based on the state\n */\nexport const useMessageBarActionsStyles_unstable = (state: MessageBarActionsState): MessageBarActionsState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  const containerActionBaseStyles = useContainerActionBaseStyles();\n  const multilineStyles = useMultilineStyles();\n  state.root.className = mergeClasses(\n    messageBarActionsClassNames.root,\n    rootBaseStyles,\n    state.layout === 'multiline' && multilineStyles.root,\n    !state.hasActions && multilineStyles.noActions,\n    state.root.className,\n  );\n\n  if (state.containerAction) {\n    state.containerAction.className = mergeClasses(\n      messageBarActionsClassNames.containerAction,\n      containerActionBaseStyles,\n      state.containerAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","messageBarActionsClassNames","root","containerAction","useRootBaseStyles","gridArea","display","columnGap","spacingHorizontalM","paddingRight","useContainerActionBaseStyles","useMultilineStyles","justifyContent","marginTop","spacingVerticalMNudge","marginBottom","spacingVerticalS","marginRight","spacingVerticalM","noActions","useMessageBarActionsStyles_unstable","state","rootBaseStyles","containerActionBaseStyles","multilineStyles","className","layout","hasActions"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,iBAAiB;AACnB,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAoBP,gBAAgB;IACxCQ,UAAU;IACVC,SAAS;IACTC,WAAWP,OAAOQ,kBAAkB;IACpCC,cAAcT,OAAOQ,kBAAkB;AACzC;AAEA,MAAME,+BAA+Bb,gBAAgB;IACnDQ,UAAU;IACVI,cAAcT,OAAOQ,kBAAkB;AACzC;AAEA,MAAMG,qBAAqBb,WAAW;IACpCI,MAAM;QACJU,gBAAgB;QAChBC,WAAWb,OAAOc,qBAAqB;QACvCC,cAAcf,OAAOgB,gBAAgB;QACrCC,aAAa;QACbR,cAAcT,OAAOkB,gBAAgB;IACvC;IAEAC,WAAW;QACTb,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMc,sCAAsC,CAACC;IAClD;IAEA,MAAMC,iBAAiBlB;IACvB,MAAMmB,4BAA4Bb;IAClC,MAAMc,kBAAkBb;IACxBU,MAAMnB,IAAI,CAACuB,SAAS,GAAG1B,aACrBE,4BAA4BC,IAAI,EAChCoB,gBACAD,MAAMK,MAAM,KAAK,eAAeF,gBAAgBtB,IAAI,EACpD,CAACmB,MAAMM,UAAU,IAAIH,gBAAgBL,SAAS,EAC9CE,MAAMnB,IAAI,CAACuB,SAAS;IAGtB,IAAIJ,MAAMlB,eAAe,EAAE;QACzBkB,MAAMlB,eAAe,CAACsB,SAAS,GAAG1B,aAChCE,4BAA4BE,eAAe,EAC3CoB,2BACAF,MAAMlB,eAAe,CAACsB,SAAS;IAEnC;IAEA,OAAOJ;AACT,EAAE"}

package/lib/components/MessageBarBody/MessageBarBody.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { useMessageBarBody_unstable } from './useMessageBarBody';

package/lib/components/MessageBarBody/MessageBarBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarBody/MessageBarBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarBody_unstable } from './useMessageBarBody';\nimport { renderMessageBarBody_unstable } from './renderMessageBarBody';\nimport { useMessageBarBodyStyles_unstable } from './useMessageBarBodyStyles.styles';\nimport { useMessageBarBodyContextValues_unstable } from './useMessageBarBodyContextValues';\nimport type { MessageBarBodyProps } from './MessageBarBody.types';\n\n/**\n * MessageBarBody component\n */\nexport const MessageBarBody: ForwardRefComponent<MessageBarBodyProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarBody_unstable(props, ref);\n  const ctx = useMessageBarBodyContextValues_unstable(state);\n\n  useMessageBarBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarBodyStyles_unstable')(state);\n  return renderMessageBarBody_unstable(state, ctx);\n});\n\nMessageBarBody.displayName = 'MessageBarBody';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarBody_unstable","renderMessageBarBody_unstable","useMessageBarBodyStyles_unstable","useMessageBarBodyContextValues_unstable","MessageBarBody","forwardRef","props","ref","state","ctx","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAChD,MAAME,MAAMN,wCAAwCK;IAEpDN,iCAAiCM;IACjCT,4BAA4B,oCAAoCS;IAChE,OAAOP,8BAA8BO,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MessageBarBody/MessageBarBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarBody_unstable } from './useMessageBarBody';\nimport { renderMessageBarBody_unstable } from './renderMessageBarBody';\nimport { useMessageBarBodyStyles_unstable } from './useMessageBarBodyStyles.styles';\nimport { useMessageBarBodyContextValues_unstable } from './useMessageBarBodyContextValues';\nimport type { MessageBarBodyProps } from './MessageBarBody.types';\n\n/**\n * MessageBarBody component\n */\nexport const MessageBarBody: ForwardRefComponent<MessageBarBodyProps> = React.forwardRef((props, ref) => {\n  const state = useMessageBarBody_unstable(props, ref);\n  const ctx = useMessageBarBodyContextValues_unstable(state);\n\n  useMessageBarBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useMessageBarBodyStyles_unstable')(state);\n  return renderMessageBarBody_unstable(state, ctx);\n});\n\nMessageBarBody.displayName = 'MessageBarBody';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarBody_unstable","renderMessageBarBody_unstable","useMessageBarBodyStyles_unstable","useMessageBarBodyContextValues_unstable","MessageBarBody","forwardRef","props","ref","state","ctx","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAChD,MAAME,MAAMN,wCAAwCK;IAEpDN,iCAAiCM;IACjCT,4BAA4B,oCAAoCS;IAChE,OAAOP,8BAA8BO,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

package/lib/components/MessageBarBody/renderMessageBarBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBarBody/renderMessageBarBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarBodyState, MessageBarBodySlots, MessageBarBodyContextValues } from './MessageBarBody.types';\nimport { LinkContextProvider } from '@fluentui/react-link';\n\n/**\n * Render the final JSX of MessageBarBody\n */\nexport const renderMessageBarBody_unstable = (\n  state: MessageBarBodyState,\n  contextValues: MessageBarBodyContextValues,\n) => {\n  assertSlots<MessageBarBodySlots>(state);\n\n  return (\n    <LinkContextProvider value={contextValues.link}>\n      <state.root />\n    </LinkContextProvider>\n  );\n};\n"],"names":["assertSlots","LinkContextProvider","renderMessageBarBody_unstable","state","contextValues","value","link","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,mBAAmB,QAAQ,uBAAuB;AAE3D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,IAAI;kBAC5C,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/MessageBarBody/renderMessageBarBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarBodyState, MessageBarBodySlots, MessageBarBodyContextValues } from './MessageBarBody.types';\nimport { LinkContextProvider } from '@fluentui/react-link';\n\n/**\n * Render the final JSX of MessageBarBody\n */\nexport const renderMessageBarBody_unstable = (\n  state: MessageBarBodyState,\n  contextValues: MessageBarBodyContextValues,\n): JSXElement => {\n  assertSlots<MessageBarBodySlots>(state);\n\n  return (\n    <LinkContextProvider value={contextValues.link}>\n      <state.root />\n    </LinkContextProvider>\n  );\n};\n"],"names":["assertSlots","LinkContextProvider","renderMessageBarBody_unstable","state","contextValues","value","link","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,mBAAmB,QAAQ,uBAAuB;AAE3D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,IAAI;kBAC5C,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}