@gravity-ui/navigation 3.2.1 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Chqso-oJ.js');
3
+ var index = require('./index-DJSaylQb.js');
4
4
  require('react');
5
5
  require('@bem-react/classname');
6
6
  require('@gravity-ui/uikit');
@@ -4,3 +4,4 @@ import type { LogoProps } from '../../types';
4
4
  declare const _default: Meta<typeof Logo>;
5
5
  export default _default;
6
6
  export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, LogoProps>;
7
+ export declare const NoAnchor: (context: import("@storybook/csf").StoryContext<import("@storybook/react").ReactRenderer, LogoProps>) => JSX.Element;
@@ -0,0 +1,8 @@
1
+ import type { SettingsDescription } from '../collect-settings';
2
+ export declare function useAllResultsPage({ pages, handlePageChange, }: {
3
+ pages: SettingsDescription['pages'];
4
+ handlePageChange: (page: string | undefined) => void;
5
+ }): {
6
+ isAllSearchPage: (page: string | undefined) => page is "allSearchResults";
7
+ };
8
+ export declare function getSettingsDescriptionWithAllResultsPage(settingsDescription: SettingsDescription): SettingsDescription;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { TextInputSize } from '@gravity-ui/uikit';
3
+ import { SettingsSelection } from '../Selection/types';
3
4
  interface SettingsSearchProps {
4
5
  className?: string;
5
6
  initialValue?: string;
@@ -9,6 +10,7 @@ interface SettingsSearchProps {
9
10
  inputSize?: TextInputSize;
10
11
  placeholder?: string;
11
12
  autoFocus?: boolean;
13
+ selection?: SettingsSelection;
12
14
  }
13
- export declare function SettingsSearch({ className, initialValue, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, }: SettingsSearchProps): React.JSX.Element;
15
+ export declare function SettingsSearch({ className, initialValue, onChange, debounce, inputRef, inputSize, placeholder, autoFocus, selection, }: SettingsSearchProps): React.JSX.Element;
14
16
  export {};
@@ -2,11 +2,11 @@ import React from 'react';
2
2
  import { IconProps } from '@gravity-ui/uikit';
3
3
  import { SettingsSelection } from './Selection/types';
4
4
  export type SettingsMenu = (SettingsMenuGroup | SettingsMenuItem)[];
5
- interface SettingsMenuGroup {
5
+ export interface SettingsMenuGroup {
6
6
  groupTitle: string;
7
7
  items: SettingsMenuItem[];
8
8
  }
9
- interface SettingsMenuItem {
9
+ export interface SettingsMenuItem {
10
10
  id: string;
11
11
  title: string;
12
12
  icon?: IconProps;
@@ -41,10 +41,9 @@ export interface SelectedSettingsPart {
41
41
  section?: SettingsPageSection;
42
42
  setting?: SettingsItem;
43
43
  }
44
- interface SettingsDescription {
44
+ export interface SettingsDescription {
45
45
  menu: SettingsMenu;
46
46
  pages: Record<string, SettingsPage>;
47
47
  }
48
48
  export declare function getSettingsFromChildren(children: React.ReactNode, searchText?: string): SettingsDescription;
49
49
  export declare function getSelectedSettingsPart(pages: Record<string, SettingsPage>, selection: SettingsSelection): SelectedSettingsPart;
50
- export {};
@@ -1,6 +1,6 @@
1
- declare const _default: ((key: "label_title" | "label_filter-placeholder" | "label_empty-placeholder" | "label_search", params?: import("@gravity-ui/i18n").Params) => string) & {
1
+ declare const _default: ((key: "label_title" | "label_filter-placeholder" | "label_empty-placeholder" | "label_search" | "label_all-results", params?: import("@gravity-ui/i18n").Params) => string) & {
2
2
  keysetData: {
3
- "gn-Settings": Record<"label_title" | "label_filter-placeholder" | "label_empty-placeholder" | "label_search", import("@gravity-ui/i18n").KeyData>;
3
+ "gn-Settings": Record<"label_title" | "label_filter-placeholder" | "label_empty-placeholder" | "label_search" | "label_all-results", import("@gravity-ui/i18n").KeyData>;
4
4
  };
5
5
  };
6
6
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import React__default from 'react';
2
2
  import { Alert, Text } from '@gravity-ui/uikit';
3
- import { d as debounceFn, s as styleInject, b as block } from './index-D8I2X2cn.js';
3
+ import { d as debounceFn, s as styleInject, b as block } from './index-Ct_a9Lq8.js';
4
4
  import '@bem-react/classname';
5
5
  import '@gravity-ui/icons';
6
6
  import '@gravity-ui/uikit/i18n';
@@ -64,4 +64,4 @@ const TopAlert = ({ alert, className, mobileView = false }) => {
64
64
  };
65
65
 
66
66
  export { TopAlert };
67
- //# sourceMappingURL=index-Dwqi8qed.js.map
67
+ //# sourceMappingURL=index-BaNchdQv.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index-Dwqi8qed.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":["React"],"mappings":"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"}
1
+ {"version":3,"file":"index-BaNchdQv.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":["React"],"mappings":"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"}
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import React__default, { useMemo, Suspense, useCallback, useRef, useState, useEffect, Component, createElement, useContext, useLayoutEffect } from 'react';
3
3
  import { withNaming } from '@bem-react/classname';
4
4
  import { Icon, Button, Flex, Text, Tooltip, List, Portal, Popup, ActionTooltip, useForkRef, setRef, Hotkey, TextInput, Loader, Sheet, eventBroker, Menu, DropdownMenu } from '@gravity-ui/uikit';
5
- import { Pin, PinFill, Ellipsis, Gear, Xmark, ArrowLeft } from '@gravity-ui/icons';
5
+ import { Pin, PinFill, Ellipsis, Gear, Xmark, ListUl, ArrowLeft } from '@gravity-ui/icons';
6
6
  import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
7
7
  import ReactDOM from 'react-dom';
8
8
  import { Tabs } from '@gravity-ui/uikit/legacy';
@@ -120,7 +120,7 @@ function styleInject(css, ref) {
120
120
  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)}";
121
121
  styleInject(css_248z$u);
122
122
 
123
- const TopAlert$1 = React__default.lazy(() => import('./index-Dwqi8qed.js').then((module) => ({ default: module.TopAlert })));
123
+ const TopAlert$1 = React__default.lazy(() => import('./index-BaNchdQv.js').then((module) => ({ default: module.TopAlert })));
124
124
  const Layout = ({ compact, className, children, topAlert }) => {
125
125
  const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
126
126
  const asideHeaderContextValue = useMemo(() => ({ size, compact }), [compact, size]);
@@ -1900,7 +1900,17 @@ const Logo = ({ text, icon, iconSrc, iconClassName, iconPlaceClassName, iconSize
1900
1900
  else {
1901
1901
  logo = (React__default.createElement("div", { className: b$n('logo'), style: { fontSize: textSize } }, text));
1902
1902
  }
1903
- const button = (React__default.createElement("a", { className: b$n('btn-logo', buttonClassName), onClick: onClick, target: target, rel: target === '_self' ? undefined : 'noreferrer', href: href, "aria-label": href && ariaLabel, "aria-labelledby": href && ariaLabelledby },
1903
+ const _a = href
1904
+ ? {
1905
+ tag: 'a',
1906
+ target,
1907
+ rel: target === '_self' ? undefined : 'noreferrer',
1908
+ href,
1909
+ 'aria-label': ariaLabel,
1910
+ 'aria-labelledby': ariaLabelledby,
1911
+ }
1912
+ : { tag: 'span' }, { tag: Button } = _a, buttonProps = __rest(_a, ["tag"]);
1913
+ const button = (React__default.createElement(Button, Object.assign({}, buttonProps, { className: b$n('btn-logo', buttonClassName), onClick: onClick }),
1904
1914
  React__default.createElement("span", { className: b$n('logo-icon-place', iconPlaceClassName) }, buttonIcon),
1905
1915
  !compact && logo));
1906
1916
  return (React__default.createElement("div", { className: b$n(null, className) }, hasWrapper ? wrapper(button, Boolean(compact)) : button));
@@ -4674,6 +4684,123 @@ function HotkeysPanel(_a) {
4674
4684
  React__default.createElement(DrawerItem, { id: "hotkeys", visible: visible, className: b$e('drawer-item', drawerItemClassName), content: drawerItemContent })));
4675
4685
  }
4676
4686
 
4687
+ /**
4688
+ * Gets the last element of `array`.
4689
+ *
4690
+ * @static
4691
+ * @memberOf _
4692
+ * @since 0.1.0
4693
+ * @category Array
4694
+ * @param {Array} array The array to query.
4695
+ * @returns {*} Returns the last element of `array`.
4696
+ * @example
4697
+ *
4698
+ * _.last([1, 2, 3]);
4699
+ * // => 3
4700
+ */
4701
+
4702
+ var last_1;
4703
+ var hasRequiredLast;
4704
+
4705
+ function requireLast () {
4706
+ if (hasRequiredLast) return last_1;
4707
+ hasRequiredLast = 1;
4708
+ function last(array) {
4709
+ var length = array == null ? 0 : array.length;
4710
+ return length ? array[length - 1] : undefined;
4711
+ }
4712
+
4713
+ last_1 = last;
4714
+ return last_1;
4715
+ }
4716
+
4717
+ var lastExports = requireLast();
4718
+ var last = /*@__PURE__*/getDefaultExportFromCjs(lastExports);
4719
+
4720
+ var label_title$1 = "Settings";
4721
+ var label_search$1 = "Search";
4722
+ var en$1 = {
4723
+ label_title: label_title$1,
4724
+ "label_filter-placeholder": "Search settings",
4725
+ "label_empty-placeholder": "No results found",
4726
+ label_search: label_search$1,
4727
+ "label_all-results": "All results"
4728
+ };
4729
+
4730
+ var label_title = "Настройки";
4731
+ var label_search = "Поиск";
4732
+ var ru$1 = {
4733
+ label_title: label_title,
4734
+ "label_filter-placeholder": "Найти настройки",
4735
+ "label_empty-placeholder": "Ничего не найдено",
4736
+ label_search: label_search,
4737
+ "label_all-results": "Все результаты"
4738
+ };
4739
+
4740
+ const COMPONENT$1 = 'Settings';
4741
+ var i18n$1 = addComponentKeysets({ en: en$1, ru: ru$1 }, `${NAMESPACE}${COMPONENT$1}`);
4742
+
4743
+ const allSearchResultsId = 'allSearchResults';
4744
+ const allSearchResultsLabel = i18n$1('label_all-results');
4745
+ function useAllResultsPage({ pages, handlePageChange, }) {
4746
+ const allSearchResultsPage = pages[allSearchResultsId];
4747
+ const hasAllSearchResultsPage = Boolean(allSearchResultsPage);
4748
+ React__default.useEffect(() => {
4749
+ if (hasAllSearchResultsPage) {
4750
+ handlePageChange(allSearchResultsId);
4751
+ }
4752
+ // eslint-disable-next-line react-hooks/exhaustive-deps
4753
+ }, [hasAllSearchResultsPage]);
4754
+ return {
4755
+ isAllSearchPage: (page) => page === allSearchResultsId,
4756
+ };
4757
+ }
4758
+ function getSettingsDescriptionWithAllResultsPage(settingsDescription) {
4759
+ const { menu, pages } = settingsDescription;
4760
+ const menuWithoutAllResults = getMenuWithoutAllResults(menu);
4761
+ const pagesList = Object.values(pages);
4762
+ return Object.assign(Object.assign({}, settingsDescription), { menu: [createAllResultsMenuItem(), ...menuWithoutAllResults], pages: Object.assign(Object.assign({}, pages), { [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults) }) });
4763
+ }
4764
+ function getMenuWithoutAllResults(menu) {
4765
+ return menu.filter((item) => !('id' in item) || item.id !== allSearchResultsId);
4766
+ }
4767
+ function createAllResultsPage(pages, menu) {
4768
+ const breadcrumbsMap = {};
4769
+ for (const menuItem of menu) {
4770
+ if ('items' in menuItem) {
4771
+ for (const pageItem of menuItem.items) {
4772
+ breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];
4773
+ }
4774
+ }
4775
+ else {
4776
+ breadcrumbsMap[menuItem.id] = [menuItem.title];
4777
+ }
4778
+ }
4779
+ return {
4780
+ id: allSearchResultsId,
4781
+ sections: Object.values(pages)
4782
+ .map((page) => {
4783
+ return page.sections.map((section) => {
4784
+ var _a;
4785
+ const breadcrumbs = (_a = breadcrumbsMap[page.id]) !== null && _a !== undefined ? _a : [];
4786
+ const lastBreadcrumb = last(breadcrumbs);
4787
+ const breadcrumbsTitlePart = breadcrumbs.join(' / ');
4788
+ return Object.assign(Object.assign({}, section), { title: section.title === lastBreadcrumb
4789
+ ? breadcrumbsTitlePart
4790
+ : `${breadcrumbsTitlePart} / ${section.title}` });
4791
+ });
4792
+ })
4793
+ .flat(),
4794
+ };
4795
+ }
4796
+ function createAllResultsMenuItem() {
4797
+ return {
4798
+ id: allSearchResultsId,
4799
+ title: allSearchResultsLabel,
4800
+ icon: { data: ListUl },
4801
+ };
4802
+ }
4803
+
4677
4804
  function useStableCallback(func) {
4678
4805
  const funcRef = React.useRef();
4679
4806
  React.useEffect(() => {
@@ -4707,7 +4834,13 @@ function getSettingsFromChildren(children, searchText = '') {
4707
4834
  // 'abc def fg' -> abc.*?cde.*?fg
4708
4835
  const preparedFilter = escapeStringForRegExp(searchText).replace(/\s+/g, '.*?');
4709
4836
  const filterRe = new RegExp(preparedFilter, 'i');
4710
- return getSettingsFromChildrenRecursive(children, '', filterRe);
4837
+ const result = getSettingsFromChildrenRecursive(children, '', filterRe);
4838
+ if (Boolean(preparedFilter) && result.menu.length > 0) {
4839
+ return getSettingsDescriptionWithAllResultsPage(result);
4840
+ }
4841
+ else {
4842
+ return result;
4843
+ }
4711
4844
  }
4712
4845
  function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
4713
4846
  const menu = [];
@@ -4737,11 +4870,13 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
4737
4870
  const hasInnerGroup = menuFragment.some((item) => 'groupTitle' in item);
4738
4871
  invariant(!hasInnerGroup, `Group ${element.props.groupTitle} should not include groups`);
4739
4872
  }
4740
- menu.push({
4741
- groupTitle: element.props.groupTitle,
4742
- // @ts-ignore
4743
- items: menuFragment,
4744
- });
4873
+ if (menuFragment.length > 0) {
4874
+ menu.push({
4875
+ groupTitle: element.props.groupTitle,
4876
+ // @ts-ignore
4877
+ items: menuFragment,
4878
+ });
4879
+ }
4745
4880
  Object.assign(pages, pagesFragment);
4746
4881
  }
4747
4882
  else {
@@ -4754,13 +4889,15 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
4754
4889
  }
4755
4890
  pages[pageId] = getSettingsPageFromChildren(element.props.children, filterRe);
4756
4891
  pages[pageId].id = pageId;
4757
- menu.push({
4758
- id: pageId,
4759
- title: element.props.title,
4760
- icon: element.props.icon,
4761
- withBadge: pages[pageId].withBadge,
4762
- disabled: pages[pageId].hidden,
4763
- });
4892
+ if (!pages[pageId].hidden) {
4893
+ menu.push({
4894
+ id: pageId,
4895
+ title: element.props.title,
4896
+ icon: element.props.icon,
4897
+ withBadge: pages[pageId].withBadge,
4898
+ disabled: pages[pageId].hidden,
4899
+ });
4900
+ }
4764
4901
  }
4765
4902
  });
4766
4903
  return { menu, pages };
@@ -4911,7 +5048,7 @@ function isSectionSelected(selected, pageId, section) {
4911
5048
  }
4912
5049
  }
4913
5050
 
4914
- 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}";
5051
+ 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}";
4915
5052
  styleInject(css_248z$c);
4916
5053
 
4917
5054
  const b$d = block('settings-menu');
@@ -5016,35 +5153,23 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
5016
5153
  React__default.createElement(Tabs, { items: tabItems, className: b$c(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
5017
5154
  };
5018
5155
 
5019
- var label_title$1 = "Settings";
5020
- var label_search$1 = "Search";
5021
- var en$1 = {
5022
- label_title: label_title$1,
5023
- "label_filter-placeholder": "Search settings",
5024
- "label_empty-placeholder": "No results found",
5025
- label_search: label_search$1
5026
- };
5027
-
5028
- var label_title = "Настройки";
5029
- var label_search = "Поиск";
5030
- var ru$1 = {
5031
- label_title: label_title,
5032
- "label_filter-placeholder": "Найти настройки",
5033
- "label_empty-placeholder": "Ничего не найдено",
5034
- label_search: label_search
5035
- };
5036
-
5037
- const COMPONENT$1 = 'Settings';
5038
- var i18n$1 = addComponentKeysets({ en: en$1, ru: ru$1 }, `${NAMESPACE}${COMPONENT$1}`);
5039
-
5040
5156
  const b$b = block('settings-search');
5041
- function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, }) {
5157
+ function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
5042
5158
  const [value, setValue] = React__default.useState(initialValue !== null && initialValue !== undefined ? initialValue : '');
5043
- const onChangeDebounced = useStableCallback(debounceFn(onChange, debounce));
5159
+ const onChangeDebounced = debounceFn(onChange, debounce);
5044
5160
  const handleUpdate = useStableCallback((updated) => {
5045
5161
  setValue(updated);
5046
5162
  onChangeDebounced(updated);
5047
5163
  });
5164
+ useEffect(() => {
5165
+ if (value && selection) {
5166
+ onChangeDebounced.cancel();
5167
+ setValue('');
5168
+ onChange('');
5169
+ }
5170
+ // Remove any search, if selection is passed
5171
+ // eslint-disable-next-line react-hooks/exhaustive-deps
5172
+ }, [selection]);
5048
5173
  return (React__default.createElement("div", { className: b$b(null, className) },
5049
5174
  React__default.createElement(TextInput, { value: value, controlRef: inputRef, hasClear: true, autoFocus: autoFocus, size: inputSize, placeholder: placeholder, onUpdate: handleUpdate, controlProps: {
5050
5175
  'aria-label': i18n$1('label_search'),
@@ -5078,7 +5203,7 @@ const getPageTitleById = (menu, activePage) => {
5078
5203
  return '';
5079
5204
  };
5080
5205
  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, }) {
5081
- var _a, _b;
5206
+ var _a;
5082
5207
  const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext();
5083
5208
  const [search, setSearch] = React__default.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
5084
5209
  const { menu, pages } = getSettingsFromChildren(children, search);
@@ -5105,17 +5230,21 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
5105
5230
  };
5106
5231
  }, []);
5107
5232
  let activePage = selectedPage;
5108
- if (!activePage || ((_a = pages[activePage]) === null || _a === undefined ? undefined : _a.hidden)) {
5109
- activePage = (_b = Object.values(pages).find(({ hidden }) => !hidden)) === null || _b === undefined ? undefined : _b.id;
5233
+ if (!activePage || !pages[activePage] || pages[activePage].hidden) {
5234
+ activePage = (_a = Object.values(pages).find(({ hidden }) => !hidden)) === null || _a === undefined ? undefined : _a.id;
5110
5235
  }
5111
5236
  const handlePageChange = (newPage) => {
5112
5237
  setCurrentPage((prevPage) => {
5113
- if (prevPage !== newPage) {
5238
+ if (prevPage !== newPage && !isFakePage(newPage)) {
5114
5239
  onPageChange === null || onPageChange === undefined ? undefined : onPageChange(newPage);
5115
5240
  }
5116
5241
  return newPage;
5117
5242
  });
5118
5243
  };
5244
+ const { isAllSearchPage } = useAllResultsPage({ pages, handlePageChange });
5245
+ function isFakePage(page) {
5246
+ return isAllSearchPage(page);
5247
+ }
5119
5248
  React__default.useEffect(() => {
5120
5249
  if (activePage !== selectedPage) {
5121
5250
  handlePageChange(activePage);
@@ -5159,7 +5288,7 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
5159
5288
  return (React__default.createElement(SettingsSelectionContextProvider, { value: selected },
5160
5289
  React__default.createElement("div", { className: b$a({ view }) },
5161
5290
  isMobile ? (React__default.createElement(React__default.Fragment, null,
5162
- React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
5291
+ React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
5163
5292
  React__default.createElement(SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b$a('tabs') }))) : (React__default.createElement("div", { className: b$a('menu'), onClick: () => {
5164
5293
  if (searchInputRef.current) {
5165
5294
  searchInputRef.current.focus();
@@ -5172,7 +5301,7 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
5172
5301
  }
5173
5302
  } },
5174
5303
  React__default.createElement(Title, null, title),
5175
- React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
5304
+ React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b$a('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
5176
5305
  React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
5177
5306
  React__default.createElement("div", { className: b$a('page') }, renderPageContent(activePage)))));
5178
5307
  }
@@ -5386,10 +5515,10 @@ const OverlapPanel = ({ title, renderContent, className, onClose, action, closeT
5386
5515
  React__default.createElement("div", { className: b$5('content') }, renderContent()))));
5387
5516
  };
5388
5517
 
5389
- 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__panel-item{top:unset}.gn-mobile-header__content{overflow:auto}";
5518
+ 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}";
5390
5519
  styleInject(css_248z$4);
5391
5520
 
5392
- const TopAlert = React__default.lazy(() => import('./index-Dwqi8qed.js').then((module) => ({ default: module.TopAlert })));
5521
+ const TopAlert = React__default.lazy(() => import('./index-BaNchdQv.js').then((module) => ({ default: module.TopAlert })));
5393
5522
  const b$4 = block('mobile-header');
5394
5523
  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) => {
5395
5524
  const targetRef = useForwardRef(ref);
@@ -5507,7 +5636,7 @@ const MobileHeader = React__default.forwardRef(({ logo, burgerMenu, burgerCloseT
5507
5636
  onOverlapClose,
5508
5637
  ]);
5509
5638
  return (React__default.createElement("div", { className: b$4({ compact }, className), ref: targetRef },
5510
- React__default.createElement("div", { className: b$4('top-alert') },
5639
+ React__default.createElement("div", { className: b$4('header-container') },
5511
5640
  topAlert && (React__default.createElement(Suspense, { fallback: null },
5512
5641
  React__default.createElement(TopAlert, { alert: topAlert, mobileView: true }))),
5513
5642
  React__default.createElement("header", { className: b$4('header'), style: { height: size } },
@@ -5680,4 +5809,4 @@ const MobileFooter = ({ className, menuItems: providedMenuItems, withDivider, mo
5680
5809
  };
5681
5810
 
5682
5811
  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 };
5683
- //# sourceMappingURL=index-D8I2X2cn.js.map
5812
+ //# sourceMappingURL=index-Ct_a9Lq8.js.map