@gravity-ui/navigation 3.2.0 → 3.3.0

package/build/cjs/{index-CAaAoqtP.js → index-BsT7DcU0.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var index = require('./index-DoVt2C4l.js');
+var index = require('./index-9bMDuiin.js');
 require('@bem-react/classname');
 require('@gravity-ui/icons');
 require('@gravity-ui/uikit/i18n');
@@ -66,4 +66,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
 };
 
 exports.TopAlert = TopAlert;
-//# sourceMappingURL=index-CAaAoqtP.js.map
+//# sourceMappingURL=index-BsT7DcU0.js.map

package/build/cjs/{index-CAaAoqtP.js.map → index-BsT7DcU0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-CAaAoqtP.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n    alertRef: React.RefObject<HTMLDivElement>;\n    updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n    const alertRef = React.useRef<HTMLDivElement>(null);\n\n    const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n        const gRootElement = document\n            .getElementsByClassName(G_ROOT_CLASS_NAME)\n            .item(0) as HTMLElement | null;\n        gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n    }, []);\n\n    const updateTopSize = React.useCallback(() => {\n        setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n    }, [setAsideTopPanelHeight]);\n\n    React.useLayoutEffect(() => {\n        const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n        if (alert) {\n            window.addEventListener('resize', updateTopSizeDebounce);\n            updateTopSizeDebounce();\n        }\n        return () => {\n            window.removeEventListener('resize', updateTopSizeDebounce);\n            setAsideTopPanelHeight(0);\n        };\n    }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n    return {\n        alertRef,\n        updateTopSize,\n    };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n    alert?: TopAlertProps;\n    className?: string;\n    mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n    const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n    const [opened, setOpened] = React.useState(true);\n\n    const handleClose = React.useCallback(() => {\n        setOpened(false);\n        alert?.onCloseTopAlert?.();\n    }, [alert]);\n\n    React.useEffect(() => {\n        if (!opened) {\n            updateTopSize();\n        }\n    }, [opened, updateTopSize]);\n\n    if (!alert || !alert.message) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={alertRef}\n            className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n        >\n            {opened && (\n                <Alert\n                    className={b('', {\n                        centered: alert.centered,\n                        dense: alert.dense,\n                    })}\n                    corners=\"square\"\n                    layout=\"horizontal\"\n                    align={alert.align}\n                    theme={alert.theme || 'warning'}\n                    view={alert.view}\n                    icon={alert.icon}\n                    title={alert.title}\n                    message={\n                        mobileView ? (\n                            <Text ellipsisLines={5} variant=\"body-2\">\n                                {alert.message}\n                            </Text>\n                        ) : (\n                            alert.message\n                        )\n                    }\n                    actions={alert.actions}\n                    onClose={alert.closable ? handleClose : undefined}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}
+{"version":3,"file":"index-BsT7DcU0.js","sources":["../../../src/components/TopAlert/useTopAlertHeight.ts","../../../src/components/TopAlert/TopAlert.tsx"],"sourcesContent":["import React from 'react';\n\nimport debounceFn from 'lodash/debounce';\n\nimport {TopAlertProps} from '../types';\n\ntype TopAlertHeightControls = {\n    alertRef: React.RefObject<HTMLDivElement>;\n    updateTopSize: () => void;\n};\n\nconst G_ROOT_CLASS_NAME = 'g-root';\n\nexport const useTopAlertHeight = ({alert}: {alert?: TopAlertProps}): TopAlertHeightControls => {\n    const alertRef = React.useRef<HTMLDivElement>(null);\n\n    const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {\n        const gRootElement = document\n            .getElementsByClassName(G_ROOT_CLASS_NAME)\n            .item(0) as HTMLElement | null;\n        gRootElement?.style.setProperty('--gn-top-alert-height', clientHeight + 'px');\n    }, []);\n\n    const updateTopSize = React.useCallback(() => {\n        setAsideTopPanelHeight(alertRef.current?.clientHeight || 0);\n    }, [setAsideTopPanelHeight]);\n\n    React.useLayoutEffect(() => {\n        const updateTopSizeDebounce = debounceFn(updateTopSize, 200, {leading: true});\n\n        if (alert) {\n            window.addEventListener('resize', updateTopSizeDebounce);\n            updateTopSizeDebounce();\n        }\n        return () => {\n            window.removeEventListener('resize', updateTopSizeDebounce);\n            setAsideTopPanelHeight(0);\n        };\n    }, [alert, alertRef, updateTopSize, setAsideTopPanelHeight]);\n\n    return {\n        alertRef,\n        updateTopSize,\n    };\n};\n","import React from 'react';\n\nimport {Alert, Text} from '@gravity-ui/uikit';\n\nimport {TopAlertProps} from '../types';\nimport {block} from '../utils/cn';\n\nimport {useTopAlertHeight} from './useTopAlertHeight';\n\nimport './TopAlert.scss';\n\nconst b = block('top-alert');\n\ntype Props = {\n    alert?: TopAlertProps;\n    className?: string;\n    mobileView?: boolean;\n};\n\nexport const TopAlert = ({alert, className, mobileView = false}: Props) => {\n    const {alertRef, updateTopSize} = useTopAlertHeight({alert});\n\n    const [opened, setOpened] = React.useState(true);\n\n    const handleClose = React.useCallback(() => {\n        setOpened(false);\n        alert?.onCloseTopAlert?.();\n    }, [alert]);\n\n    React.useEffect(() => {\n        if (!opened) {\n            updateTopSize();\n        }\n    }, [opened, updateTopSize]);\n\n    if (!alert || !alert.message) {\n        return null;\n    }\n\n    return (\n        <div\n            ref={alertRef}\n            className={b('wrapper', {'with-bottom-border': !mobileView && opened}, className)}\n        >\n            {opened && (\n                <Alert\n                    className={b('', {\n                        centered: alert.centered,\n                        dense: alert.dense,\n                    })}\n                    corners=\"square\"\n                    layout=\"horizontal\"\n                    align={alert.align}\n                    theme={alert.theme || 'warning'}\n                    view={alert.view}\n                    icon={alert.icon}\n                    title={alert.title}\n                    message={\n                        mobileView ? (\n                            <Text ellipsisLines={5} variant=\"body-2\">\n                                {alert.message}\n                            </Text>\n                        ) : (\n                            alert.message\n                        )\n                    }\n                    actions={alert.actions}\n                    onClose={alert.closable ? handleClose : undefined}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["debounceFn","block","Alert","Text"],"mappings":"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"}

package/build/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DoVt2C4l.js');
+var index = require('./index-9bMDuiin.js');
 require('react');
 require('@bem-react/classname');
 require('@gravity-ui/uikit');

package/build/esm/components/Settings/SettingsSearch/AllResultsPage.d.ts

@@ -0,0 +1,8 @@
+import type { SettingsDescription } from '../collect-settings';
+export declare function useAllResultsPage({ pages, handlePageChange, }: {
+    pages: SettingsDescription['pages'];
+    handlePageChange: (page: string | undefined) => void;
+}): {
+    isAllSearchPage: (page: string | undefined) => page is "allSearchResults";
+};
+export declare function getSettingsDescriptionWithAllResultsPage(settingsDescription: SettingsDescription): SettingsDescription;

package/build/esm/components/Settings/SettingsSearch/SettingsSearch.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TextInputSize } from '@gravity-ui/uikit';
+import { SettingsSelection } from '../Selection/types';
 interface SettingsSearchProps {
     className?: string;
     initialValue?: string;
@@ -9,6 +10,7 @@ interface SettingsSearchProps {
     inputSize?: TextInputSize;
     placeholder?: string;
     autoFocus?: boolean;
+    selection?: SettingsSelection;
 }
-export declare function SettingsSearch({ className, initialValue, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, }: SettingsSearchProps): React.JSX.Element;
+export declare function SettingsSearch({ className, initialValue, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, selection, }: SettingsSearchProps): React.JSX.Element;
 export {};

package/build/esm/components/Settings/collect-settings.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { IconProps } from '@gravity-ui/uikit';
 import { SettingsSelection } from './Selection/types';
 export type SettingsMenu = (SettingsMenuGroup | SettingsMenuItem)[];
-interface SettingsMenuGroup {
+export interface SettingsMenuGroup {
     groupTitle: string;
     items: SettingsMenuItem[];
 }
-interface SettingsMenuItem {
+export interface SettingsMenuItem {
     id: string;
     title: string;
     icon?: IconProps;
@@ -41,10 +41,9 @@ export interface SelectedSettingsPart {
     section?: SettingsPageSection;
     setting?: SettingsItem;
 }
-interface SettingsDescription {
+export interface SettingsDescription {
     menu: SettingsMenu;
     pages: Record<string, SettingsPage>;
 }
 export declare function getSettingsFromChildren(children: React.ReactNode, searchText?: string): SettingsDescription;
 export declare function getSelectedSettingsPart(pages: Record<string, SettingsPage>, selection: SettingsSelection): SelectedSettingsPart;
-export {};

package/build/esm/components/Settings/i18n/index.d.ts

@@ -1,6 +1,6 @@
-declare const _default: ((key: "label_title" | "label_filter-placeholder" | "label_empty-placeholder" | "label_search", params?: import("@gravity-ui/i18n").Params) => string) & {
+declare const _default: ((key: "label_title" | "label_filter-placeholder" | "label_empty-placeholder" | "label_search" | "label_all-results", params?: import("@gravity-ui/i18n").Params) => string) & {
     keysetData: {
-        "gn-Settings": Record<"label_title" | "label_filter-placeholder" | "label_empty-placeholder" | "label_search", import("@gravity-ui/i18n").KeyData>;
+        "gn-Settings": Record<"label_title" | "label_filter-placeholder" | "label_empty-placeholder" | "label_search" | "label_all-results", import("@gravity-ui/i18n").KeyData>;
     };
 };
 export default _default;

package/build/esm/{index-eiQrzDlu.js → index-BSHHbfgh.js}

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { useMemo, Suspense, useCallback, useRef, useState, useEffect, Component, createElement, useContext, useLayoutEffect } from 'react';
 import { withNaming } from '@bem-react/classname';
 import { Icon, Button, Flex, Text, Tooltip, List, Portal, Popup, ActionTooltip, useForkRef, setRef, Hotkey, TextInput, Loader, Sheet, eventBroker, Menu, DropdownMenu } from '@gravity-ui/uikit';
-import { Pin, PinFill, Ellipsis, Gear, Xmark, ArrowLeft } from '@gravity-ui/icons';
+import { Pin, PinFill, Ellipsis, Gear, Xmark, ListUl, ArrowLeft } from '@gravity-ui/icons';
 import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
 import ReactDOM from 'react-dom';
 import { Tabs } from '@gravity-ui/uikit/legacy';
@@ -120,7 +120,7 @@ function styleInject(css, ref) {
 var css_248z$u = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed;z-index:var(--gn-aside-header-panel-z-index,98)}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
 styleInject(css_248z$u);
 
-const TopAlert$1 = React__default.lazy(() => import('./index-DNTeCR7T.js').then((module) => ({ default: module.TopAlert })));
+const TopAlert$1 = React__default.lazy(() => import('./index-KqwJsh5S.js').then((module) => ({ default: module.TopAlert })));
 const Layout = ({ compact, className, children, topAlert }) => {
     const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
     const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
@@ -4674,6 +4674,123 @@ function HotkeysPanel(_a) {
         React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$e('drawer-item', drawerItemClassName), content: drawerItemContent })));
 }
 
+/**
+ * Gets the last element of `array`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Array
+ * @param {Array} array The array to query.
+ * @returns {*} Returns the last element of `array`.
+ * @example
+ *
+ * _.last([1, 2, 3]);
+ * // => 3
+ */
+
+var last_1;
+var hasRequiredLast;
+
+function requireLast () {
+	if (hasRequiredLast) return last_1;
+	hasRequiredLast = 1;
+	function last(array) {
+	  var length = array == null ? 0 : array.length;
+	  return length ? array[length - 1] : undefined;
+	}
+
+	last_1 = last;
+	return last_1;
+}
+
+var lastExports = requireLast();
+var last = /*@__PURE__*/getDefaultExportFromCjs(lastExports);
+
+var label_title$1 = "Settings";
+var label_search$1 = "Search";
+var en$1 = {
+	label_title: label_title$1,
+	"label_filter-placeholder": "Search settings",
+	"label_empty-placeholder": "No results found",
+	label_search: label_search$1,
+	"label_all-results": "All results"
+};
+
+var label_title = "Настройки";
+var label_search = "Поиск";
+var ru$1 = {
+	label_title: label_title,
+	"label_filter-placeholder": "Найти настройки",
+	"label_empty-placeholder": "Ничего не найдено",
+	label_search: label_search,
+	"label_all-results": "Все результаты"
+};
+
+const COMPONENT$1 = 'Settings';
+var i18n$1 = addComponentKeysets({ en: en$1, ru: ru$1 }, `${NAMESPACE}${COMPONENT$1}`);
+
+const allSearchResultsId = 'allSearchResults';
+const allSearchResultsLabel = i18n$1('label_all-results');
+function useAllResultsPage({ pages, handlePageChange, }) {
+    const allSearchResultsPage = pages[allSearchResultsId];
+    const hasAllSearchResultsPage = Boolean(allSearchResultsPage);
+    React__default.useEffect(() => {
+        if (hasAllSearchResultsPage) {
+            handlePageChange(allSearchResultsId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasAllSearchResultsPage]);
+    return {
+        isAllSearchPage: (page) => page === allSearchResultsId,
+    };
+}
+function getSettingsDescriptionWithAllResultsPage(settingsDescription) {
+    const { menu, pages } = settingsDescription;
+    const menuWithoutAllResults = getMenuWithoutAllResults(menu);
+    const pagesList = Object.values(pages);
+    return Object.assign(Object.assign({}, settingsDescription), { menu: [createAllResultsMenuItem(), ...menuWithoutAllResults], pages: Object.assign(Object.assign({}, pages), { [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults) }) });
+}
+function getMenuWithoutAllResults(menu) {
+    return menu.filter((item) => !('id' in item) || item.id !== allSearchResultsId);
+}
+function createAllResultsPage(pages, menu) {
+    const breadcrumbsMap = {};
+    for (const menuItem of menu) {
+        if ('items' in menuItem) {
+            for (const pageItem of menuItem.items) {
+                breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];
+            }
+        }
+        else {
+            breadcrumbsMap[menuItem.id] = [menuItem.title];
+        }
+    }
+    return {
+        id: allSearchResultsId,
+        sections: Object.values(pages)
+            .map((page) => {
+            return page.sections.map((section) => {
+                var _a;
+                const breadcrumbs = (_a = breadcrumbsMap[page.id]) !== null && _a !== undefined ? _a : [];
+                const lastBreadcrumb = last(breadcrumbs);
+                const breadcrumbsTitlePart = breadcrumbs.join(' / ');
+                return Object.assign(Object.assign({}, section), { title: section.title === lastBreadcrumb
+                        ? breadcrumbsTitlePart
+                        : `${breadcrumbsTitlePart} / ${section.title}` });
+            });
+        })
+            .flat(),
+    };
+}
+function createAllResultsMenuItem() {
+    return {
+        id: allSearchResultsId,
+        title: allSearchResultsLabel,
+        icon: { data: ListUl },
+    };
+}
+
 function useStableCallback(func) {
     const funcRef = React.useRef();
     React.useEffect(() => {
@@ -4707,7 +4824,13 @@ function getSettingsFromChildren(children, searchText = '') {
     // 'abc def fg' -> abc.*?cde.*?fg
     const preparedFilter = escapeStringForRegExp(searchText).replace(/\s+/g, '.*?');
     const filterRe = new RegExp(preparedFilter, 'i');
-    return getSettingsFromChildrenRecursive(children, '', filterRe);
+    const result = getSettingsFromChildrenRecursive(children, '', filterRe);
+    if (Boolean(preparedFilter) && result.menu.length > 0) {
+        return getSettingsDescriptionWithAllResultsPage(result);
+    }
+    else {
+        return result;
+    }
 }
 function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
     const menu = [];
@@ -4737,11 +4860,13 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
                 const hasInnerGroup = menuFragment.some((item) => 'groupTitle' in item);
                 invariant(!hasInnerGroup, `Group ${element.props.groupTitle} should not include groups`);
             }
-            menu.push({
-                groupTitle: element.props.groupTitle,
-                // @ts-ignore
-                items: menuFragment,
-            });
+            if (menuFragment.length > 0) {
+                menu.push({
+                    groupTitle: element.props.groupTitle,
+                    // @ts-ignore
+                    items: menuFragment,
+                });
+            }
             Object.assign(pages, pagesFragment);
         }
         else {
@@ -4754,13 +4879,15 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
             }
             pages[pageId] = getSettingsPageFromChildren(element.props.children, filterRe);
             pages[pageId].id = pageId;
-            menu.push({
-                id: pageId,
-                title: element.props.title,
-                icon: element.props.icon,
-                withBadge: pages[pageId].withBadge,
-                disabled: pages[pageId].hidden,
-            });
+            if (!pages[pageId].hidden) {
+                menu.push({
+                    id: pageId,
+                    title: element.props.title,
+                    icon: element.props.icon,
+                    withBadge: pages[pageId].withBadge,
+                    disabled: pages[pageId].hidden,
+                });
+            }
         }
     });
     return { menu, pages };
@@ -4911,7 +5038,7 @@ function isSectionSelected(selected, pageId, section) {
     }
 }
 
-var css_248z$c = ".gn-settings-menu__group-heading{display:inline-block;font-weight:var(--g-text-accent-font-weight);line-height:18px;margin-bottom:12px;padding:0 20px}.gn-settings-menu__group+.gn-settings-menu__group{margin-top:24px}.gn-settings-menu__item{align-items:center;color:var(--g-color-text-primary);cursor:pointer;display:flex;height:40px;padding:0 20px}.gn-settings-menu__item-icon{color:var(--g-color-text-misc);margin-right:5px}.gn-settings-menu__item:hover,.gn-settings-menu__item_focused{background:var(--g-color-base-simple-hover)}.gn-settings-menu__item_selected{background:var(--g-color-base-selection)}.gn-settings-menu__item_selected.gn-settings-menu__item_focused,.gn-settings-menu__item_selected:hover{background:var(--g-color-base-selection-hover)}.gn-settings-menu__item_disabled{color:var(--g-color-text-secondary);cursor:auto}.gn-settings-menu__item_disabled:hover{background:none}.gn-settings-menu__item_disabled .gn-settings-menu__item-icon{color:var(--g-color-base-misc-heavy)}.gn-settings-menu__item_badge{position:relative}.gn-settings-menu__item_badge:after{background-color:var(--g-color-text-danger);border-radius:50%;content:\"\";display:block;height:6px;position:absolute;right:9px;top:calc(50% - 3px);width:6px}";
+var css_248z$c = ".gn-settings-menu__group-heading{display:inline-block;font-weight:var(--g-text-accent-font-weight);line-height:18px;margin-bottom:12px;padding:0 20px}.gn-settings-menu__group+.gn-settings-menu__group{margin-top:24px}.gn-settings-menu__item+.gn-settings-menu__group{margin-top:8px}.gn-settings-menu__item{align-items:center;color:var(--g-color-text-primary);cursor:pointer;display:flex;height:40px;padding:0 20px}.gn-settings-menu__item-icon{color:var(--g-color-text-misc);margin-right:5px}.gn-settings-menu__item:hover,.gn-settings-menu__item_focused{background:var(--g-color-base-simple-hover)}.gn-settings-menu__item_selected{background:var(--g-color-base-selection)}.gn-settings-menu__item_selected.gn-settings-menu__item_focused,.gn-settings-menu__item_selected:hover{background:var(--g-color-base-selection-hover)}.gn-settings-menu__item_disabled{color:var(--g-color-text-secondary);cursor:auto}.gn-settings-menu__item_disabled:hover{background:none}.gn-settings-menu__item_disabled .gn-settings-menu__item-icon{color:var(--g-color-base-misc-heavy)}.gn-settings-menu__item_badge{position:relative}.gn-settings-menu__item_badge:after{background-color:var(--g-color-text-danger);border-radius:50%;content:\"\";display:block;height:6px;position:absolute;right:9px;top:calc(50% - 3px);width:6px}";
 styleInject(css_248z$c);
 
 const b$d = block('settings-menu');
@@ -5016,35 +5143,23 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
         React__default.createElement(Tabs, { items: tabItems, className: b$c(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
 };
 
-var label_title$1 = "Settings";
-var label_search$1 = "Search";
-var en$1 = {
-	label_title: label_title$1,
-	"label_filter-placeholder": "Search settings",
-	"label_empty-placeholder": "No results found",
-	label_search: label_search$1
-};
-
-var label_title = "Настройки";
-var label_search = "Поиск";
-var ru$1 = {
-	label_title: label_title,
-	"label_filter-placeholder": "Найти настройки",
-	"label_empty-placeholder": "Ничего не найдено",
-	label_search: label_search
-};
-
-const COMPONENT$1 = 'Settings';
-var i18n$1 = addComponentKeysets({ en: en$1, ru: ru$1 }, `${NAMESPACE}${COMPONENT$1}`);
-
 const b$b = block('settings-search');
-function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
+function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
     const [value, setValue] = React__default.useState(initialValue !== null && initialValue !== undefined ? initialValue : '');
-    const onChangeDebounced = useStableCallback(debounceFn(onChange, debounce));
+    const onChangeDebounced = debounceFn(onChange, debounce);
     const handleUpdate = useStableCallback((updated) => {
         setValue(updated);
         onChangeDebounced(updated);
     });
+    useEffect(() => {
+        if (value && selection) {
+            onChangeDebounced.cancel();
+            setValue('');
+            onChange('');
+        }
+        // Remove any search, if selection is passed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selection]);
     return (React__default.createElement("div", { className: b$b(null, className) },
         React__default.createElement(TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate, controlProps: {
                 'aria-label': i18n$1('label_search'),
@@ -5078,7 +5193,7 @@ const getPageTitleById = (menu, activePage) => {
     return '';
 };
 function SettingsContent({ initialPage, initialSearch, selection, children, renderNotFound, title = i18n$1('label_title'), filterPlaceholder = i18n$1('label_filter-placeholder'), emptyPlaceholder = i18n$1('label_empty-placeholder'), view, onPageChange, onClose, }) {
-    var _a, _b;
+    var _a;
     const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
     const [search, setSearch] = React__default.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
     const { menu, pages } = getSettingsFromChildren(children, search);
@@ -5105,17 +5220,21 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
         };
     }, []);
     let activePage = selectedPage;
-    if (!activePage || ((_a = pages[activePage]) === null || _a === undefined ? undefined : _a.hidden)) {
-        activePage = (_b = Object.values(pages).find(({ hidden }) => !hidden)) === null || _b === undefined ? undefined : _b.id;
+    if (!activePage || !pages[activePage] || pages[activePage].hidden) {
+        activePage = (_a = Object.values(pages).find(({ hidden }) => !hidden)) === null || _a === undefined ? undefined : _a.id;
     }
     const handlePageChange = (newPage) => {
         setCurrentPage((prevPage) => {
-            if (prevPage !== newPage) {
+            if (prevPage !== newPage && !isFakePage(newPage)) {
                 onPageChange === null || onPageChange === undefined ? undefined : onPageChange(newPage);
             }
             return newPage;
         });
     };
+    const { isAllSearchPage } = useAllResultsPage({ pages, handlePageChange });
+    function isFakePage(page) {
+        return isAllSearchPage(page);
+    }
     React__default.useEffect(() => {
         if (activePage !== selectedPage) {
             handlePageChange(activePage);
@@ -5159,7 +5278,7 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
     return (React__default.createElement(SettingsSelectionContextProvider, { value: selected },
         React__default.createElement("div", { className: b$a({ view }) },
             isMobile ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
+                React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
                 React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$a('tabs') }))) : (React__default.createElement("div", { className: b$a('menu'), onClick: () => {
                     if (searchInputRef.current) {
                         searchInputRef.current.focus();
@@ -5172,7 +5291,7 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
                     }
                 } },
                 React__default.createElement(Title, null, title),
-                React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
+                React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
                 React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
             React__default.createElement("div", { className: b$a('page') }, renderPageContent(activePage)))));
 }
@@ -5386,10 +5505,10 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
             React__default.createElement("div", { className: b$5('content') }, renderContent()))));
 };
 
-var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px}.gn-mobile-header,.gn-mobile-header__top-alert{background-color:var(--g-color-base-background)}.gn-mobile-header__top-alert{position:sticky;top:0}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__content{overflow:auto}";
+var css_248z$4 = ".gn-mobile-header{--mobile-header-min-heigth:50px;--mobile-header-icon-size:20px;background-color:var(--g-color-base-background)}.gn-mobile-header__header-container{background-color:var(--g-color-base-background);position:sticky;top:0;z-index:var(--gn-mobile-header-z-index,100)}.gn-mobile-header__header{align-items:center;border-bottom:1px solid var(--g-color-line-generic);box-sizing:border-box;display:flex;justify-content:space-between;padding:0 10px}.gn-mobile-header__burger{padding:12px}.gn-mobile-header__panel-item{--gn-drawer-item-position:var(--gn-mobile-header-panel-position,absolute)}.gn-mobile-header__burger-menu,.gn-mobile-header__panel-item{background-color:var(--g-color-base-background);max-height:100%;max-width:90vw;width:320px}.gn-mobile-header__user-menu{overflow-y:auto}.gn-mobile-header__overlap-panel,.gn-mobile-header__panels{z-index:var(--gn-mobile-header-panel-z-index,98)}.gn-mobile-header__panels{inset:var(--mobile-header-min-heigth) 0 0;overflow:hidden;position:fixed}.gn-mobile-header__panel-item{top:unset}.gn-mobile-header__content{overflow:auto}";
 styleInject(css_248z$4);
 
-const TopAlert = React__default.lazy(() => import('./index-DNTeCR7T.js').then((module) => ({ default: module.TopAlert })));
+const TopAlert = React__default.lazy(() => import('./index-KqwJsh5S.js').then((module) => ({ default: module.TopAlert })));
 const b$4 = block('mobile-header');
 const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseTitle = i18n('burger_button_close'), burgerOpenTitle = i18n('burger_button_open'), panelItems = [], renderContent, sideItemRenderContent, onClosePanel, onEvent, className, contentClassName, overlapPanel, topAlert, }, ref) => {
     const targetRef = useForwardRef(ref);
@@ -5507,7 +5626,7 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseT
         onOverlapClose,
     ]);
     return (React__default.createElement("div", { className: b$4({ compact }, className), ref: targetRef },
-        React__default.createElement("div", { className: b$4('top-alert') },
+        React__default.createElement("div", { className: b$4('header-container') },
             topAlert && (React__default.createElement(Suspense, { fallback: null },
                 React__default.createElement(TopAlert, { alert: topAlert, mobileView: true }))),
             React__default.createElement("header", { className: b$4('header'), style: { height: size } },
@@ -5680,4 +5799,4 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
 };
 
 export { AsideHeader as A, DrawerItem as D, FooterItem$1 as F, HotkeysPanel as H, Logo as L, MOBILE_HEADER_EVENT_NAMES as M, PageLayout as P, Settings as S, Title as T, AsideHeaderContextProvider as a, block as b, PageLayoutAside as c, debounceFn as d, AsideFallback as e, Drawer as f, PublicActionBar as g, useSettingsSelectionContext as h, useSettingsContext as i, FooterItem as j, getMobileHeaderCustomEvent as k, MobileHeader as l, MobileLogo as m, Footer as n, MobileFooter as o, styleInject as s, useAsideHeaderContext as u };
-//# sourceMappingURL=index-eiQrzDlu.js.map
+//# sourceMappingURL=index-BSHHbfgh.js.map