feat(react-provider): use feature flag

Author: mainframev

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

@@ -6,6 +6,7 @@
 import type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';
 import type {
   OverridesContextValue_unstable as OverridesContextValue,
+  PointerInteractionsContextValue_unstable as PointerInteractionsContextValue,
   ProviderContextValue_unstable as ProviderContextValue,
   TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,
   ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,
@@ -45,12 +46,23 @@ export type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
   overrides_unstable?: OverridesContextValue;
+
+  /**
+   * Enables pointer-aware hover behavior. When enabled, hover only fires for
+   * mouse/pen interactions, not touch. This fixes "sticky hover" on touch devices.
+   * @default false
+   */
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  UNSTABLE_usePointerHover?: boolean;
 };
 
 export type FluentProviderState = ComponentState<FluentProviderSlots> &
   Pick<FluentProviderProps, 'targetDocument'> &
   Required<
-    Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>
+    Pick<
+      FluentProviderProps,
+      'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable' | 'UNSTABLE_usePointerHover'
+    >
   > & {
     theme: ThemeContextValue;
     themeClassName: string;
@@ -78,4 +90,5 @@ export type FluentProviderContextValues = Pick<
   textDirection: 'ltr' | 'rtl';
   iconDirection: IconDirectionContextValue;
   tooltip: TooltipVisibilityContextValue;
+  pointerInteractions: PointerInteractionsContextValue;
 };

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

@@ -5,6 +5,7 @@ import type { JSXElement } from '@fluentui/react-utilities';
 import { TextDirectionProvider } from '@griffel/react';
 import {
   OverridesProvider_unstable as OverridesProvider,
+  PointerInteractionsProvider_unstable as PointerInteractionsProvider,
   Provider_unstable as Provider,
   TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,
   ThemeProvider_unstable as ThemeProvider,
@@ -39,19 +40,21 @@ export const renderFluentProvider_unstable = (
               <TextDirectionProvider dir={contextValues.textDirection}>
                 <IconDirectionContextProvider value={contextValues.iconDirection}>
                   <OverridesProvider value={contextValues.overrides_unstable}>
-                    <state.root>
-                      {canUseDOM() ? null : (
-                        <style
-                          // Using dangerous HTML because react can escape characters
-                          // which can lead to invalid CSS.
-                          // eslint-disable-next-line react/no-danger
-                          dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
-                          {...state.serverStyleProps.attributes}
-                        />
-                      )}
+                    <PointerInteractionsProvider value={contextValues.pointerInteractions}>
+                      <state.root>
+                        {canUseDOM() ? null : (
+                          <style
+                            // Using dangerous HTML because react can escape characters
+                            // which can lead to invalid CSS.
+                            // eslint-disable-next-line react/no-danger
+                            dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
+                            {...state.serverStyleProps.attributes}
+                          />
+                        )}
 
-                      {state.root.children}
-                    </state.root>
+                        {state.root.children}
+                      </state.root>
+                    </PointerInteractionsProvider>
                   </OverridesProvider>
                 </IconDirectionContextProvider>
               </TextDirectionProvider>

packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.ts

@@ -6,6 +6,7 @@ import {
   ThemeContext_unstable as ThemeContext,
   useFluent_unstable as useFluent,
   useOverrides_unstable as useOverrides,
+  usePointerInteractions_unstable as usePointerInteractions,
   CustomStyleHooksContext_unstable as CustomStyleHooksContext,
 } from '@fluentui/react-shared-contexts';
 import type {
@@ -40,6 +41,7 @@ export const useFluentProvider_unstable = (
   const parentContext = useFluent();
   const parentTheme = useTheme();
   const parentOverrides = useOverrides();
+  const parentPointerInteractions = usePointerInteractions();
   const parentCustomStyleHooks: CustomStyleHooksContextValue =
     React.useContext(CustomStyleHooksContext) || DEFAULT_STYLE_HOOKS;
 
@@ -56,6 +58,8 @@ export const useFluentProvider_unstable = (
     targetDocument = parentContext.targetDocument,
     theme,
     overrides_unstable: overrides = {},
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    UNSTABLE_usePointerHover = parentPointerInteractions.usePointerHover,
   } = props;
 
   const mergedTheme = shallowMerge(parentTheme, theme);
@@ -98,6 +102,8 @@ export const useFluentProvider_unstable = (
     theme: mergedTheme,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     overrides_unstable: mergedOverrides,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    UNSTABLE_usePointerHover,
     themeClassName: styleTagId,
 
     components: {

packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderContextValues.ts

@@ -15,12 +15,18 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
     themeClassName,
     // eslint-disable-next-line @typescript-eslint/naming-convention
     overrides_unstable,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    UNSTABLE_usePointerHover,
   } = state;
 
   const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);
   // "Tooltip" component mutates an object in this context, instance should be stable
   const [tooltip] = React.useState(() => ({}));
   const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);
+  const pointerInteractions = React.useMemo(
+    () => ({ usePointerHover: UNSTABLE_usePointerHover }),
+    [UNSTABLE_usePointerHover],
+  );
 
   return {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -33,5 +39,6 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
     tooltip,
     theme,
     themeClassName: applyStylesToPortals ? root.className! : themeClassName,
+    pointerInteractions,
   };
 }

packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md

@@ -632,6 +632,14 @@ export type OverridesContextValue_unstable = {
 // @internal (undocumented)
 export const OverridesProvider_unstable: React_2.Provider<OverridesContextValue_unstable | undefined>;
 
+// @internal
+export type PointerInteractionsContextValue_unstable = {
+    usePointerHover: boolean;
+};
+
+// @internal (undocumented)
+export const PointerInteractionsProvider_unstable: React_2.Provider<PointerInteractionsContextValue_unstable>;
+
 // @internal (undocumented)
 export const PortalMountNodeProvider: React_2.Provider<PortalMountNodeContextValue>;
 
@@ -690,6 +698,9 @@ export function useFluent_unstable(): ProviderContextValue_unstable;
 // @public (undocumented)
 export function useOverrides_unstable(): OverridesContextValue_unstable;
 
+// @internal
+export function usePointerInteractions_unstable(): PointerInteractionsContextValue_unstable;
+
 // @public (undocumented)
 export function usePortalMountNode(): PortalMountNodeContextValue;
 

packages/react-components/react-shared-contexts/library/src/PointerInteractionsContext/PointerInteractionsContext.ts

@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * Context value for pointer-aware interaction behavior.
+ * @internal
+ */
+export type PointerInteractionsContextValue = {
+  /**
+   * Whether pointer-aware hover behavior is enabled.
+   * When enabled, hover only fires for mouse/pen interactions, not touch.
+   * This fixes "sticky hover" on touch devices.
+   */
+  usePointerHover: boolean;
+};
+
+const defaultValue: PointerInteractionsContextValue = {
+  usePointerHover: false,
+};
+
+/**
+ * @internal
+ */
+export const PointerInteractionsContext = React.createContext<PointerInteractionsContextValue>(defaultValue);
+
+/**
+ * @internal
+ */
+export const PointerInteractionsProvider = PointerInteractionsContext.Provider;
+
+/**
+ * Hook to access pointer interactions context.
+ * Returns whether pointer-aware hover behavior is enabled.
+ * @internal
+ */
+export function usePointerInteractions(): PointerInteractionsContextValue {
+  return React.useContext(PointerInteractionsContext);
+}

packages/react-components/react-shared-contexts/library/src/PointerInteractionsContext/index.ts

@@ -0,0 +1,6 @@
+export type { PointerInteractionsContextValue } from './PointerInteractionsContext';
+export {
+  PointerInteractionsContext,
+  PointerInteractionsProvider,
+  usePointerInteractions,
+} from './PointerInteractionsContext';

packages/react-components/react-shared-contexts/library/src/index.ts

@@ -29,6 +29,12 @@ export {
 } from './CustomStyleHooksContext';
 export type { CustomStyleHooksContextValue as CustomStyleHooksContextValue_unstable } from './CustomStyleHooksContext';
 
+export {
+  PointerInteractionsProvider as PointerInteractionsProvider_unstable,
+  usePointerInteractions as usePointerInteractions_unstable,
+} from './PointerInteractionsContext';
+export type { PointerInteractionsContextValue as PointerInteractionsContextValue_unstable } from './PointerInteractionsContext';
+
 export { BackgroundAppearanceProvider, useBackgroundAppearance } from './BackgroundAppearanceContext';
 export type { BackgroundAppearanceContextValue } from './BackgroundAppearanceContext';