diff --git a/change/@fluentui-react-message-bar-4a6b8620-f010-4128-b5a0-4c68e73bc7de.json b/change/@fluentui-react-message-bar-4a6b8620-f010-4128-b5a0-4c68e73bc7de.json new file mode 100644 index 0000000000000..af4299b40e09a --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-message-bar/library/etc/react-message-bar.api.md b/packages/react-components/react-message-bar/library/etc/react-message-bar.api.md index db2ebad406152..5aed87cc85054 100644 --- a/packages/react-components/react-message-bar/library/etc/react-message-bar.api.md +++ b/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 & Pi hasActions: boolean; }; +// @public (undocumented) +export type MessageBarBaseProps = DistributiveOmit; + +// @public (undocumented) +export type MessageBarBaseState = DistributiveOmit; + // @public export const MessageBarBody: ForwardRefComponent; @@ -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) => MessageBarBaseState; + // @public export const useMessageBarBody_unstable: (props: MessageBarBodyProps, ref: React_2.Ref) => MessageBarBodyState; diff --git a/packages/react-components/react-message-bar/library/src/MessageBar.ts b/packages/react-components/react-message-bar/library/src/MessageBar.ts index ffb91018f6786..3a82d86b4182b 100644 --- a/packages/react-components/react-message-bar/library/src/MessageBar.ts +++ b/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'; diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts index 95b0ee35ccf3d..7aad7eb809e94 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.types.ts +++ b/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 & */ transitionClassName: string; }; + +export type MessageBarBaseProps = DistributiveOmit; +export type MessageBarBaseState = DistributiveOmit; diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/index.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/index.ts index 5cb0b03985cb3..6da118dcb122b 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/index.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/index.ts @@ -1,5 +1,7 @@ export { MessageBar } from './MessageBar'; export type { + MessageBarBaseProps, + MessageBarBaseState, MessageBarContextValues, MessageBarIntent, MessageBarProps, @@ -7,6 +9,6 @@ export type { 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'; diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/renderMessageBar.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBar/renderMessageBar.tsx index 2d81b61e34227..e3470ff1b12e0 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/renderMessageBar.tsx +++ b/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(state); return ( diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts index b32153dd1a2b5..9408fe999c901 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts +++ b/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): MessageBarState => { - const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props; +export const useMessageBarBase_unstable = ( + props: MessageBarBaseProps, + ref: React.Ref, +): 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): MessageBarState => { + const { shape = 'rounded', ...baseProps } = props; + + const state = useMessageBarBase_unstable(baseProps, ref); + + if (state.icon) { + state.icon.children ??= getIntentIcon(state.intent); + } + + return { ...state, shape }; +}; diff --git a/packages/react-components/react-message-bar/library/src/index.ts b/packages/react-components/react-message-bar/library/src/index.ts index 0bc4ab549edc8..77b036f4d7b35 100644 --- a/packages/react-components/react-message-bar/library/src/index.ts +++ b/packages/react-components/react-message-bar/library/src/index.ts @@ -1,6 +1,7 @@ export { MessageBar, useMessageBarStyles_unstable, + useMessageBarBase_unstable, useMessageBar_unstable, useMessageBarContextValue_unstable, renderMessageBar_unstable, @@ -8,6 +9,8 @@ export { } from './MessageBar'; export type { + MessageBarBaseProps, + MessageBarBaseState, MessageBarProps, MessageBarSlots, MessageBarState,