# All files / interaction ElementInteractionProvider.tsx

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

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
    571x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    148x
    148x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    18x
    18x
    18x
    18x
    18x
    15x
    15x
    15x
    18x
    18x
    18x
    18x
    18x
     import type { ReactElement, ReactNode } from "react";
    import { createContext, useContext, useMemo } from "react";
    import type { ElementInteractionMode } from "./types";

    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;
    }

    /**
     * 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>;
    }