@gravity-ui/navigation 6.0.0-beta.4 → 6.0.0

package/build/cjs/components/Settings/Settings.js

@@ -1,10 +1,10 @@
 import './Settings.css';
 'use strict';
 
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var identity = require('../../_virtual/identity.js');
+var identity = require('lodash/identity');
 var Title = require('../Title/Title.js');
 var context = require('./Selection/context.js');
 var SettingsContext = require('./SettingsContext/SettingsContext.js');
@@ -19,25 +19,24 @@ var collectSettings = require('./collect-settings.js');
 var index = require('./i18n/index.js');
 
 function Settings(_a) {
-    var { loading, renderLoading, children, view = 'normal', renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover = true } = _a, props = tslib_es6.__rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "renderSectionRightAdornment", "showRightAdornmentOnHover"]);
+    var { loading, renderLoading, children, view = 'normal', renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover = true } = _a, props = tslib.__rest(_a, ["loading", "renderLoading", "children", "view", "renderRightAdornment", "renderSectionRightAdornment", "showRightAdornmentOnHover"]);
     if (loading) {
         return (React.createElement("div", { className: b.b({ loading: true, view }) }, typeof renderLoading === 'function' ? (renderLoading()) : (React.createElement(uikit.Loader, { className: b.b('loader'), size: "m" }))));
     }
     return (React.createElement(SettingsContext.SettingsContext.Provider, { value: { renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover } },
         React.createElement(SettingsContent, Object.assign({ view: view }, props), children)));
 }
-function SettingsContent({ initialPage, initialSearch, selection, children, renderNotFound, title = index.default('label_title'), filterPlaceholder = index.default('label_filter-placeholder'), emptyPlaceholder = index.default('label_empty-placeholder'), view, onPageChange, onClose, }) {
-    var _a;
-    const [search, setSearch] = React.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
-    const { menu, pages } = collectSettings.getSettingsFromChildren(children, search);
-    const selected = context.useSettingsSelectionProviderValue(pages, selection);
-    const pageKeys = Object.keys(pages);
-    const selectionInitialPage = selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;
-    const [selectedPage, setCurrentPage] = React.useState(selectionInitialPage ||
-        (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined));
+function SettingsContentInnerMobile({ initialSearch, selection, menu, activePage, setSearch, onPageChange, children, }) {
     const searchInputRef = React.useRef(null);
+    return (React.createElement(uikit.TabProvider, { value: activePage, onUpdate: onPageChange },
+        React.createElement(React.Fragment, null,
+            React.createElement(SettingsSearch.SettingsSearch, { inputRef: searchInputRef, className: b.b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
+            React.createElement(SettingsMenuMobile.SettingsMenuMobile, { items: menu, className: b.b('tabs') })),
+        activePage ? React.createElement(uikit.TabPanel, { value: activePage }, children) : children));
+}
+function SettingsContentInnerDesktop({ title, selection, menu, activePage, filterPlaceholder, initialSearch, search, setSearch, onPageChange, children, }) {
     const menuRef = React.useRef(null);
-    const isMobile = view === 'mobile';
+    const searchInputRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
         (_a = menuRef.current) === null || _a === undefined ? undefined : _a.clearFocus();
@@ -52,22 +51,54 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
             window.removeEventListener('click', handler);
         };
     }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: b.b('menu'), onClick: () => {
+                if (searchInputRef.current) {
+                    searchInputRef.current.focus();
+                }
+            }, onKeyDown: (event) => {
+                if (menuRef.current) {
+                    if (menuRef.current.handleKeyDown(event)) {
+                        event.preventDefault();
+                    }
+                }
+            } },
+            React.createElement(Title.Title, null, title),
+            React.createElement(SettingsSearch.SettingsSearch, { inputRef: searchInputRef, className: b.b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
+            React.createElement(SettingsMenu.SettingsMenu, { ref: menuRef, items: menu, onChange: onPageChange, activeItemId: activePage })),
+        children));
+}
+function SettingsContent({ initialPage, initialSearch, selection, children, renderNotFound, title = index.default('label_title'), filterPlaceholder = index.default('label_filter-placeholder'), emptyPlaceholder = index.default('label_empty-placeholder'), view, onPageChange, onClose, }) {
+    var _a;
+    const [search, setSearch] = React.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
+    const { menu, pages } = collectSettings.getSettingsFromChildren(children, search);
+    const selected = context.useSettingsSelectionProviderValue(pages, selection);
+    const pageKeys = Object.keys(pages);
+    const selectionInitialPage = selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;
+    const [selectedPage, setCurrentPage] = React.useState(selectionInitialPage ||
+        (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined));
+    const isMobile = view === 'mobile';
     let activePage = selectedPage;
     if (!activePage || !pages[activePage] || pages[activePage].hidden) {
         activePage = (_a = Object.values(pages).find(({ hidden }) => !hidden)) === null || _a === undefined ? undefined : _a.id;
     }
-    const handlePageChange = (newPage) => {
+    const { isAllSearchPage, hasAllSearchResultsPage, allSearchResultsId } = AllResultsPage.useAllResultsPage({
+        pages,
+    });
+    const handlePageChange = React.useCallback((newPage) => {
         setCurrentPage((prevPage) => {
-            if (prevPage !== newPage && !isFakePage(newPage)) {
+            if (prevPage !== newPage && !isAllSearchPage(newPage)) {
                 onPageChange === null || onPageChange === undefined ? undefined : onPageChange(newPage);
             }
             return newPage;
         });
-    };
-    const { isAllSearchPage } = AllResultsPage.useAllResultsPage({ pages, handlePageChange });
-    function isFakePage(page) {
-        return isAllSearchPage(page);
-    }
+    }, [isAllSearchPage, onPageChange]);
+    React.useEffect(() => {
+        if (hasAllSearchResultsPage) {
+            handlePageChange(allSearchResultsId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasAllSearchResultsPage]);
     React.useEffect(() => {
         if (activePage !== selectedPage) {
             handlePageChange(activePage);
@@ -84,26 +115,42 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
             selected.selectedRef.current.scrollIntoView();
         }
     }, [selected.selectedRef]);
+    const tabContent = React.useMemo(() => (React.createElement("div", { className: b.b('page') },
+        React.createElement(SettingsPageComponent.SettingsPageComponent, { menu: menu, pages: pages, selected: selected, search: search, isMobile: isMobile, page: activePage, emptyPlaceholder: emptyPlaceholder, renderNotFound: renderNotFound, onClose: onClose }))), [
+        activePage,
+        emptyPlaceholder,
+        isMobile,
+        menu,
+        onClose,
+        pages,
+        renderNotFound,
+        search,
+        selected,
+    ]);
+    const contentInnerProps = React.useMemo(() => ({
+        menu,
+        onPageChange: handlePageChange,
+        selected,
+        setSearch,
+        activePage,
+        filterPlaceholder,
+        selection,
+        initialSearch,
+        title,
+        search,
+    }), [
+        activePage,
+        filterPlaceholder,
+        handlePageChange,
+        initialSearch,
+        menu,
+        search,
+        selected,
+        selection,
+        title,
+    ]);
     return (React.createElement(context.SettingsSelectionContextProvider, { value: selected },
-        React.createElement("div", { className: b.b({ view }) },
-            isMobile ? (React.createElement(React.Fragment, null,
-                React.createElement(SettingsSearch.SettingsSearch, { inputRef: searchInputRef, className: b.b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
-                React.createElement(SettingsMenuMobile.SettingsMenuMobile, { items: menu, onChange: handlePageChange, activeItemId: activePage, className: b.b('tabs') }))) : (React.createElement("div", { className: b.b('menu'), onClick: () => {
-                    if (searchInputRef.current) {
-                        searchInputRef.current.focus();
-                    }
-                }, onKeyDown: (event) => {
-                    if (menuRef.current) {
-                        if (menuRef.current.handleKeyDown(event)) {
-                            event.preventDefault();
-                        }
-                    }
-                } },
-                React.createElement(Title.Title, null, title),
-                React.createElement(SettingsSearch.SettingsSearch, { inputRef: searchInputRef, className: b.b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, placeholder: filterPlaceholder, autoFocus: true }),
-                React.createElement(SettingsMenu.SettingsMenu, { ref: menuRef, items: menu, onChange: handlePageChange, activeItemId: activePage }))),
-            React.createElement("div", { className: b.b('page') },
-                React.createElement(SettingsPageComponent.SettingsPageComponent, { menu: menu, pages: pages, selected: selected, search: search, isMobile: isMobile, page: activePage, emptyPlaceholder: emptyPlaceholder, renderNotFound: renderNotFound, onClose: onClose })))));
+        React.createElement("div", { className: b.b({ view }) }, isMobile ? (React.createElement(SettingsContentInnerMobile, Object.assign({}, contentInnerProps), tabContent)) : (React.createElement(SettingsContentInnerDesktop, Object.assign({}, contentInnerProps), tabContent)))));
 }
 Settings.Group = function SettingsGroup({ children }) {
     return React.createElement(React.Fragment, null, children);
@@ -115,7 +162,7 @@ Settings.Section = function SettingsSection({ children }) {
     return React.createElement(React.Fragment, null, children);
 };
 Settings.Item = function SettingsItem(setting) {
-    const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity.default, mode, description, } = setting;
+    const { id, labelId, highlightedTitle, children, align = 'center', withBadge, renderTitleComponent = identity, mode, description, } = setting;
     const selected = context.useSettingsSelectionContext();
     const isSettingSelected = selected.setting && selected.setting.id === id;
     const { renderRightAdornment, showRightAdornmentOnHover } = useSettingsContext.useSettingsContext();

package/build/cjs/components/Settings/Settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"Settings.js","sources":["../../../../../src/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex, Loader} from '@gravity-ui/uikit';\nimport identity from 'lodash/identity';\n\nimport {Title} from '../Title';\n\nimport {\n    SettingsSelectionContextProvider,\n    useSettingsSelectionContext,\n    useSettingsSelectionProviderValue,\n} from './Selection/context';\nimport {SettingsContext} from './SettingsContext/SettingsContext';\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';\nimport {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';\nimport {SettingsPageComponent} from './SettingsPage/SettingsPageComponent';\nimport {useAllResultsPage} from './SettingsSearch/AllResultsPage';\nimport {SettingsSearch} from './SettingsSearch/SettingsSearch';\nimport {b} from './b';\nimport {getSettingsFromChildren} from './collect-settings';\nimport i18n from './i18n';\nimport type {\n    SettingsContentProps,\n    SettingsGroupProps,\n    SettingsItemProps,\n    SettingsPageProps,\n    SettingsProps,\n    SettingsSectionProps,\n} from './types';\n\nexport function Settings({\n    loading,\n    renderLoading,\n    children,\n    view = 'normal',\n    renderRightAdornment,\n    renderSectionRightAdornment,\n    showRightAdornmentOnHover = true,\n    ...props\n}: SettingsProps) {\n    if (loading) {\n        return (\n            <div className={b({loading: true, view})}>\n                {typeof renderLoading === 'function' ? (\n                    renderLoading()\n                ) : (\n                    <Loader className={b('loader')} size=\"m\" />\n                )}\n            </div>\n        );\n    }\n\n    return (\n        <SettingsContext.Provider\n            value={{renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover}}\n        >\n            <SettingsContent view={view} {...props}>\n                {children}\n            </SettingsContent>\n        </SettingsContext.Provider>\n    );\n}\n\nfunction SettingsContent({\n    initialPage,\n    initialSearch,\n    selection,\n    children,\n    renderNotFound,\n    title = i18n('label_title'),\n    filterPlaceholder = i18n('label_filter-placeholder'),\n    emptyPlaceholder = i18n('label_empty-placeholder'),\n    view,\n    onPageChange,\n    onClose,\n}: SettingsContentProps) {\n    const [search, setSearch] = React.useState(initialSearch ?? '');\n    const {menu, pages} = getSettingsFromChildren(children, search);\n\n    const selected = useSettingsSelectionProviderValue(pages, selection);\n\n    const pageKeys = Object.keys(pages);\n    const selectionInitialPage =\n        selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;\n    const [selectedPage, setCurrentPage] = React.useState<string | undefined>(\n        selectionInitialPage ||\n            (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined),\n    );\n    const searchInputRef = React.useRef<HTMLInputElement>(null);\n    const menuRef = React.useRef<SettingsMenuInstance>(null);\n    const isMobile = view === 'mobile';\n\n    React.useEffect(() => {\n        menuRef.current?.clearFocus();\n    }, [search]);\n\n    React.useEffect(() => {\n        const handler = () => {\n            menuRef.current?.clearFocus();\n        };\n        window.addEventListener('click', handler);\n        return () => {\n            window.removeEventListener('click', handler);\n        };\n    }, []);\n\n    let activePage = selectedPage;\n\n    if (!activePage || !pages[activePage] || pages[activePage].hidden) {\n        activePage = Object.values(pages).find(({hidden}) => !hidden)?.id;\n    }\n\n    const handlePageChange = (newPage: string | undefined) => {\n        setCurrentPage((prevPage) => {\n            if (prevPage !== newPage && !isFakePage(newPage)) {\n                onPageChange?.(newPage);\n            }\n            return newPage;\n        });\n    };\n\n    const {isAllSearchPage} = useAllResultsPage({pages, handlePageChange});\n\n    function isFakePage(page: string | undefined) {\n        return isAllSearchPage(page);\n    }\n\n    React.useEffect(() => {\n        if (activePage !== selectedPage) {\n            handlePageChange(activePage);\n        }\n    });\n\n    React.useEffect(() => {\n        if (!selectionInitialPage) return;\n        setCurrentPage(selectionInitialPage);\n    }, [selectionInitialPage]);\n\n    React.useEffect(() => {\n        if (selected.selectedRef?.current) {\n            selected.selectedRef.current.scrollIntoView();\n        }\n    }, [selected.selectedRef]);\n\n    return (\n        <SettingsSelectionContextProvider value={selected}>\n            <div className={b({view})}>\n                {isMobile ? (\n                    <React.Fragment>\n                        <SettingsSearch\n                            inputRef={searchInputRef}\n                            className={b('search')}\n                            initialValue={initialSearch}\n                            selection={selection}\n                            onChange={setSearch}\n                            autoFocus={false}\n                            inputSize={'xl'}\n                        />\n                        <SettingsMenuMobile\n                            items={menu}\n                            onChange={handlePageChange}\n                            activeItemId={activePage}\n                            className={b('tabs')}\n                        />\n                    </React.Fragment>\n                ) : (\n                    <div\n                        className={b('menu')}\n                        onClick={() => {\n                            if (searchInputRef.current) {\n                                searchInputRef.current.focus();\n                            }\n                        }}\n                        onKeyDown={(event) => {\n                            if (menuRef.current) {\n                                if (menuRef.current.handleKeyDown(event)) {\n                                    event.preventDefault();\n                                }\n                            }\n                        }}\n                    >\n                        <Title>{title}</Title>\n                        <SettingsSearch\n                            inputRef={searchInputRef}\n                            className={b('search')}\n                            initialValue={initialSearch}\n                            selection={selection}\n                            onChange={setSearch}\n                            placeholder={filterPlaceholder}\n                            autoFocus\n                        />\n                        <SettingsMenu\n                            ref={menuRef}\n                            items={menu}\n                            onChange={handlePageChange}\n                            activeItemId={activePage}\n                        />\n                    </div>\n                )}\n                <div className={b('page')}>\n                    <SettingsPageComponent\n                        menu={menu}\n                        pages={pages}\n                        selected={selected}\n                        search={search}\n                        isMobile={isMobile}\n                        page={activePage}\n                        emptyPlaceholder={emptyPlaceholder}\n                        renderNotFound={renderNotFound}\n                        onClose={onClose}\n                    />\n                </div>\n            </div>\n        </SettingsSelectionContextProvider>\n    );\n}\n\nSettings.Group = function SettingsGroup({children}: SettingsGroupProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Page = function SettingsPage({children}: SettingsPageProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Section = function SettingsSection({children}: SettingsSectionProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Item = function SettingsItem(setting: SettingsItemProps) {\n    const {\n        id,\n        labelId,\n        highlightedTitle,\n        children,\n        align = 'center',\n        withBadge,\n        renderTitleComponent = identity,\n        mode,\n        description,\n    } = setting;\n\n    const selected = useSettingsSelectionContext();\n    const isSettingSelected = selected.setting && selected.setting.id === id;\n\n    const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n    const titleComponent = renderTitleComponent(highlightedTitle);\n    const titleNode = <span className={b('item-title', {badge: withBadge})}>{titleComponent}</span>;\n\n    const showTitle = titleComponent !== null;\n\n    return (\n        <div\n            className={b('item', {\n                align,\n                mode,\n                selected: isSettingSelected,\n                title: showTitle ? 'show' : 'hide',\n            })}\n            ref={isSettingSelected ? selected.selectedRef : undefined}\n        >\n            {showTitle ? (\n                <label className={b('item-heading')} id={labelId}>\n                    {renderRightAdornment ? (\n                        <Flex className={b('item-title-wrapper')} gap={3}>\n                            {titleNode}\n                            <div\n                                className={b('item-right-adornment', {\n                                    hidden: showRightAdornmentOnHover,\n                                })}\n                            >\n                                {renderRightAdornment(setting)}\n                            </div>\n                        </Flex>\n                    ) : (\n                        titleNode\n                    )}\n                    {description ? (\n                        <span className={b('item-description')}>{description}</span>\n                    ) : null}\n                </label>\n            ) : null}\n            <div className={b('item-content')}>{children}</div>\n        </div>\n    );\n};\n"],"names":["__rest","b","Loader","SettingsContext","i18n","getSettingsFromChildren","useSettingsSelectionProviderValue","useAllResultsPage","SettingsSelectionContextProvider","SettingsSearch","SettingsMenuMobile","Title","SettingsMenu","SettingsPageComponent","identity","useSettingsSelectionContext","useSettingsContext","Flex"],"mappings":"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"}
+{"version":3,"file":"Settings.js","sources":["../../../../../src/components/Settings/Settings.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react';\n\nimport {Flex, Loader, TabPanel, TabProvider} from '@gravity-ui/uikit';\nimport identity from 'lodash/identity';\n\nimport {Title} from '../Title';\n\nimport {\n    SettingsSelectionContextProvider,\n    SettingsSelectionProviderContextValue,\n    useSettingsSelectionContext,\n    useSettingsSelectionProviderValue,\n} from './Selection/context';\nimport {SettingsContext} from './SettingsContext/SettingsContext';\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';\nimport {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';\nimport {SettingsPageComponent} from './SettingsPage/SettingsPageComponent';\nimport {useAllResultsPage} from './SettingsSearch/AllResultsPage';\nimport {SettingsSearch} from './SettingsSearch/SettingsSearch';\nimport {b} from './b';\nimport {SettingsMenu as SettingsMenuType, getSettingsFromChildren} from './collect-settings';\nimport i18n from './i18n';\nimport type {\n    SettingsContentProps,\n    SettingsGroupProps,\n    SettingsItemProps,\n    SettingsPageProps,\n    SettingsProps,\n    SettingsSectionProps,\n} from './types';\n\nexport function Settings({\n    loading,\n    renderLoading,\n    children,\n    view = 'normal',\n    renderRightAdornment,\n    renderSectionRightAdornment,\n    showRightAdornmentOnHover = true,\n    ...props\n}: SettingsProps) {\n    if (loading) {\n        return (\n            <div className={b({loading: true, view})}>\n                {typeof renderLoading === 'function' ? (\n                    renderLoading()\n                ) : (\n                    <Loader className={b('loader')} size=\"m\" />\n                )}\n            </div>\n        );\n    }\n\n    return (\n        <SettingsContext.Provider\n            value={{renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover}}\n        >\n            <SettingsContent view={view} {...props}>\n                {children}\n            </SettingsContent>\n        </SettingsContext.Provider>\n    );\n}\n\ninterface SettingsContentInnerProps\n    extends PropsWithChildren,\n        Pick<SettingsContentProps, 'initialSearch' | 'selection' | 'title' | 'filterPlaceholder'> {\n    initialSearch?: string;\n    selected: SettingsSelectionProviderContextValue;\n    activePage?: string;\n    menu: SettingsMenuType;\n    search: string;\n    setSearch: (newValue: string) => void;\n    onPageChange: (newPage: string | undefined) => void;\n}\n\nfunction SettingsContentInnerMobile({\n    initialSearch,\n    selection,\n    menu,\n    activePage,\n    setSearch,\n    onPageChange,\n    children,\n}: SettingsContentInnerProps) {\n    const searchInputRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <TabProvider value={activePage} onUpdate={onPageChange}>\n            <React.Fragment>\n                <SettingsSearch\n                    inputRef={searchInputRef}\n                    className={b('search')}\n                    initialValue={initialSearch}\n                    selection={selection}\n                    onChange={setSearch}\n                    autoFocus={false}\n                    inputSize={'xl'}\n                />\n                <SettingsMenuMobile items={menu} className={b('tabs')} />\n            </React.Fragment>\n            {activePage ? <TabPanel value={activePage}>{children}</TabPanel> : children}\n        </TabProvider>\n    );\n}\n\nfunction SettingsContentInnerDesktop({\n    title,\n    selection,\n    menu,\n    activePage,\n    filterPlaceholder,\n    initialSearch,\n    search,\n    setSearch,\n    onPageChange,\n    children,\n}: SettingsContentInnerProps) {\n    const menuRef = React.useRef<SettingsMenuInstance>(null);\n    const searchInputRef = React.useRef<HTMLInputElement>(null);\n\n    React.useEffect(() => {\n        menuRef.current?.clearFocus();\n    }, [search]);\n\n    React.useEffect(() => {\n        const handler = () => {\n            menuRef.current?.clearFocus();\n        };\n        window.addEventListener('click', handler);\n        return () => {\n            window.removeEventListener('click', handler);\n        };\n    }, []);\n\n    return (\n        <React.Fragment>\n            <div\n                className={b('menu')}\n                onClick={() => {\n                    if (searchInputRef.current) {\n                        searchInputRef.current.focus();\n                    }\n                }}\n                onKeyDown={(event) => {\n                    if (menuRef.current) {\n                        if (menuRef.current.handleKeyDown(event)) {\n                            event.preventDefault();\n                        }\n                    }\n                }}\n            >\n                <Title>{title}</Title>\n                <SettingsSearch\n                    inputRef={searchInputRef}\n                    className={b('search')}\n                    initialValue={initialSearch}\n                    selection={selection}\n                    onChange={setSearch}\n                    placeholder={filterPlaceholder}\n                    autoFocus\n                />\n                <SettingsMenu\n                    ref={menuRef}\n                    items={menu}\n                    onChange={onPageChange}\n                    activeItemId={activePage}\n                />\n            </div>\n            {children}\n        </React.Fragment>\n    );\n}\n\nfunction SettingsContent({\n    initialPage,\n    initialSearch,\n    selection,\n    children,\n    renderNotFound,\n    title = i18n('label_title'),\n    filterPlaceholder = i18n('label_filter-placeholder'),\n    emptyPlaceholder = i18n('label_empty-placeholder'),\n    view,\n    onPageChange,\n    onClose,\n}: SettingsContentProps) {\n    const [search, setSearch] = React.useState(initialSearch ?? '');\n    const {menu, pages} = getSettingsFromChildren(children, search);\n\n    const selected = useSettingsSelectionProviderValue(pages, selection);\n\n    const pageKeys = Object.keys(pages);\n    const selectionInitialPage =\n        selected.page && pageKeys.includes(selected.page.id) ? selected.page.id : undefined;\n    const [selectedPage, setCurrentPage] = React.useState<string | undefined>(\n        selectionInitialPage ||\n            (initialPage && pageKeys.includes(initialPage) ? initialPage : undefined),\n    );\n    const isMobile = view === 'mobile';\n\n    let activePage = selectedPage;\n\n    if (!activePage || !pages[activePage] || pages[activePage].hidden) {\n        activePage = Object.values(pages).find(({hidden}) => !hidden)?.id;\n    }\n\n    const {isAllSearchPage, hasAllSearchResultsPage, allSearchResultsId} = useAllResultsPage({\n        pages,\n    });\n\n    const handlePageChange = React.useCallback(\n        (newPage: string | undefined) => {\n            setCurrentPage((prevPage) => {\n                if (prevPage !== newPage && !isAllSearchPage(newPage)) {\n                    onPageChange?.(newPage);\n                }\n                return newPage;\n            });\n        },\n        [isAllSearchPage, onPageChange],\n    );\n\n    React.useEffect(() => {\n        if (hasAllSearchResultsPage) {\n            handlePageChange(allSearchResultsId);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [hasAllSearchResultsPage]);\n\n    React.useEffect(() => {\n        if (activePage !== selectedPage) {\n            handlePageChange(activePage);\n        }\n    });\n\n    React.useEffect(() => {\n        if (!selectionInitialPage) return;\n        setCurrentPage(selectionInitialPage);\n    }, [selectionInitialPage]);\n\n    React.useEffect(() => {\n        if (selected.selectedRef?.current) {\n            selected.selectedRef.current.scrollIntoView();\n        }\n    }, [selected.selectedRef]);\n\n    const tabContent = React.useMemo(\n        () => (\n            <div className={b('page')}>\n                <SettingsPageComponent\n                    menu={menu}\n                    pages={pages}\n                    selected={selected}\n                    search={search}\n                    isMobile={isMobile}\n                    page={activePage}\n                    emptyPlaceholder={emptyPlaceholder}\n                    renderNotFound={renderNotFound}\n                    onClose={onClose}\n                />\n            </div>\n        ),\n        [\n            activePage,\n            emptyPlaceholder,\n            isMobile,\n            menu,\n            onClose,\n            pages,\n            renderNotFound,\n            search,\n            selected,\n        ],\n    );\n\n    const contentInnerProps = React.useMemo<SettingsContentInnerProps>(\n        () => ({\n            menu,\n            onPageChange: handlePageChange,\n            selected,\n            setSearch,\n            activePage,\n            filterPlaceholder,\n            selection,\n            initialSearch,\n            title,\n            search,\n        }),\n        [\n            activePage,\n            filterPlaceholder,\n            handlePageChange,\n            initialSearch,\n            menu,\n            search,\n            selected,\n            selection,\n            title,\n        ],\n    );\n\n    return (\n        <SettingsSelectionContextProvider value={selected}>\n            <div className={b({view})}>\n                {isMobile ? (\n                    <SettingsContentInnerMobile {...contentInnerProps}>\n                        {tabContent}\n                    </SettingsContentInnerMobile>\n                ) : (\n                    <SettingsContentInnerDesktop {...contentInnerProps}>\n                        {tabContent}\n                    </SettingsContentInnerDesktop>\n                )}\n            </div>\n        </SettingsSelectionContextProvider>\n    );\n}\n\nSettings.Group = function SettingsGroup({children}: SettingsGroupProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Page = function SettingsPage({children}: SettingsPageProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Section = function SettingsSection({children}: SettingsSectionProps) {\n    return <React.Fragment>{children}</React.Fragment>;\n};\n\nSettings.Item = function SettingsItem(setting: SettingsItemProps) {\n    const {\n        id,\n        labelId,\n        highlightedTitle,\n        children,\n        align = 'center',\n        withBadge,\n        renderTitleComponent = identity,\n        mode,\n        description,\n    } = setting;\n\n    const selected = useSettingsSelectionContext();\n    const isSettingSelected = selected.setting && selected.setting.id === id;\n\n    const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n    const titleComponent = renderTitleComponent(highlightedTitle);\n    const titleNode = <span className={b('item-title', {badge: withBadge})}>{titleComponent}</span>;\n\n    const showTitle = titleComponent !== null;\n\n    return (\n        <div\n            className={b('item', {\n                align,\n                mode,\n                selected: isSettingSelected,\n                title: showTitle ? 'show' : 'hide',\n            })}\n            ref={isSettingSelected ? selected.selectedRef : undefined}\n        >\n            {showTitle ? (\n                <label className={b('item-heading')} id={labelId}>\n                    {renderRightAdornment ? (\n                        <Flex className={b('item-title-wrapper')} gap={3}>\n                            {titleNode}\n                            <div\n                                className={b('item-right-adornment', {\n                                    hidden: showRightAdornmentOnHover,\n                                })}\n                            >\n                                {renderRightAdornment(setting)}\n                            </div>\n                        </Flex>\n                    ) : (\n                        titleNode\n                    )}\n                    {description ? (\n                        <span className={b('item-description')}>{description}</span>\n                    ) : null}\n                </label>\n            ) : null}\n            <div className={b('item-content')}>{children}</div>\n        </div>\n    );\n};\n"],"names":["__rest","b","Loader","SettingsContext","TabProvider","SettingsSearch","SettingsMenuMobile","TabPanel","Title","SettingsMenu","i18n","getSettingsFromChildren","useSettingsSelectionProviderValue","useAllResultsPage","SettingsPageComponent","SettingsSelectionContextProvider","useSettingsSelectionContext","useSettingsContext","Flex"],"mappings":"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"}

package/build/cjs/components/Settings/SettingsMenu/SettingsMenu.js

@@ -55,7 +55,7 @@ function SettingsMenu({ items, onChange, activeItemId }, ref) {
     })));
 });
 function renderMenuItem(item, onChange, activeItemId, focusItemId) {
-    return (React.createElement("span", { key: item.title, className: b('item', {
+    return (React.createElement("span", Object.assign({ key: item.title }, item.menuItemAriaProps, { className: b('item', {
             selected: activeItemId === item.id,
             disabled: item.disabled,
             focused: focusItemId === item.id,
@@ -64,7 +64,7 @@ function renderMenuItem(item, onChange, activeItemId, focusItemId) {
             if (!item.disabled) {
                 onChange(item.id);
             }
-        }, "data-id": item.id },
+        }, "data-id": item.id }),
         item.icon ? React.createElement(uikit.Icon, Object.assign({ size: 16 }, item.icon, { className: b('item-icon') })) : undefined,
         React.createElement("span", null, item.title)));
 }

package/build/cjs/components/Settings/SettingsMenu/SettingsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsMenu.js","sources":["../../../../../../src/components/Settings/SettingsMenu/SettingsMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {useCurrent, useStableCallback} from '../helpers';\nimport {Item, SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenu.module.scss';\n\nconst b = createBlock('settings-menu', styles);\n\nexport interface SettingsMenuInstance {\n    handleKeyDown(event: React.KeyboardEvent): boolean;\n    clearFocus(): void;\n}\n\nexport const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(\n    // eslint-disable-next-line prefer-arrow-callback\n    function SettingsMenu({items, onChange, activeItemId}, ref) {\n        const [focusItemId, setFocusId] = React.useState<string>();\n        const [scrolled, setScrolled] = React.useState(false);\n        const containerRef = React.useRef<HTMLDivElement>(null);\n        const handleChange = useStableCallback(onChange);\n        const getFocused = useCurrent(focusItemId);\n\n        const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {\n            setScrolled(event.currentTarget.scrollTop > 0);\n        }, []);\n\n        React.useImperativeHandle(\n            ref,\n            () => ({\n                handleKeyDown(event) {\n                    if (!containerRef.current) {\n                        return false;\n                    }\n                    const focused = getFocused();\n                    if (focused && event.key === 'Enter') {\n                        handleChange(focused);\n                        return true;\n                    } else if (event.key === 'ArrowDown') {\n                        setFocusId(focusNext(containerRef.current, focused, 1));\n                        return true;\n                    } else if (event.key === 'ArrowUp') {\n                        setFocusId(focusNext(containerRef.current, focused, -1));\n                        return true;\n                    }\n                    return false;\n                },\n                clearFocus() {\n                    setFocusId(undefined);\n                },\n            }),\n            [getFocused, handleChange],\n        );\n\n        return (\n            <div ref={containerRef} className={b({scrolled})} onScroll={handleScroll}>\n                {items.map((firstLevelItem) => {\n                    if ('groupTitle' in firstLevelItem) {\n                        return (\n                            <div key={firstLevelItem.groupTitle} className={b('group')}>\n                                <span className={b('group-heading')}>\n                                    {firstLevelItem.groupTitle}\n                                </span>\n                                {firstLevelItem.items.map((item) => {\n                                    return renderMenuItem(\n                                        item,\n                                        onChange,\n                                        activeItemId,\n                                        focusItemId,\n                                    );\n                                })}\n                            </div>\n                        );\n                    }\n                    return renderMenuItem(firstLevelItem, onChange, activeItemId, focusItemId);\n                })}\n            </div>\n        );\n    },\n);\n\nfunction renderMenuItem(\n    item: Item,\n    onChange: (id: string) => void,\n    activeItemId: string | undefined,\n    focusItemId: string | undefined,\n) {\n    return (\n        <span\n            key={item.title}\n            className={b('item', {\n                selected: activeItemId === item.id,\n                disabled: item.disabled,\n                focused: focusItemId === item.id,\n                badge: item.withBadge,\n            })}\n            onClick={() => {\n                if (!item.disabled) {\n                    onChange(item.id);\n                }\n            }}\n            data-id={item.id}\n        >\n            {item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined}\n            <span>{item.title}</span>\n        </span>\n    );\n}\n\nfunction focusNext(container: HTMLElement, focused: string | undefined, direction: number) {\n    const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);\n    if (elements.length === 0) {\n        return undefined;\n    }\n\n    let currentIndex = direction > 0 ? -1 : 0;\n    if (focused) {\n        currentIndex = Array.prototype.findIndex.call(\n            elements,\n            (element) => element.getAttribute('data-id') === focused,\n        );\n    }\n\n    currentIndex = (elements.length + currentIndex + direction) % elements.length;\n    return elements[currentIndex].getAttribute('data-id') ?? undefined;\n}\n"],"names":["createBlock","styles","useStableCallback","useCurrent","Icon"],"mappings":"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"}
+{"version":3,"file":"SettingsMenu.js","sources":["../../../../../../src/components/Settings/SettingsMenu/SettingsMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {useCurrent, useStableCallback} from '../helpers';\nimport {Item, SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenu.module.scss';\n\nconst b = createBlock('settings-menu', styles);\n\nexport interface SettingsMenuInstance {\n    handleKeyDown(event: React.KeyboardEvent): boolean;\n    clearFocus(): void;\n}\n\nexport const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(\n    // eslint-disable-next-line prefer-arrow-callback\n    function SettingsMenu({items, onChange, activeItemId}, ref) {\n        const [focusItemId, setFocusId] = React.useState<string>();\n        const [scrolled, setScrolled] = React.useState(false);\n        const containerRef = React.useRef<HTMLDivElement>(null);\n        const handleChange = useStableCallback(onChange);\n        const getFocused = useCurrent(focusItemId);\n\n        const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {\n            setScrolled(event.currentTarget.scrollTop > 0);\n        }, []);\n\n        React.useImperativeHandle(\n            ref,\n            () => ({\n                handleKeyDown(event) {\n                    if (!containerRef.current) {\n                        return false;\n                    }\n                    const focused = getFocused();\n                    if (focused && event.key === 'Enter') {\n                        handleChange(focused);\n                        return true;\n                    } else if (event.key === 'ArrowDown') {\n                        setFocusId(focusNext(containerRef.current, focused, 1));\n                        return true;\n                    } else if (event.key === 'ArrowUp') {\n                        setFocusId(focusNext(containerRef.current, focused, -1));\n                        return true;\n                    }\n                    return false;\n                },\n                clearFocus() {\n                    setFocusId(undefined);\n                },\n            }),\n            [getFocused, handleChange],\n        );\n\n        return (\n            <div ref={containerRef} className={b({scrolled})} onScroll={handleScroll}>\n                {items.map((firstLevelItem) => {\n                    if ('groupTitle' in firstLevelItem) {\n                        return (\n                            <div key={firstLevelItem.groupTitle} className={b('group')}>\n                                <span className={b('group-heading')}>\n                                    {firstLevelItem.groupTitle}\n                                </span>\n                                {firstLevelItem.items.map((item) => {\n                                    return renderMenuItem(\n                                        item,\n                                        onChange,\n                                        activeItemId,\n                                        focusItemId,\n                                    );\n                                })}\n                            </div>\n                        );\n                    }\n                    return renderMenuItem(firstLevelItem, onChange, activeItemId, focusItemId);\n                })}\n            </div>\n        );\n    },\n);\n\nfunction renderMenuItem(\n    item: Item,\n    onChange: (id: string) => void,\n    activeItemId: string | undefined,\n    focusItemId: string | undefined,\n) {\n    return (\n        <span\n            key={item.title}\n            {...item.menuItemAriaProps}\n            className={b('item', {\n                selected: activeItemId === item.id,\n                disabled: item.disabled,\n                focused: focusItemId === item.id,\n                badge: item.withBadge,\n            })}\n            onClick={() => {\n                if (!item.disabled) {\n                    onChange(item.id);\n                }\n            }}\n            data-id={item.id}\n        >\n            {item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined}\n            <span>{item.title}</span>\n        </span>\n    );\n}\n\nfunction focusNext(container: HTMLElement, focused: string | undefined, direction: number) {\n    const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);\n    if (elements.length === 0) {\n        return undefined;\n    }\n\n    let currentIndex = direction > 0 ? -1 : 0;\n    if (focused) {\n        currentIndex = Array.prototype.findIndex.call(\n            elements,\n            (element) => element.getAttribute('data-id') === focused,\n        );\n    }\n\n    currentIndex = (elements.length + currentIndex + direction) % elements.length;\n    return elements[currentIndex].getAttribute('data-id') ?? undefined;\n}\n"],"names":["createBlock","styles","useStableCallback","useCurrent","Icon"],"mappings":"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"}

package/build/cjs/components/Settings/SettingsMenuMobile/SettingsMenuMobile.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { SettingsMenuProps } from '../types';
-export declare const SettingsMenuMobile: ({ items, onChange, activeItemId, className, }: SettingsMenuProps) => React.JSX.Element;
+import { SettingsMenuMobileProps } from '../types';
+export declare const SettingsMenuMobile: ({ items, className }: SettingsMenuMobileProps) => React.JSX.Element;

package/build/cjs/components/Settings/SettingsMenuMobile/SettingsMenuMobile.js

@@ -2,27 +2,32 @@ import './SettingsMenuMobile.css';
 'use strict';
 
 var React = require('react');
-var legacy = require('@gravity-ui/uikit/legacy');
+var uikit = require('@gravity-ui/uikit');
 var cn = require('../../utils/cn.js');
 var SettingsMenuMobile_module = require('./SettingsMenuMobile.module.scss.js');
 
 const b = cn.createBlock('settings-menu-mobile', SettingsMenuMobile_module.default);
-const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
+const SettingsMenuMobile = ({ items, className }) => {
     const ref = React.useRef(null);
     const tabItems = React.useMemo(() => {
         const result = [];
         items.forEach((firstLevelItem) => {
             if ('groupTitle' in firstLevelItem) {
                 result.push(...firstLevelItem.items.map(({ id, title, disabled, withBadge }) => ({
-                    id,
-                    title,
+                    value: id,
+                    children: title,
                     disabled,
                     className: b('item', { badge: withBadge }),
                 })));
             }
             else {
                 const { id, title, disabled, withBadge } = firstLevelItem;
-                result.push({ id, title, disabled, className: b('item', { badge: withBadge }) });
+                result.push({
+                    value: id,
+                    children: title,
+                    disabled,
+                    className: b('item', { badge: withBadge }),
+                });
             }
         });
         return result;
@@ -31,7 +36,7 @@ const SettingsMenuMobile = ({ items, onChange, activeItemId, className, }) => {
         e.stopPropagation();
     };
     return (React.createElement("div", { ref: ref, onTouchMove: handleTouchMove },
-        React.createElement(legacy.Tabs, { items: tabItems, className: b(null, className), size: "l", activeTab: activeItemId, onSelectTab: onChange })));
+        React.createElement(uikit.TabList, { size: "l", className: b(null, className) }, tabItems.map((item) => (React.createElement(uikit.Tab, Object.assign({ key: item.value }, item)))))));
 };
 
 exports.SettingsMenuMobile = SettingsMenuMobile;

package/build/cjs/components/Settings/SettingsMenuMobile/SettingsMenuMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsMenuMobile.js","sources":["../../../../../../src/components/Settings/SettingsMenuMobile/SettingsMenuMobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n    Tabs as LegacyTabs,\n    type TabsItemProps as LegacyTabsItemProps,\n} from '@gravity-ui/uikit/legacy';\n\nimport {createBlock} from '../../utils/cn';\nimport {SettingsMenuProps} from '../types';\n\nimport styles from './SettingsMenuMobile.module.scss';\n\nconst b = createBlock('settings-menu-mobile', styles);\n\nexport const SettingsMenuMobile = ({\n    items,\n    onChange,\n    activeItemId,\n    className,\n}: SettingsMenuProps) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    const tabItems = React.useMemo(() => {\n        const result: LegacyTabsItemProps[] = [];\n\n        items.forEach((firstLevelItem) => {\n            if ('groupTitle' in firstLevelItem) {\n                result.push(\n                    ...firstLevelItem.items.map(({id, title, disabled, withBadge}) => ({\n                        id,\n                        title,\n                        disabled,\n                        className: b('item', {badge: withBadge}),\n                    })),\n                );\n            } else {\n                const {id, title, disabled, withBadge} = firstLevelItem;\n                result.push({id, title, disabled, className: b('item', {badge: withBadge})});\n            }\n        });\n        return result;\n    }, [items]);\n\n    const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n    };\n\n    return (\n        <div ref={ref} onTouchMove={handleTouchMove}>\n            <LegacyTabs\n                items={tabItems}\n                className={b(null, className)}\n                size=\"l\"\n                activeTab={activeItemId}\n                onSelectTab={onChange}\n            />\n        </div>\n    );\n};\n"],"names":["createBlock","styles","LegacyTabs"],"mappings":";;;;;;;AAYA,MAAM,CAAC,GAAGA,cAAW,CAAC,sBAAsB,EAAEC,iCAAM,CAAC;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,GACO,KAAI;IACpB,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AAE9C,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,MAAK;QAChC,MAAM,MAAM,GAA0B,EAAE;AAExC,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,cAAc,KAAI;AAC7B,YAAA,IAAI,YAAY,IAAI,cAAc,EAAE;gBAChC,MAAM,CAAC,IAAI,CACP,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM;oBAC/D,EAAE;oBACF,KAAK;oBACL,QAAQ;oBACR,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC;iBAC3C,CAAC,CAAC,CACN;;iBACE;gBACH,MAAM,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,cAAc;gBACvD,MAAM,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC,EAAC,CAAC;;AAEpF,SAAC,CAAC;AACF,QAAA,OAAO,MAAM;AACjB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,eAAe,GAAG,CAAC,CAAmC,KAAI;QAC5D,CAAC,CAAC,eAAe,EAAE;AACvB,KAAC;IAED,QACI,6BAAK,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,eAAe,EAAA;AACvC,QAAA,KAAA,CAAA,aAAA,CAACC,WAAU,EAAA,EACP,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,QAAQ,EACvB,CAAA,CACA;AAEd;;;;"}
+{"version":3,"file":"SettingsMenuMobile.js","sources":["../../../../../../src/components/Settings/SettingsMenuMobile/SettingsMenuMobile.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Tab, TabList, TabProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../utils/cn';\nimport {SettingsMenuMobileProps} from '../types';\n\nimport styles from './SettingsMenuMobile.module.scss';\n\nconst b = createBlock('settings-menu-mobile', styles);\n\nexport const SettingsMenuMobile = ({items, className}: SettingsMenuMobileProps) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    const tabItems = React.useMemo(() => {\n        const result: TabProps[] = [];\n\n        items.forEach((firstLevelItem) => {\n            if ('groupTitle' in firstLevelItem) {\n                result.push(\n                    ...firstLevelItem.items.map(({id, title, disabled, withBadge}) => ({\n                        value: id,\n                        children: title,\n                        disabled,\n                        className: b('item', {badge: withBadge}),\n                    })),\n                );\n            } else {\n                const {id, title, disabled, withBadge} = firstLevelItem;\n                result.push({\n                    value: id,\n                    children: title,\n                    disabled,\n                    className: b('item', {badge: withBadge}),\n                });\n            }\n        });\n        return result;\n    }, [items]);\n\n    const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {\n        e.stopPropagation();\n    };\n\n    return (\n        <div ref={ref} onTouchMove={handleTouchMove}>\n            <TabList size=\"l\" className={b(null, className)}>\n                {tabItems.map((item) => (\n                    <Tab key={item.value} {...item} />\n                ))}\n            </TabList>\n        </div>\n    );\n};\n"],"names":["createBlock","styles","TabList","Tab"],"mappings":";;;;;;;AASA,MAAM,CAAC,GAAGA,cAAW,CAAC,sBAAsB,EAAEC,iCAAM,CAAC;AAExC,MAAA,kBAAkB,GAAG,CAAC,EAAC,KAAK,EAAE,SAAS,EAA0B,KAAI;IAC9E,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AAE9C,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,MAAK;QAChC,MAAM,MAAM,GAAe,EAAE;AAE7B,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,cAAc,KAAI;AAC7B,YAAA,IAAI,YAAY,IAAI,cAAc,EAAE;gBAChC,MAAM,CAAC,IAAI,CACP,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM;AAC/D,oBAAA,KAAK,EAAE,EAAE;AACT,oBAAA,QAAQ,EAAE,KAAK;oBACf,QAAQ;oBACR,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC;iBAC3C,CAAC,CAAC,CACN;;iBACE;gBACH,MAAM,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,cAAc;gBACvD,MAAM,CAAC,IAAI,CAAC;AACR,oBAAA,KAAK,EAAE,EAAE;AACT,oBAAA,QAAQ,EAAE,KAAK;oBACf,QAAQ;oBACR,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC;AAC3C,iBAAA,CAAC;;AAEV,SAAC,CAAC;AACF,QAAA,OAAO,MAAM;AACjB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,MAAM,eAAe,GAAG,CAAC,CAAmC,KAAI;QAC5D,CAAC,CAAC,eAAe,EAAE;AACvB,KAAC;IAED,QACI,6BAAK,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,eAAe,EAAA;AACvC,QAAA,KAAA,CAAA,aAAA,CAACC,aAAO,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,IAC1C,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,MACf,oBAACC,SAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAA,EAAM,IAAI,CAAI,CAAA,CACrC,CAAC,CACI,CACR;AAEd;;;;"}

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

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

package/build/cjs/components/Settings/SettingsSearch/AllResultsPage.js

@@ -1,22 +1,17 @@
 'use strict';
 
-var React = require('react');
 var icons = require('@gravity-ui/icons');
-var last = require('../../../_virtual/last.js');
+var last = require('lodash/last');
 var index = require('../i18n/index.js');
 
 const allSearchResultsId = 'allSearchResults';
-function useAllResultsPage({ pages, handlePageChange, }) {
+function useAllResultsPage({ pages }) {
     const allSearchResultsPage = pages[allSearchResultsId];
     const hasAllSearchResultsPage = Boolean(allSearchResultsPage);
-    React.useEffect(() => {
-        if (hasAllSearchResultsPage) {
-            handlePageChange(allSearchResultsId);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hasAllSearchResultsPage]);
     return {
         isAllSearchPage: (page) => page === allSearchResultsId,
+        hasAllSearchResultsPage,
+        allSearchResultsId,
     };
 }
 function getSettingsDescriptionWithAllResultsPage(settingsDescription) {
@@ -47,7 +42,7 @@ function createAllResultsPage(pages, menu) {
             return page.sections.map((section) => {
                 var _a;
                 const breadcrumbs = (_a = breadcrumbsMap[page.id]) !== null && _a !== undefined ? _a : [];
-                const lastBreadcrumb = last.default(breadcrumbs);
+                const lastBreadcrumb = last(breadcrumbs);
                 const breadcrumbsTitlePart = breadcrumbs.join(' / ');
                 return Object.assign(Object.assign({}, section), { title: section.title === lastBreadcrumb
                         ? breadcrumbsTitlePart

package/build/cjs/components/Settings/SettingsSearch/AllResultsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AllResultsPage.js","sources":["../../../../../../src/components/Settings/SettingsSearch/AllResultsPage.tsx"],"sourcesContent":["import React from 'react';\n\nimport {ListUl} from '@gravity-ui/icons';\nimport last from 'lodash/last';\n\nimport type {\n    SettingsDescription,\n    SettingsMenu,\n    SettingsMenuItem,\n    SettingsPage,\n    SettingsPageSection,\n} from '../collect-settings';\nimport i18n from '../i18n';\n\nconst allSearchResultsId = 'allSearchResults';\n\nexport function useAllResultsPage({\n    pages,\n    handlePageChange,\n}: {\n    pages: SettingsDescription['pages'];\n    handlePageChange: (page: string | undefined) => void;\n}) {\n    const allSearchResultsPage = pages[allSearchResultsId];\n    const hasAllSearchResultsPage = Boolean(allSearchResultsPage);\n\n    React.useEffect(() => {\n        if (hasAllSearchResultsPage) {\n            handlePageChange(allSearchResultsId);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [hasAllSearchResultsPage]);\n\n    return {\n        isAllSearchPage: (page: string | undefined) => page === allSearchResultsId,\n    };\n}\n\nexport function getSettingsDescriptionWithAllResultsPage(\n    settingsDescription: SettingsDescription,\n): SettingsDescription {\n    const {menu, pages} = settingsDescription;\n    const menuWithoutAllResults = getMenuWithoutAllResults(menu);\n    const pagesList = Object.values(pages);\n\n    return {\n        ...settingsDescription,\n        menu: [createAllResultsMenuItem(), ...menuWithoutAllResults],\n        pages: {\n            ...pages,\n            [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults),\n        },\n    };\n}\n\nfunction getMenuWithoutAllResults(menu: SettingsMenu) {\n    return menu.filter((item) => !('id' in item) || item.id !== allSearchResultsId);\n}\n\nfunction createAllResultsPage(pages: SettingsPage[], menu: SettingsMenu): SettingsPage {\n    const breadcrumbsMap: Record<string, string[] | undefined> = {};\n\n    for (const menuItem of menu) {\n        if ('items' in menuItem) {\n            for (const pageItem of menuItem.items) {\n                breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];\n            }\n        } else {\n            breadcrumbsMap[menuItem.id] = [menuItem.title];\n        }\n    }\n\n    return {\n        id: allSearchResultsId,\n        sections: Object.values(pages)\n            .map((page) => {\n                return page.sections.map((section): SettingsPageSection => {\n                    const breadcrumbs = breadcrumbsMap[page.id] ?? [];\n                    const lastBreadcrumb = last(breadcrumbs);\n                    const breadcrumbsTitlePart = breadcrumbs.join(' / ');\n\n                    return {\n                        ...section,\n                        title:\n                            section.title === lastBreadcrumb\n                                ? breadcrumbsTitlePart\n                                : `${breadcrumbsTitlePart} / ${section.title}`,\n                    };\n                });\n            })\n            .flat(),\n    };\n}\n\nfunction createAllResultsMenuItem(): SettingsMenuItem {\n    return {\n        id: allSearchResultsId,\n        title: i18n('label_all-results'),\n        icon: {data: ListUl},\n    };\n}\n"],"names":["last","i18n","ListUl"],"mappings":"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"}
+{"version":3,"file":"AllResultsPage.js","sources":["../../../../../../src/components/Settings/SettingsSearch/AllResultsPage.tsx"],"sourcesContent":["import {ListUl} from '@gravity-ui/icons';\nimport last from 'lodash/last';\n\nimport type {\n    SettingsDescription,\n    SettingsMenu,\n    SettingsMenuItem,\n    SettingsPage,\n    SettingsPageSection,\n} from '../collect-settings';\nimport i18n from '../i18n';\n\nconst allSearchResultsId = 'allSearchResults';\n\nexport function useAllResultsPage({pages}: {pages: SettingsDescription['pages']}) {\n    const allSearchResultsPage = pages[allSearchResultsId];\n    const hasAllSearchResultsPage = Boolean(allSearchResultsPage);\n\n    return {\n        isAllSearchPage: (page: string | undefined) => page === allSearchResultsId,\n        hasAllSearchResultsPage,\n        allSearchResultsId,\n    };\n}\n\nexport function getSettingsDescriptionWithAllResultsPage(\n    settingsDescription: SettingsDescription,\n): SettingsDescription {\n    const {menu, pages} = settingsDescription;\n    const menuWithoutAllResults = getMenuWithoutAllResults(menu);\n    const pagesList = Object.values(pages);\n\n    return {\n        ...settingsDescription,\n        menu: [createAllResultsMenuItem(), ...menuWithoutAllResults],\n        pages: {\n            ...pages,\n            [allSearchResultsId]: createAllResultsPage(pagesList, menuWithoutAllResults),\n        },\n    };\n}\n\nfunction getMenuWithoutAllResults(menu: SettingsMenu) {\n    return menu.filter((item) => !('id' in item) || item.id !== allSearchResultsId);\n}\n\nfunction createAllResultsPage(pages: SettingsPage[], menu: SettingsMenu): SettingsPage {\n    const breadcrumbsMap: Record<string, string[] | undefined> = {};\n\n    for (const menuItem of menu) {\n        if ('items' in menuItem) {\n            for (const pageItem of menuItem.items) {\n                breadcrumbsMap[pageItem.id] = [menuItem.groupTitle, pageItem.title];\n            }\n        } else {\n            breadcrumbsMap[menuItem.id] = [menuItem.title];\n        }\n    }\n\n    return {\n        id: allSearchResultsId,\n        sections: Object.values(pages)\n            .map((page) => {\n                return page.sections.map((section): SettingsPageSection => {\n                    const breadcrumbs = breadcrumbsMap[page.id] ?? [];\n                    const lastBreadcrumb = last(breadcrumbs);\n                    const breadcrumbsTitlePart = breadcrumbs.join(' / ');\n\n                    return {\n                        ...section,\n                        title:\n                            section.title === lastBreadcrumb\n                                ? breadcrumbsTitlePart\n                                : `${breadcrumbsTitlePart} / ${section.title}`,\n                    };\n                });\n            })\n            .flat(),\n    };\n}\n\nfunction createAllResultsMenuItem(): SettingsMenuItem {\n    return {\n        id: allSearchResultsId,\n        title: i18n('label_all-results'),\n        icon: {data: ListUl},\n    };\n}\n"],"names":["i18n","ListUl"],"mappings":"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"}

package/build/cjs/components/Settings/SettingsSearch/SettingsSearch.js

@@ -2,15 +2,15 @@
 
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
-var debounce = require('../../../_virtual/debounce.js');
+var debounceFn = require('lodash/debounce');
 var cn = require('../../utils/cn.js');
 var helpers = require('../helpers.js');
 var index = require('../i18n/index.js');
 
 const b = cn.cn('settings-search');
-function SettingsSearch({ className, initialValue, onChange, debounce: debounce$1 = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
+function SettingsSearch({ className, initialValue, onChange, debounce = 200, inputRef, inputSize, placeholder, autoFocus = true, selection, }) {
     const [value, setValue] = React.useState(initialValue !== null && initialValue !== undefined ? initialValue : '');
-    const onChangeDebounced = debounce.default(onChange, debounce$1);
+    const onChangeDebounced = debounceFn(onChange, debounce);
     const handleUpdate = helpers.useStableCallback((updated) => {
         setValue(updated);
         onChangeDebounced(updated);

package/build/cjs/components/Settings/SettingsSearch/SettingsSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsSearch.js","sources":["../../../../../../src/components/Settings/SettingsSearch/SettingsSearch.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\n\nimport {TextInput, TextInputSize} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {cn} from '../../utils/cn';\nimport {SettingsSelection} from '../Selection/types';\nimport {useStableCallback} from '../helpers';\nimport i18n from '../i18n';\n\nconst b = cn('settings-search');\n\ninterface SettingsSearchProps {\n    className?: string;\n    initialValue?: string;\n    onChange: (search: string) => void;\n    debounce?: number;\n    inputRef?: React.Ref<HTMLInputElement>;\n    inputSize?: TextInputSize;\n    placeholder?: string;\n    autoFocus?: boolean;\n    selection?: SettingsSelection;\n}\n\nexport function SettingsSearch({\n    className,\n    initialValue,\n    onChange,\n    debounce = 200,\n    inputRef,\n    inputSize,\n    placeholder,\n    autoFocus = true,\n    selection,\n}: SettingsSearchProps) {\n    const [value, setValue] = React.useState(initialValue ?? '');\n\n    const onChangeDebounced = debounceFn(onChange, debounce);\n\n    const handleUpdate = useStableCallback((updated: string) => {\n        setValue(updated);\n        onChangeDebounced(updated);\n    });\n\n    useEffect(() => {\n        if (value && selection) {\n            onChangeDebounced.cancel();\n            setValue('');\n            onChange('');\n        }\n        // Remove any search, if selection is passed\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selection]);\n\n    return (\n        <div className={b(null, className)}>\n            <TextInput\n                value={value}\n                controlRef={inputRef}\n                hasClear\n                autoFocus={autoFocus}\n                size={inputSize}\n                placeholder={placeholder}\n                onUpdate={handleUpdate}\n                controlProps={{\n                    'aria-label': i18n('label_search'),\n                }}\n            />\n        </div>\n    );\n}\n"],"names":["cn","debounce","debounceFn","useStableCallback","useEffect","TextInput","i18n"],"mappings":";;;;;;;;;AAUA,MAAM,CAAC,GAAGA,KAAE,CAAC,iBAAiB,CAAC;AAczB,SAAU,cAAc,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,QAAQ,YACRC,UAAQ,GAAG,GAAG,EACd,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,GAAG,IAAI,EAChB,SAAS,GACS,EAAA;AAClB,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAZ,YAAY,GAAI,EAAE,CAAC;IAE5D,MAAM,iBAAiB,GAAGC,gBAAU,CAAC,QAAQ,EAAED,UAAQ,CAAC;AAExD,IAAA,MAAM,YAAY,GAAGE,yBAAiB,CAAC,CAAC,OAAe,KAAI;QACvD,QAAQ,CAAC,OAAO,CAAC;QACjB,iBAAiB,CAAC,OAAO,CAAC;AAC9B,KAAC,CAAC;IAEFC,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,IAAI,SAAS,EAAE;YACpB,iBAAiB,CAAC,MAAM,EAAE;YAC1B,QAAQ,CAAC,EAAE,CAAC;YACZ,QAAQ,CAAC,EAAE,CAAC;;;;AAIpB,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,QACI,6BAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA;AAC9B,QAAA,KAAA,CAAA,aAAA,CAACC,eAAS,EAAA,EACN,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAA,IAAA,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE;AACV,gBAAA,YAAY,EAAEC,aAAI,CAAC,cAAc,CAAC;aACrC,EACH,CAAA,CACA;AAEd;;;;"}
+{"version":3,"file":"SettingsSearch.js","sources":["../../../../../../src/components/Settings/SettingsSearch/SettingsSearch.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\n\nimport {TextInput, TextInputSize} from '@gravity-ui/uikit';\nimport debounceFn from 'lodash/debounce';\n\nimport {cn} from '../../utils/cn';\nimport {SettingsSelection} from '../Selection/types';\nimport {useStableCallback} from '../helpers';\nimport i18n from '../i18n';\n\nconst b = cn('settings-search');\n\ninterface SettingsSearchProps {\n    className?: string;\n    initialValue?: string;\n    onChange: (search: string) => void;\n    debounce?: number;\n    inputRef?: React.Ref<HTMLInputElement>;\n    inputSize?: TextInputSize;\n    placeholder?: string;\n    autoFocus?: boolean;\n    selection?: SettingsSelection;\n}\n\nexport function SettingsSearch({\n    className,\n    initialValue,\n    onChange,\n    debounce = 200,\n    inputRef,\n    inputSize,\n    placeholder,\n    autoFocus = true,\n    selection,\n}: SettingsSearchProps) {\n    const [value, setValue] = React.useState(initialValue ?? '');\n\n    const onChangeDebounced = debounceFn(onChange, debounce);\n\n    const handleUpdate = useStableCallback((updated: string) => {\n        setValue(updated);\n        onChangeDebounced(updated);\n    });\n\n    useEffect(() => {\n        if (value && selection) {\n            onChangeDebounced.cancel();\n            setValue('');\n            onChange('');\n        }\n        // Remove any search, if selection is passed\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selection]);\n\n    return (\n        <div className={b(null, className)}>\n            <TextInput\n                value={value}\n                controlRef={inputRef}\n                hasClear\n                autoFocus={autoFocus}\n                size={inputSize}\n                placeholder={placeholder}\n                onUpdate={handleUpdate}\n                controlProps={{\n                    'aria-label': i18n('label_search'),\n                }}\n            />\n        </div>\n    );\n}\n"],"names":["cn","useStableCallback","useEffect","TextInput","i18n"],"mappings":";;;;;;;;;AAUA,MAAM,CAAC,GAAGA,KAAE,CAAC,iBAAiB,CAAC;AAczB,SAAU,cAAc,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,QAAQ,GAAG,GAAG,EACd,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,GAAG,IAAI,EAChB,SAAS,GACS,EAAA;AAClB,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAZ,YAAY,GAAI,EAAE,CAAC;IAE5D,MAAM,iBAAiB,GAAG,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAExD,IAAA,MAAM,YAAY,GAAGC,yBAAiB,CAAC,CAAC,OAAe,KAAI;QACvD,QAAQ,CAAC,OAAO,CAAC;QACjB,iBAAiB,CAAC,OAAO,CAAC;AAC9B,KAAC,CAAC;IAEFC,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,KAAK,IAAI,SAAS,EAAE;YACpB,iBAAiB,CAAC,MAAM,EAAE;YAC1B,QAAQ,CAAC,EAAE,CAAC;YACZ,QAAQ,CAAC,EAAE,CAAC;;;;AAIpB,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,QACI,6BAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA;AAC9B,QAAA,KAAA,CAAA,aAAA,CAACC,eAAS,EAAA,EACN,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,QAAQ,EACpB,QAAQ,EAAA,IAAA,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE;AACV,gBAAA,YAAY,EAAEC,aAAI,CAAC,cAAc,CAAC;aACrC,EACH,CAAA,CACA;AAEd;;;;"}

package/build/cjs/components/Settings/SettingsSection.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var React = require('react');
 var uikit = require('@gravity-ui/uikit');
 var useSettingsContext = require('./SettingsContext/useSettingsContext.js');
@@ -8,7 +8,7 @@ var SettingsRow = require('./SettingsRow/SettingsRow.js');
 var b = require('./b.js');
 
 const SettingsSection = React.forwardRef((_a, ref) => {
-    var { search, isMobile, isSelected } = _a, section = tslib_es6.__rest(_a, ["search", "isMobile", "isSelected"]);
+    var { search, isMobile, isSelected } = _a, section = tslib.__rest(_a, ["search", "isMobile", "isSelected"]);
     const { renderSectionRightAdornment, showRightAdornmentOnHover } = useSettingsContext.useSettingsContext();
     return (React.createElement("div", { className: b.b('section', { selected: isSelected }), ref: isSelected ? ref : undefined },
         section.title && !section.hideTitle && (React.createElement("h3", { className: b.b('section-heading') }, renderSectionRightAdornment ? (React.createElement(uikit.Flex, { gap: 2, alignItems: 'center' },

package/build/cjs/components/Settings/SettingsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsSection.js","sources":["../../../../../src/components/Settings/SettingsSection.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex} from '@gravity-ui/uikit';\n\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingRow} from './SettingsRow/SettingsRow';\nimport {b} from './b';\nimport type {SettingsPageSection} from './collect-settings';\n\nexport const SettingsSection = React.forwardRef<\n    HTMLDivElement,\n    SettingsPageSection & {\n        search: string;\n        isMobile: boolean;\n        isSelected: boolean;\n    }\n>(({search, isMobile, isSelected, ...section}, ref) => {\n    const {renderSectionRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n\n    return (\n        <div className={b('section', {selected: isSelected})} ref={isSelected ? ref : undefined}>\n            {section.title && !section.hideTitle && (\n                <h3 className={b('section-heading')}>\n                    {renderSectionRightAdornment ? (\n                        <Flex gap={2} alignItems={'center'}>\n                            {section.title}\n                            <div\n                                className={b('section-right-adornment', {\n                                    hidden: showRightAdornmentOnHover,\n                                })}\n                            >\n                                {renderSectionRightAdornment(section)}\n                            </div>\n                        </Flex>\n                    ) : (\n                        section.title\n                    )}\n                </h3>\n            )}\n\n            {section.header &&\n                (isMobile ? (\n                    <div className={b('section-subheader')}>{section.header}</div>\n                ) : (\n                    section.header\n                ))}\n\n            {section.items.map((setting) =>\n                setting.hidden ? null : (\n                    <SettingRow {...setting} key={setting.title} search={search} />\n                ),\n            )}\n        </div>\n    );\n});\n\nSettingsSection.displayName = 'SettingsSection';\n"],"names":["__rest","useSettingsContext","b","Flex","SettingRow"],"mappings":";;;;;;;;;AASO,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAO7C,CAAC,EAA0C,EAAE,GAAG,KAAI;QAAnD,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,OAAa,EAAR,OAAO,GAAzCA,gBAAA,CAAA,EAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,YAAA,CAA0C,CAAD;IACxC,MAAM,EAAC,2BAA2B,EAAE,yBAAyB,EAAC,GAAGC,qCAAkB,EAAE;IAErF,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,GAAC,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAC,CAAC,EAAE,GAAG,EAAE,UAAU,GAAG,GAAG,GAAG,SAAS,EAAA;AAClF,QAAA,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,SAAS,KAChC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEA,GAAC,CAAC,iBAAiB,CAAC,EAAA,EAC9B,2BAA2B,IACxB,KAAC,CAAA,aAAA,CAAAC,UAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAA;AAC7B,YAAA,OAAO,CAAC,KAAK;AACd,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAED,GAAC,CAAC,yBAAyB,EAAE;AACpC,oBAAA,MAAM,EAAE,yBAAyB;AACpC,iBAAA,CAAC,IAED,2BAA2B,CAAC,OAAO,CAAC,CACnC,CACH,KAEP,OAAO,CAAC,KAAK,CAChB,CACA,CACR;AAEA,QAAA,OAAO,CAAC,MAAM;aACV,QAAQ,IACL,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,GAAC,CAAC,mBAAmB,CAAC,EAAA,EAAG,OAAO,CAAC,MAAM,CAAO,KAE9D,OAAO,CAAC,MAAM,CACjB,CAAC;AAEL,QAAA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,KACvB,OAAO,CAAC,MAAM,GAAG,IAAI,IACjB,KAAA,CAAA,aAAA,CAACE,sBAAU,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,OAAO,IAAE,GAAG,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAA,CAAA,CAAI,CAClE,CACJ,CACC;AAEd,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"SettingsSection.js","sources":["../../../../../src/components/Settings/SettingsSection.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Flex} from '@gravity-ui/uikit';\n\nimport {useSettingsContext} from './SettingsContext/useSettingsContext';\nimport {SettingRow} from './SettingsRow/SettingsRow';\nimport {b} from './b';\nimport type {SettingsPageSection} from './collect-settings';\n\nexport const SettingsSection = React.forwardRef<\n    HTMLDivElement,\n    SettingsPageSection & {\n        search: string;\n        isMobile: boolean;\n        isSelected: boolean;\n    }\n>(({search, isMobile, isSelected, ...section}, ref) => {\n    const {renderSectionRightAdornment, showRightAdornmentOnHover} = useSettingsContext();\n\n    return (\n        <div className={b('section', {selected: isSelected})} ref={isSelected ? ref : undefined}>\n            {section.title && !section.hideTitle && (\n                <h3 className={b('section-heading')}>\n                    {renderSectionRightAdornment ? (\n                        <Flex gap={2} alignItems={'center'}>\n                            {section.title}\n                            <div\n                                className={b('section-right-adornment', {\n                                    hidden: showRightAdornmentOnHover,\n                                })}\n                            >\n                                {renderSectionRightAdornment(section)}\n                            </div>\n                        </Flex>\n                    ) : (\n                        section.title\n                    )}\n                </h3>\n            )}\n\n            {section.header &&\n                (isMobile ? (\n                    <div className={b('section-subheader')}>{section.header}</div>\n                ) : (\n                    section.header\n                ))}\n\n            {section.items.map((setting) =>\n                setting.hidden ? null : (\n                    <SettingRow {...setting} key={setting.title} search={search} />\n                ),\n            )}\n        </div>\n    );\n});\n\nSettingsSection.displayName = 'SettingsSection';\n"],"names":["__rest","useSettingsContext","b","Flex","SettingRow"],"mappings":";;;;;;;;;AASO,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAO7C,CAAC,EAA0C,EAAE,GAAG,KAAI;QAAnD,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,OAAa,EAAR,OAAO,GAAzCA,YAAA,CAAA,EAAA,EAAA,CAAA,QAAA,EAAA,UAAA,EAAA,YAAA,CAA0C,CAAD;IACxC,MAAM,EAAC,2BAA2B,EAAE,yBAAyB,EAAC,GAAGC,qCAAkB,EAAE;IAErF,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,GAAC,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAC,CAAC,EAAE,GAAG,EAAE,UAAU,GAAG,GAAG,GAAG,SAAS,EAAA;AAClF,QAAA,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,SAAS,KAChC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEA,GAAC,CAAC,iBAAiB,CAAC,EAAA,EAC9B,2BAA2B,IACxB,KAAC,CAAA,aAAA,CAAAC,UAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAA;AAC7B,YAAA,OAAO,CAAC,KAAK;AACd,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAED,GAAC,CAAC,yBAAyB,EAAE;AACpC,oBAAA,MAAM,EAAE,yBAAyB;AACpC,iBAAA,CAAC,IAED,2BAA2B,CAAC,OAAO,CAAC,CACnC,CACH,KAEP,OAAO,CAAC,KAAK,CAChB,CACA,CACR;AAEA,QAAA,OAAO,CAAC,MAAM;aACV,QAAQ,IACL,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,GAAC,CAAC,mBAAmB,CAAC,EAAA,EAAG,OAAO,CAAC,MAAM,CAAO,KAE9D,OAAO,CAAC,MAAM,CACjB,CAAC;AAEL,QAAA,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,KACvB,OAAO,CAAC,MAAM,GAAG,IAAI,IACjB,KAAA,CAAA,aAAA,CAACE,sBAAU,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,OAAO,IAAE,GAAG,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAA,CAAA,CAAI,CAClE,CACJ,CACC;AAEd,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconProps } from '@gravity-ui/uikit';
 import { SettingsSelection } from './Selection/types';
+import type { SettingsMenuItemAriaProps } from './types';
 export type SettingsMenu = (SettingsMenuGroup | SettingsMenuItem)[];
 interface SettingsMenuGroup {
     groupTitle: string;
@@ -12,6 +13,7 @@ export interface SettingsMenuItem {
     icon?: IconProps;
     withBadge?: boolean;
     disabled?: boolean;
+    menuItemAriaProps?: SettingsMenuItemAriaProps;
 }
 export interface SettingsPage {
     id: string;

package/build/cjs/components/Settings/collect-settings.js

@@ -70,6 +70,7 @@ function getSettingsFromChildrenRecursive(children, basepath = '', filterRe) {
                     icon: element.props.icon,
                     withBadge: pages[pageId].withBadge,
                     disabled: pages[pageId].hidden,
+                    menuItemAriaProps: element.props.menuItemAriaProps,
                 });
             }
         }