BREAKING: Remove context exports from react-components

change/@fluentui-react-accordion-6afadb5c-b2e0-4612-861b-82771a4da41a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: stop exporting AccordionContext and AccordionItemContext",
+  "packageName": "@fluentui/react-accordion",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-71e78c7a-897f-4a76-b435-b4de4d541655.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: Exports of react context objects were removed, replaced with provider compoennts and hooks",
+  "packageName": "@fluentui/react-components",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-745072ac-cbfd-40d0-8aed-3bf6a7dd7748.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: Stop exporting MenuContext and MenuListContext",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-7bb78727-e0c7-447b-94e5-50a77d03d6ba.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: stop exporting PopoverContext",
+  "packageName": "@fluentui/react-popover",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-radio-830e0de9-07a9-4f79-92c5-94fec16c4476.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: stop exporting RadioGroupContext",
+  "packageName": "@fluentui/react-radio",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -7,8 +7,11 @@
 import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import type { Context } from '@fluentui/react-context-selector';
+import { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -19,9 +22,6 @@ export const Accordion: ForwardRefComponent<AccordionProps>;
 // @public (undocumented)
 export const accordionClassNames: SlotClassNames<AccordionSlots>;
 
-// @public (undocumented)
-export const AccordionContext: Context<AccordionContextValue>;
-
 // @public (undocumented)
 export type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
     openItems: AccordionItemValue[];
@@ -83,9 +83,6 @@ export const AccordionItem: ForwardRefComponent<AccordionItemProps>;
 // @public (undocumented)
 export const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
 
-// @public (undocumented)
-export const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
-
 // @public (undocumented)
 export type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
     onHeaderClick(ev: React_2.MouseEvent | React_2.KeyboardEvent): void;
@@ -103,6 +100,9 @@ export type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
     value: AccordionItemValue;
 };
 
+// @public (undocumented)
+export const AccordionItemProvider: React_2.Provider<AccordionItemContextValue>;
+
 // @public (undocumented)
 export type AccordionItemSlots = {
     root: Slot<'div'>;
@@ -143,6 +143,9 @@ export type AccordionProps = ComponentProps<AccordionSlots> & {
     openItems?: AccordionItemValue | AccordionItemValue[];
 };
 
+// @public (undocumented)
+export const AccordionProvider: Provider<AccordionContextValue> & FC<ProviderProps<AccordionContextValue>>;
+
 // @public (undocumented)
 export type AccordionSlots = {
     root: Slot<'div'>;
@@ -177,6 +180,9 @@ export const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSX.
 // @public
 export const useAccordion_unstable: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
 
+// @public (undocumented)
+export const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
+
 // @public (undocumented)
 export function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
 

packages/react-components/react-accordion/src/components/Accordion/AccordionContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from '@fluentui/react-context-selector';
+import { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';
 import type { Context } from '@fluentui/react-context-selector';
 import type { AccordionContextValue } from './Accordion.types';
 
@@ -9,3 +9,7 @@ export const AccordionContext: Context<AccordionContextValue> = createContext<Ac
     /* noop */
   },
 });
+
+export const AccordionProvider = AccordionContext.Provider;
+export const useAccordionContext_unstable = <T>(selector: ContextSelector<AccordionContextValue, T>): T =>
+  useContextSelector(AccordionContext, selector);

packages/react-components/react-accordion/src/components/AccordionItem/AccordionItemContext.ts

@@ -10,4 +10,6 @@ export const AccordionItemContext = React.createContext<AccordionItemContextValu
   disabled: false,
 });
 
+export const AccordionItemProvider = AccordionItemContext.Provider;
+
 export const useAccordionItemContext_unstable = () => React.useContext(AccordionItemContext);

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

@@ -1,8 +1,9 @@
 export {
   Accordion,
-  AccordionContext,
+  AccordionProvider,
   accordionClassNames,
   renderAccordion_unstable,
+  useAccordionContext_unstable,
   useAccordionContextValues_unstable,
   useAccordionStyles_unstable,
   useAccordion_unstable,
@@ -20,7 +21,7 @@ export type {
 } from './Accordion';
 export {
   AccordionItem,
-  AccordionItemContext,
+  AccordionItemProvider,
   accordionItemClassNames,
   renderAccordionItem_unstable,
   useAccordionItemContextValues_unstable,

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

@@ -7,7 +7,6 @@
 import { __styles } from '@griffel/react';
 import { Accordion } from '@fluentui/react-accordion';
 import { accordionClassNames } from '@fluentui/react-accordion';
-import { AccordionContext } from '@fluentui/react-accordion';
 import { AccordionContextValue } from '@fluentui/react-accordion';
 import { AccordionContextValues } from '@fluentui/react-accordion';
 import { AccordionHeader } from '@fluentui/react-accordion';
@@ -22,10 +21,10 @@ import { AccordionHeaderState } from '@fluentui/react-accordion';
 import { AccordionIndex } from '@fluentui/react-accordion';
 import { AccordionItem } from '@fluentui/react-accordion';
 import { accordionItemClassNames } from '@fluentui/react-accordion';
-import { AccordionItemContext } from '@fluentui/react-accordion';
 import { AccordionItemContextValue } from '@fluentui/react-accordion';
 import { AccordionItemContextValues } from '@fluentui/react-accordion';
 import { AccordionItemProps } from '@fluentui/react-accordion';
+import { AccordionItemProvider } from '@fluentui/react-accordion';
 import { AccordionItemSlots } from '@fluentui/react-accordion';
 import { AccordionItemState } from '@fluentui/react-accordion';
 import { AccordionItemValue } from '@fluentui/react-accordion';
@@ -35,6 +34,7 @@ import { AccordionPanelProps } from '@fluentui/react-accordion';
 import { AccordionPanelSlots } from '@fluentui/react-accordion';
 import { AccordionPanelState } from '@fluentui/react-accordion';
 import { AccordionProps } from '@fluentui/react-accordion';
+import { AccordionProvider } from '@fluentui/react-accordion';
 import { AccordionSlots } from '@fluentui/react-accordion';
 import { AccordionState } from '@fluentui/react-accordion';
 import { AccordionToggleData } from '@fluentui/react-accordion';
@@ -154,7 +154,6 @@ import { MenuButtonSlots } from '@fluentui/react-button';
 import { MenuButtonState } from '@fluentui/react-button';
 import { MenuCheckedValueChangeData } from '@fluentui/react-menu';
 import { MenuCheckedValueChangeEvent } from '@fluentui/react-menu';
-import { MenuContext } from '@fluentui/react-menu';
 import { MenuContextValue } from '@fluentui/react-menu';
 import { MenuContextValues } from '@fluentui/react-menu';
 import { MenuDivider } from '@fluentui/react-menu';
@@ -192,7 +191,6 @@ import { MenuItemSlots } from '@fluentui/react-menu';
 import { MenuItemState } from '@fluentui/react-menu';
 import { MenuList } from '@fluentui/react-menu';
 import { menuListClassNames } from '@fluentui/react-menu';
-import { MenuListContext } from '@fluentui/react-menu';
 import { MenuListContextValue } from '@fluentui/react-menu';
 import { MenuListContextValues } from '@fluentui/react-menu';
 import { MenuListProps } from '@fluentui/react-menu';
@@ -226,9 +224,9 @@ import { OnVisibleChangeData } from '@fluentui/react-tooltip';
 import { OpenPopoverEvents } from '@fluentui/react-popover';
 import { PartialTheme } from '@fluentui/react-theme';
 import { Popover } from '@fluentui/react-popover';
-import { PopoverContext } from '@fluentui/react-popover';
 import { PopoverContextValue } from '@fluentui/react-popover';
 import { PopoverProps } from '@fluentui/react-popover';
+import { PopoverProvider } from '@fluentui/react-popover';
 import { PopoverSize } from '@fluentui/react-popover';
 import { PopoverState } from '@fluentui/react-popover';
 import { PopoverSurface } from '@fluentui/react-popover';
@@ -256,11 +254,11 @@ import { Radio } from '@fluentui/react-radio';
 import { radioClassNames } from '@fluentui/react-radio';
 import { RadioGroup } from '@fluentui/react-radio';
 import { radioGroupClassNames } from '@fluentui/react-radio';
-import { RadioGroupContext } from '@fluentui/react-radio';
 import { RadioGroupContextValue } from '@fluentui/react-radio';
 import { RadioGroupContextValues } from '@fluentui/react-radio';
 import { RadioGroupOnChangeData } from '@fluentui/react-radio';
 import { RadioGroupProps } from '@fluentui/react-radio';
+import { RadioGroupProvider } from '@fluentui/react-radio';
 import { RadioGroupSlots } from '@fluentui/react-radio';
 import { RadioGroupState } from '@fluentui/react-radio';
 import { RadioOnChangeData } from '@fluentui/react-radio';
@@ -408,6 +406,7 @@ import { TypographyStyles } from '@fluentui/react-theme';
 import { typographyStyles } from '@fluentui/react-theme';
 import { UninitializedMenuListState } from '@fluentui/react-menu';
 import { useAccordion_unstable } from '@fluentui/react-accordion';
+import { useAccordionContext_unstable } from '@fluentui/react-accordion';
 import { useAccordionContextValues_unstable } from '@fluentui/react-accordion';
 import { useAccordionHeader_unstable } from '@fluentui/react-accordion';
 import { useAccordionHeaderContextValues_unstable } from '@fluentui/react-accordion';
@@ -496,6 +495,7 @@ import { usePortal_unstable } from '@fluentui/react-portal';
 import { usePresenceBadge_unstable } from '@fluentui/react-badge';
 import { useRadio_unstable } from '@fluentui/react-radio';
 import { useRadioGroup_unstable } from '@fluentui/react-radio';
+import { useRadioGroupContext_unstable } from '@fluentui/react-radio';
 import { useRadioGroupContextValues } from '@fluentui/react-radio';
 import { useRadioGroupStyles_unstable } from '@fluentui/react-radio';
 import { useRadioStyles_unstable } from '@fluentui/react-radio';
@@ -534,8 +534,6 @@ export { Accordion }
 
 export { accordionClassNames }
 
-export { AccordionContext }
-
 export { AccordionContextValue }
 
 export { AccordionContextValues }
@@ -564,14 +562,14 @@ export { AccordionItem }
 
 export { accordionItemClassNames }
 
-export { AccordionItemContext }
-
 export { AccordionItemContextValue }
 
 export { AccordionItemContextValues }
 
 export { AccordionItemProps }
 
+export { AccordionItemProvider }
+
 export { AccordionItemSlots }
 
 export { AccordionItemState }
@@ -590,6 +588,8 @@ export { AccordionPanelState }
 
 export { AccordionProps }
 
+export { AccordionProvider }
+
 export { AccordionSlots }
 
 export { AccordionState }
@@ -828,8 +828,6 @@ export { MenuCheckedValueChangeData }
 
 export { MenuCheckedValueChangeEvent }
 
-export { MenuContext }
-
 export { MenuContextValue }
 
 export { MenuContextValues }
@@ -904,8 +902,6 @@ export { MenuList }
 
 export { menuListClassNames }
 
-export { MenuListContext }
-
 export { MenuListContextValue }
 
 export { MenuListContextValues }
@@ -972,12 +968,12 @@ export { PartialTheme }
 
 export { Popover }
 
-export { PopoverContext }
-
 export { PopoverContextValue }
 
 export { PopoverProps }
 
+export { PopoverProvider }
+
 export { PopoverSize }
 
 export { PopoverState }
@@ -1032,8 +1028,6 @@ export { RadioGroup }
 
 export { radioGroupClassNames }
 
-export { RadioGroupContext }
-
 export { RadioGroupContextValue }
 
 export { RadioGroupContextValues }
@@ -1042,6 +1036,8 @@ export { RadioGroupOnChangeData }
 
 export { RadioGroupProps }
 
+export { RadioGroupProvider }
+
 export { RadioGroupSlots }
 
 export { RadioGroupState }
@@ -1336,6 +1332,8 @@ export { UninitializedMenuListState }
 
 export { useAccordion_unstable }
 
+export { useAccordionContext_unstable }
+
 export { useAccordionContextValues_unstable }
 
 export { useAccordionHeader_unstable }
@@ -1512,6 +1510,8 @@ export { useRadio_unstable }
 
 export { useRadioGroup_unstable }
 
+export { useRadioGroupContext_unstable }
+
 export { useRadioGroupContextValues }
 
 export { useRadioGroupStyles_unstable }

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

@@ -29,11 +29,12 @@ export {
   Radio,
   radioClassNames,
   RadioGroup,
+  RadioGroupProvider,
   radioGroupClassNames,
-  RadioGroupContext,
   renderRadio_unstable,
   renderRadioGroup_unstable,
   useRadio_unstable,
+  useRadioGroupContext_unstable,
   useRadioGroupContextValues,
   useRadioGroup_unstable,
   useRadioGroupStyles_unstable,
@@ -133,10 +134,10 @@ export type {
 // Components
 export {
   Accordion,
-  AccordionContext,
+  AccordionProvider,
   AccordionHeader,
   AccordionItem,
-  AccordionItemContext,
+  AccordionItemProvider,
   AccordionPanel,
   accordionClassNames,
   accordionHeaderClassNames,
@@ -147,6 +148,7 @@ export {
   renderAccordionItem_unstable,
   renderAccordionPanel_unstable,
   useAccordion_unstable,
+  useAccordionContext_unstable,
   useAccordionContextValues_unstable,
   useAccordionHeader_unstable,
   useAccordionHeaderContextValues_unstable,
@@ -313,7 +315,6 @@ export {
 export type { LinkProps, LinkSlots, LinkState } from '@fluentui/react-link';
 export {
   Menu,
-  MenuContext,
   MenuDivider,
   MenuGroup,
   MenuGroupContextProvider,
@@ -322,7 +323,6 @@ export {
   MenuItemCheckbox,
   MenuItemRadio,
   MenuList,
-  MenuListContext,
   MenuListProvider,
   MenuPopover,
   MenuProvider,
@@ -427,8 +427,8 @@ export type {
 } from '@fluentui/react-menu';
 export {
   Popover,
-  PopoverContext,
   PopoverSurface,
+  PopoverProvider,
   PopoverTrigger,
   arrowHeights,
   popoverSurfaceClassNames,