chore: mark react-shared-context exports as unstable

apps/vr-tests-react-components/src/stories/Positioning.stories.tsx

@@ -10,7 +10,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { useMergedRefs } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { storiesOf } from '@storybook/react';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import Screener from 'screener-storybook/src/screener';
 
 const useStyles = makeStyles({

change/@fluentui-react-accordion-dcd9a70a-4f4a-476e-89e7-55ddf219de72.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-avatar-be41c08b-1e50-4c05-915d-993e1233d056.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-27aedd04-0b48-4a22-b1d4-23b3cf9ede22.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-71c94c92-9265-4b41-8594-f09984ef37c9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-d86fb76e-2691-4209-88ab-fc5dc21ea50e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-portal-3d50fed3-b2a2-4c63-bf9b-8dd3b9c1d975.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-portal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-portal-compat-50434454-41ff-475b-9256-fc8921d48dc3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-portal-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-positioning-58000149-235c-41e9-bc58-16c8a589c0ca.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-provider-0c56060c-b9f7-407a-aecd-eebcfba13f01.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components, removes re-export to provider",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-f8871f66-b381-4832-b72b-04b1801995b9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "mark context hooks and providers to unstable",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-slider-f2e56a3a-d820-4a83-80a7-66680b1f77f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabster-752fcf5f-5a72-45e9-9625-22c2c7b35dc0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-tabster",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tooltip-e23c123b-4364-429f-9b3e-9f37ca830b6e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "updates import to react-shared-components",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.tsx

@@ -6,7 +6,7 @@ import type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHead
 import { useContextSelector } from '@fluentui/react-context-selector';
 import { AccordionContext } from '../Accordion/AccordionContext';
 import { ChevronRightRegular } from '@fluentui/react-icons';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 
 /**
  * Returns the props and state required to render the component

packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx

@@ -4,7 +4,7 @@ import { getInitials } from '../../utils/index';
 import type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';
 import { PersonRegular } from '@fluentui/react-icons';
 import { PresenceBadge } from '@fluentui/react-badge';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useMergedEventCallbacks } from '@fluentui/react-utilities';
 
 export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {

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

@@ -429,7 +429,7 @@ import { useCounterBadge_unstable } from '@fluentui/react-badge';
 import { useCounterBadgeStyles_unstable } from '@fluentui/react-badge';
 import { useDivider_unstable } from '@fluentui/react-divider';
 import { useDividerStyles_unstable } from '@fluentui/react-divider';
-import { useFluent } from '@fluentui/react-provider';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useFluentProvider_unstable } from '@fluentui/react-provider';
 import { useFluentProviderContextValues_unstable } from '@fluentui/react-provider';
 import { useFluentProviderStyles_unstable } from '@fluentui/react-provider';
@@ -509,12 +509,13 @@ import { useText_unstable } from '@fluentui/react-text';
 import { useTextarea_unstable } from '@fluentui/react-textarea';
 import { useTextareaStyles_unstable } from '@fluentui/react-textarea';
 import { useTextStyles_unstable } from '@fluentui/react-text';
-import { useThemeClassName } from '@fluentui/react-shared-contexts';
+import { useThemeClassName_unstable as useThemeClassName } from '@fluentui/react-shared-contexts';
 import { useToggleButton_unstable } from '@fluentui/react-button';
 import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
 import { useToggleState } from '@fluentui/react-button';
 import { useTooltip_unstable } from '@fluentui/react-tooltip';
 import { useTooltipStyles_unstable } from '@fluentui/react-tooltip';
+import { useTooltipVisibility_unstable as useTooltipVisibility } from '@fluentui/react-shared-contexts';
 import { VerticalSpacingTokens } from '@fluentui/react-theme';
 import { webDarkTheme } from '@fluentui/react-theme';
 import { webLightTheme } from '@fluentui/react-theme';
@@ -1529,6 +1530,7 @@ export { useTextareaStyles_unstable }
 
 export { useTextStyles_unstable }
 
+
 export { useThemeClassName }
 
 export { useToggleButton_unstable }
@@ -1541,6 +1543,8 @@ export { useTooltip_unstable }
 
 export { useTooltipStyles_unstable }
 
+export { useTooltipVisibility }
+
 export { VerticalSpacingTokens }
 
 export { webDarkTheme }

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

@@ -14,7 +14,6 @@ export {
   FluentProvider,
   fluentProviderClassNames,
   renderFluentProvider_unstable,
-  useFluent,
   useFluentProvider_unstable,
   useFluentProviderContextValues_unstable,
   useFluentProviderStyles_unstable,
@@ -105,7 +104,11 @@ export type {
   TypographyStyle,
   TypographyStyles,
 } from '@fluentui/react-theme';
-export { useThemeClassName } from '@fluentui/react-shared-contexts';
+export {
+  useFluent_unstable as useFluent,
+  useTooltipVisibility_unstable as useTooltipVisibility,
+  useThemeClassName_unstable as useThemeClassName,
+} from '@fluentui/react-shared-contexts';
 export {
   getNativeElementProps,
   getPartitionedNativeProps,

packages/react-components/react-menu/src/components/Menu/useMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';
 import { useControllableState, useId, useOnClickOutside, useEventCallback } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { elementContains } from '@fluentui/react-portal';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useMenuContext_unstable } from '../../contexts/menuContext';

packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx

@@ -6,7 +6,7 @@ import {
   useMergedRefs,
   getNativeElementProps,
 } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useCharacterSearch } from './useCharacterSearch';
 import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
 import { ChevronRightRegular as ChevronRightIcon, ChevronLeftRegular as ChevronLeftIcon } from '@fluentui/react-icons';

packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts

@@ -4,7 +4,7 @@ import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentu
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { dispatchMenuEnterEvent } from '../../utils/index';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
 
 /**

packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';
 import { useFocusFinders } from '@fluentui/react-tabster';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';
 import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
 

packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts

@@ -3,7 +3,7 @@ import { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './Men
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
 import { useFocusFinders } from '@fluentui/react-tabster';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
 import {
   applyTriggerPropsToChildren,

packages/react-components/react-popover/src/components/Popover/usePopover.ts

@@ -5,7 +5,7 @@ import {
   useOnClickOutside,
   useOnScrollOutside,
 } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import {
   usePositioning,
   resolvePositioningShorthand,

packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx

@@ -1,4 +1,4 @@
-import { ThemeClassNameContext } from '@fluentui/react-shared-contexts';
+import { ThemeClassNameProvider_unstable as ThemeClassNameProvider } from '@fluentui/react-shared-contexts';
 import { usePortalCompat } from '@fluentui/react-portal-compat-context';
 import { FluentProvider } from '@fluentui/react-provider';
 import { resetIdsForTests } from '@fluentui/react-utilities';
@@ -68,9 +68,9 @@ describe('PortalCompatProvider', () => {
     const element = document.createElement('div');
     const { result } = renderHook(() => usePortalCompat(), {
       wrapper: props => (
-        <ThemeClassNameContext.Provider value="foo bar baz">
+        <ThemeClassNameProvider value="foo bar baz">
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
-        </ThemeClassNameContext.Provider>
+        </ThemeClassNameProvider>
       ),
     });
     result.current(element);

packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import { useThemeClassName, useFluent } from '@fluentui/react-shared-contexts';
+import {
+  useThemeClassName_unstable as useThemeClassName,
+  useFluent_unstable as useFluent,
+} from '@fluentui/react-shared-contexts';
 import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
 
 export type UsePortalMountNodeOptions = {

packages/react-components/react-positioning/src/usePositioning.ts

@@ -1,5 +1,5 @@
 import { useEventCallback, useIsomorphicLayoutEffect, useFirstMount, canUseDOM } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
 

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

@@ -7,15 +7,14 @@
 import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { PartialTheme } from '@fluentui/react-theme';
-import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
+import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
 import { Theme } from '@fluentui/react-theme';
-import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
-import type { ThemeContextValue } from '@fluentui/react-shared-contexts';
-import type { TooltipContextType } from '@fluentui/react-shared-contexts';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared-contexts';
+import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts';
+import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts';
 
 // @public (undocumented)
 export const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots, "root">, "dir"> & {
@@ -29,10 +28,10 @@ export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
 
 // @public (undocumented)
 export type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {
-    provider: ProviderContextValue;
-    themeClassName: ThemeClassNameContextValue;
+    provider: ProviderContextValue_unstable;
+    themeClassName: ThemeClassNameContextValue_unstable;
     textDirection: 'ltr' | 'rtl';
-    tooltip: TooltipContextType;
+    tooltip: TooltipVisibilityContextValue_unstable;
 };
 
 // @public (undocumented)
@@ -49,15 +48,13 @@ export type FluentProviderSlots = {
 
 // @public (undocumented)
 export type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'dir'>> & {
-    theme: ThemeContextValue;
+    theme: ThemeContextValue_unstable;
     themeClassName: string;
 };
 
 // @public
 export const renderFluentProvider_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
 
-export { useFluent }
-
 // @public
 export const useFluentProvider_unstable: (props: FluentProviderProps, ref: React_2.Ref<HTMLElement>) => FluentProviderState;
 

packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts

@@ -1,8 +1,8 @@
 import type {
-  ProviderContextValue,
-  TooltipContextType,
-  ThemeClassNameContextValue,
-  ThemeContextValue,
+  ProviderContextValue_unstable as ProviderContextValue,
+  TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,
+  ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,
+  ThemeContextValue_unstable as ThemeContextValue,
 } from '@fluentui/react-shared-contexts';
 import type { PartialTheme } from '@fluentui/react-theme';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
@@ -32,5 +32,5 @@ export type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {
   provider: ProviderContextValue;
   themeClassName: ThemeClassNameContextValue;
   textDirection: 'ltr' | 'rtl';
-  tooltip: TooltipContextType;
+  tooltip: TooltipVisibilityContextValue;
 };

packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { TextDirectionProvider } from '@griffel/react';
-import { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } from '@fluentui/react-shared-contexts';
+import {
+  Provider_unstable as Provider,
+  TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,
+  ThemeProvider_unstable as ThemeProvider,
+  ThemeClassNameProvider_unstable as ThemeClassNameProvider,
+} from '@fluentui/react-shared-contexts';
 import { getSlots } from '@fluentui/react-utilities';
 import type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
 
@@ -14,16 +19,16 @@ export const renderFluentProvider_unstable = (
   const { slots, slotProps } = getSlots<FluentProviderSlots>(state);
 
   return (
-    <ProviderContext.Provider value={contextValues.provider}>
-      <ThemeContext.Provider value={contextValues.theme}>
-        <ThemeClassNameContext.Provider value={contextValues.themeClassName}>
-          <TooltipContext.Provider value={contextValues.tooltip}>
+    <Provider value={contextValues.provider}>
+      <ThemeProvider value={contextValues.theme}>
+        <ThemeClassNameProvider value={contextValues.themeClassName}>
+          <TooltipVisibilityProvider value={contextValues.tooltip}>
             <TextDirectionProvider dir={contextValues.textDirection}>
               <slots.root {...slotProps.root}>{state.root.children}</slots.root>
             </TextDirectionProvider>
-          </TooltipContext.Provider>
-        </ThemeClassNameContext.Provider>
-      </ThemeContext.Provider>
-    </ProviderContext.Provider>
+          </TooltipVisibilityProvider>
+        </ThemeClassNameProvider>
+      </ThemeProvider>
+    </Provider>
   );
 };