@diplodoc/client 3.10.3 → 3.12.0

package/build/server/app.js

@@ -1,6 +1,6 @@
 (() => { // webpackBootstrap
 var __webpack_modules__ = ({
-11301: (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+85978: (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 "use strict";
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
@@ -25,7 +25,7 @@ var server_node = __webpack_require__(9680);
 // EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_object_spread_props.js
 var _object_spread_props = __webpack_require__(99282);
 // EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/theme/ThemeProvider.js + 7 modules
-var ThemeProvider = __webpack_require__(12956);
+var theme_ThemeProvider = __webpack_require__(12956);
 // EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/constants.js
 var constants = __webpack_require__(53816);
 // EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/models/index.js
@@ -40,8 +40,6 @@ var RenderBodyHooksContext = __webpack_require__(65848);
 var ConsentPopup = __webpack_require__(74311);
 // EXTERNAL MODULE: ./node_modules/@diplodoc/transform/dist/js/yfm.js
 var yfm = __webpack_require__(68648);
-// EXTERNAL MODULE: ./node_modules/bem-cn-lite/lib/index.js
-var lib = __webpack_require__(22853);
 ;// CONCATENATED MODULE: ./src/components/Router/index.ts
 
 var RouterContext = (0,react.createContext)({
@@ -49,36 +47,334 @@ var RouterContext = (0,react.createContext)({
     depth: 0
 });
 RouterContext.displayName = 'RouterContext';
-var RouterProvider = RouterContext.Provider;
+var Router_RouterProvider = RouterContext.Provider;
 function Router_useRouter() {
     return (0,react.useContext)(RouterContext);
 }
 
+;// CONCATENATED MODULE: ./src/hooks/useLang.ts
+
+
+var LangContext = (0,react.createContext)(models/* .Lang.En */.Uo.En);
+LangContext.displayName = 'Lang';
+var useLang_LangProvider = LangContext.Provider;
+function useLang() {
+    return (0,react.useContext)(LangContext);
+}
+
+// EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/utils/index.js + 63 modules
+var utils = __webpack_require__(20935);
+// EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_to_consumable_array.js + 3 modules
+var _to_consumable_array = __webpack_require__(55210);
+;// CONCATENATED MODULE: ./src/constants.ts
+
+
+var HEADER_HEIGHT = 64;
+var MOBILE_VIEW_WIDTH_BREAKPOINT = 769;
+var DEFAULT_USER_SETTINGS = {
+    theme: models/* .Theme.Light */.Q2.Light,
+    textSize: models/* .TextSizes.M */.tF.M,
+    showMiniToc: true,
+    wideFormat: true,
+    fullScreen: false
+};
+var RTL_LANGS = [
+    'ar',
+    'arc',
+    'ckb',
+    'dv',
+    'fa',
+    'ha',
+    'he',
+    'khw',
+    'ks',
+    'ps',
+    'sd',
+    'ur',
+    'uz_AF',
+    'yi'
+];
+var constants_TextDirection = /*#__PURE__*/ function(TextDirection) {
+    TextDirection["RTL"] = "rtl";
+    TextDirection["LTR"] = "ltr";
+    return TextDirection;
+}({});
+var LINK_KEYS_LEADING_CONFIG = [
+    'href'
+];
+var LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG = [
+    'src',
+    'url',
+    'href',
+    'icon',
+    'image',
+    'desktop',
+    'mobile',
+    'tablet',
+    'previewImg',
+    'image',
+    'avatar',
+    'logo',
+    'light',
+    'dark'
+];
+var LINK_KEYS = (0,_to_consumable_array._)(new Set((0,_to_consumable_array._)(LINK_KEYS_LEADING_CONFIG).concat((0,_to_consumable_array._)(LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG))));
+
+;// CONCATENATED MODULE: ./src/utils.ts
+
+
+function isBrowser() {
+    return typeof document !== 'undefined';
+}
+function utils_updateThemeClassName(param) {
+    var theme = param.theme;
+    if (typeof document === 'undefined') {
+        return;
+    }
+    document.querySelectorAll('.g-root').forEach(function(el) {
+        el.classList.toggle('g-root_theme_light', theme === 'light');
+        el.classList.toggle('g-root_theme_dark', theme === 'dark');
+    });
+}
+function utils_updateRootClassName(states) {
+    if (!isBrowser()) {
+        return;
+    }
+    document.body.classList.add('g-root');
+    var toggle = function(name, state) {
+        return document.body.classList.toggle(name, Boolean(state));
+    };
+    Object.keys(states).forEach(function(state) {
+        switch(state){
+            case 'wideFormat':
+                toggle('dc-root_wide-format', states[state]);
+                break;
+            case 'focusSearch':
+                toggle('dc-root_focused-search', states[state]);
+                break;
+            case 'fullScreen':
+                toggle('dc-root_full-screen', states[state]);
+                break;
+            case 'landingPage':
+                toggle('dc-root_document-page', !states[state]);
+                toggle('dc-root_landing-page', states[state]);
+                break;
+            case 'mobileView':
+                toggle('mobile', states[state]);
+                toggle('desktop', !states[state]);
+                break;
+        }
+    });
+}
+function utils_getDirection(lang) {
+    var isRTL = RTL_LANGS.includes(lang);
+    return isRTL ? constants_TextDirection.RTL : constants_TextDirection.LTR;
+}
+var toBoolean = function(str) {
+    if (typeof str === 'boolean') {
+        return str;
+    }
+    return str ? str === 'true' : false;
+};
+function getSettings() {
+    var theme = getSetting('theme');
+    var textSize = getSetting('textSize');
+    var showMiniToc = getSetting('showMiniToc');
+    var wideFormat = getSetting('wideFormat');
+    var fullScreen = getSetting('fullScreen');
+    return {
+        theme: theme,
+        textSize: textSize,
+        showMiniToc: toBoolean(showMiniToc),
+        wideFormat: toBoolean(wideFormat),
+        fullScreen: toBoolean(fullScreen)
+    };
+}
+function getLandingPage(data) {
+    return (0,utils/* .getPageType */.C2)(data) === 'PAGE_CONSTRUCTOR';
+}
+function getMobileView() {
+    if (!isBrowser()) {
+        return false;
+    }
+    return document.body.clientWidth < MOBILE_VIEW_WIDTH_BREAKPOINT;
+}
+function getSetting(name) {
+    if (!isBrowser()) {
+        return DEFAULT_USER_SETTINGS[name];
+    }
+    try {
+        return sessionStorage.getItem(name) || DEFAULT_USER_SETTINGS[name];
+    } catch (e) {
+        return DEFAULT_USER_SETTINGS[name];
+    }
+}
+function utils_setSetting(name, value) {
+    if (!isBrowser()) {
+        return;
+    }
+    try {
+        sessionStorage.setItem(name, String(value));
+    } catch (e) {}
+}
+function isDetailsTag(el) {
+    return (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'details';
+}
+function isHeaderTag(el) {
+    return [
+        'H1',
+        'H2',
+        'H3',
+        'H4',
+        'H5',
+        'H6'
+    ].indexOf(el.tagName) !== -1;
+}
+/**
+ * Scrolls to the element.
+ * If the element is a heading - simply scrolls to it, since needed offset is already in css.
+ * If the element is of any other type - calculate the offset form the element position in heading and scroll to it.
+ * @param {HTMLElement} el
+ */ function scrollToElement(el) {
+    var offset = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 200;
+    if (isInViewport(el)) {
+        return;
+    }
+    if (isHeaderTag(el)) {
+        // Header already includes the offset in css
+        // That puts it where we want it when it's scrolled to
+        el.scrollIntoView();
+    } else {
+        var elementPosition = el.getBoundingClientRect().top;
+        var offsetPosition = elementPosition + window.scrollY - offset;
+        window.scrollTo({
+            top: offsetPosition
+        });
+    }
+}
+function getLangPath(lang, href) {
+    var path = href.replace(/^https?:\/\/[^/]+/, '').replace(/^\/[a-z]{2}\//, '/');
+    return "".concat(lang).concat(path);
+}
+function isInViewport(el) {
+    var rect = el.getBoundingClientRect();
+    return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+}
+function scrollToHash() {
+    var hash = window.location.hash.substring(1);
+    if (!hash) {
+        return;
+    }
+    var element = document.getElementById(hash);
+    if (!element) {
+        return;
+    }
+    var node = element === null || element === void 0 ? void 0 : element.parentElement;
+    while(node){
+        if (isDetailsTag(node)) {
+            node.open = true;
+        }
+        node = node.parentElement;
+    }
+    element.focus();
+    setTimeout(function() {
+        scrollToElement(element);
+    }, 10);
+}
+
+// EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_define_property.js
+var _define_property = __webpack_require__(27412);
 // EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_sliced_to_array.js + 3 modules
 var esm_sliced_to_array = __webpack_require__(24460);
-;// CONCATENATED MODULE: ./src/components/index.ts
+;// CONCATENATED MODULE: ./src/components/App/useSettings.ts
 
 
 
 
-;// CONCATENATED MODULE: ./src/hooks/useLang.ts
 
+var capitalize = function(string) {
+    return string.replace(/^./, function(ch) {
+        return ch.toUpperCase();
+    });
+};
+function useSettings_useSettings() {
+    var settings = getSettings();
+    var theme = useSetting('theme', settings);
+    var textSize = useSetting('textSize', settings);
+    var wideFormat = useSetting('wideFormat', settings);
+    var fullScreen = useSetting('fullScreen', settings);
+    var showMiniToc = useSetting('showMiniToc', settings);
+    var controls = (0,react.useMemo)(function() {
+        return (0,_object_spread._)({}, theme, textSize, wideFormat, showMiniToc, fullScreen);
+    }, [
+        theme,
+        textSize,
+        wideFormat,
+        showMiniToc,
+        fullScreen
+    ]);
+    return controls;
+}
+function useSetting(name, settings) {
+    var _useState = (0,esm_sliced_to_array._)((0,react.useState)(settings[name]), 2), setting = _useState[0], setSetting = _useState[1];
+    var onChangeSetting = (0,react.useMemo)(function() {
+        return withSavingSetting(name, setSetting);
+    }, [
+        name,
+        setSetting
+    ]);
+    return (0,react.useMemo)(function() {
+        var _obj;
+        return _obj = {}, (0,_define_property._)(_obj, name, setting), (0,_define_property._)(_obj, 'onChange' + capitalize(name), onChangeSetting), _obj;
+    }, [
+        name,
+        setting,
+        onChangeSetting
+    ]);
+}
+function withSavingSetting(settingName, onChange) {
+    return function(value) {
+        utils_setSetting(settingName, value);
+        onChange(value);
+    };
+}
 
-var LangContext = (0,react.createContext)(models/* .Lang.En */.Uo.En);
-LangContext.displayName = 'Lang';
-var LangProvider = LangContext.Provider;
-function useLang() {
-    return (0,react.useContext)(LangContext);
+;// CONCATENATED MODULE: ./src/components/App/useMobile.ts
+
+
+
+function useMobile_useMobile() {
+    var _useState = (0,esm_sliced_to_array._)((0,react.useState)(getMobileView()), 2), mobileView = _useState[0], setMobileView = _useState[1];
+    var onResizeHandler = (0,react.useCallback)(function() {
+        setMobileView(getMobileView());
+    }, []);
+    (0,react.useEffect)(onResizeHandler, [
+        onResizeHandler
+    ]);
+    (0,react.useEffect)(function() {
+        window.addEventListener('resize', onResizeHandler);
+        return function() {
+            return window.removeEventListener('resize', onResizeHandler);
+        };
+    }, [
+        onResizeHandler
+    ]);
+    return mobileView;
 }
 
+// EXTERNAL MODULE: ./node_modules/bem-cn-lite/lib/index.js
+var lib = __webpack_require__(22853);
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+
 // EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_async_to_generator.js
 var _async_to_generator = __webpack_require__(76150);
 // EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_class_call_check.js
 var _class_call_check = __webpack_require__(43830);
 // EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_create_class.js
 var _create_class = __webpack_require__(52062);
-// EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_define_property.js
-var _define_property = __webpack_require__(27412);
 // EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_instanceof.js
 var _instanceof = __webpack_require__(41196);
 // EXTERNAL MODULE: ./node_modules/tslib/tslib.es6.mjs
@@ -317,9 +613,9 @@ function useProvider_useProvider() {
     return provider;
 }
 
-;// CONCATENATED MODULE: ./src/components/Search/Search.scss
+;// CONCATENATED MODULE: ./src/components/Search/Page.scss
 
-;// CONCATENATED MODULE: ./src/components/Search/Search.tsx
+;// CONCATENATED MODULE: ./src/components/Search/Page.tsx
 
 
 
@@ -355,7 +651,7 @@ function formatResults(searchResults) {
     });
 }
 var ITEMS_PER_PAGE = 10;
-var Search = function() {
+var Page_Page = function() {
     var provider = useProvider();
     var router = useRouter();
     var _useState = _sliced_to_array(useState(''), 2), query = _useState[0], setQuery = _useState[1];
@@ -401,259 +697,92 @@ var Search = function() {
         page,
         provider
     ]);
-    var handlePageChange = useCallback(function(newPage) {
-        setUrlParams(query, newPage);
-        setPage(newPage);
-    }, [
-        query
-    ]);
-    var handleQueryChange = useCallback(function(newQuery) {
-        setUrlParams(newQuery, 1);
-        setQuery(newQuery);
-        setPage(1);
-    }, []);
-    return /*#__PURE__*/ _jsx("div", {
-        className: b(),
-        children: /*#__PURE__*/ _jsx(SearchPage, {
-            query: query,
-            items: results,
-            page: page,
-            totalItems: total,
-            onPageChange: handlePageChange,
-            onSubmit: handleQueryChange,
-            loading: loading
-        })
-    });
-};
-
-;// CONCATENATED MODULE: ./src/components/Search/index.ts
-
-var SearchContext = (0,react.createContext)(null);
-SearchContext.displayName = 'SearchContext';
-var Search_SearchProvider = SearchContext.Provider;
-
-function useSearch() {
-    return (0,react.useContext)(SearchContext);
-}
-
-// EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/utils/index.js + 63 modules
-var utils = __webpack_require__(20935);
-// EXTERNAL MODULE: ./node_modules/@swc/helpers/esm/_to_consumable_array.js + 3 modules
-var _to_consumable_array = __webpack_require__(55210);
-;// CONCATENATED MODULE: ./src/constants.ts
-
-
-var HEADER_HEIGHT = 64;
-var MOBILE_VIEW_WIDTH_BREAKPOINT = 769;
-var DEFAULT_USER_SETTINGS = {
-    theme: models/* .Theme.Light */.Q2.Light,
-    textSize: models/* .TextSizes.M */.tF.M,
-    showMiniToc: true,
-    wideFormat: true,
-    fullScreen: false
-};
-var RTL_LANGS = [
-    'ar',
-    'arc',
-    'ckb',
-    'dv',
-    'fa',
-    'ha',
-    'he',
-    'khw',
-    'ks',
-    'ps',
-    'sd',
-    'ur',
-    'uz_AF',
-    'yi'
-];
-var constants_TextDirection = /*#__PURE__*/ function(TextDirection) {
-    TextDirection["RTL"] = "rtl";
-    TextDirection["LTR"] = "ltr";
-    return TextDirection;
-}({});
-var LINK_KEYS_LEADING_CONFIG = [
-    'href'
-];
-var LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG = [
-    'src',
-    'url',
-    'href',
-    'icon',
-    'image',
-    'desktop',
-    'mobile',
-    'tablet',
-    'previewImg',
-    'image',
-    'avatar',
-    'logo',
-    'light',
-    'dark'
-];
-var LINK_KEYS = (0,_to_consumable_array._)(new Set((0,_to_consumable_array._)(LINK_KEYS_LEADING_CONFIG).concat((0,_to_consumable_array._)(LINK_KEYS_PAGE_CONSTRUCTOR_CONFIG))));
-
-;// CONCATENATED MODULE: ./src/utils.ts
-
-
-function isBrowser() {
-    return typeof document !== 'undefined';
-}
-function updateThemeClassName(param) {
-    var theme = param.theme;
-    if (typeof document === 'undefined') {
-        return;
-    }
-    document.querySelectorAll('.g-root').forEach(function(el) {
-        el.classList.toggle('g-root_theme_light', theme === 'light');
-        el.classList.toggle('g-root_theme_dark', theme === 'dark');
-    });
-}
-function updateRootClassName(states) {
-    if (!isBrowser()) {
-        return;
-    }
-    document.body.classList.add('g-root');
-    var toggle = function(name, state) {
-        return document.body.classList.toggle(name, Boolean(state));
-    };
-    Object.keys(states).forEach(function(state) {
-        switch(state){
-            case 'wideFormat':
-                toggle('dc-root_wide-format', states[state]);
-                break;
-            case 'focusSearch':
-                toggle('dc-root_focused-search', states[state]);
-                break;
-            case 'fullScreen':
-                toggle('dc-root_full-screen', states[state]);
-                break;
-            case 'landingPage':
-                toggle('dc-root_document-page', !states[state]);
-                toggle('dc-root_landing-page', states[state]);
-                break;
-            case 'mobileView':
-                toggle('mobile', states[state]);
-                toggle('desktop', !states[state]);
-                break;
-        }
+    var handlePageChange = useCallback(function(newPage) {
+        setUrlParams(query, newPage);
+        setPage(newPage);
+    }, [
+        query
+    ]);
+    var handleQueryChange = useCallback(function(newQuery) {
+        setUrlParams(newQuery, 1);
+        setQuery(newQuery);
+        setPage(1);
+    }, []);
+    return /*#__PURE__*/ _jsx("div", {
+        className: b(),
+        children: /*#__PURE__*/ _jsx(SearchPage, {
+            query: query,
+            items: results,
+            page: page,
+            totalItems: total,
+            onPageChange: handlePageChange,
+            onSubmit: handleQueryChange,
+            loading: loading
+        })
     });
-}
-function getDirection(lang) {
-    var isRTL = RTL_LANGS.includes(lang);
-    return isRTL ? constants_TextDirection.RTL : constants_TextDirection.LTR;
-}
-var toBoolean = function(str) {
-    if (typeof str === 'boolean') {
-        return str;
-    }
-    return str ? str === 'true' : false;
 };
-function getSettings() {
-    var theme = getSetting('theme');
-    var textSize = getSetting('textSize');
-    var showMiniToc = getSetting('showMiniToc');
-    var wideFormat = getSetting('wideFormat');
-    var fullScreen = getSetting('fullScreen');
-    return {
-        theme: theme,
-        textSize: textSize,
-        showMiniToc: toBoolean(showMiniToc),
-        wideFormat: toBoolean(wideFormat),
-        fullScreen: toBoolean(fullScreen)
+
+;// CONCATENATED MODULE: ./src/components/Search/index.tsx
+
+
+
+
+
+
+
+
+
+
+var SearchContext = /*#__PURE__*/ (0,react.createContext)(null);
+SearchContext.displayName = 'SearchContext';
+var Search_SearchProvider = SearchContext.Provider;
+function Search(props) {
+    var data = props.data, url = props.url;
+    var searchData = data.search;
+    var lang = (searchData === null || searchData === void 0 ? void 0 : searchData.lang) || Lang.En;
+    var settings = useSettings();
+    var mobileView = useMobile();
+    var fixedLang = SUPPORTED_LANGS.includes(lang) ? lang : Lang.En;
+    var direction = getDirection(fixedLang);
+    configure({
+        lang: fixedLang,
+        localeCode: fixedLang
+    });
+    var routerConfig = {
+        pathname: url.pathname,
+        depth: 3
     };
-}
-function getLandingPage(data) {
-    return (0,utils/* .getPageType */.C2)(data) === 'PAGE_CONSTRUCTOR';
-}
-function getMobileView() {
-    if (!isBrowser()) {
-        return false;
-    }
-    return document.body.clientWidth < MOBILE_VIEW_WIDTH_BREAKPOINT;
-}
-function getSetting(name) {
-    if (!isBrowser()) {
-        return DEFAULT_USER_SETTINGS[name];
-    }
-    try {
-        return sessionStorage.getItem(name) || DEFAULT_USER_SETTINGS[name];
-    } catch (e) {
-        return DEFAULT_USER_SETTINGS[name];
-    }
-}
-function utils_setSetting(name, value) {
-    if (!isBrowser()) {
-        return;
-    }
-    try {
-        sessionStorage.setItem(name, String(value));
-    } catch (e) {}
-}
-function isDetailsTag(el) {
-    return (el === null || el === void 0 ? void 0 : el.tagName.toLowerCase()) === 'details';
-}
-function isHeaderTag(el) {
-    return [
-        'H1',
-        'H2',
-        'H3',
-        'H4',
-        'H5',
-        'H6'
-    ].indexOf(el.tagName) !== -1;
-}
-/**
- * Scrolls to the element.
- * If the element is a heading - simply scrolls to it, since needed offset is already in css.
- * If the element is of any other type - calculate the offset form the element position in heading and scroll to it.
- * @param {HTMLElement} el
- */ function scrollToElement(el) {
-    var offset = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 200;
-    if (isInViewport(el)) {
-        return;
-    }
-    if (isHeaderTag(el)) {
-        // Header already includes the offset in css
-        // That puts it where we want it when it's scrolled to
-        el.scrollIntoView();
-    } else {
-        var elementPosition = el.getBoundingClientRect().top;
-        var offsetPosition = elementPosition + window.scrollY - offset;
-        window.scrollTo({
-            top: offsetPosition
+    var theme = settings.theme, wideFormat = settings.wideFormat;
+    useEffect(function() {
+        updateRootClassName({
+            mobileView: mobileView,
+            wideFormat: wideFormat
         });
-    }
-}
-function getLangPath(lang, href) {
-    var path = href.replace(/^https?:\/\/[^/]+/, '').replace(/^\/[a-z]{2}\//, '/');
-    return "".concat(lang).concat(path);
-}
-function isInViewport(el) {
-    var rect = el.getBoundingClientRect();
-    return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
+        updateThemeClassName({
+            theme: theme
+        });
+    }, [
+        theme,
+        mobileView,
+        wideFormat
+    ]);
+    return /*#__PURE__*/ _jsx(ThemeProvider, {
+        theme: theme,
+        direction: direction,
+        children: /*#__PURE__*/ _jsx(LangProvider, {
+            value: fixedLang,
+            children: /*#__PURE__*/ _jsx(RouterProvider, {
+                value: routerConfig,
+                children: /*#__PURE__*/ _jsx(Search_SearchProvider, {
+                    value: searchData,
+                    children: /*#__PURE__*/ _jsx(Page, {})
+                })
+            })
+        })
+    });
 }
-function scrollToHash() {
-    var hash = window.location.hash.substring(1);
-    if (!hash) {
-        return;
-    }
-    var element = document.getElementById(hash);
-    if (!element) {
-        return;
-    }
-    var node = element === null || element === void 0 ? void 0 : element.parentElement;
-    while(node){
-        if (isDetailsTag(node)) {
-            node.open = true;
-        }
-        node = node.parentElement;
-    }
-    element.focus();
-    setTimeout(function() {
-        scrollToElement(element);
-    }, 10);
+function useSearch() {
+    return (0,react.useContext)(SearchContext);
 }
 
 // EXTERNAL MODULE: ./src/interceptors/leading-page-links.js
@@ -855,12 +984,12 @@ function Suggest() {
     var suggest = (0,react.useRef)(null);
     var isSearchHidden = (0,useInterface/* .useInterface */.I)('search');
     var onFocus = (0,react.useCallback)(function() {
-        updateRootClassName({
+        utils_updateRootClassName({
             focusSearch: true
         });
     }, []);
     var onBlur = (0,react.useCallback)(function() {
-        updateRootClassName({
+        utils_updateRootClassName({
             focusSearch: false
         });
         setTimeout(function() {
@@ -894,7 +1023,7 @@ var Controls = __webpack_require__(80208);
 
 
 var HeaderControls = /*#__PURE__*/ (0,react.memo)(function(param) {
-    var mobileView = param.mobileView, theme = param.theme, onChangeTheme = param.onChangeTheme, textSize = param.textSize, onChangeTextSize = param.onChangeTextSize, wideFormat = param.wideFormat, onChangeWideFormat = param.onChangeWideFormat, showMiniToc = param.showMiniToc, onChangeShowMiniToc = param.onChangeShowMiniToc, lang = param.lang, langs = param.langs, onChangeLang = param.onChangeLang;
+    var mobileView = param.mobileView, theme = param.theme, onChangeTheme = param.onChangeTheme, textSize = param.textSize, onChangeTextSize = param.onChangeTextSize, wideFormat = param.wideFormat, onChangeWideFormat = param.onChangeWideFormat, showMiniToc = param.showMiniToc, onChangeShowMiniToc = param.onChangeShowMiniToc, lang = param.lang, langs = param.langs, onChangeLang = param.onChangeLang, _param_availableLangs = param.availableLangs, availableLangs = _param_availableLangs === void 0 ? [] : _param_availableLangs;
     return /*#__PURE__*/ (0,jsx_runtime.jsx)(ControlsLayout/* .ControlsLayout */.C, {
         controlClassName: 'Control',
         controlSize: models/* .ControlSizes.L */.$D.L,
@@ -912,7 +1041,8 @@ var HeaderControls = /*#__PURE__*/ (0,react.memo)(function(param) {
             onChangeTextSize: onChangeTextSize,
             lang: lang,
             langs: langs,
-            onChangeLang: onChangeLang
+            onChangeLang: onChangeLang,
+            availableLangs: availableLangs
         })
     });
 });
@@ -1046,7 +1176,7 @@ var useNavigation = function(data, controls, CustomControls, CustomSuggest, view
 
 
 
-function Page_Page(_param) {
+function App_Page_Page(_param) {
     var data = _param.data, pageProps = (0,_object_without_properties._)(_param, [
         "data"
     ]);
@@ -1075,7 +1205,7 @@ function LegacyNavPage(param) {
     }, [
         content
     ]);
-    return /*#__PURE__*/ (0,jsx_runtime.jsx)(Page_Page, (0,_object_spread_props._)((0,_object_spread._)({
+    return /*#__PURE__*/ (0,jsx_runtime.jsx)(App_Page_Page, (0,_object_spread_props._)((0,_object_spread._)({
         data: data,
         headerHeight: 0
     }, props, controls), {
@@ -1107,7 +1237,7 @@ function RichNavPage(param) {
     ]);
     var navigation = useNavigation(data, controls, CustomControls, CustomSuggest);
     var CustomPage = (0,react.useCallback)(function() {
-        return /*#__PURE__*/ (0,jsx_runtime.jsx)(Page_Page, (0,_object_spread_props._)((0,_object_spread._)({
+        return /*#__PURE__*/ (0,jsx_runtime.jsx)(App_Page_Page, (0,_object_spread_props._)((0,_object_spread._)({
             data: data,
             headerHeight: fullScreen ? 0 : 64
         }, props, navigation.withControls ? filterControls(controls, [
@@ -1230,80 +1360,56 @@ function useLangs(param) {
     ]);
 }
 
-;// CONCATENATED MODULE: ./src/components/App/useSettings.ts
-
+;// CONCATENATED MODULE: ./src/components/App/useAvailableLangs.ts
 
 
 
-
-var capitalize = function(string) {
-    return string.replace(/^./, function(ch) {
-        return ch.toUpperCase();
-    });
-};
-function useSettings() {
-    var settings = getSettings();
-    var theme = useSetting('theme', settings);
-    var textSize = useSetting('textSize', settings);
-    var wideFormat = useSetting('wideFormat', settings);
-    var fullScreen = useSetting('fullScreen', settings);
-    var showMiniToc = useSetting('showMiniToc', settings);
-    var controls = (0,react.useMemo)(function() {
-        return (0,_object_spread._)({}, theme, textSize, wideFormat, showMiniToc, fullScreen);
-    }, [
-        theme,
-        textSize,
-        wideFormat,
-        showMiniToc,
-        fullScreen
-    ]);
-    return controls;
-}
-function useSetting(name, settings) {
-    var _useState = (0,esm_sliced_to_array._)((0,react.useState)(settings[name]), 2), setting = _useState[0], setSetting = _useState[1];
-    var onChangeSetting = (0,react.useMemo)(function() {
-        return withSavingSetting(name, setSetting);
-    }, [
-        name,
-        setSetting
-    ]);
+function useAvailableLangs(data, langs) {
     return (0,react.useMemo)(function() {
-        var _obj;
-        return _obj = {}, (0,_define_property._)(_obj, name, setting), (0,_define_property._)(_obj, 'onChange' + capitalize(name), onChangeSetting), _obj;
-    }, [
-        name,
-        setting,
-        onChangeSetting
-    ]);
-}
-function withSavingSetting(settingName, onChange) {
-    return function(value) {
-        utils_setSetting(settingName, value);
-        onChange(value);
-    };
-}
-
-;// CONCATENATED MODULE: ./src/components/App/useMobile.ts
-
-
-
-function useMobile() {
-    var _useState = (0,esm_sliced_to_array._)((0,react.useState)(getMobileView()), 2), mobileView = _useState[0], setMobileView = _useState[1];
-    var onResizeHandler = (0,react.useCallback)(function() {
-        setMobileView(getMobileView());
-    }, []);
-    (0,react.useEffect)(onResizeHandler, [
-        onResizeHandler
-    ]);
-    (0,react.useEffect)(function() {
-        window.addEventListener('resize', onResizeHandler);
-        return function() {
-            return window.removeEventListener('resize', onResizeHandler);
-        };
+        if (!('meta' in data)) {
+            return [];
+        }
+        var _data_meta = data.meta, canonical = _data_meta.canonical, _data_meta_alternate = _data_meta.alternate, alternate = _data_meta_alternate === void 0 ? [] : _data_meta_alternate;
+        if (!canonical) {
+            return [];
+        }
+        var langsSet = new Set();
+        var _canonical_split = (0,esm_sliced_to_array._)(canonical.split('/'), 1), canonicalLang = _canonical_split[0];
+        if (langs.includes(canonicalLang)) {
+            langsSet.add(canonicalLang);
+        }
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = alternate[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var alt = _step.value;
+                var href = alt.href;
+                if (!href || (0,utils/* .isExternalHref */.$2)(href)) {
+                    continue;
+                }
+                var _href_split = (0,esm_sliced_to_array._)(href.split('/'), 1), altLang = _href_split[0];
+                if (langs.includes(altLang)) {
+                    langsSet.add(altLang);
+                }
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        return Array.from(langsSet);
     }, [
-        onResizeHandler
+        data,
+        langs
     ]);
-    return mobileView;
 }
 
 // EXTERNAL MODULE: ./node_modules/@diplodoc/mdx-extension/build/esm/hooks/useMdxSsr.js + 9 modules
@@ -1363,15 +1469,17 @@ var withMdxInit = function(param) {
 
 
 
+
 function hasNavigation(data) {
     return Boolean(data.toc.navigation);
 }
 function App(props) {
     var _analytics_gtm, _analytics_gtm1;
-    var data = props.data, router = props.router, lang = props.lang, search = props.search, analytics = props.analytics, viewerInterface = props.viewerInterface;
-    var settings = useSettings();
+    var data = props.data, router = props.router, lang = props.lang, langs = props.langs, search = props.search, analytics = props.analytics, viewerInterface = props.viewerInterface;
+    var settings = useSettings_useSettings();
     var langData = useLangs(props);
-    var mobileView = useMobile();
+    var mobileView = useMobile_useMobile();
+    var availableLangs = useAvailableLangs(data, langs);
     var fixedLang = constants/* .SUPPORTED_LANGS.includes */.aP.includes(lang) ? lang : models/* .Lang.En */.Uo.En;
     (0,esm_config/* .configure */.jQ)({
         lang: fixedLang,
@@ -1411,23 +1519,25 @@ function App(props) {
     ]);
     var controls = (0,react.useMemo)(function() {
         return (0,_object_spread_props._)((0,_object_spread._)({}, settings, langData), {
-            mobileView: mobileView
+            mobileView: mobileView,
+            availableLangs: availableLangs
         });
     }, [
         langData,
         settings,
-        mobileView
+        mobileView,
+        availableLangs
     ]);
-    var direction = getDirection(lang);
+    var direction = utils_getDirection(lang);
     var landingPage = getLandingPage(data);
     (0,react.useEffect)(function() {
-        updateRootClassName({
+        utils_updateRootClassName({
             mobileView: mobileView,
             wideFormat: wideFormat,
             fullScreen: fullScreen,
             landingPage: landingPage
         });
-        updateThemeClassName({
+        utils_updateThemeClassName({
             theme: theme
         });
         scrollToHash();
@@ -1440,12 +1550,12 @@ function App(props) {
     ]);
     return /*#__PURE__*/ (0,jsx_runtime.jsx)("div", {
         className: "App",
-        children: /*#__PURE__*/ (0,jsx_runtime.jsx)(ThemeProvider/* .ThemeProvider */.f, {
+        children: /*#__PURE__*/ (0,jsx_runtime.jsx)(theme_ThemeProvider/* .ThemeProvider */.f, {
             theme: theme,
             direction: direction,
-            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(LangProvider, {
+            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(useLang_LangProvider, {
                 value: lang,
-                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(RouterProvider, {
+                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(Router_RouterProvider, {
                     value: router,
                     children: /*#__PURE__*/ (0,jsx_runtime.jsx)(Search_SearchProvider, {
                         value: search,
@@ -1798,7 +1908,7 @@ __webpack_require__.m = __webpack_modules__;
 __webpack_require__.x = () => {
 // Load entry module and return exports
 // This entry module depends on other loaded chunks and execution need to be delayed
-var __webpack_exports__ = __webpack_require__.O(undefined, ["966", "971"], function() { return __webpack_require__(11301) });
+var __webpack_exports__ = __webpack_require__.O(undefined, ["966", "971"], function() { return __webpack_require__(85978) });
 __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 return __webpack_exports__
 };