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

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.2 (2025-11-13)
+
+
+### Bug Fixes
+
+* **PD-3377:** move token deps back to peers ([1b99749](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/1b99749040515e23e094f814dbf46291a317c3ae))
+
+
+
+
+
+## 7.0.1 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 # 7.0.0 (2025-11-12)
 
 

package/dist/cjs/components/ConfigProvider/ConfigProvider.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { Brand, LanguageCodeType, Themes } from '../../types';
+export type ConfigProviderProps = PropsWithChildren<{
+    languageCode?: LanguageCodeType;
+    theme?: Themes;
+    brand?: Brand;
+}>;
+export declare function ConfigProvider({ languageCode, theme, brand, children }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ConfigProvider {
+    var brand: typeof Brand;
+    var themes: typeof Themes;
+    var languages: typeof LanguageCodeType;
+}

package/dist/cjs/components/ConfigProvider/ConfigProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigProvider = ConfigProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useConfig_1 = require("../../hooks/useConfig");
+const types_1 = require("../../types");
+function ConfigProvider({ languageCode, theme, brand, children }) {
+    (0, useConfig_1.useConfig)({ languageCode, theme, brand });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+ConfigProvider.brand = types_1.Brand;
+ConfigProvider.themes = types_1.Themes;
+ConfigProvider.languages = types_1.LanguageCodeType;

package/dist/cjs/components/ConfigProvider/index.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ConfigProvider"), exports);

package/dist/cjs/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/cjs/components/ForThemeMode/ForThemeMode.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForThemeMode = ForThemeMode;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("./hooks");
+function ForThemeMode(props) {
+    const jsx = (0, hooks_1.useForThemeMode)(props);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: jsx });
+}

package/dist/cjs/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/cjs/components/ForThemeMode/hooks.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useForThemeMode = useForThemeMode;
+const hooks_1 = require("../../hooks");
+const theme_1 = require("../../types/theme");
+const DARK_THEMES = [theme_1.Themes.GreenDark, theme_1.Themes.PurpleDark];
+const DARK_BRANDS = [theme_1.Brand.CloudDark, theme_1.Brand.MLSpaceDark, theme_1.Brand.AdminDark, theme_1.Brand.SiteDark, theme_1.Brand.GigaIdDark];
+function useForThemeMode({ light, dark }) {
+    const { theme } = (0, hooks_1.useTheme)();
+    const { brand } = (0, hooks_1.useBrand)();
+    const isDarkTheme = DARK_THEMES.includes(theme) || DARK_BRANDS.includes(brand);
+    return isDarkTheme ? dark : light;
+}

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ForThemeMode"), exports);
+__exportStar(require("./hooks"), exports);

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

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

package/dist/cjs/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ConfigProvider"), exports);
+__exportStar(require("./ForThemeMode"), exports);

package/dist/cjs/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/cjs/constants/adaptive.js

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

package/dist/cjs/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/cjs/constants/displayMode.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INITIAL_DISPLAY_MODE_QUERIES_VALUE = exports.DISPLAY_MODE_QUERIES = exports.DISPLAY_MODES = void 0;
+exports.DISPLAY_MODES = {
+    Browser: 'browser',
+    Pwa: 'pwa',
+    Fullscreen: 'fullscreen',
+    MinimalUI: 'minimal-ui',
+    WindowControlsOverlay: 'window-controls-overlay',
+};
+exports.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)`,
+};
+exports.INITIAL_DISPLAY_MODE_QUERIES_VALUE = {
+    isBrowser: false,
+    isPwa: false,
+    isFullscreen: false,
+    isMinimalUI: false,
+    isWindowControlsOverlay: false,
+};

package/dist/cjs/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/cjs/constants/environment.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POST_MESSAGE_KEY = exports.DEFAULT = void 0;
+const types_1 = require("../types");
+exports.DEFAULT = {
+    LANGUAGE: types_1.LanguageCodeType.ruRU,
+    BRAND: types_1.Brand.Cloud,
+    THEME: types_1.Themes.Purple,
+};
+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 || (exports.POST_MESSAGE_KEY = POST_MESSAGE_KEY = {}));

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

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

package/dist/cjs/helpers/tryParseJson.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tryParseJson = tryParseJson;
+function isValidJson(value) {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function tryParseJson(value) {
+    return typeof value === 'string' && isValidJson(value) ? JSON.parse(value) : value;
+}

package/dist/cjs/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/cjs/hooks/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLanguage"), exports);
+__exportStar(require("./useComponentSize"), exports);
+__exportStar(require("./useTheme"), exports);
+__exportStar(require("./useBrand"), exports);
+__exportStar(require("./useForceUpdate"), exports);
+__exportStar(require("./useForceUpdateOnPageLoadedCompletely"), exports);
+__exportStar(require("./useEventHandler"), exports);
+__exportStar(require("./useUniqueId"), exports);
+__exportStar(require("./useConfig"), exports);
+__exportStar(require("./useTextProvider"), exports);
+__exportStar(require("./useAdaptive"), exports);
+__exportStar(require("./useDisplayMode"), exports);
+__exportStar(require("./useMatchMedia"), exports);

package/dist/cjs/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/cjs/hooks/private/getCustomStore.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCustomStore = getCustomStore;
+const environment_1 = require("../../constants/environment");
+function getCustomStore(defaultStore = {}) {
+    const customWindow = globalThis;
+    if (!customWindow.sbercloudUIKit) {
+        customWindow.sbercloudUIKit = Object.assign({ brand: environment_1.DEFAULT.BRAND, theme: environment_1.DEFAULT.THEME, languageCode: environment_1.DEFAULT.LANGUAGE }, defaultStore);
+    }
+    return customWindow.sbercloudUIKit;
+}

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

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

package/dist/cjs/hooks/useAdaptive.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptive = useAdaptive;
+const utils_1 = require("../utils");
+const useMatchMedia_1 = require("./useMatchMedia");
+function useAdaptive() {
+    const matchMedia = (0, useMatchMedia_1.useAdaptiveMatchMedia)();
+    return (0, utils_1.getAdaptive)(matchMedia);
+}

package/dist/cjs/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/cjs/hooks/useBrand.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBrand = void 0;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const environment_1 = require("../constants/environment");
+const tryParseJson_1 = require("../helpers/tryParseJson");
+const getCustomStore_1 = require("./private/getCustomStore");
+const useBrand = () => {
+    const store = (0, getCustomStore_1.getCustomStore)();
+    const [brand, setBrand] = (0, react_1.useState)(store.brand || environment_1.DEFAULT.BRAND);
+    (0, react_1.useEffect)(() => {
+        const receiveChangeThemeDoneMessage = (event) => {
+            const eventData = (0, tryParseJson_1.tryParseJson)(event.data);
+            if (eventData.key !== environment_1.POST_MESSAGE_KEY.changeBrandDone)
+                return;
+            setBrand(eventData.value);
+        };
+        window.addEventListener('message', receiveChangeThemeDoneMessage, false);
+        return () => window.removeEventListener('message', receiveChangeThemeDoneMessage, false);
+    }, []);
+    const changeBrand = (0, react_1.useCallback)((brand) => {
+        (0, utils_1.isBrowser)() &&
+            window.postMessage(JSON.stringify({ key: environment_1.POST_MESSAGE_KEY.changeBrand, value: brand }), location.origin);
+    }, []);
+    return { brand, changeBrand };
+};
+exports.useBrand = useBrand;

package/dist/cjs/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/cjs/hooks/useComponentSize.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentSize = useComponentSize;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+function getSize(el) {
+    if (!el) {
+        return {
+            width: 0,
+            height: 0,
+        };
+    }
+    return {
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+    };
+}
+function useComponentSize(ref) {
+    const [size, setSize] = (0, react_1.useState)(getSize(ref.current));
+    const handleResize = (0, react_1.useCallback)(() => {
+        if (ref.current) {
+            setSize(getSize(ref.current));
+        }
+    }, [ref]);
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!ref.current)
+            return;
+        handleResize();
+        const resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(ref.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [handleResize, ref]);
+    return size;
+}

package/dist/cjs/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/cjs/hooks/useConfig.js

@@ -0,0 +1,126 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConfig = useConfig;
+const react_1 = require("react");
+const brand_module_css_1 = __importDefault(require("@sbercloud/figma-tokens-admin/build/css/brand.module.css"));
+const brand_module_css_2 = __importDefault(require("@sbercloud/figma-tokens-cloud-platform/build/css/brand.module.css"));
+const brand_module_css_3 = __importDefault(require("@sbercloud/figma-tokens-giga-id/build/css/brand.module.css"));
+const brand_module_css_4 = __importDefault(require("@sbercloud/figma-tokens-mlspace/build/css/brand.module.css"));
+const brand_module_css_5 = __importDefault(require("@sbercloud/figma-tokens-web/build/css/brand.module.css"));
+const utils_1 = require("@snack-uikit/utils");
+const environment_1 = require("../constants/environment");
+const tryParseJson_1 = require("../helpers/tryParseJson");
+const types_1 = require("../types");
+const getCustomStore_1 = require("./private/getCustomStore");
+const themeMap = {
+    [types_1.Themes.Green]: brand_module_css_2.default.light,
+    [types_1.Themes.GreenDark]: brand_module_css_2.default.dark,
+    [types_1.Themes.Purple]: brand_module_css_4.default.light,
+    [types_1.Themes.PurpleDark]: brand_module_css_4.default.dark,
+};
+const brandMap = {
+    [types_1.Brand.Cloud]: brand_module_css_2.default.light,
+    [types_1.Brand.CloudDark]: brand_module_css_2.default.dark,
+    [types_1.Brand.MLSpace]: brand_module_css_4.default.light,
+    [types_1.Brand.MLSpaceDark]: brand_module_css_4.default.dark,
+    [types_1.Brand.Admin]: brand_module_css_1.default.light,
+    [types_1.Brand.AdminDark]: brand_module_css_1.default.dark,
+    [types_1.Brand.Site]: brand_module_css_5.default.light,
+    [types_1.Brand.SiteDark]: brand_module_css_5.default.dark,
+    [types_1.Brand.GigaId]: brand_module_css_3.default.light,
+    [types_1.Brand.GigaIdDark]: brand_module_css_3.default.dark,
+};
+function useConfig({ languageCode, theme, brand }) {
+    const store = (0, getCustomStore_1.getCustomStore)({ brand, theme, languageCode });
+    const [configLanguageCode, setConfigLanguageCodeTheme] = (0, react_1.useState)(store.languageCode);
+    const previousThemeRef = (0, react_1.useRef)();
+    const previousBrandRef = (0, react_1.useRef)();
+    const updateTheme = (0, react_1.useCallback)((newTheme) => {
+        if ((0, utils_1.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: environment_1.POST_MESSAGE_KEY.changeThemeDone, value: newTheme }), location.origin);
+            previousThemeRef.current = newTheme;
+        }
+    }, [store]);
+    const updateBrand = (0, react_1.useCallback)((newBrand) => {
+        if ((0, utils_1.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: environment_1.POST_MESSAGE_KEY.changeBrandDone, value: newBrand }), location.origin);
+            previousBrandRef.current = newBrand;
+        }
+    }, [store]);
+    (0, react_1.useEffect)(() => {
+        /*-----------
+            --- THEME/BRAND ---
+            -----------*/
+        const receiveChangeThemeMessage = (event) => {
+            const eventData = (0, tryParseJson_1.tryParseJson)(event.data);
+            switch (eventData.key) {
+                case environment_1.POST_MESSAGE_KEY.changeTheme:
+                    updateTheme(eventData.value);
+                    break;
+                case environment_1.POST_MESSAGE_KEY.changeBrand:
+                    updateBrand(eventData.value);
+                    break;
+                default:
+                    return;
+            }
+        };
+        window.addEventListener('message', receiveChangeThemeMessage, false);
+        /*--------------
+            --- LANGUAGE ---
+            --------------*/
+        const receiveChangeLanguageMessage = (event) => {
+            const eventData = (0, tryParseJson_1.tryParseJson)(event.data);
+            if (eventData.key !== environment_1.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 ---
+      --------------*/
+    (0, utils_1.useLayoutEffect)(() => {
+        if (languageCode) {
+            store.languageCode = languageCode;
+            setConfigLanguageCodeTheme(store.languageCode);
+        }
+    }, [languageCode, store]);
+    (0, react_1.useEffect)(() => {
+        window.postMessage(JSON.stringify({ key: environment_1.POST_MESSAGE_KEY.changeLanguageDone, value: configLanguageCode }), location.origin);
+    }, [configLanguageCode]);
+}

package/dist/cjs/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>;