feat(react-components, react-drawer, react-message-bar, react-swatch-…

…picker-preview): Add missing context exports for Drawer, MessageBar, and SwatchPicker (#31328)

change/@fluentui-react-components-fe7cdc8a-1fb6-480e-ab44-957a2668ccc9.json

@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "feat: Add missing Drawer and MessageBar context exports.",
+ "packageName": "@fluentui/react-components",
+ "email": "[email protected]",
+ "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-921a3490-912a-4d75-a1e1-f7e2641a08c9.json

@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "feat: Add missing Drawer context exports.",
+ "packageName": "@fluentui/react-drawer",
+ "email": "[email protected]",
+ "dependentChangeType": "patch"
+}

change/@fluentui-react-message-bar-c6ad9203-e841-4ab9-9f8b-510543557f04.json

@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "feat: Add missing context exports.",
+ "packageName": "@fluentui/react-message-bar",
+ "email": "[email protected]",
+ "dependentChangeType": "patch"
+}

change/@fluentui-react-swatch-picker-preview-f8485f01-485e-4321-879a-70199576be32.json

@@ -0,0 +1,7 @@
+{
+ "type": "minor",
+ "comment": "feat: Add missing SwatchPicker context exports.",
+ "packageName": "@fluentui/react-swatch-picker-preview",
+ "email": "[email protected]",
+ "dependentChangeType": "patch"
+}

packages/react-components/react-components/etc/react-components.api.md

@@ -290,6 +290,7 @@ import { drawerBodyClassNames } from '@fluentui/react-drawer';
 import { DrawerBodyProps } from '@fluentui/react-drawer';
 import { DrawerBodySlots } from '@fluentui/react-drawer';
 import { DrawerBodyState } from '@fluentui/react-drawer';
+import { DrawerContextValue } from '@fluentui/react-drawer';
 import { DrawerFooter } from '@fluentui/react-drawer';
 import { drawerFooterClassNames } from '@fluentui/react-drawer';
 import { DrawerFooterProps } from '@fluentui/react-drawer';
@@ -311,6 +312,7 @@ import { DrawerHeaderTitleProps } from '@fluentui/react-drawer';
 import { DrawerHeaderTitleSlots } from '@fluentui/react-drawer';
 import { DrawerHeaderTitleState } from '@fluentui/react-drawer';
 import { DrawerProps } from '@fluentui/react-drawer';
+import { DrawerProvider } from '@fluentui/react-drawer';
 import { DrawerSlots } from '@fluentui/react-drawer';
 import { DrawerState } from '@fluentui/react-drawer';
 import { Dropdown } from '@fluentui/react-combobox';
@@ -1337,6 +1339,8 @@ import { useDividerStyles_unstable } from '@fluentui/react-divider';
 import { useDrawer_unstable } from '@fluentui/react-drawer';
 import { useDrawerBody_unstable } from '@fluentui/react-drawer';
 import { useDrawerBodyStyles_unstable } from '@fluentui/react-drawer';
+import { useDrawerContext_unstable } from '@fluentui/react-drawer';
+import { useDrawerContextValue } from '@fluentui/react-drawer';
 import { useDrawerFooter_unstable } from '@fluentui/react-drawer';
 import { useDrawerFooterStyles_unstable } from '@fluentui/react-drawer';
 import { useDrawerHeader_unstable } from '@fluentui/react-drawer';
@@ -1435,10 +1439,12 @@ import { useMenuTriggerContext_unstable } from '@fluentui/react-menu';
 import { useMergedRefs } from '@fluentui/react-utilities';
 import { useMessageBar_unstable } from '@fluentui/react-message-bar';
 import { useMessageBarActions_unstable } from '@fluentui/react-message-bar';
+import { useMessageBarActionsContextValue_unstable } from '@fluentui/react-message-bar';
 import { useMessageBarActionsStyles_unstable } from '@fluentui/react-message-bar';
 import { useMessageBarBody_unstable } from '@fluentui/react-message-bar';
 import { useMessageBarBodyStyles_unstable } from '@fluentui/react-message-bar';
 import { useMessageBarContext } from '@fluentui/react-message-bar';
+import { useMessageBarContextValue_unstable } from '@fluentui/react-message-bar';
 import { useMessageBarGroup_unstable } from '@fluentui/react-message-bar';
 import { useMessageBarGroupStyles_unstable } from '@fluentui/react-message-bar';
 import { useMessageBarStyles_unstable } from '@fluentui/react-message-bar';
@@ -2214,6 +2220,8 @@ export { DrawerBodySlots }
 
 export { DrawerBodyState }
 
+export { DrawerContextValue }
+
 export { DrawerFooter }
 
 export { drawerFooterClassNames }
@@ -2256,6 +2264,8 @@ export { DrawerHeaderTitleState }
 
 export { DrawerProps }
 
+export { DrawerProvider }
+
 export { DrawerSlots }
 
 export { DrawerState }
@@ -4308,6 +4318,10 @@ export { useDrawerBody_unstable }
 
 export { useDrawerBodyStyles_unstable }
 
+export { useDrawerContext_unstable }
+
+export { useDrawerContextValue }
+
 export { useDrawerFooter_unstable }
 
 export { useDrawerFooterStyles_unstable }
@@ -4504,6 +4518,8 @@ export { useMessageBar_unstable }
 
 export { useMessageBarActions_unstable }
 
+export { useMessageBarActionsContextValue_unstable }
+
 export { useMessageBarActionsStyles_unstable }
 
 export { useMessageBarBody_unstable }
@@ -4512,6 +4528,8 @@ export { useMessageBarBodyStyles_unstable }
 
 export { useMessageBarContext }
 
+export { useMessageBarContextValue_unstable }
+
 export { useMessageBarGroup_unstable }
 
 export { useMessageBarGroupStyles_unstable }

packages/react-components/react-components/src/index.ts

@@ -1425,6 +1425,8 @@ export {
  useMessageBarGroup_unstable,
  renderMessageBarGroup_unstable,
  messageBarGroupClassNames,
+ useMessageBarContextValue_unstable,
+ useMessageBarActionsContextValue_unstable,
 } from '@fluentui/react-message-bar';
 export type {
  MessageBarProps,
@@ -1495,6 +1497,9 @@ export {
  renderDrawerFooter_unstable,
  useDrawerFooterStyles_unstable,
  useDrawerFooter_unstable,
+ DrawerProvider,
+ useDrawerContextValue,
+ useDrawerContext_unstable,
 } from '@fluentui/react-drawer';
 
 export type {
@@ -1510,6 +1515,7 @@ export type {
  DrawerBodyProps,
  DrawerBodySlots,
  DrawerBodyState,
+ DrawerContextValue,
  DrawerHeaderProps,
  DrawerHeaderSlots,
  DrawerHeaderState,

packages/react-components/react-drawer/etc/react-drawer.api.md

@@ -36,6 +36,12 @@ export type DrawerBodySlots = {
 // @public
 export type DrawerBodyState = ComponentState<DrawerBodySlots>;
 
+// @public (undocumented)
+export type DrawerContextValue = {
+ scrollState: DrawerScrollState;
+ setScrollState: (scrollState: DrawerScrollState) => void;
+};
+
 // @public
 export const DrawerFooter: ForwardRefComponent<DrawerFooterProps>;
 
@@ -115,6 +121,9 @@ export type DrawerProps = ComponentProps<DrawerSlots> & {
  type?: 'inline' | 'overlay';
 };
 
+// @public (undocumented)
+export const DrawerProvider: React_2.Provider<DrawerContextValue | undefined>;
+
 // @public (undocumented)
 export type DrawerSlots = {
  root: Slot<OverlayDrawerProps | InlineDrawerProps>;
@@ -192,6 +201,12 @@ export const useDrawerBody_unstable: (props: DrawerBodyProps, ref: React_2.Ref<H
 // @public
 export const useDrawerBodyStyles_unstable: (state: DrawerBodyState) => DrawerBodyState;
 
+// @public (undocumented)
+export const useDrawerContext_unstable: () => DrawerContextValue;
+
+// @public (undocumented)
+export const useDrawerContextValue: () => DrawerContextValue;
+
 // @public
 export const useDrawerFooter_unstable: (props: DrawerFooterProps, ref: React_2.Ref<HTMLElement>) => DrawerFooterState;
 

packages/react-components/react-drawer/src/index.ts

@@ -1,3 +1,6 @@
+export { DrawerProvider, useDrawerContextValue, useDrawerContext_unstable } from './contexts';
+export type { DrawerContextValue } from './contexts';
+
 export { Drawer, renderDrawer_unstable, useDrawerStyles_unstable, useDrawer_unstable } from './Drawer';
 export type { DrawerProps, DrawerSlots, DrawerState } from './Drawer';
 

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

@@ -55,6 +55,9 @@ export type MessageBarBodyState = ComponentState<MessageBarBodySlots>;
 // @public (undocumented)
 export const messageBarClassNames: SlotClassNames<MessageBarSlots>;
 
+// @public (undocumented)
+export const messageBarContextDefaultValue: MessageBarContextValue;
+
 // @public (undocumented)
 export const MessageBarContextProvider: React_2.Provider<MessageBarContextValue | undefined>;
 
@@ -129,6 +132,18 @@ export type MessageBarTitleSlots = {
 // @public
 export type MessageBarTitleState = ComponentState<MessageBarTitleSlots>;
 
+// @internal (undocumented)
+export const messageBarTransitionContextDefaultValue: MessageBarTransitionContextValue;
+
+// @internal
+export const MessageBarTransitionContextProvider: React_2.Provider<MessageBarTransitionContextValue | undefined>;
+
+// @public (undocumented)
+export type MessageBarTransitionContextValue = {
+ className: string;
+ nodeRef: React_2.Ref<HTMLDivElement | null>;
+};
+
 // @public
 export const renderMessageBar_unstable: (state: MessageBarState, contexts: MessageBarContextValues) => JSX.Element;
 
@@ -150,6 +165,9 @@ export const useMessageBar_unstable: (props: MessageBarProps, ref: React_2.Ref<H
 // @public
 export const useMessageBarActions_unstable: (props: MessageBarActionsProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarActionsState;
 
+// @public (undocumented)
+export function useMessageBarActionsContextValue_unstable(): MessageBarActionsContextValues;
+
 // @public
 export const useMessageBarActionsStyles_unstable: (state: MessageBarActionsState) => MessageBarActionsState;
 
@@ -162,6 +180,9 @@ export const useMessageBarBodyStyles_unstable: (state: MessageBarBodyState) => M
 // @public (undocumented)
 export const useMessageBarContext: () => MessageBarContextValue;
 
+// @public (undocumented)
+export function useMessageBarContextValue_unstable(state: MessageBarState): MessageBarContextValues;
+
 // @public
 export const useMessageBarGroup_unstable: (props: MessageBarGroupProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarGroupState;
 
@@ -177,6 +198,9 @@ export const useMessageBarTitle_unstable: (props: MessageBarTitleProps, ref: Rea
 // @public
 export const useMessageBarTitleStyles_unstable: (state: MessageBarTitleState) => MessageBarTitleState;
 
+// @internal (undocumented)
+export const useMessageBarTransitionContext: () => MessageBarTransitionContextValue;
+
 // (No @packageDocumentation comment for this package)
 
 ```

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

@@ -3,3 +3,4 @@ export * from './MessageBar.types';
 export * from './renderMessageBar';
 export * from './useMessageBar';
 export * from './useMessageBarStyles.styles';
+export * from './useMessageBarContextValues';

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

@@ -3,3 +3,4 @@ export * from './MessageBarActions.types';
 export * from './renderMessageBarActions';
 export * from './useMessageBarActions';
 export * from './useMessageBarActionsStyles.styles';
+export * from './useMessageBarActionsContextValues';

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

@@ -0,0 +1,2 @@
+export * from './messageBarContext';
+export * from './messageBarTransitionContext';

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

@@ -2,6 +2,7 @@ export {
  MessageBar,
  useMessageBarStyles_unstable,
  useMessageBar_unstable,
+ useMessageBarContextValue_unstable,
  renderMessageBar_unstable,
  messageBarClassNames,
 } from './MessageBar';
@@ -23,6 +24,7 @@ export {
  useMessageBarActionsStyles_unstable,
  useMessageBarActions_unstable,
  renderMessageBarActions_unstable,
+ useMessageBarActionsContextValue_unstable,
  messageBarActionsClassNames,
 } from './MessageBarActions';
 
@@ -38,8 +40,15 @@ export {
 
 export type { MessageBarBodyProps, MessageBarBodySlots, MessageBarBodyState } from './MessageBarBody';
 
-export { MessageBarContextProvider, useMessageBarContext } from './contexts/messageBarContext';
-export type { MessageBarContextValue } from './contexts/messageBarContext';
+export {
+ MessageBarContextProvider,
+ messageBarContextDefaultValue,
+ messageBarTransitionContextDefaultValue,
+ useMessageBarContext,
+ MessageBarTransitionContextProvider,
+ useMessageBarTransitionContext,
+} from './contexts';
+export type { MessageBarContextValue, MessageBarTransitionContextValue } from './contexts';
 export {
  MessageBarGroup,
  useMessageBarGroupStyles_unstable,

packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md

@@ -8,6 +8,7 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { EventData } from '@fluentui/react-utilities';
 import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -108,6 +109,23 @@ export const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
 // @public (undocumented)
 export const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;
 
+// @public (undocumented)
+export const swatchPickerContextDefaultValue: SwatchPickerContextValue;
+
+// @public
+export type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {
+ isGrid: boolean;
+ requestSelectionChange: (event: React_2.MouseEvent<HTMLButtonElement>, data: {
+ selectedValue: string;
+ selectedSwatch: string;
+ }) => void;
+};
+
+// @public (undocumented)
+export type SwatchPickerContextValues = {
+ swatchPicker: SwatchPickerContextValue;
+};
+
 // @public (undocumented)
 export type SwatchPickerGridProps = {
  items: SwatchProps[];
@@ -139,6 +157,9 @@ export type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
  spacing?: 'small' | 'medium';
 };
 
+// @public (undocumented)
+export const SwatchPickerProvider: React_2.Provider<SwatchPickerContextValue> & React_2.FC<React_2.ProviderProps<SwatchPickerContextValue>>;
+
 // @public
 export const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;
 
@@ -190,6 +211,12 @@ export const useImageSwatchStyles_unstable: (state: ImageSwatchState) => ImageSw
 // @public
 export const useSwatchPicker_unstable: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
 
+// @public (undocumented)
+export const useSwatchPickerContextValue_unstable: <T>(selector: ContextSelector<SwatchPickerContextValue, T>) => T;
+
+// @public (undocumented)
+export const useSwatchPickerContextValues: (state: SwatchPickerState) => SwatchPickerContextValues;
+
 // @public
 export const useSwatchPickerRow_unstable: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;
 

packages/react-components/react-swatch-picker-preview/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './swatchPicker';

packages/react-components/react-swatch-picker-preview/src/contexts/swatchPicker.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { createContext, ContextSelector, useContextSelector, Context } from '@fluentui/react-context-selector';
-import { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import type { ContextSelector, Context } from '@fluentui/react-context-selector';
+import type { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';
 
 /**
  * The context through which individual color controls communicate with the picker.

packages/react-components/react-swatch-picker-preview/src/index.ts

@@ -5,6 +5,13 @@ export {
  useSwatchPicker_unstable,
  swatchPickerClassNames,
 } from './SwatchPicker';
+export {
+ SwatchPickerProvider,
+ swatchPickerContextDefaultValue,
+ useSwatchPickerContextValue_unstable,
+ useSwatchPickerContextValues,
+} from './contexts';
+export type { SwatchPickerContextValue, SwatchPickerContextValues } from './contexts';
 export type {
  SwatchPickerProps,
  SwatchPickerSlots,