@fluentui/react-message-bar 9.7.3 → 9.7.5

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-message-bar
 
-This log was last generated on Mon, 29 Jun 2026 15:14:11 GMT and should not be manually modified.
+<!-- This log was last generated on Tue, 11 Aug 2026 17:16:02 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.7.5)
+
+Tue, 11 Aug 2026 17:16:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.7.4..@fluentui/react-message-bar_v9.7.5)
+
+### Patches
+
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+- Bump @fluentui/react-button to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-link to v9.8.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-motion to v9.16.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.7.4)
+
+Tue, 04 Aug 2026 10:12:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.7.3..@fluentui/react-message-bar_v9.7.4)
+
+### Patches
+
+- fix(MessageBar): v9 MessageBar Resize Flicker Fix ([PR #36405](https://github.com/microsoft/fluentui/pull/36405) by jiangemma@microsoft.com)
+
 ## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.7.3)
 
-Mon, 29 Jun 2026 15:14:11 GMT 
+Mon, 29 Jun 2026 15:15:07 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.7.2..@fluentui/react-message-bar_v9.7.3)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,340 @@
+import type { ButtonContextValue } from '@fluentui/react-button';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } 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';
+
+/**
+ * MessageBar component
+ */
+export declare const MessageBar: ForwardRefComponent<MessageBarProps>;
+
+/**
+ * MessageBarActions component
+ */
+export declare const MessageBarActions: ForwardRefComponent<MessageBarActionsProps>;
+
+export declare const messageBarActionsClassNames: SlotClassNames<MessageBarActionsSlots>;
+
+export declare type MessageBarActionsContextValues = {
+    button: ButtonContextValue;
+};
+
+/**
+ * MessageBarActions Props
+ */
+export declare type MessageBarActionsProps = ComponentProps<MessageBarActionsSlots>;
+
+export declare type MessageBarActionsSlots = {
+    root: Slot<'div'>;
+    /**
+     * Generally the 'Dismiss' button for the MessageBar
+     */
+    containerAction?: Slot<'div'>;
+};
+
+/**
+ * State used in rendering MessageBarActions
+ */
+export declare type MessageBarActionsState = ComponentState<MessageBarActionsSlots> & Pick<Required<MessageBarContextValue>, 'layout'> & {
+    /**
+     * Whether there are actions as children of this component
+     */
+    hasActions: boolean;
+};
+
+export declare type MessageBarBaseProps = DistributiveOmit<MessageBarProps, 'shape'>;
+
+export declare type MessageBarBaseState = DistributiveOmit<MessageBarState, 'shape'>;
+
+/**
+ * MessageBarBody component
+ */
+export declare const MessageBarBody: ForwardRefComponent<MessageBarBodyProps>;
+
+export declare const messageBarBodyClassNames: SlotClassNames<MessageBarBodySlots>;
+
+export declare type MessageBarBodyContextValues = {
+    link: {
+        inline?: boolean;
+    };
+};
+
+/**
+ * MessageBarBody Props
+ */
+export declare type MessageBarBodyProps = ComponentProps<MessageBarBodySlots>;
+
+export declare type MessageBarBodySlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering MessageBarBody
+ */
+export declare type MessageBarBodyState = ComponentState<MessageBarBodySlots>;
+
+export declare const messageBarClassNames: SlotClassNames<MessageBarSlots>;
+
+export declare const messageBarContextDefaultValue: MessageBarContextValue;
+
+export declare const MessageBarContextProvider: React_2.Provider<MessageBarContextValue | undefined>;
+
+export declare type MessageBarContextValue = {
+    layout: 'multiline' | 'singleline' | 'auto';
+    actionsRef: React_2.MutableRefObject<HTMLDivElement | null>;
+    bodyRef: React_2.MutableRefObject<HTMLDivElement | null>;
+    titleId: string;
+};
+
+export declare type MessageBarContextValues = {
+    messageBar: MessageBarContextValue;
+};
+
+/**
+ * MessageBarGroup component
+ */
+export declare const MessageBarGroup: ForwardRefComponent<MessageBarGroupProps>;
+
+export declare const messageBarGroupClassNames: SlotClassNames<MessageBarGroupSlots>;
+
+/**
+ * MessageBarGroup Props
+ */
+export declare type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {
+    children: React_2.ReactElement[] | React_2.ReactElement;
+    animate?: 'exit-only' | 'both';
+};
+
+export declare type MessageBarGroupSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * 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[];
+};
+
+export declare type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * MessageBar Props
+ */
+export declare type MessageBarProps = ComponentProps<MessageBarSlots> & Pick<Partial<MessageBarContextValue>, 'layout'> & {
+    /**
+     * Default designs announcement presets
+     * @default info
+     */
+    intent?: MessageBarIntent;
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+     */
+    politeness?: 'assertive' | 'polite';
+    /**
+     * Use squal for page level messages and rounded for component level messages
+     * @default rounded
+     */
+    shape?: 'square' | 'rounded';
+};
+
+export declare type MessageBarSlots = {
+    root: Slot<'div'>;
+    icon?: Slot<'div'>;
+    /**
+     * Rendered when the component is in multiline layout to guarantee correct spacing even
+     * if no actions are rendered. When actions are rendered, the default actions grid area will render
+     * over this element
+     *
+     * NOTE: If you are using this slot, this probably means that you are using the MessageBar without
+     * actions, this is not recommended from an accesibility point of view
+     */
+    bottomReflowSpacer?: Slot<'div'>;
+};
+
+/**
+ * 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;
+};
+
+/**
+ * MessageBarTitle component
+ */
+export declare const MessageBarTitle: ForwardRefComponent<MessageBarTitleProps>;
+
+export declare const messageBarTitleClassNames: SlotClassNames<MessageBarTitleSlots>;
+
+/**
+ * MessageBarTitle Props
+ */
+export declare type MessageBarTitleProps = ComponentProps<MessageBarTitleSlots>;
+
+export declare type MessageBarTitleSlots = {
+    root: Slot<'span'>;
+};
+
+/**
+ * State used in rendering MessageBarTitle
+ */
+export declare type MessageBarTitleState = ComponentState<MessageBarTitleSlots>;
+
+/**
+ * @internal
+ */
+export declare const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue;
+
+/**
+ * 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>;
+};
+
+/**
+ * Render the final JSX of MessageBar
+ */
+export declare const renderMessageBar_unstable: (state: MessageBarBaseState, contexts: MessageBarContextValues) => JSXElement;
+
+/**
+ * Render the final JSX of MessageBarActions
+ */
+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) => JSXElement;
+
+/**
+ * Render the final JSX of MessageBarGroup
+ */
+export declare const renderMessageBarGroup_unstable: (state: MessageBarGroupState) => JSXElement;
+
+/**
+ * Render the final JSX of MessageBarTitle
+ */
+export declare const renderMessageBarTitle_unstable: (state: MessageBarTitleState) => JSXElement;
+
+/**
+ * Create the state required to render MessageBar.
+ *
+ * The returned state can be modified with hooks such as useMessageBarStyles_unstable,
+ * before being passed to renderMessageBar_unstable.
+ *
+ * @param props - props from this instance of MessageBar
+ * @param ref - reference to root HTMLElement of MessageBar
+ */
+export declare const useMessageBar_unstable: (props: MessageBarProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarState;
+
+/**
+ * Create the state required to render MessageBarActions.
+ *
+ * The returned state can be modified with hooks such as useMessageBarActionsStyles_unstable,
+ * before being passed to renderMessageBarActions_unstable.
+ *
+ * @param props - props from this instance of MessageBarActions
+ * @param ref - reference to root HTMLElement of MessageBarActions
+ */
+export declare const useMessageBarActions_unstable: (props: MessageBarActionsProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarActionsState;
+
+export declare function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues;
+
+/**
+ * Apply styling to the MessageBarActions slots based on the state
+ */
+export declare const useMessageBarActionsStyles_unstable: (state: MessageBarActionsState) => MessageBarActionsState;
+
+/**
+ * Create the base state required to render MessageBar without design-specific props.
+ *
+ * @param props - props from this instance of MessageBar (without shape)
+ * @param ref - reference to root HTMLElement of MessageBar
+ */
+export declare const useMessageBarBase_unstable: (props: MessageBarBaseProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarBaseState;
+
+/**
+ * Create the state required to render MessageBarBody.
+ *
+ * The returned state can be modified with hooks such as useMessageBarBodyStyles_unstable,
+ * before being passed to renderMessageBarBody_unstable.
+ *
+ * @param props - props from this instance of MessageBarBody
+ * @param ref - reference to root HTMLElement of MessageBarBody
+ */
+export declare const useMessageBarBody_unstable: (props: MessageBarBodyProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarBodyState;
+
+export declare function useMessageBarBodyContextValues_unstable(state: MessageBarBodyState): MessageBarBodyContextValues;
+
+/**
+ * Apply styling to the MessageBarBody slots based on the state
+ */
+export declare const useMessageBarBodyStyles_unstable: (state: MessageBarBodyState) => MessageBarBodyState;
+
+export declare const useMessageBarContext: () => MessageBarContextValue;
+
+export declare function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues;
+
+/**
+ * Create the state required to render MessageBarGroup.
+ *
+ * The returned state can be modified with hooks such as useMessageBarGroupStyles_unstable,
+ * before being passed to renderMessageBarGroup_unstable.
+ *
+ * @param props - props from this instance of MessageBarGroup
+ * @param ref - reference to root HTMLElement of MessageBarGroup
+ */
+export declare const useMessageBarGroup_unstable: (props: MessageBarGroupProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarGroupState;
+
+/**
+ * Apply styling to the MessageBarGroup slots based on the state
+ */
+export declare const useMessageBarGroupStyles_unstable: (state: MessageBarGroupState) => MessageBarGroupState;
+
+/**
+ * Apply styling to the MessageBar slots based on the state
+ */
+export declare const useMessageBarStyles_unstable: (state: MessageBarState) => MessageBarState;
+
+/**
+ * Create the state required to render MessageBarTitle.
+ *
+ * The returned state can be modified with hooks such as useMessageBarTitleStyles_unstable,
+ * before being passed to renderMessageBarTitle_unstable.
+ *
+ * @param props - props from this instance of MessageBarTitle
+ * @param ref - reference to root HTMLElement of MessageBarTitle
+ */
+export declare const useMessageBarTitle_unstable: (props: MessageBarTitleProps, ref: React_2.Ref<HTMLElement>) => MessageBarTitleState;
+
+/**
+ * Apply styling to the MessageBarTitle slots based on the state
+ */
+export declare const useMessageBarTitleStyles_unstable: (state: MessageBarTitleState) => MessageBarTitleState;
+
+/**
+ * @internal
+ */
+export declare const useMessageBarTransitionContext: () => MessageBarTransitionContextValue;
+
+export { }

package/lib/MessageBar.js

@@ -1 +1 @@
-export { MessageBar, messageBarClassNames, renderMessageBar_unstable, useMessageBarContextValue_unstable, useMessageBarStyles_unstable, useMessageBarBase_unstable, useMessageBar_unstable } from './components/MessageBar/index';
+export { MessageBar, messageBarClassNames, renderMessageBar_unstable, useMessageBarContextValue_unstable, useMessageBarStyles_unstable, useMessageBarBase_unstable, useMessageBar_unstable } from "./components/MessageBar/index.js";

package/lib/MessageBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MessageBar.ts"],"sourcesContent":["export type {\n  MessageBarBaseProps,\n  MessageBarBaseState,\n  MessageBarContextValues,\n  MessageBarIntent,\n  MessageBarProps,\n  MessageBarSlots,\n  MessageBarState,\n} from './components/MessageBar/index';\nexport {\n  MessageBar,\n  messageBarClassNames,\n  renderMessageBar_unstable,\n  useMessageBarContextValue_unstable,\n  useMessageBarStyles_unstable,\n  useMessageBarBase_unstable,\n  useMessageBar_unstable,\n} from './components/MessageBar/index';\n"],"names":["MessageBar","messageBarClassNames","renderMessageBar_unstable","useMessageBarContextValue_unstable","useMessageBarStyles_unstable","useMessageBarBase_unstable","useMessageBar_unstable"],"mappings":"AASA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,kCAAkC,EAClCC,4BAA4B,EAC5BC,0BAA0B,EAC1BC,sBAAsB,QACjB,gCAAgC"}
+{"version":3,"sources":["../src/MessageBar.ts"],"sourcesContent":["export type {\n  MessageBarBaseProps,\n  MessageBarBaseState,\n  MessageBarContextValues,\n  MessageBarIntent,\n  MessageBarProps,\n  MessageBarSlots,\n  MessageBarState,\n} from './components/MessageBar/index';\nexport {\n  MessageBar,\n  messageBarClassNames,\n  renderMessageBar_unstable,\n  useMessageBarContextValue_unstable,\n  useMessageBarStyles_unstable,\n  useMessageBarBase_unstable,\n  useMessageBar_unstable,\n} from './components/MessageBar/index';\n"],"names":["MessageBar","messageBarClassNames","renderMessageBar_unstable","useMessageBarContextValue_unstable","useMessageBarStyles_unstable","useMessageBarBase_unstable","useMessageBar_unstable"],"mappings":"AASA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,kCAAkC,EAClCC,4BAA4B,EAC5BC,0BAA0B,EAC1BC,sBAAsB,QACjB,mCAAgC"}

package/lib/MessageBarActions.js

@@ -1 +1 @@
-export { MessageBarActions, messageBarActionsClassNames, renderMessageBarActions_unstable, useMessageBarActionsContextValue_unstable, useMessageBarActionsStyles_unstable, useMessageBarActions_unstable } from './components/MessageBarActions/index';
+export { MessageBarActions, messageBarActionsClassNames, renderMessageBarActions_unstable, useMessageBarActionsContextValue_unstable, useMessageBarActionsStyles_unstable, useMessageBarActions_unstable } from "./components/MessageBarActions/index.js";

package/lib/MessageBarActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MessageBarActions.ts"],"sourcesContent":["export type {\n  MessageBarActionsContextValues,\n  MessageBarActionsProps,\n  MessageBarActionsSlots,\n  MessageBarActionsState,\n} from './components/MessageBarActions/index';\nexport {\n  MessageBarActions,\n  messageBarActionsClassNames,\n  renderMessageBarActions_unstable,\n  useMessageBarActionsContextValue_unstable,\n  useMessageBarActionsStyles_unstable,\n  useMessageBarActions_unstable,\n} from './components/MessageBarActions/index';\n"],"names":["MessageBarActions","messageBarActionsClassNames","renderMessageBarActions_unstable","useMessageBarActionsContextValue_unstable","useMessageBarActionsStyles_unstable","useMessageBarActions_unstable"],"mappings":"AAMA,SACEA,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,yCAAyC,EACzCC,mCAAmC,EACnCC,6BAA6B,QACxB,uCAAuC"}
+{"version":3,"sources":["../src/MessageBarActions.ts"],"sourcesContent":["export type {\n  MessageBarActionsContextValues,\n  MessageBarActionsProps,\n  MessageBarActionsSlots,\n  MessageBarActionsState,\n} from './components/MessageBarActions/index';\nexport {\n  MessageBarActions,\n  messageBarActionsClassNames,\n  renderMessageBarActions_unstable,\n  useMessageBarActionsContextValue_unstable,\n  useMessageBarActionsStyles_unstable,\n  useMessageBarActions_unstable,\n} from './components/MessageBarActions/index';\n"],"names":["MessageBarActions","messageBarActionsClassNames","renderMessageBarActions_unstable","useMessageBarActionsContextValue_unstable","useMessageBarActionsStyles_unstable","useMessageBarActions_unstable"],"mappings":"AAMA,SACEA,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,yCAAyC,EACzCC,mCAAmC,EACnCC,6BAA6B,QACxB,0CAAuC"}

package/lib/MessageBarBody.js

@@ -1 +1 @@
-export { MessageBarBody, messageBarBodyClassNames, renderMessageBarBody_unstable, useMessageBarBodyStyles_unstable, useMessageBarBody_unstable, useMessageBarBodyContextValues_unstable } from './components/MessageBarBody/index';
+export { MessageBarBody, messageBarBodyClassNames, renderMessageBarBody_unstable, useMessageBarBodyStyles_unstable, useMessageBarBody_unstable, useMessageBarBodyContextValues_unstable } from "./components/MessageBarBody/index.js";

package/lib/MessageBarBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MessageBarBody.ts"],"sourcesContent":["export type {\n  MessageBarBodyContextValues,\n  MessageBarBodyProps,\n  MessageBarBodySlots,\n  MessageBarBodyState,\n} from './components/MessageBarBody/index';\nexport {\n  MessageBarBody,\n  messageBarBodyClassNames,\n  renderMessageBarBody_unstable,\n  useMessageBarBodyStyles_unstable,\n  useMessageBarBody_unstable,\n  useMessageBarBodyContextValues_unstable,\n} from './components/MessageBarBody/index';\n"],"names":["MessageBarBody","messageBarBodyClassNames","renderMessageBarBody_unstable","useMessageBarBodyStyles_unstable","useMessageBarBody_unstable","useMessageBarBodyContextValues_unstable"],"mappings":"AAMA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,uCAAuC,QAClC,oCAAoC"}
+{"version":3,"sources":["../src/MessageBarBody.ts"],"sourcesContent":["export type {\n  MessageBarBodyContextValues,\n  MessageBarBodyProps,\n  MessageBarBodySlots,\n  MessageBarBodyState,\n} from './components/MessageBarBody/index';\nexport {\n  MessageBarBody,\n  messageBarBodyClassNames,\n  renderMessageBarBody_unstable,\n  useMessageBarBodyStyles_unstable,\n  useMessageBarBody_unstable,\n  useMessageBarBodyContextValues_unstable,\n} from './components/MessageBarBody/index';\n"],"names":["MessageBarBody","messageBarBodyClassNames","renderMessageBarBody_unstable","useMessageBarBodyStyles_unstable","useMessageBarBody_unstable","useMessageBarBodyContextValues_unstable"],"mappings":"AAMA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,uCAAuC,QAClC,uCAAoC"}

package/lib/MessageBarGroup.js

@@ -1 +1 @@
-export { MessageBarGroup, messageBarGroupClassNames, renderMessageBarGroup_unstable, useMessageBarGroupStyles_unstable, useMessageBarGroup_unstable } from './components/MessageBarGroup/index';
+export { MessageBarGroup, messageBarGroupClassNames, renderMessageBarGroup_unstable, useMessageBarGroupStyles_unstable, useMessageBarGroup_unstable } from "./components/MessageBarGroup/index.js";

package/lib/MessageBarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MessageBarGroup.ts"],"sourcesContent":["export type {\n  MessageBarGroupProps,\n  MessageBarGroupSlots,\n  MessageBarGroupState,\n} from './components/MessageBarGroup/index';\nexport {\n  MessageBarGroup,\n  messageBarGroupClassNames,\n  renderMessageBarGroup_unstable,\n  useMessageBarGroupStyles_unstable,\n  useMessageBarGroup_unstable,\n} from './components/MessageBarGroup/index';\n"],"names":["MessageBarGroup","messageBarGroupClassNames","renderMessageBarGroup_unstable","useMessageBarGroupStyles_unstable","useMessageBarGroup_unstable"],"mappings":"AAKA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,qCAAqC"}
+{"version":3,"sources":["../src/MessageBarGroup.ts"],"sourcesContent":["export type {\n  MessageBarGroupProps,\n  MessageBarGroupSlots,\n  MessageBarGroupState,\n} from './components/MessageBarGroup/index';\nexport {\n  MessageBarGroup,\n  messageBarGroupClassNames,\n  renderMessageBarGroup_unstable,\n  useMessageBarGroupStyles_unstable,\n  useMessageBarGroup_unstable,\n} from './components/MessageBarGroup/index';\n"],"names":["MessageBarGroup","messageBarGroupClassNames","renderMessageBarGroup_unstable","useMessageBarGroupStyles_unstable","useMessageBarGroup_unstable"],"mappings":"AAKA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,wCAAqC"}

package/lib/MessageBarTitle.js

@@ -1 +1 @@
-export { MessageBarTitle, messageBarTitleClassNames, renderMessageBarTitle_unstable, useMessageBarTitleStyles_unstable, useMessageBarTitle_unstable } from './components/MessageBarTitle/index';
+export { MessageBarTitle, messageBarTitleClassNames, renderMessageBarTitle_unstable, useMessageBarTitleStyles_unstable, useMessageBarTitle_unstable } from "./components/MessageBarTitle/index.js";

package/lib/MessageBarTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/MessageBarTitle.ts"],"sourcesContent":["export type {\n  MessageBarTitleProps,\n  MessageBarTitleSlots,\n  MessageBarTitleState,\n} from './components/MessageBarTitle/index';\nexport {\n  MessageBarTitle,\n  messageBarTitleClassNames,\n  renderMessageBarTitle_unstable,\n  useMessageBarTitleStyles_unstable,\n  useMessageBarTitle_unstable,\n} from './components/MessageBarTitle/index';\n"],"names":["MessageBarTitle","messageBarTitleClassNames","renderMessageBarTitle_unstable","useMessageBarTitleStyles_unstable","useMessageBarTitle_unstable"],"mappings":"AAKA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,qCAAqC"}
+{"version":3,"sources":["../src/MessageBarTitle.ts"],"sourcesContent":["export type {\n  MessageBarTitleProps,\n  MessageBarTitleSlots,\n  MessageBarTitleState,\n} from './components/MessageBarTitle/index';\nexport {\n  MessageBarTitle,\n  messageBarTitleClassNames,\n  renderMessageBarTitle_unstable,\n  useMessageBarTitleStyles_unstable,\n  useMessageBarTitle_unstable,\n} from './components/MessageBarTitle/index';\n"],"names":["MessageBarTitle","messageBarTitleClassNames","renderMessageBarTitle_unstable","useMessageBarTitleStyles_unstable","useMessageBarTitle_unstable"],"mappings":"AAKA,SACEA,eAAe,EACfC,yBAAyB,EACzBC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,QACtB,wCAAqC"}

package/lib/components/MessageBar/MessageBar.js

@@ -1,10 +1,10 @@
 'use client';
-import * as React from 'react';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import { useMessageBar_unstable } from './useMessageBar';
-import { renderMessageBar_unstable } from './renderMessageBar';
-import { useMessageBarStyles_unstable } from './useMessageBarStyles.styles';
-import { useMessageBarContextValue_unstable } from './useMessageBarContextValues';
+import * as React from "react";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
+import { useMessageBar_unstable } from "./useMessageBar.js";
+import { renderMessageBar_unstable } from "./renderMessageBar.js";
+import { useMessageBarStyles_unstable } from "./useMessageBarStyles.styles.js";
+import { useMessageBarContextValue_unstable } from "./useMessageBarContextValues.js";
 /**
  * MessageBar component
  */ export const MessageBar = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"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"}
+{"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,qBAAkB;AACzD,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,kCAA+B;AAE5E,SAASC,kCAAkC,QAAQ,kCAA+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/getIntentIcon.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { CheckmarkCircleFilled, InfoFilled, WarningFilled, DiamondDismissFilled } from '@fluentui/react-icons';
+import * as React from "react";
+import { CheckmarkCircleFilled, InfoFilled, WarningFilled, DiamondDismissFilled } from "@fluentui/react-icons";
 export function getIntentIcon(intent) {
     switch(intent){
         case 'info':

package/lib/components/MessageBar/index.js

@@ -1,5 +1,5 @@
-export { MessageBar } from './MessageBar';
-export { renderMessageBar_unstable } from './renderMessageBar';
-export { useMessageBarBase_unstable, useMessageBar_unstable } from './useMessageBar';
-export { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';
-export { useMessageBarContextValue_unstable } from './useMessageBarContextValues';
+export { MessageBar } from "./MessageBar.js";
+export { renderMessageBar_unstable } from "./renderMessageBar.js";
+export { useMessageBarBase_unstable, useMessageBar_unstable } from "./useMessageBar.js";
+export { messageBarClassNames, useMessageBarStyles_unstable } from "./useMessageBarStyles.styles.js";
+export { useMessageBarContextValue_unstable } from "./useMessageBarContextValues.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MessageBar/index.ts"],"sourcesContent":["export { MessageBar } from './MessageBar';\nexport type {\n  MessageBarBaseProps,\n  MessageBarBaseState,\n  MessageBarContextValues,\n  MessageBarIntent,\n  MessageBarProps,\n  MessageBarSlots,\n  MessageBarState,\n} from './MessageBar.types';\nexport { renderMessageBar_unstable } from './renderMessageBar';\nexport { useMessageBarBase_unstable, useMessageBar_unstable } from './useMessageBar';\nexport { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nexport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n"],"names":["MessageBar","renderMessageBar_unstable","useMessageBarBase_unstable","useMessageBar_unstable","messageBarClassNames","useMessageBarStyles_unstable","useMessageBarContextValue_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAU1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,0BAA0B,EAAEC,sBAAsB,QAAQ,kBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B;AAClG,SAASC,kCAAkC,QAAQ,+BAA+B"}
+{"version":3,"sources":["../src/components/MessageBar/index.ts"],"sourcesContent":["export { MessageBar } from './MessageBar';\nexport type {\n  MessageBarBaseProps,\n  MessageBarBaseState,\n  MessageBarContextValues,\n  MessageBarIntent,\n  MessageBarProps,\n  MessageBarSlots,\n  MessageBarState,\n} from './MessageBar.types';\nexport { renderMessageBar_unstable } from './renderMessageBar';\nexport { useMessageBarBase_unstable, useMessageBar_unstable } from './useMessageBar';\nexport { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';\nexport { useMessageBarContextValue_unstable } from './useMessageBarContextValues';\n"],"names":["MessageBar","renderMessageBar_unstable","useMessageBarBase_unstable","useMessageBar_unstable","messageBarClassNames","useMessageBarStyles_unstable","useMessageBarContextValue_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,kBAAe;AAU1C,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,0BAA0B,EAAEC,sBAAsB,QAAQ,qBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,kCAA+B;AAClG,SAASC,kCAAkC,QAAQ,kCAA+B"}

package/lib/components/MessageBar/renderMessageBar.js

@@ -1,6 +1,6 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
-import { MessageBarContextProvider } from '../../contexts/messageBarContext';
+import { assertSlots } from "@fluentui/react-utilities";
+import { MessageBarContextProvider } from "../../contexts/messageBarContext.js";
 /**
  * Render the final JSX of MessageBar
  */ export const renderMessageBar_unstable = (state, contexts)=>{

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 { JSXElement } from '@fluentui/react-utilities';\nimport type { MessageBarBaseState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (\n  state: MessageBarBaseState,\n  contexts: MessageBarContextValues,\n): 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,CACvCC,OACAC;IAEAJ,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 { MessageBarBaseState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';\nimport { MessageBarContextProvider } from '../../contexts/messageBarContext';\n\n/**\n * Render the final JSX of MessageBar\n */\nexport const renderMessageBar_unstable = (\n  state: MessageBarBaseState,\n  contexts: MessageBarContextValues,\n): 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,sCAAmC;AAE7E;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEAJ,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,11 +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 '@fluentui/react-motion';
+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.js";
+import { useMessageBarReflow } from "./useMessageBarReflow.js";
+import { useMessageBarTransitionContext } from "../../contexts/messageBarTransitionContext.js";
+import { useMotionForwardedRef } from "@fluentui/react-motion";
 /**
  * Create the base state required to render MessageBar without design-specific props.
  *

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

@@ -1 +1 @@
-{"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 { MessageBarBaseProps, MessageBarBaseState, MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\n\n/**\n * Create the base state required to render MessageBar without design-specific props.\n *\n * @param props - props from this instance of MessageBar (without shape)\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBarBase_unstable = (\n  props: MessageBarBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): MessageBarBaseState => {\n  const { layout = 'auto', intent = 'info', politeness } = 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    icon: slot.optional(props.icon, {\n      renderByDefault: true,\n      elementType: 'div',\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  };\n};\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 { shape = 'rounded', ...baseProps } = props;\n\n  const state = useMessageBarBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    shape,\n    icon: slot.optional(props.icon, {\n      defaultProps: {\n        children: getIntentIcon(state.intent),\n      },\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMotionForwardedRef","useMessageBarBase_unstable","props","ref","layout","intent","politeness","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","useMessageBar_unstable","shape","baseProps","state","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,yBAAyB;AAE/D;;;;;CAKC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAE,GAAGJ;IACzD,MAAMK,qBAAqBD,CAAAA,uBAAAA,wBAAAA,aAAcD,WAAW,MAAK,IAAI,WAAW;IACxE,MAAMG,aAAaJ,WAAW;IAC9B,MAAM,EAAED,KAAKM,SAAS,EAAEC,SAAS,EAAE,GAAGZ,oBAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBN;IAE/E,4DAA4D;IAC5D,MAAM,EAAEQ,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf;IACpD,MAAMgB,YAAYf;IAElB,MAAMgB,aAAazB,MAAM0B,MAAM,CAAwB;IACvD,MAAMC,UAAU3B,MAAM0B,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGvB;IACrB,MAAMwB,UAAU1B;IAEhBH,MAAM8B,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,MAAMxC,KAAK2C,MAAM,CACf5C,yBAAyB,OAAO;YAC9BW,KAAKR,cAAcQ,KAAKM,WAAWK,SAASC;YAC5CsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEoC,aAAa;QAAM;QAEvBJ,MAAMzC,KAAK8C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;QACf;QACAH,oBAAoB1C,KAAK8C,QAAQ,CAACrC,MAAMiC,kBAAkB,EAAE;YAC1DK,iBAAiB7B,mBAAmB;YACpC2B,aAAa;QACf;QACAlC,QAAQO;QACRN;QACAQ;QACAG;QACAE;QACAE;IACF;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMqB,yBAAyB,CAACvC,OAAwBC;IAC7D,MAAM,EAAEuC,QAAQ,SAAS,EAAE,GAAGC,WAAW,GAAGzC;IAE5C,MAAM0C,QAAQ3C,2BAA2B0C,WAAWxC;IAEpD,OAAO;QACL,GAAGyC,KAAK;QACRF;QACAR,MAAMzC,KAAK8C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BW,cAAc;gBACZC,UAAUjD,cAAc+C,MAAMvC,MAAM;YACtC;YACAmC,iBAAiB;YACjBF,aAAa;QACf;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 { MessageBarBaseProps, MessageBarBaseState, MessageBarProps, MessageBarState } from './MessageBar.types';\nimport { getIntentIcon } from './getIntentIcon';\nimport { useMessageBarReflow } from './useMessageBarReflow';\nimport { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\n\n/**\n * Create the base state required to render MessageBar without design-specific props.\n *\n * @param props - props from this instance of MessageBar (without shape)\n * @param ref - reference to root HTMLElement of MessageBar\n */\nexport const useMessageBarBase_unstable = (\n  props: MessageBarBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): MessageBarBaseState => {\n  const { layout = 'auto', intent = 'info', politeness } = 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    icon: slot.optional(props.icon, {\n      renderByDefault: true,\n      elementType: 'div',\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  };\n};\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 { shape = 'rounded', ...baseProps } = props;\n\n  const state = useMessageBarBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    shape,\n    icon: slot.optional(props.icon, {\n      defaultProps: {\n        children: getIntentIcon(state.intent),\n      },\n      renderByDefault: true,\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useAnnounce","getIntentIcon","useMessageBarReflow","useMessageBarTransitionContext","useMotionForwardedRef","useMessageBarBase_unstable","props","ref","layout","intent","politeness","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","useMessageBar_unstable","shape","baseProps","state","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,qBAAkB;AAChD,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,8BAA8B,QAAQ,gDAA6C;AAC5F,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;;;;CAKC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,SAAS,MAAM,EAAEC,SAAS,MAAM,EAAEC,UAAU,EAAE,GAAGJ;IACzD,MAAMK,qBAAqBD,CAAAA,uBAAAA,wBAAAA,aAAcD,WAAW,MAAK,IAAI,WAAW;IACxE,MAAMG,aAAaJ,WAAW;IAC9B,MAAM,EAAED,KAAKM,SAAS,EAAEC,SAAS,EAAE,GAAGZ,oBAAoBU;IAC1D,MAAMG,iBAAiBH,aAAcE,YAAY,cAAc,eAAgBN;IAE/E,4DAA4D;IAC5D,MAAM,EAAEQ,WAAWC,mBAAmB,EAAEC,OAAO,EAAE,GAAGf;IACpD,MAAMgB,YAAYf;IAElB,MAAMgB,aAAazB,MAAM0B,MAAM,CAAwB;IACvD,MAAMC,UAAU3B,MAAM0B,MAAM,CAAwB;IACpD,MAAM,EAAEE,QAAQ,EAAE,GAAGvB;IACrB,MAAMwB,UAAU1B;IAEhBH,MAAM8B,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,MAAMxC,KAAK2C,MAAM,CACf5C,yBAAyB,OAAO;YAC9BW,KAAKR,cAAcQ,KAAKM,WAAWK,SAASC;YAC5CsB,MAAM;YACN,mBAAmBjB;YACnB,GAAGlB,KAAK;QACV,IACA;YAAEoC,aAAa;QAAM;QAEvBJ,MAAMzC,KAAK8C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BM,iBAAiB;YACjBF,aAAa;QACf;QACAH,oBAAoB1C,KAAK8C,QAAQ,CAACrC,MAAMiC,kBAAkB,EAAE;YAC1DK,iBAAiB7B,mBAAmB;YACpC2B,aAAa;QACf;QACAlC,QAAQO;QACRN;QACAQ;QACAG;QACAE;QACAE;IACF;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMqB,yBAAyB,CAACvC,OAAwBC;IAC7D,MAAM,EAAEuC,QAAQ,SAAS,EAAE,GAAGC,WAAW,GAAGzC;IAE5C,MAAM0C,QAAQ3C,2BAA2B0C,WAAWxC;IAEpD,OAAO;QACL,GAAGyC,KAAK;QACRF;QACAR,MAAMzC,KAAK8C,QAAQ,CAACrC,MAAMgC,IAAI,EAAE;YAC9BW,cAAc;gBACZC,UAAUjD,cAAc+C,MAAMvC,MAAM;YACtC;YACAmC,iBAAiB;YACjBF,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/MessageBar/useMessageBarContextValues.js

@@ -1,5 +1,5 @@
 'use client';
-import * as React from 'react';
+import * as React from "react";
 export function useMessageBarContextValue_unstable(state) {
     const { layout, actionsRef, bodyRef, titleId } = state;
     const messageBarContext = React.useMemo(()=>({

package/lib/components/MessageBar/useMessageBarReflow.js

@@ -1,14 +1,14 @@
 'use client';
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { isHTMLElement } from '@fluentui/react-utilities';
+import * as React from "react";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { isHTMLElement } from "@fluentui/react-utilities";
 export function useMessageBarReflow(enabled = false) {
     const { targetDocument } = useFluent();
     const forceUpdate = React.useReducer(()=>({}), {})[1];
     const reflowingRef = React.useRef(false);
     // TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
     const resizeObserverRef = React.useRef(null);
-    const prevInlineSizeRef = React.useRef(-1);
+    const singleLineWidthRef = React.useRef(Number.POSITIVE_INFINITY);
     const handleResize = React.useCallback((entries)=>{
         var _entry_borderBoxSize_, _entry_borderBoxSize;
         // Resize observer is only owned by this component - one resize observer entry expected
@@ -33,20 +33,17 @@ export function useMessageBarReflow(enabled = false) {
             return;
         }
         let nextReflowing;
-        // No easy way to really determine when the single line layout will fit
-        // Just keep try to set single line layout as long as the size is growing
-        // Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
         if (reflowingRef.current) {
-            if (prevInlineSizeRef.current < inlineSize) {
+            if (inlineSize >= singleLineWidthRef.current) {
                 nextReflowing = false;
             }
         } else {
             const scrollWidth = target.scrollWidth;
             if (inlineSize < scrollWidth) {
                 nextReflowing = true;
+                singleLineWidthRef.current = scrollWidth;
             }
         }
-        prevInlineSizeRef.current = inlineSize;
         if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
             reflowingRef.current = nextReflowing;
             forceUpdate();