feat(react-message-bar): add useMessageBarBase_unstable hook

change/@fluentui-react-message-bar-4a6b8620-f010-4128-b5a0-4c68e73bc7de.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(react-message-bar): add useMessageBarBase_unstable hook",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-message-bar/library/etc/react-message-bar.api.md

@@ -7,6 +7,7 @@
 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';
@@ -41,6 +42,12 @@ export type MessageBarActionsState = ComponentState<MessageBarActionsSlots> & Pi
     hasActions: boolean;
 };
 
+// @public (undocumented)
+export type MessageBarBaseProps = DistributiveOmit<MessageBarProps, 'shape'>;
+
+// @public (undocumented)
+export type MessageBarBaseState = DistributiveOmit<MessageBarState, 'shape'>;
+
 // @public
 export const MessageBarBody: ForwardRefComponent<MessageBarBodyProps>;
 
@@ -156,7 +163,7 @@ export type MessageBarTransitionContextValue = {
 };
 
 // @public
-export const renderMessageBar_unstable: (state: MessageBarState, contexts: MessageBarContextValues) => JSXElement;
+export const renderMessageBar_unstable: (state: MessageBarBaseState, contexts: MessageBarContextValues) => JSXElement;
 
 // @public
 export const renderMessageBarActions_unstable: (state: MessageBarActionsState, contexts: MessageBarActionsContextValues) => JSXElement;
@@ -182,6 +189,9 @@ export function useMessageBarActionsContextValue_unstable(): MessageBarActionsCo
 // @public
 export const useMessageBarActionsStyles_unstable: (state: MessageBarActionsState) => MessageBarActionsState;
 
+// @public
+export const useMessageBarBase_unstable: (props: MessageBarBaseProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarBaseState;
+
 // @public
 export const useMessageBarBody_unstable: (props: MessageBarBodyProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarBodyState;
 

packages/react-components/react-message-bar/library/src/MessageBar.ts

@@ -1,4 +1,6 @@
 export type {
+  MessageBarBaseProps,
+  MessageBarBaseState,
   MessageBarContextValues,
   MessageBarIntent,
   MessageBarProps,
@@ -11,5 +13,6 @@ export {
   renderMessageBar_unstable,
   useMessageBarContextValue_unstable,
   useMessageBarStyles_unstable,
+  useMessageBarBase_unstable,
   useMessageBar_unstable,
 } from './components/MessageBar/index';

packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 import type { MessageBarContextValue } from '../../contexts/messageBarContext';
 
 export type MessageBarSlots = {
@@ -53,3 +53,6 @@ export type MessageBarState = ComponentState<MessageBarSlots> &
      */
     transitionClassName: string;
   };
+
+export type MessageBarBaseProps = DistributiveOmit<MessageBarProps, 'shape'>;
+export type MessageBarBaseState = DistributiveOmit<MessageBarState, 'shape'>;

packages/react-components/react-message-bar/library/src/components/MessageBar/index.ts

@@ -1,12 +1,14 @@
 export { MessageBar } from './MessageBar';
 export type {
+  MessageBarBaseProps,
+  MessageBarBaseState,
   MessageBarContextValues,
   MessageBarIntent,
   MessageBarProps,
   MessageBarSlots,
   MessageBarState,
 } from './MessageBar.types';
 export { renderMessageBar_unstable } from './renderMessageBar';
-export { useMessageBar_unstable } from './useMessageBar';
+export { useMessageBarBase_unstable, useMessageBar_unstable } from './useMessageBar';
 export { messageBarClassNames, useMessageBarStyles_unstable } from './useMessageBarStyles.styles';
 export { useMessageBarContextValue_unstable } from './useMessageBarContextValues';

packages/react-components/react-message-bar/library/src/components/MessageBar/renderMessageBar.tsx

@@ -3,13 +3,16 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { MessageBarState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';
+import type { MessageBarBaseState, MessageBarSlots, MessageBarContextValues } from './MessageBar.types';
 import { MessageBarContextProvider } from '../../contexts/messageBarContext';
 
 /**
  * Render the final JSX of MessageBar
  */
-export const renderMessageBar_unstable = (state: MessageBarState, contexts: MessageBarContextValues): JSXElement => {
+export const renderMessageBar_unstable = (
+  state: MessageBarBaseState,
+  contexts: MessageBarContextValues,
+): JSXElement => {
   assertSlots<MessageBarSlots>(state);
 
   return (

packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts

@@ -3,23 +3,23 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useAnnounce } from '@fluentui/react-shared-contexts';
-import type { MessageBarProps, MessageBarState } from './MessageBar.types';
+import type { MessageBarBaseProps, MessageBarBaseState, MessageBarProps, MessageBarState } from './MessageBar.types';
 import { getIntentIcon } from './getIntentIcon';
 import { useMessageBarReflow } from './useMessageBarReflow';
 import { useMessageBarTransitionContext } from '../../contexts/messageBarTransitionContext';
 import { useMotionForwardedRef } from '@fluentui/react-motion';
 
 /**
- * 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.
+ * Create the base state required to render MessageBar without design-specific props.
  *
- * @param props - props from this instance of MessageBar
+ * @param props - props from this instance of MessageBar (without shape)
  * @param ref - reference to root HTMLElement of MessageBar
  */
-export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {
-  const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;
+export const useMessageBarBase_unstable = (
+  props: MessageBarBaseProps,
+  ref: React.Ref<HTMLDivElement>,
+): MessageBarBaseState => {
+  const { layout = 'auto', intent = 'info', politeness } = props;
   const computedPoliteness = politeness ?? intent === 'info' ? 'polite' : 'assertive';
   const autoReflow = layout === 'auto';
   const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);
@@ -57,11 +57,9 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
       }),
       { elementType: 'div' },
     ),
-
     icon: slot.optional(props.icon, {
       renderByDefault: true,
       elementType: 'div',
-      defaultProps: { children: getIntentIcon(intent) },
     }),
     bottomReflowSpacer: slot.optional(props.bottomReflowSpacer, {
       renderByDefault: computedLayout === 'multiline',
@@ -73,6 +71,26 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
     actionsRef,
     bodyRef,
     titleId,
-    shape,
   };
 };
+
+/**
+ * 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 const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {
+  const { shape = 'rounded', ...baseProps } = props;
+
+  const state = useMessageBarBase_unstable(baseProps, ref);
+
+  if (state.icon) {
+    state.icon.children ??= getIntentIcon(state.intent);
+  }
+
+  return { ...state, shape };
+};

packages/react-components/react-message-bar/library/src/index.ts

@@ -1,13 +1,16 @@
 export {
   MessageBar,
   useMessageBarStyles_unstable,
+  useMessageBarBase_unstable,
   useMessageBar_unstable,
   useMessageBarContextValue_unstable,
   renderMessageBar_unstable,
   messageBarClassNames,
 } from './MessageBar';
 
 export type {
+  MessageBarBaseProps,
+  MessageBarBaseState,
   MessageBarProps,
   MessageBarSlots,
   MessageBarState,