@cloud-ru/uikit-product-utils 7.0.0 → 7.0.1

package/dist/esm/components/ConfigProvider/index.js

@@ -0,0 +1 @@
+export * from './ConfigProvider';

package/dist/esm/components/ForThemeMode/ForThemeMode.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type ForThemeModeProps = {
+    light: ReactNode;
+    dark: ReactNode;
+};
+export declare function ForThemeMode(props: ForThemeModeProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ForThemeMode/ForThemeMode.js

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useForThemeMode } from './hooks';
+export function ForThemeMode(props) {
+    const jsx = useForThemeMode(props);
+    return _jsx(_Fragment, { children: jsx });
+}

package/dist/esm/components/ForThemeMode/hooks.d.ts

@@ -0,0 +1,6 @@
+type UseForThemeModeParams<L, D> = {
+    light: L;
+    dark: D;
+};
+export declare function useForThemeMode<L, D>({ light, dark }: UseForThemeModeParams<L, D>): L | D;
+export {};

package/dist/esm/components/ForThemeMode/hooks.js

@@ -0,0 +1,10 @@
+import { useBrand, useTheme } from '../../hooks';
+import { Brand, Themes } from '../../types/theme';
+const DARK_THEMES = [Themes.GreenDark, Themes.PurpleDark];
+const DARK_BRANDS = [Brand.CloudDark, Brand.MLSpaceDark, Brand.AdminDark, Brand.SiteDark, Brand.GigaIdDark];
+export function useForThemeMode({ light, dark }) {
+    const { theme } = useTheme();
+    const { brand } = useBrand();
+    const isDarkTheme = DARK_THEMES.includes(theme) || DARK_BRANDS.includes(brand);
+    return isDarkTheme ? dark : light;
+}

package/dist/esm/components/ForThemeMode/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ForThemeMode';
+export * from './hooks';

package/dist/esm/components/ForThemeMode/index.js

@@ -0,0 +1,2 @@
+export * from './ForThemeMode';
+export * from './hooks';

package/dist/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ConfigProvider';
+export * from './ForThemeMode';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './ConfigProvider';
+export * from './ForThemeMode';

package/dist/esm/constants/adaptive.d.ts

@@ -0,0 +1,34 @@
+export declare const Adaptive: {
+    mobile: number;
+    tablet: number;
+    smallDesktop: number;
+    desktop: number;
+};
+export declare const CSS_BREAKPOINTS: {
+    mobile: string;
+    tablet: string;
+    smallDesktop: string;
+    desktop: string;
+    large: string;
+};
+export declare const LAYOUT_TYPE: {
+    readonly Mobile: "mobile";
+    readonly Tablet: "tablet";
+    readonly Desktop: "desktop";
+    readonly DesktopSmall: "desktopSmall";
+};
+export declare enum AdaptiveQueriesTitle {
+    IsMobile = "isMobile",
+    IsTablet = "isTablet",
+    IsSmallDesktop = "isSmallDesktop",
+    IsDesktop = "isDesktop",
+    IsLarge = "isLarge"
+}
+export declare const ADAPTIVE_QUERIES: Record<AdaptiveQueriesTitle, string>;
+export declare const INITIAL_ADAPTIVE_QUERIES_VALUE: {
+    isMobile: boolean;
+    isTablet: boolean;
+    isSmallDesktop: boolean;
+    isDesktop: boolean;
+    isLarge: boolean;
+};

package/dist/esm/constants/adaptive.js

@@ -0,0 +1,41 @@
+export const Adaptive = {
+    mobile: 767,
+    tablet: 1023,
+    smallDesktop: 1279,
+    desktop: 1439,
+};
+export const CSS_BREAKPOINTS = {
+    mobile: `(max-width: ${Adaptive.mobile}px)`,
+    tablet: `(max-width: ${Adaptive.tablet}px)`,
+    smallDesktop: `(max-width: ${Adaptive.smallDesktop}px)`,
+    desktop: `(max-width: ${Adaptive.desktop}px)`,
+    large: `(min-width: ${Adaptive.desktop + 1}px)`,
+};
+export const LAYOUT_TYPE = {
+    Mobile: 'mobile',
+    Tablet: 'tablet',
+    Desktop: 'desktop',
+    DesktopSmall: 'desktopSmall',
+};
+export var AdaptiveQueriesTitle;
+(function (AdaptiveQueriesTitle) {
+    AdaptiveQueriesTitle["IsMobile"] = "isMobile";
+    AdaptiveQueriesTitle["IsTablet"] = "isTablet";
+    AdaptiveQueriesTitle["IsSmallDesktop"] = "isSmallDesktop";
+    AdaptiveQueriesTitle["IsDesktop"] = "isDesktop";
+    AdaptiveQueriesTitle["IsLarge"] = "isLarge";
+})(AdaptiveQueriesTitle || (AdaptiveQueriesTitle = {}));
+export const ADAPTIVE_QUERIES = {
+    [AdaptiveQueriesTitle.IsMobile]: CSS_BREAKPOINTS.mobile,
+    [AdaptiveQueriesTitle.IsTablet]: CSS_BREAKPOINTS.tablet,
+    [AdaptiveQueriesTitle.IsSmallDesktop]: CSS_BREAKPOINTS.smallDesktop,
+    [AdaptiveQueriesTitle.IsDesktop]: CSS_BREAKPOINTS.desktop,
+    [AdaptiveQueriesTitle.IsLarge]: CSS_BREAKPOINTS.large,
+};
+export const INITIAL_ADAPTIVE_QUERIES_VALUE = {
+    [AdaptiveQueriesTitle.IsMobile]: false,
+    [AdaptiveQueriesTitle.IsTablet]: false,
+    [AdaptiveQueriesTitle.IsSmallDesktop]: false,
+    [AdaptiveQueriesTitle.IsDesktop]: false,
+    [AdaptiveQueriesTitle.IsLarge]: false,
+};

package/dist/esm/constants/displayMode.d.ts

@@ -0,0 +1,16 @@
+import { MatchMediaGeneric } from '../types';
+export declare const DISPLAY_MODES: {
+    Browser: string;
+    Pwa: string;
+    Fullscreen: string;
+    MinimalUI: string;
+    WindowControlsOverlay: string;
+};
+export declare const DISPLAY_MODE_QUERIES: {
+    isBrowser: string;
+    isPwa: string;
+    isFullscreen: string;
+    isMinimalUI: string;
+    isWindowControlsOverlay: string;
+};
+export declare const INITIAL_DISPLAY_MODE_QUERIES_VALUE: MatchMediaGeneric<keyof typeof DISPLAY_MODE_QUERIES>;

package/dist/esm/constants/displayMode.js

@@ -0,0 +1,21 @@
+export const DISPLAY_MODES = {
+    Browser: 'browser',
+    Pwa: 'pwa',
+    Fullscreen: 'fullscreen',
+    MinimalUI: 'minimal-ui',
+    WindowControlsOverlay: 'window-controls-overlay',
+};
+export const DISPLAY_MODE_QUERIES = {
+    isBrowser: `(display-mode: browser)`,
+    isPwa: `(display-mode: standalone)`,
+    isFullscreen: `(display-mode: fullscreen)`,
+    isMinimalUI: `(display-mode: minimal-ui)`,
+    isWindowControlsOverlay: `(display-mode: window-controls-overlay)`,
+};
+export const INITIAL_DISPLAY_MODE_QUERIES_VALUE = {
+    isBrowser: false,
+    isPwa: false,
+    isFullscreen: false,
+    isMinimalUI: false,
+    isWindowControlsOverlay: false,
+};

package/dist/esm/constants/environment.d.ts

@@ -0,0 +1,14 @@
+import { Brand, LanguageCodeType, Themes } from '../types';
+export declare const DEFAULT: {
+    LANGUAGE: LanguageCodeType;
+    BRAND: Brand;
+    THEME: Themes;
+};
+export declare enum POST_MESSAGE_KEY {
+    changeTheme = "changeTheme",
+    changeThemeDone = "changeThemeDone",
+    changeBrand = "changeBrand",
+    changeBrandDone = "changeBrandDone",
+    changeLanguage = "changeLanguage",
+    changeLanguageDone = "changeLanguageDone"
+}

package/dist/esm/constants/environment.js

@@ -0,0 +1,15 @@
+import { Brand, LanguageCodeType, Themes } from '../types';
+export const DEFAULT = {
+    LANGUAGE: LanguageCodeType.ruRU,
+    BRAND: Brand.Cloud,
+    THEME: Themes.Purple,
+};
+export var POST_MESSAGE_KEY;
+(function (POST_MESSAGE_KEY) {
+    POST_MESSAGE_KEY["changeTheme"] = "changeTheme";
+    POST_MESSAGE_KEY["changeThemeDone"] = "changeThemeDone";
+    POST_MESSAGE_KEY["changeBrand"] = "changeBrand";
+    POST_MESSAGE_KEY["changeBrandDone"] = "changeBrandDone";
+    POST_MESSAGE_KEY["changeLanguage"] = "changeLanguage";
+    POST_MESSAGE_KEY["changeLanguageDone"] = "changeLanguageDone";
+})(POST_MESSAGE_KEY || (POST_MESSAGE_KEY = {}));

package/dist/esm/helpers/tryParseJson.d.ts

@@ -0,0 +1 @@
+export declare function tryParseJson<T>(value: T): T | Record<string, unknown>;

package/dist/esm/helpers/tryParseJson.js

@@ -0,0 +1,12 @@
+function isValidJson(value) {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+export function tryParseJson(value) {
+    return typeof value === 'string' && isValidJson(value) ? JSON.parse(value) : value;
+}

package/dist/esm/hooks/index.d.ts

@@ -0,0 +1,13 @@
+export * from './useLanguage';
+export * from './useComponentSize';
+export * from './useTheme';
+export * from './useBrand';
+export * from './useForceUpdate';
+export * from './useForceUpdateOnPageLoadedCompletely';
+export * from './useEventHandler';
+export * from './useUniqueId';
+export * from './useConfig';
+export * from './useTextProvider';
+export * from './useAdaptive';
+export * from './useDisplayMode';
+export * from './useMatchMedia';

package/dist/esm/hooks/index.js

@@ -0,0 +1,13 @@
+export * from './useLanguage';
+export * from './useComponentSize';
+export * from './useTheme';
+export * from './useBrand';
+export * from './useForceUpdate';
+export * from './useForceUpdateOnPageLoadedCompletely';
+export * from './useEventHandler';
+export * from './useUniqueId';
+export * from './useConfig';
+export * from './useTextProvider';
+export * from './useAdaptive';
+export * from './useDisplayMode';
+export * from './useMatchMedia';

package/dist/esm/hooks/private/getCustomStore.d.ts

@@ -0,0 +1,2 @@
+import { WindowStore } from '../../types';
+export declare function getCustomStore(defaultStore?: Partial<WindowStore['sbercloudUIKit']>): WindowStore['sbercloudUIKit'];

package/dist/esm/hooks/private/getCustomStore.js

@@ -0,0 +1,8 @@
+import { DEFAULT } from '../../constants/environment';
+export function getCustomStore(defaultStore = {}) {
+    const customWindow = globalThis;
+    if (!customWindow.sbercloudUIKit) {
+        customWindow.sbercloudUIKit = Object.assign({ brand: DEFAULT.BRAND, theme: DEFAULT.THEME, languageCode: DEFAULT.LANGUAGE }, defaultStore);
+    }
+    return customWindow.sbercloudUIKit;
+}

package/dist/esm/hooks/useAdaptive.d.ts

@@ -0,0 +1,4 @@
+import { LayoutType } from '../types/adaptive';
+export declare function useAdaptive(): {
+    layoutType: LayoutType;
+};

package/dist/esm/hooks/useAdaptive.js

@@ -0,0 +1,6 @@
+import { getAdaptive } from '../utils';
+import { useAdaptiveMatchMedia } from './useMatchMedia';
+export function useAdaptive() {
+    const matchMedia = useAdaptiveMatchMedia();
+    return getAdaptive(matchMedia);
+}

package/dist/esm/hooks/useBrand.d.ts

@@ -0,0 +1,5 @@
+import { Brand } from '../types/theme';
+export declare const useBrand: () => {
+    brand: Brand;
+    changeBrand: (brand: Brand) => void;
+};

package/dist/esm/hooks/useBrand.js

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from 'react';
+import { isBrowser } from '@snack-uikit/utils';
+import { DEFAULT, POST_MESSAGE_KEY } from '../constants/environment';
+import { tryParseJson } from '../helpers/tryParseJson';
+import { getCustomStore } from './private/getCustomStore';
+export const useBrand = () => {
+    const store = getCustomStore();
+    const [brand, setBrand] = useState(store.brand || DEFAULT.BRAND);
+    useEffect(() => {
+        const receiveChangeThemeDoneMessage = (event) => {
+            const eventData = tryParseJson(event.data);
+            if (eventData.key !== POST_MESSAGE_KEY.changeBrandDone)
+                return;
+            setBrand(eventData.value);
+        };
+        window.addEventListener('message', receiveChangeThemeDoneMessage, false);
+        return () => window.removeEventListener('message', receiveChangeThemeDoneMessage, false);
+    }, []);
+    const changeBrand = useCallback((brand) => {
+        isBrowser() &&
+            window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeBrand, value: brand }), location.origin);
+    }, []);
+    return { brand, changeBrand };
+};

package/dist/esm/hooks/useComponentSize.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare function useComponentSize(ref: RefObject<HTMLElement>): {
+    width: number;
+    height: number;
+};

package/dist/esm/hooks/useComponentSize.js

@@ -0,0 +1,33 @@
+import { useCallback, useState } from 'react';
+import { useLayoutEffect } from '@snack-uikit/utils';
+function getSize(el) {
+    if (!el) {
+        return {
+            width: 0,
+            height: 0,
+        };
+    }
+    return {
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+    };
+}
+export function useComponentSize(ref) {
+    const [size, setSize] = useState(getSize(ref.current));
+    const handleResize = useCallback(() => {
+        if (ref.current) {
+            setSize(getSize(ref.current));
+        }
+    }, [ref]);
+    useLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        handleResize();
+        const resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(ref.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [handleResize, ref]);
+    return size;
+}

package/dist/esm/hooks/useConfig.d.ts

@@ -0,0 +1,8 @@
+import { Brand, LanguageCodeType, Themes } from '../types';
+type UseConfigProps = {
+    languageCode?: LanguageCodeType;
+    theme?: Themes;
+    brand?: Brand;
+};
+export declare function useConfig({ languageCode, theme, brand }: UseConfigProps): void;
+export {};

package/dist/esm/hooks/useConfig.js

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import AdminBrandThemes from '@sbercloud/figma-tokens-admin/build/css/brand.module.css';
+import CloudBrandThemes from '@sbercloud/figma-tokens-cloud-platform/build/css/brand.module.css';
+import GigaIdBrandThemes from '@sbercloud/figma-tokens-giga-id/build/css/brand.module.css';
+import MLSpaceBrandThemes from '@sbercloud/figma-tokens-mlspace/build/css/brand.module.css';
+import SiteBrandThemes from '@sbercloud/figma-tokens-web/build/css/brand.module.css';
+import { isBrowser, useLayoutEffect } from '@snack-uikit/utils';
+import { POST_MESSAGE_KEY } from '../constants/environment';
+import { tryParseJson } from '../helpers/tryParseJson';
+import { Brand, Themes } from '../types';
+import { getCustomStore } from './private/getCustomStore';
+const themeMap = {
+    [Themes.Green]: CloudBrandThemes.light,
+    [Themes.GreenDark]: CloudBrandThemes.dark,
+    [Themes.Purple]: MLSpaceBrandThemes.light,
+    [Themes.PurpleDark]: MLSpaceBrandThemes.dark,
+};
+const brandMap = {
+    [Brand.Cloud]: CloudBrandThemes.light,
+    [Brand.CloudDark]: CloudBrandThemes.dark,
+    [Brand.MLSpace]: MLSpaceBrandThemes.light,
+    [Brand.MLSpaceDark]: MLSpaceBrandThemes.dark,
+    [Brand.Admin]: AdminBrandThemes.light,
+    [Brand.AdminDark]: AdminBrandThemes.dark,
+    [Brand.Site]: SiteBrandThemes.light,
+    [Brand.SiteDark]: SiteBrandThemes.dark,
+    [Brand.GigaId]: GigaIdBrandThemes.light,
+    [Brand.GigaIdDark]: GigaIdBrandThemes.dark,
+};
+export function useConfig({ languageCode, theme, brand }) {
+    const store = getCustomStore({ brand, theme, languageCode });
+    const [configLanguageCode, setConfigLanguageCodeTheme] = useState(store.languageCode);
+    const previousThemeRef = useRef();
+    const previousBrandRef = useRef();
+    const updateTheme = useCallback((newTheme) => {
+        if (isBrowser()) {
+            store.theme = newTheme;
+            const html = document.getElementsByTagName('html')[0];
+            if (previousThemeRef.current) {
+                html.classList.remove(themeMap[previousThemeRef.current]);
+            }
+            html.setAttribute('data-theme', newTheme);
+            const body = document.getElementsByTagName('body')[0];
+            body.setAttribute('data-theme', newTheme);
+            html.classList.add(themeMap[newTheme]);
+            window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeThemeDone, value: newTheme }), location.origin);
+            previousThemeRef.current = newTheme;
+        }
+    }, [store]);
+    const updateBrand = useCallback((newBrand) => {
+        if (isBrowser()) {
+            store.brand = newBrand;
+            const html = document.getElementsByTagName('html')[0];
+            if (previousBrandRef.current) {
+                html.classList.remove(brandMap[previousBrandRef.current]);
+            }
+            html.setAttribute('data-brand', newBrand);
+            const body = document.getElementsByTagName('body')[0];
+            body.setAttribute('data-brand', newBrand);
+            html.classList.add(brandMap[newBrand]);
+            window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeBrandDone, value: newBrand }), location.origin);
+            previousBrandRef.current = newBrand;
+        }
+    }, [store]);
+    useEffect(() => {
+        /*-----------
+            --- THEME/BRAND ---
+            -----------*/
+        const receiveChangeThemeMessage = (event) => {
+            const eventData = tryParseJson(event.data);
+            switch (eventData.key) {
+                case POST_MESSAGE_KEY.changeTheme:
+                    updateTheme(eventData.value);
+                    break;
+                case POST_MESSAGE_KEY.changeBrand:
+                    updateBrand(eventData.value);
+                    break;
+                default:
+                    return;
+            }
+        };
+        window.addEventListener('message', receiveChangeThemeMessage, false);
+        /*--------------
+            --- LANGUAGE ---
+            --------------*/
+        const receiveChangeLanguageMessage = (event) => {
+            const eventData = tryParseJson(event.data);
+            if (eventData.key !== POST_MESSAGE_KEY.changeLanguage)
+                return;
+            setConfigLanguageCodeTheme(eventData.value);
+        };
+        window.addEventListener('message', receiveChangeLanguageMessage, false);
+        return () => {
+            window.removeEventListener('message', receiveChangeThemeMessage, false);
+            window.removeEventListener('message', receiveChangeLanguageMessage, false);
+        };
+    }, [updateBrand, updateTheme]);
+    /*-------------
+      ---- THEME ----
+      -------------*/
+    // need to do it this way to update theme before any other child component render & useEffect/useLayoutEffect
+    if (previousThemeRef.current !== theme && theme) {
+        updateTheme(theme);
+    }
+    if (previousBrandRef.current !== brand && brand) {
+        updateBrand(brand);
+    }
+    /*--------------
+      --- LANGUAGE ---
+      --------------*/
+    useLayoutEffect(() => {
+        if (languageCode) {
+            store.languageCode = languageCode;
+            setConfigLanguageCodeTheme(store.languageCode);
+        }
+    }, [languageCode, store]);
+    useEffect(() => {
+        window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeLanguageDone, value: configLanguageCode }), location.origin);
+    }, [configLanguageCode]);
+}

package/dist/esm/hooks/useDisplayMode.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { DISPLAY_MODES } from '../constants/displayMode';
+export declare function useDisplayMode(): 'unknown' | 'twa' | ValueOf<typeof DISPLAY_MODES>;

package/dist/esm/hooks/useDisplayMode.js

@@ -0,0 +1,6 @@
+import { getDisplayMode } from '../utils/getDisplayMode';
+import { useDisplayModeMatchMedia } from './useMatchMedia';
+export function useDisplayMode() {
+    const matchMedia = useDisplayModeMatchMedia();
+    return getDisplayMode(matchMedia);
+}

package/dist/esm/hooks/useEventHandler.d.ts

@@ -0,0 +1 @@
+export declare function useEventHandler<T extends (...args: never[]) => unknown>(handler: T): T;

package/dist/esm/hooks/useEventHandler.js

@@ -0,0 +1,14 @@
+import { useCallback, useRef } from 'react';
+import { useLayoutEffect } from '@snack-uikit/utils';
+import { warning } from '../utils';
+export function useEventHandler(handler) {
+    const handlerRef = useRef(null);
+    useLayoutEffect(() => {
+        handlerRef.current = handler;
+    });
+    return useCallback((...args) => {
+        const handler = handlerRef.current;
+        warning('The event handler cannot be called during render', handler === null);
+        return handler === null || handler === void 0 ? void 0 : handler(...args);
+    }, []);
+}

package/dist/esm/hooks/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export declare function useForceUpdate(): () => void;

package/dist/esm/hooks/useForceUpdate.js

@@ -0,0 +1,5 @@
+import { useCallback, useState } from 'react';
+export function useForceUpdate() {
+    const [, setVersion] = useState(0);
+    return useCallback(() => setVersion(version => version + 1), []);
+}

package/dist/esm/hooks/useForceUpdateOnPageLoadedCompletely.d.ts

@@ -0,0 +1 @@
+export declare function useForceUpdateOnPageLoadedCompletely(): void;

package/dist/esm/hooks/useForceUpdateOnPageLoadedCompletely.js

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { useForceUpdate } from './useForceUpdate';
+export function useForceUpdateOnPageLoadedCompletely() {
+    const rerender = useForceUpdate();
+    useEffect(() => {
+        window.addEventListener('load', rerender);
+        return () => {
+            window.removeEventListener('load', rerender);
+        };
+    }, [rerender]);
+}

package/dist/esm/hooks/useLanguage.d.ts

@@ -0,0 +1,9 @@
+import { LanguageCodeType } from '../types';
+type useLanguageProps = {
+    onlyEnabledLanguage?: boolean;
+};
+export declare const useLanguage: (props?: useLanguageProps) => {
+    languageCode: LanguageCodeType;
+    changeLanguage: (languageCode: LanguageCodeType) => void;
+};
+export {};

package/dist/esm/hooks/useLanguage.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useState } from 'react';
+import { isBrowser, useLayoutEffect } from '@snack-uikit/utils';
+import { DEFAULT, POST_MESSAGE_KEY } from '../constants/environment';
+import { tryParseJson } from '../helpers/tryParseJson';
+import { LanguageCodeType } from '../types';
+import { getCustomStore } from './private/getCustomStore';
+export const useLanguage = (props) => {
+    const store = getCustomStore();
+    const [languageCode, setLanguageCode] = useState(store.languageCode || DEFAULT.LANGUAGE);
+    const onlyEnabledLanguage = props === null || props === void 0 ? void 0 : props.onlyEnabledLanguage;
+    useEffect(() => {
+        const receiveChangeLanguageDoneMessage = (event) => {
+            const eventData = tryParseJson(event.data);
+            if (eventData.key !== POST_MESSAGE_KEY.changeLanguageDone)
+                return;
+            setLanguageCode(eventData.value);
+        };
+        window.addEventListener('message', receiveChangeLanguageDoneMessage, false);
+        return () => window.removeEventListener('message', receiveChangeLanguageDoneMessage, false);
+    }, []);
+    useLayoutEffect(() => {
+        if (!onlyEnabledLanguage) {
+            return;
+        }
+        const miniCode = languageCode.split('-')[0];
+        const enGroup = miniCode === 'en';
+        const ruGroup = ['ru', 'be'].includes(miniCode);
+        if (enGroup) {
+            setLanguageCode(LanguageCodeType.enGB);
+            return;
+        }
+        if (ruGroup) {
+            setLanguageCode(LanguageCodeType.ruRU);
+            return;
+        }
+        if (languageCode === LanguageCodeType.cimode) {
+            setLanguageCode(LanguageCodeType.cimode);
+            return;
+        }
+        setLanguageCode(LanguageCodeType.ruRU);
+    }, [languageCode, onlyEnabledLanguage]);
+    const changeLanguage = useCallback((languageCode) => {
+        if (isBrowser()) {
+            window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeLanguage, value: languageCode }), location.origin);
+        }
+    }, []);
+    return { languageCode, changeLanguage };
+};

package/dist/esm/hooks/useMatchMedia.d.ts

@@ -0,0 +1,7 @@
+import { MatchMediaGeneric } from '../types';
+export declare const useMatchMediaGeneric: <T extends string>({ queryValues, initialValues, }: {
+    queryValues: Record<T, string>;
+    initialValues: MatchMediaGeneric<T>;
+}) => MatchMediaGeneric<T>;
+export declare function useAdaptiveMatchMedia(): MatchMediaGeneric<import("../constants/adaptive").AdaptiveQueriesTitle>;
+export declare function useDisplayModeMatchMedia(): MatchMediaGeneric<"isBrowser" | "isPwa" | "isFullscreen" | "isMinimalUI" | "isWindowControlsOverlay">;

package/dist/esm/hooks/useMatchMedia.js

@@ -0,0 +1,33 @@
+import { useRef, useState } from 'react';
+import { useLayoutEffect } from '@snack-uikit/utils';
+import { ADAPTIVE_QUERIES, INITIAL_ADAPTIVE_QUERIES_VALUE } from '../constants/adaptive';
+import { DISPLAY_MODE_QUERIES, INITIAL_DISPLAY_MODE_QUERIES_VALUE } from '../constants/displayMode';
+import { getMatchMediaGeneric, getMediaQueryListGeneric } from '../utils/getMatchMedia';
+export const useMatchMediaGeneric = ({ queryValues, initialValues, }) => {
+    const updatedHandlers = {
+        getMatchMedia: () => getMatchMediaGeneric({ queryValues, initialValues }),
+        getMediaQueryList: () => getMediaQueryListGeneric({ queryValues }),
+    };
+    const handlersRef = useRef(updatedHandlers);
+    handlersRef.current = updatedHandlers;
+    const [value, setValue] = useState(handlersRef.current.getMatchMedia);
+    useLayoutEffect(() => {
+        const handler = () => setValue(handlersRef.current.getMatchMedia);
+        const mediaQueryList = handlersRef.current.getMediaQueryList();
+        mediaQueryList.forEach(([, mql]) => mql.addEventListener('change', handler));
+        return () => mediaQueryList.forEach(([, mql]) => mql.removeEventListener('change', handler));
+    }, []);
+    return value;
+};
+export function useAdaptiveMatchMedia() {
+    return useMatchMediaGeneric({
+        queryValues: ADAPTIVE_QUERIES,
+        initialValues: INITIAL_ADAPTIVE_QUERIES_VALUE,
+    });
+}
+export function useDisplayModeMatchMedia() {
+    return useMatchMediaGeneric({
+        queryValues: DISPLAY_MODE_QUERIES,
+        initialValues: INITIAL_DISPLAY_MODE_QUERIES_VALUE,
+    });
+}

package/dist/esm/hooks/useTextProvider.d.ts

@@ -0,0 +1,4 @@
+import { LanguageCodeType } from '../types';
+type TextProviderFunction<T extends string> = (entity: T) => string;
+export declare const useTextProvider: <T extends string>(textProvider: (language: LanguageCodeType, entity: T) => string) => TextProviderFunction<T>;
+export {};