import type { LayoutTheme, MediaType } from "../types.js"; import { getClosestMediaPropsFactory, isMediaActiveFactory } from "../utils/index.js"; interface ComputedMediaContext { theme: LayoutTheme; /** * * > Note: `s` breakpoint starts from `0px` and and's with `m` - 1px * * ```tsx * import {useLayoutContext} from '@gravity-ui/uikit'; * * const Component = () => { * const {activeMediaQuery} = useLayoutContext(); * * return ( * <> * {activeMediaQuery === 'l' ? ( * I am rendering only on screen resolution - "l" * ) : null} * * ); * }; * ``` */ activeMediaQuery: MediaType; /** * Returns a boolean value if the passed value is equal to or greater than the currently active media expression. * It is necessary to describe the logic of adaptive behavior of elements taking into account the mobile-first approach * ```tsx * import {useLayoutContext} from '@gravity-ui/uikit'; * * // this example of code will be shown on l, xl, xxl and xxxl screen sizes * const Component = () => { * const {isMediaActive} = useLayoutContext(); * * return ( * <>{isMediaActive('xl') ? i'm rendering on "l", "xl", "xxl" and "xxxl" screen sizes : null}; * ); * }; * ``` */ isMediaActive: ReturnType; /** * It works in a similar way to is Media Active, only it takes map as an argument in the keys of screen resolutions. * Returns the nearest available key value taking into account the mobile first approach. * * ```tsx * import {useLayoutContext} from '@gravity-ui/uikit'; * * const mapOfPropsByScreen = { * s: "i'm will be shown on 's' and 'n' screen size", * l: "i'm will be shown on 'l' and 'xl' screen size", * xxl: "i'm will be shown on 'xxl' and 'xxxl' screen size", * }; * * const Component = () => { * const {getClosestMediaProps} = useLayoutContext(); * * return {mapOfPropsByScreen(mapOfPropsByScreen)}; * }; * ``` */ getClosestMediaProps: ReturnType; } /** * Quick access to theme and helpers to work with media queries * --- * Storybook - https://preview.gravity-ui.com/uikit/?path=/docs/layout--playground#uselayoutcontext */ export declare const useLayoutContext: () => ComputedMediaContext; export {};