# All files / src/interaction ElementInteractionProvider.tsx

100% Statements 64/64
100% Branches 3/3
100% Functions 2/2
100% Lines 64/64

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    651x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    4124x
    4124x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    206x
    206x
    206x
    206x
    206x
    129x
    129x
    129x
    206x
    206x
    206x
    206x
    206x
     "use client";
    import {
      createContext,
      useContext,
      useMemo,
      type ReactElement,
      type ReactNode,
    } from "react";
    import { type ElementInteractionMode } from "./types.js";

    export interface ElementInteractionContext {
      mode: ElementInteractionMode;
      higherContrast: boolean;
    }

    const context = createContext<ElementInteractionContext>({
      mode: "ripple",
      higherContrast: true,
    });
    context.displayName = "ElementInteraction";
    const { Provider } = context;

    /**
     * @remarks \@since 6.0.9
     * @internal
     */
    export function useElementInteractionContext(): Readonly<ElementInteractionContext> {
      return useContext(context);
    }

    /** @remarks \@since 6.0.9 */
    export interface ElementInteractionProviderProps {
      /** {@inheritDoc ElementInteractionMode} */
      mode?: ElementInteractionMode;
      /**
       * This should be set to `true` if the `$disable-higher-contrast-interactions`
       * SCSS variable is set to `false`.
       *
       * @defaultValue `false`
       */
      disableHigherContrast?: boolean;
      children: ReactNode;
    }

    /**
     * **Client Component**
     *
     * Note: This is automatically included by the {@link CoreProviders}
     * @remarks \@since 6.0.9
     */
    export function ElementInteractionProvider(
      props: ElementInteractionProviderProps
    ): ReactElement {
      const { mode = "ripple", disableHigherContrast = false, children } = props;
      const value = useMemo<ElementInteractionContext>(
        () => ({
          mode,
          higherContrast: !disableHigherContrast,
        }),
        [disableHigherContrast, mode]
      );

      return <Provider value={value}>{children}</Provider>;
    }