@gravity-ui/navigation 6.0.0 → 6.1.1

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js

@@ -21,6 +21,7 @@ const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapse
             ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE
             : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,
     }), [title]);
+    const isSingleLabel = !title && items.length === 1;
     const registerNestedOpen = React.useCallback((delta) => {
         nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);
     }, []);
@@ -51,7 +52,7 @@ const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapse
             if (nextOpen && disabled)
                 return;
             wrappedOnOpenChange(nextOpen);
-        }, placement: "right-start", strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: popoverOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type }), content: content }, children));
+        }, placement: isSingleLabel ? 'right' : 'right-start', strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: popoverOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type }), content: content }, children));
 };
 ItemPopup.displayName = 'ItemPopup';
 

package/build/cjs/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst POPUP_MAIN_AXIS_OFFSET = 14;\nconst POPUP_CROSS_AXIS_OFFSET_WITH_TITLE = -30;\nconst POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE = 0;\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n    items: AsideHeaderItem[];\n    /** Optional title rendered at the top of the popup. */\n    title?: string;\n    open?: boolean;\n    disabled?: boolean;\n    type?: string;\n    collapsed?: boolean;\n    hideIcon?: boolean;\n    itemClassName?: string;\n    children: React.ReactElement;\n    onOpenChange?: (open: boolean) => void;\n    onPopupItemClick?: AsideHeaderItem['onItemClick'];\n    onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n    items,\n    itemClassName,\n    title,\n    open,\n    disabled,\n    type,\n    collapsed = false,\n    hideIcon = false,\n    children,\n    onPopupItemClick,\n    onItemClick,\n    onOpenChange,\n}) => {\n    const nestedOpenCountRef = React.useRef(0);\n\n    const popoverOffset = React.useMemo<NonNullable<PopupProps['offset']>>(\n        () => ({\n            mainAxis: POPUP_MAIN_AXIS_OFFSET,\n            crossAxis: title\n                ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE\n                : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,\n        }),\n        [title],\n    );\n\n    const registerNestedOpen = React.useCallback((delta: number) => {\n        nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);\n    }, []);\n\n    const nestContextValue = React.useMemo(() => ({registerNestedOpen}), [registerNestedOpen]);\n\n    const wrappedOnOpenChange = React.useCallback(\n        (next: boolean) => {\n            if (!next && nestedOpenCountRef.current > 0) {\n                return;\n            }\n\n            onOpenChange?.(next);\n        },\n        [onOpenChange],\n    );\n\n    const handlePopupContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    }, []);\n\n    if (!items.length) {\n        return children;\n    }\n\n    const content = (\n        <ItemPopupNestContext.Provider value={nestContextValue}>\n            <div className={b('popup-content', {collapsed})} onClick={handlePopupContentClick}>\n                {title && <div className={b('popup-title')}>{title}</div>}\n                <List\n                    items={items}\n                    selectedItemIndex={getSelectedItemIndex(items)}\n                    itemHeight={getPopupItemHeight}\n                    itemsHeight={getPopupItemsHeight}\n                    itemClassName={b('root-menu-item', itemClassName)}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    renderItem={(item) => (\n                        <Item\n                            {...item}\n                            qa={undefined}\n                            compact={false}\n                            className={b('popup-item')}\n                            hideIcon={hideIcon}\n                            stopClickPropagation={!item.itemWrapper}\n                            enableTooltip={false}\n                            bringForward={false}\n                            popupVisible={false}\n                            renderPopupContent={undefined}\n                            onOpenChangePopup={undefined}\n                            popupRef={undefined}\n                            onItemClick={(_innerItem, _innerCollapsed, event) => {\n                                if (!item.current) {\n                                    onOpenChange?.(false);\n                                }\n\n                                (onPopupItemClick ?? onItemClick)?.(item, collapsed, event);\n                            }}\n                        />\n                    )}\n                />\n            </div>\n        </ItemPopupNestContext.Provider>\n    );\n\n    return (\n        <Popover\n            disabled={disabled}\n            open={open}\n            onOpenChange={(nextOpen) => {\n                if (nextOpen && disabled) return;\n                wrappedOnOpenChange(nextOpen);\n            }}\n            placement=\"right-start\"\n            strategy=\"fixed\"\n            openDelay={DEFAULT_POPUP_DELAY}\n            closeDelay={DEFAULT_POPUP_DELAY}\n            offset={popoverOffset}\n            enableSafePolygon\n            className={b('icon-popover', {'item-type': type})}\n            content={content}\n        >\n            {children}\n        </Popover>\n    );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["createBlock","styles","ItemPopupNestContext","List","getSelectedItemIndex","getPopupItemHeight","getPopupItemsHeight","Item","Popover"],"mappings":"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"}
+{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst POPUP_MAIN_AXIS_OFFSET = 14;\nconst POPUP_CROSS_AXIS_OFFSET_WITH_TITLE = -30;\nconst POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE = 0;\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n    items: AsideHeaderItem[];\n    /** Optional title rendered at the top of the popup. */\n    title?: string;\n    open?: boolean;\n    disabled?: boolean;\n    type?: string;\n    collapsed?: boolean;\n    hideIcon?: boolean;\n    itemClassName?: string;\n    children: React.ReactElement;\n    onOpenChange?: (open: boolean) => void;\n    onPopupItemClick?: AsideHeaderItem['onItemClick'];\n    onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n    items,\n    itemClassName,\n    title,\n    open,\n    disabled,\n    type,\n    collapsed = false,\n    hideIcon = false,\n    children,\n    onPopupItemClick,\n    onItemClick,\n    onOpenChange,\n}) => {\n    const nestedOpenCountRef = React.useRef(0);\n\n    const popoverOffset = React.useMemo<NonNullable<PopupProps['offset']>>(\n        () => ({\n            mainAxis: POPUP_MAIN_AXIS_OFFSET,\n            crossAxis: title\n                ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE\n                : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,\n        }),\n        [title],\n    );\n\n    const isSingleLabel = !title && items.length === 1;\n\n    const registerNestedOpen = React.useCallback((delta: number) => {\n        nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);\n    }, []);\n\n    const nestContextValue = React.useMemo(() => ({registerNestedOpen}), [registerNestedOpen]);\n\n    const wrappedOnOpenChange = React.useCallback(\n        (next: boolean) => {\n            if (!next && nestedOpenCountRef.current > 0) {\n                return;\n            }\n\n            onOpenChange?.(next);\n        },\n        [onOpenChange],\n    );\n\n    const handlePopupContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    }, []);\n\n    if (!items.length) {\n        return children;\n    }\n\n    const content = (\n        <ItemPopupNestContext.Provider value={nestContextValue}>\n            <div className={b('popup-content', {collapsed})} onClick={handlePopupContentClick}>\n                {title && <div className={b('popup-title')}>{title}</div>}\n                <List\n                    items={items}\n                    selectedItemIndex={getSelectedItemIndex(items)}\n                    itemHeight={getPopupItemHeight}\n                    itemsHeight={getPopupItemsHeight}\n                    itemClassName={b('root-menu-item', itemClassName)}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    renderItem={(item) => (\n                        <Item\n                            {...item}\n                            qa={undefined}\n                            compact={false}\n                            className={b('popup-item')}\n                            hideIcon={hideIcon}\n                            stopClickPropagation={!item.itemWrapper}\n                            enableTooltip={false}\n                            bringForward={false}\n                            popupVisible={false}\n                            renderPopupContent={undefined}\n                            onOpenChangePopup={undefined}\n                            popupRef={undefined}\n                            onItemClick={(_innerItem, _innerCollapsed, event) => {\n                                if (!item.current) {\n                                    onOpenChange?.(false);\n                                }\n\n                                (onPopupItemClick ?? onItemClick)?.(item, collapsed, event);\n                            }}\n                        />\n                    )}\n                />\n            </div>\n        </ItemPopupNestContext.Provider>\n    );\n\n    return (\n        <Popover\n            disabled={disabled}\n            open={open}\n            onOpenChange={(nextOpen) => {\n                if (nextOpen && disabled) return;\n                wrappedOnOpenChange(nextOpen);\n            }}\n            placement={isSingleLabel ? 'right' : 'right-start'}\n            strategy=\"fixed\"\n            openDelay={DEFAULT_POPUP_DELAY}\n            closeDelay={DEFAULT_POPUP_DELAY}\n            offset={popoverOffset}\n            enableSafePolygon\n            className={b('icon-popover', {'item-type': type})}\n            content={content}\n        >\n            {children}\n        </Popover>\n    );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["createBlock","styles","ItemPopupNestContext","List","getSelectedItemIndex","getPopupItemHeight","getPopupItemsHeight","Item","Popover"],"mappings":"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"}

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

@@ -26,12 +26,12 @@ function Settings(_a) {
     return (React.createElement(SettingsContext.SettingsContext.Provider, { value: { renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover } },
         React.createElement(SettingsContent, Object.assign({ view: view }, props), children)));
 }
-function SettingsContentInnerMobile({ initialSearch, selection, menu, activePage, setSearch, onPageChange, children, }) {
+function SettingsContentInnerMobile({ initialSearch, selection, menu, activePage, setSearch, onPageChange, children, enableTabsScroll, }) {
     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') })),
+            React.createElement(SettingsMenuMobile.SettingsMenuMobile, { items: menu, className: b.b('tabs'), enableTabsScroll: enableTabsScroll })),
         activePage ? React.createElement(uikit.TabPanel, { value: activePage }, children) : children));
 }
 function SettingsContentInnerDesktop({ title, selection, menu, activePage, filterPlaceholder, initialSearch, search, setSearch, onPageChange, children, }) {
@@ -68,7 +68,7 @@ function SettingsContentInnerDesktop({ title, selection, menu, activePage, filte
             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, }) {
+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, enableMobileSettingsTabsScroll, }) {
     var _a;
     const [search, setSearch] = React.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
     const { menu, pages } = collectSettings.getSettingsFromChildren(children, search);
@@ -150,7 +150,7 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
         title,
     ]);
     return (React.createElement(context.SettingsSelectionContextProvider, { value: selected },
-        React.createElement("div", { className: b.b({ view }) }, isMobile ? (React.createElement(SettingsContentInnerMobile, Object.assign({}, contentInnerProps), tabContent)) : (React.createElement(SettingsContentInnerDesktop, Object.assign({}, contentInnerProps), tabContent)))));
+        React.createElement("div", { className: b.b({ view }) }, isMobile ? (React.createElement(SettingsContentInnerMobile, Object.assign({}, contentInnerProps, { enableTabsScroll: enableMobileSettingsTabsScroll }), tabContent)) : (React.createElement(SettingsContentInnerDesktop, Object.assign({}, contentInnerProps), tabContent)))));
 }
 Settings.Group = function SettingsGroup({ children }) {
     return React.createElement(React.Fragment, null, children);

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

@@ -1 +1 @@
-{"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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"}
+{"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    enableTabsScroll,\n}: SettingsContentInnerProps & {enableTabsScroll?: boolean}) {\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\n                    items={menu}\n                    className={b('tabs')}\n                    enableTabsScroll={enableTabsScroll}\n                />\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    enableMobileSettingsTabsScroll,\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\n                        {...contentInnerProps}\n                        enableTabsScroll={enableMobileSettingsTabsScroll}\n                    >\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/SettingsMenuMobile/SettingsMenuMobile.d.ts

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

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

@@ -7,7 +7,7 @@ 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, className }) => {
+const SettingsMenuMobile = ({ items, className, enableTabsScroll, }) => {
     const ref = React.useRef(null);
     const tabItems = React.useMemo(() => {
         const result = [];
@@ -36,7 +36,7 @@ const SettingsMenuMobile = ({ items, className }) => {
         e.stopPropagation();
     };
     return (React.createElement("div", { ref: ref, onTouchMove: handleTouchMove },
-        React.createElement(uikit.TabList, { size: "l", className: b(null, className) }, tabItems.map((item) => (React.createElement(uikit.Tab, Object.assign({ key: item.value }, item)))))));
+        React.createElement(uikit.TabList, { size: "l", className: b(null, className), contentOverflow: enableTabsScroll ? 'scroll' : 'wrap' }, 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 {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;;;;"}
+{"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 = ({\n    items,\n    className,\n    enableTabsScroll,\n}: 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\n                size=\"l\"\n                className={b(null, className)}\n                contentOverflow={enableTabsScroll ? 'scroll' : 'wrap'}\n            >\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;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,SAAS,EACT,gBAAgB,GACM,KAAI;IAC1B,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;QACvC,KAAC,CAAA,aAAA,CAAAC,aAAO,EACJ,EAAA,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,eAAe,EAAE,gBAAgB,GAAG,QAAQ,GAAG,MAAM,IAEpD,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,MACf,KAAA,CAAA,aAAA,CAACC,SAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAM,EAAA,IAAI,CAAI,CAAA,CACrC,CAAC,CACI,CACR;AAEd;;;;"}

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

@@ -23,7 +23,9 @@ export interface SettingsMenuProps {
     focusItemId?: string;
     className?: string;
 }
-export type SettingsMenuMobileProps = Omit<SettingsMenuProps, 'activeItemId' | 'focusItemId' | 'onChange'>;
+export type SettingsMenuMobileProps = Omit<SettingsMenuProps, 'activeItemId' | 'focusItemId' | 'onChange'> & {
+    enableTabsScroll?: boolean;
+};
 export interface SettingsProps {
     children: React.ReactNode;
     title?: string;
@@ -41,6 +43,7 @@ export interface SettingsProps {
     renderRightAdornment?: (item: SettingsItemProps) => React.ReactNode;
     renderSectionRightAdornment?: (section: SettingsPageSection) => React.ReactNode;
     showRightAdornmentOnHover?: boolean;
+    enableMobileSettingsTabsScroll?: boolean;
 }
 export interface SettingsGroupProps {
     id?: string;

package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js

@@ -19,6 +19,7 @@ const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapse
             ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE
             : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,
     }), [title]);
+    const isSingleLabel = !title && items.length === 1;
     const registerNestedOpen = React__default.useCallback((delta) => {
         nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);
     }, []);
@@ -49,7 +50,7 @@ const ItemPopup = ({ items, itemClassName, title, open, disabled, type, collapse
             if (nextOpen && disabled)
                 return;
             wrappedOnOpenChange(nextOpen);
-        }, placement: "right-start", strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: popoverOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type }), content: content }, children));
+        }, placement: isSingleLabel ? 'right' : 'right-start', strategy: "fixed", openDelay: DEFAULT_POPUP_DELAY, closeDelay: DEFAULT_POPUP_DELAY, offset: popoverOffset, enableSafePolygon: true, className: b('icon-popover', { 'item-type': type }), content: content }, children));
 };
 ItemPopup.displayName = 'ItemPopup';
 

package/build/esm/components/AsideHeader/components/CompositeBar/Item/ItemPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst POPUP_MAIN_AXIS_OFFSET = 14;\nconst POPUP_CROSS_AXIS_OFFSET_WITH_TITLE = -30;\nconst POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE = 0;\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n    items: AsideHeaderItem[];\n    /** Optional title rendered at the top of the popup. */\n    title?: string;\n    open?: boolean;\n    disabled?: boolean;\n    type?: string;\n    collapsed?: boolean;\n    hideIcon?: boolean;\n    itemClassName?: string;\n    children: React.ReactElement;\n    onOpenChange?: (open: boolean) => void;\n    onPopupItemClick?: AsideHeaderItem['onItemClick'];\n    onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n    items,\n    itemClassName,\n    title,\n    open,\n    disabled,\n    type,\n    collapsed = false,\n    hideIcon = false,\n    children,\n    onPopupItemClick,\n    onItemClick,\n    onOpenChange,\n}) => {\n    const nestedOpenCountRef = React.useRef(0);\n\n    const popoverOffset = React.useMemo<NonNullable<PopupProps['offset']>>(\n        () => ({\n            mainAxis: POPUP_MAIN_AXIS_OFFSET,\n            crossAxis: title\n                ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE\n                : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,\n        }),\n        [title],\n    );\n\n    const registerNestedOpen = React.useCallback((delta: number) => {\n        nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);\n    }, []);\n\n    const nestContextValue = React.useMemo(() => ({registerNestedOpen}), [registerNestedOpen]);\n\n    const wrappedOnOpenChange = React.useCallback(\n        (next: boolean) => {\n            if (!next && nestedOpenCountRef.current > 0) {\n                return;\n            }\n\n            onOpenChange?.(next);\n        },\n        [onOpenChange],\n    );\n\n    const handlePopupContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    }, []);\n\n    if (!items.length) {\n        return children;\n    }\n\n    const content = (\n        <ItemPopupNestContext.Provider value={nestContextValue}>\n            <div className={b('popup-content', {collapsed})} onClick={handlePopupContentClick}>\n                {title && <div className={b('popup-title')}>{title}</div>}\n                <List\n                    items={items}\n                    selectedItemIndex={getSelectedItemIndex(items)}\n                    itemHeight={getPopupItemHeight}\n                    itemsHeight={getPopupItemsHeight}\n                    itemClassName={b('root-menu-item', itemClassName)}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    renderItem={(item) => (\n                        <Item\n                            {...item}\n                            qa={undefined}\n                            compact={false}\n                            className={b('popup-item')}\n                            hideIcon={hideIcon}\n                            stopClickPropagation={!item.itemWrapper}\n                            enableTooltip={false}\n                            bringForward={false}\n                            popupVisible={false}\n                            renderPopupContent={undefined}\n                            onOpenChangePopup={undefined}\n                            popupRef={undefined}\n                            onItemClick={(_innerItem, _innerCollapsed, event) => {\n                                if (!item.current) {\n                                    onOpenChange?.(false);\n                                }\n\n                                (onPopupItemClick ?? onItemClick)?.(item, collapsed, event);\n                            }}\n                        />\n                    )}\n                />\n            </div>\n        </ItemPopupNestContext.Provider>\n    );\n\n    return (\n        <Popover\n            disabled={disabled}\n            open={open}\n            onOpenChange={(nextOpen) => {\n                if (nextOpen && disabled) return;\n                wrappedOnOpenChange(nextOpen);\n            }}\n            placement=\"right-start\"\n            strategy=\"fixed\"\n            openDelay={DEFAULT_POPUP_DELAY}\n            closeDelay={DEFAULT_POPUP_DELAY}\n            offset={popoverOffset}\n            enableSafePolygon\n            className={b('icon-popover', {'item-type': type})}\n            content={content}\n        >\n            {children}\n        </Popover>\n    );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ItemPopup.js","sources":["../../../../../../../../src/components/AsideHeader/components/CompositeBar/Item/ItemPopup.tsx"],"sourcesContent":["import React from 'react';\n\nimport {List, Popover, PopupProps} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../../utils/cn';\nimport {AsideHeaderItem} from '../../../types';\nimport {getPopupItemHeight, getPopupItemsHeight, getSelectedItemIndex} from '../utils';\n\nimport {Item} from './Item';\nimport {ItemPopupNestContext} from './ItemPopupNestContext';\n\nimport styles from './Item.module.scss';\n\nconst b = createBlock('composite-bar-item', styles);\n\nconst POPUP_MAIN_AXIS_OFFSET = 14;\nconst POPUP_CROSS_AXIS_OFFSET_WITH_TITLE = -30;\nconst POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE = 0;\n\nconst DEFAULT_POPUP_DELAY = 100;\n\ninterface Props {\n    items: AsideHeaderItem[];\n    /** Optional title rendered at the top of the popup. */\n    title?: string;\n    open?: boolean;\n    disabled?: boolean;\n    type?: string;\n    collapsed?: boolean;\n    hideIcon?: boolean;\n    itemClassName?: string;\n    children: React.ReactElement;\n    onOpenChange?: (open: boolean) => void;\n    onPopupItemClick?: AsideHeaderItem['onItemClick'];\n    onItemClick?: AsideHeaderItem['onItemClick'];\n}\n\nexport const ItemPopup: React.FC<Props> = ({\n    items,\n    itemClassName,\n    title,\n    open,\n    disabled,\n    type,\n    collapsed = false,\n    hideIcon = false,\n    children,\n    onPopupItemClick,\n    onItemClick,\n    onOpenChange,\n}) => {\n    const nestedOpenCountRef = React.useRef(0);\n\n    const popoverOffset = React.useMemo<NonNullable<PopupProps['offset']>>(\n        () => ({\n            mainAxis: POPUP_MAIN_AXIS_OFFSET,\n            crossAxis: title\n                ? POPUP_CROSS_AXIS_OFFSET_WITH_TITLE\n                : POPUP_CROSS_AXIS_OFFSET_WITHOUT_TITLE,\n        }),\n        [title],\n    );\n\n    const isSingleLabel = !title && items.length === 1;\n\n    const registerNestedOpen = React.useCallback((delta: number) => {\n        nestedOpenCountRef.current = Math.max(0, nestedOpenCountRef.current + delta);\n    }, []);\n\n    const nestContextValue = React.useMemo(() => ({registerNestedOpen}), [registerNestedOpen]);\n\n    const wrappedOnOpenChange = React.useCallback(\n        (next: boolean) => {\n            if (!next && nestedOpenCountRef.current > 0) {\n                return;\n            }\n\n            onOpenChange?.(next);\n        },\n        [onOpenChange],\n    );\n\n    const handlePopupContentClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    }, []);\n\n    if (!items.length) {\n        return children;\n    }\n\n    const content = (\n        <ItemPopupNestContext.Provider value={nestContextValue}>\n            <div className={b('popup-content', {collapsed})} onClick={handlePopupContentClick}>\n                {title && <div className={b('popup-title')}>{title}</div>}\n                <List\n                    items={items}\n                    selectedItemIndex={getSelectedItemIndex(items)}\n                    itemHeight={getPopupItemHeight}\n                    itemsHeight={getPopupItemsHeight}\n                    itemClassName={b('root-menu-item', itemClassName)}\n                    virtualized={false}\n                    filterable={false}\n                    sortable={false}\n                    renderItem={(item) => (\n                        <Item\n                            {...item}\n                            qa={undefined}\n                            compact={false}\n                            className={b('popup-item')}\n                            hideIcon={hideIcon}\n                            stopClickPropagation={!item.itemWrapper}\n                            enableTooltip={false}\n                            bringForward={false}\n                            popupVisible={false}\n                            renderPopupContent={undefined}\n                            onOpenChangePopup={undefined}\n                            popupRef={undefined}\n                            onItemClick={(_innerItem, _innerCollapsed, event) => {\n                                if (!item.current) {\n                                    onOpenChange?.(false);\n                                }\n\n                                (onPopupItemClick ?? onItemClick)?.(item, collapsed, event);\n                            }}\n                        />\n                    )}\n                />\n            </div>\n        </ItemPopupNestContext.Provider>\n    );\n\n    return (\n        <Popover\n            disabled={disabled}\n            open={open}\n            onOpenChange={(nextOpen) => {\n                if (nextOpen && disabled) return;\n                wrappedOnOpenChange(nextOpen);\n            }}\n            placement={isSingleLabel ? 'right' : 'right-start'}\n            strategy=\"fixed\"\n            openDelay={DEFAULT_POPUP_DELAY}\n            closeDelay={DEFAULT_POPUP_DELAY}\n            offset={popoverOffset}\n            enableSafePolygon\n            className={b('icon-popover', {'item-type': type})}\n            content={content}\n        >\n            {children}\n        </Popover>\n    );\n};\n\nItemPopup.displayName = 'ItemPopup';\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/Settings/Settings.js

@@ -24,12 +24,12 @@ function Settings(_a) {
     return (React__default.createElement(SettingsContext.Provider, { value: { renderRightAdornment, renderSectionRightAdornment, showRightAdornmentOnHover } },
         React__default.createElement(SettingsContent, Object.assign({ view: view }, props), children)));
 }
-function SettingsContentInnerMobile({ initialSearch, selection, menu, activePage, setSearch, onPageChange, children, }) {
+function SettingsContentInnerMobile({ initialSearch, selection, menu, activePage, setSearch, onPageChange, children, enableTabsScroll, }) {
     const searchInputRef = React__default.useRef(null);
     return (React__default.createElement(TabProvider, { value: activePage, onUpdate: onPageChange },
         React__default.createElement(React__default.Fragment, null,
             React__default.createElement(SettingsSearch, { inputRef: searchInputRef, className: b('search'), initialValue: initialSearch, selection: selection, onChange: setSearch, autoFocus: false, inputSize: 'xl' }),
-            React__default.createElement(SettingsMenuMobile, { items: menu, className: b('tabs') })),
+            React__default.createElement(SettingsMenuMobile, { items: menu, className: b('tabs'), enableTabsScroll: enableTabsScroll })),
         activePage ? React__default.createElement(TabPanel, { value: activePage }, children) : children));
 }
 function SettingsContentInnerDesktop({ title, selection, menu, activePage, filterPlaceholder, initialSearch, search, setSearch, onPageChange, children, }) {
@@ -66,7 +66,7 @@ function SettingsContentInnerDesktop({ title, selection, menu, activePage, filte
             React__default.createElement(SettingsMenu, { ref: menuRef, items: menu, onChange: onPageChange, activeItemId: activePage })),
         children));
 }
-function SettingsContent({ initialPage, initialSearch, selection, children, renderNotFound, title = i18n('label_title'), filterPlaceholder = i18n('label_filter-placeholder'), emptyPlaceholder = i18n('label_empty-placeholder'), view, onPageChange, onClose, }) {
+function SettingsContent({ initialPage, initialSearch, selection, children, renderNotFound, title = i18n('label_title'), filterPlaceholder = i18n('label_filter-placeholder'), emptyPlaceholder = i18n('label_empty-placeholder'), view, onPageChange, onClose, enableMobileSettingsTabsScroll, }) {
     var _a;
     const [search, setSearch] = React__default.useState(initialSearch !== null && initialSearch !== undefined ? initialSearch : '');
     const { menu, pages } = getSettingsFromChildren(children, search);
@@ -148,7 +148,7 @@ function SettingsContent({ initialPage, initialSearch, selection, children, rend
         title,
     ]);
     return (React__default.createElement(SettingsSelectionContextProvider, { value: selected },
-        React__default.createElement("div", { className: b({ view }) }, isMobile ? (React__default.createElement(SettingsContentInnerMobile, Object.assign({}, contentInnerProps), tabContent)) : (React__default.createElement(SettingsContentInnerDesktop, Object.assign({}, contentInnerProps), tabContent)))));
+        React__default.createElement("div", { className: b({ view }) }, isMobile ? (React__default.createElement(SettingsContentInnerMobile, Object.assign({}, contentInnerProps, { enableTabsScroll: enableMobileSettingsTabsScroll }), tabContent)) : (React__default.createElement(SettingsContentInnerDesktop, Object.assign({}, contentInnerProps), tabContent)))));
 }
 Settings.Group = function SettingsGroup({ children }) {
     return React__default.createElement(React__default.Fragment, null, children);

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

@@ -1 +1 @@
-{"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":["React"],"mappings":";;;;;;;;;;;;;;;;;AAgCM,SAAU,QAAQ,CAAC,EAST,EAAA;QATS,EACrB,OAAO,EACP,aAAa,EACb,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,oBAAoB,EACpB,2BAA2B,EAC3B,yBAAyB,GAAG,IAAI,OAEpB,EADT,KAAK,GARa,MAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,eAAA,EAAA,UAAA,EAAA,MAAA,EAAA,sBAAA,EAAA,6BAAA,EAAA,2BAAA,CASxB,CADW;IAER,IAAI,OAAO,EAAE;QACT,QACIA,sCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,EACnC,EAAA,OAAO,aAAa,KAAK,UAAU,IAChC,aAAa,EAAE,KAEfA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,GAAG,EAAG,CAAA,CAC9C,CACC;;AAId,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAQ,EACrB,EAAA,KAAK,EAAE,EAAC,oBAAoB,EAAE,2BAA2B,EAAE,yBAAyB,EAAC,EAAA;AAErF,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,IAAI,EAAE,IAAI,EAAA,EAAM,KAAK,CAAA,EACjC,QAAQ,CACK,CACK;AAEnC;AAcA,SAAS,0BAA0B,CAAC,EAChC,aAAa,EACb,SAAS,EACT,IAAI,EACJ,UAAU,EACV,SAAS,EACT,YAAY,EACZ,QAAQ,GACgB,EAAA;IACxB,MAAM,cAAc,GAAGA,cAAK,CAAC,MAAM,CAAmB,IAAI,CAAC;IAE3D,QACIA,cAAC,CAAA,aAAA,CAAA,WAAW,EAAC,EAAA,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAA;QAClDA,cAAC,CAAA,aAAA,CAAAA,cAAK,CAAC,QAAQ,EAAA,IAAA;AACX,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACX,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,IAAI,EACjB,CAAA;AACF,YAAAA,cAAA,CAAA,aAAA,CAAC,kBAAkB,EAAA,EAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GAAI,CAC5C;AAChB,QAAA,UAAU,GAAGA,6BAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,UAAU,EAAG,EAAA,QAAQ,CAAY,GAAG,QAAQ,CACjE;AAEtB;AAEA,SAAS,2BAA2B,CAAC,EACjC,KAAK,EACL,SAAS,EACT,IAAI,EACJ,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,MAAM,EACN,SAAS,EACT,YAAY,EACZ,QAAQ,GACgB,EAAA;IACxB,MAAM,OAAO,GAAGA,cAAK,CAAC,MAAM,CAAuB,IAAI,CAAC;IACxD,MAAM,cAAc,GAAGA,cAAK,CAAC,MAAM,CAAmB,IAAI,CAAC;AAE3D,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;;AACjB,QAAA,CAAA,EAAA,GAAA,OAAO,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACjC,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;QACjB,MAAM,OAAO,GAAG,MAAK;;AACjB,YAAA,CAAA,EAAA,GAAA,OAAO,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,UAAU,EAAE;AACjC,SAAC;AACD,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC;AACzC,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AAChD,SAAC;KACJ,EAAE,EAAE,CAAC;AAEN,IAAA,QACIA,cAAA,CAAA,aAAA,CAACA,cAAK,CAAC,QAAQ,EAAA,IAAA;QACXA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,OAAO,EAAE,MAAK;AACV,gBAAA,IAAI,cAAc,CAAC,OAAO,EAAE;AACxB,oBAAA,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE;;AAEtC,aAAC,EACD,SAAS,EAAE,CAAC,KAAK,KAAI;AACjB,gBAAA,IAAI,OAAO,CAAC,OAAO,EAAE;oBACjB,IAAI,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;wBACtC,KAAK,CAAC,cAAc,EAAE;;;aAGjC,EAAA;YAEDA,cAAC,CAAA,aAAA,CAAA,KAAK,EAAE,IAAA,EAAA,KAAK,CAAS;AACtB,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACX,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EACX,IAAA,EAAA,CAAA;AACF,YAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,UAAU,GAC1B,CACA;QACL,QAAQ,CACI;AAEzB;AAEA,SAAS,eAAe,CAAC,EACrB,WAAW,EACX,aAAa,EACb,SAAS,EACT,QAAQ,EACR,cAAc,EACd,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAC3B,iBAAiB,GAAG,IAAI,CAAC,0BAA0B,CAAC,EACpD,gBAAgB,GAAG,IAAI,CAAC,yBAAyB,CAAC,EAClD,IAAI,EACJ,YAAY,EACZ,OAAO,GACY,EAAA;;AACnB,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,aAAa,aAAb,aAAa,KAAA,SAAA,GAAb,aAAa,GAAI,EAAE,CAAC;AAC/D,IAAA,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,uBAAuB,CAAC,QAAQ,EAAE,MAAM,CAAC;IAE/D,MAAM,QAAQ,GAAG,iCAAiC,CAAC,KAAK,EAAE,SAAS,CAAC;IAEpE,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,IAAA,MAAM,oBAAoB,GACtB,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS;IACvF,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,GAAGA,cAAK,CAAC,QAAQ,CACjD,oBAAoB;AAChB,SAAC,WAAW,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,CAChF;AACD,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;IAElC,IAAI,UAAU,GAAG,YAAY;AAE7B,IAAA,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,MAAM,EAAE;QAC/D,UAAU,GAAG,MAAA,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,EAAC,MAAM,EAAC,KAAK,CAAC,MAAM,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,EAAE;;IAGrE,MAAM,EAAC,eAAe,EAAE,uBAAuB,EAAE,kBAAkB,EAAC,GAAG,iBAAiB,CAAC;QACrF,KAAK;AACR,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAGA,cAAK,CAAC,WAAW,CACtC,CAAC,OAA2B,KAAI;AAC5B,QAAA,cAAc,CAAC,CAAC,QAAQ,KAAI;YACxB,IAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE;AACnD,gBAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAG,OAAO,CAAC;;AAE3B,YAAA,OAAO,OAAO;AAClB,SAAC,CAAC;AACN,KAAC,EACD,CAAC,eAAe,EAAE,YAAY,CAAC,CAClC;AAED,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;QACjB,IAAI,uBAAuB,EAAE;YACzB,gBAAgB,CAAC,kBAAkB,CAAC;;;AAG5C,KAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;AAE7B,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,IAAI,UAAU,KAAK,YAAY,EAAE;YAC7B,gBAAgB,CAAC,UAAU,CAAC;;AAEpC,KAAC,CAAC;AAEF,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,IAAI,CAAC,oBAAoB;YAAE;QAC3B,cAAc,CAAC,oBAAoB,CAAC;AACxC,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC;AAE1B,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;;AACjB,QAAA,IAAI,MAAA,QAAQ,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,OAAO,EAAE;AAC/B,YAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,cAAc,EAAE;;AAErD,KAAC,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE1B,IAAA,MAAM,UAAU,GAAGA,cAAK,CAAC,OAAO,CAC5B,OACIA,sCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAA;AACrB,QAAAA,cAAA,CAAA,aAAA,CAAC,qBAAqB,EAClB,EAAA,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,UAAU,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAClB,CAAA,CACA,CACT,EACD;QACI,UAAU;QACV,gBAAgB;QAChB,QAAQ;QACR,IAAI;QACJ,OAAO;QACP,KAAK;QACL,cAAc;QACd,MAAM;QACN,QAAQ;AACX,KAAA,CACJ;IAED,MAAM,iBAAiB,GAAGA,cAAK,CAAC,OAAO,CACnC,OAAO;QACH,IAAI;AACJ,QAAA,YAAY,EAAE,gBAAgB;QAC9B,QAAQ;QACR,SAAS;QACT,UAAU;QACV,iBAAiB;QACjB,SAAS;QACT,aAAa;QACb,KAAK;QACL,MAAM;AACT,KAAA,CAAC,EACF;QACI,UAAU;QACV,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,SAAS;QACT,KAAK;AACR,KAAA,CACJ;AAED,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,gCAAgC,EAAC,EAAA,KAAK,EAAE,QAAQ,EAAA;AAC7C,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EACpB,EAAA,QAAQ,IACLA,cAAA,CAAA,aAAA,CAAC,0BAA0B,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,iBAAiB,CAC5C,EAAA,UAAU,CACc,KAE7BA,cAAC,CAAA,aAAA,CAAA,2BAA2B,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,iBAAiB,GAC7C,UAAU,CACe,CACjC,CACC,CACyB;AAE3C;AAEA,QAAQ,CAAC,KAAK,GAAG,SAAS,aAAa,CAAC,EAAC,QAAQ,EAAqB,EAAA;AAClE,IAAA,OAAOA,6BAACA,cAAK,CAAC,QAAQ,EAAE,IAAA,EAAA,QAAQ,CAAkB;AACtD,CAAC;AAED,QAAQ,CAAC,IAAI,GAAG,SAAS,YAAY,CAAC,EAAC,QAAQ,EAAoB,EAAA;AAC/D,IAAA,OAAOA,6BAACA,cAAK,CAAC,QAAQ,EAAE,IAAA,EAAA,QAAQ,CAAkB;AACtD,CAAC;AAED,QAAQ,CAAC,OAAO,GAAG,SAAS,eAAe,CAAC,EAAC,QAAQ,EAAuB,EAAA;AACxE,IAAA,OAAOA,6BAACA,cAAK,CAAC,QAAQ,EAAE,IAAA,EAAA,QAAQ,CAAkB;AACtD,CAAC;AAED,QAAQ,CAAC,IAAI,GAAG,SAAS,YAAY,CAAC,OAA0B,EAAA;IAC5D,MAAM,EACF,EAAE,EACF,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,SAAS,EACT,oBAAoB,GAAG,QAAQ,EAC/B,IAAI,EACJ,WAAW,GACd,GAAG,OAAO;AAEX,IAAA,MAAM,QAAQ,GAAG,2BAA2B,EAAE;AAC9C,IAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE;IAExE,MAAM,EAAC,oBAAoB,EAAE,yBAAyB,EAAC,GAAG,kBAAkB,EAAE;AAC9E,IAAA,MAAM,cAAc,GAAG,oBAAoB,CAAC,gBAAgB,CAAC;AAC7D,IAAA,MAAM,SAAS,GAAGA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC,EAAG,EAAA,cAAc,CAAQ;AAE/F,IAAA,MAAM,SAAS,GAAG,cAAc,KAAK,IAAI;AAEzC,IAAA,QACIA,cACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;YACjB,KAAK;YACL,IAAI;AACJ,YAAA,QAAQ,EAAE,iBAAiB;YAC3B,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM;AACrC,SAAA,CAAC,EACF,GAAG,EAAE,iBAAiB,GAAG,QAAQ,CAAC,WAAW,GAAG,SAAS,EAAA;AAExD,QAAA,SAAS,IACNA,wCAAO,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,EAAE,EAAE,OAAO,EAAA;AAC3C,YAAA,oBAAoB,IACjBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,CAAC,EAAA;gBAC3C,SAAS;AACV,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAC,CAAC,sBAAsB,EAAE;AACjC,wBAAA,MAAM,EAAE,yBAAyB;AACpC,qBAAA,CAAC,EAED,EAAA,oBAAoB,CAAC,OAAO,CAAC,CAC5B,CACH,KAEP,SAAS,CACZ;YACA,WAAW,IACRA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAA,EAAG,WAAW,CAAQ,IAC5D,IAAI,CACJ,IACR,IAAI;QACRA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAA,EAAG,QAAQ,CAAO,CACjD;AAEd,CAAC;;;;"}
+{"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    enableTabsScroll,\n}: SettingsContentInnerProps & {enableTabsScroll?: boolean}) {\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\n                    items={menu}\n                    className={b('tabs')}\n                    enableTabsScroll={enableTabsScroll}\n                />\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    enableMobileSettingsTabsScroll,\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\n                        {...contentInnerProps}\n                        enableTabsScroll={enableMobileSettingsTabsScroll}\n                    >\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":["React"],"mappings":"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"}

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

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

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

@@ -5,7 +5,7 @@ import { createBlock } from '../../utils/cn.js';
 import styles from './SettingsMenuMobile.module.scss.js';
 
 const b = createBlock('settings-menu-mobile', styles);
-const SettingsMenuMobile = ({ items, className }) => {
+const SettingsMenuMobile = ({ items, className, enableTabsScroll, }) => {
     const ref = React__default.useRef(null);
     const tabItems = React__default.useMemo(() => {
         const result = [];
@@ -34,7 +34,7 @@ const SettingsMenuMobile = ({ items, className }) => {
         e.stopPropagation();
     };
     return (React__default.createElement("div", { ref: ref, onTouchMove: handleTouchMove },
-        React__default.createElement(TabList, { size: "l", className: b(null, className) }, tabItems.map((item) => (React__default.createElement(Tab, Object.assign({ key: item.value }, item)))))));
+        React__default.createElement(TabList, { size: "l", className: b(null, className), contentOverflow: enableTabsScroll ? 'scroll' : 'wrap' }, tabItems.map((item) => (React__default.createElement(Tab, Object.assign({ key: item.value }, item)))))));
 };
 
 export { SettingsMenuMobile };

package/build/esm/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 {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":["React"],"mappings":";;;;;AASA,MAAM,CAAC,GAAG,WAAW,CAAC,sBAAsB,EAAE,MAAM,CAAC;AAExC,MAAA,kBAAkB,GAAG,CAAC,EAAC,KAAK,EAAE,SAAS,EAA0B,KAAI;IAC9E,MAAM,GAAG,GAAGA,cAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AAE9C,IAAA,MAAM,QAAQ,GAAGA,cAAK,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,QACIA,sCAAK,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,eAAe,EAAA;AACvC,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,IAC1C,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,MACfA,6BAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAA,EAAM,IAAI,CAAI,CAAA,CACrC,CAAC,CACI,CACR;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 = ({\n    items,\n    className,\n    enableTabsScroll,\n}: 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\n                size=\"l\"\n                className={b(null, className)}\n                contentOverflow={enableTabsScroll ? 'scroll' : 'wrap'}\n            >\n                {tabItems.map((item) => (\n                    <Tab key={item.value} {...item} />\n                ))}\n            </TabList>\n        </div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;AASA,MAAM,CAAC,GAAG,WAAW,CAAC,sBAAsB,EAAE,MAAM,CAAC;AAE9C,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,SAAS,EACT,gBAAgB,GACM,KAAI;IAC1B,MAAM,GAAG,GAAGA,cAAK,CAAC,MAAM,CAAiB,IAAI,CAAC;AAE9C,IAAA,MAAM,QAAQ,GAAGA,cAAK,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,QACIA,sCAAK,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,eAAe,EAAA;QACvCA,cAAC,CAAA,aAAA,CAAA,OAAO,EACJ,EAAA,IAAI,EAAC,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,eAAe,EAAE,gBAAgB,GAAG,QAAQ,GAAG,MAAM,IAEpD,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,MACfA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAM,EAAA,IAAI,CAAI,CAAA,CACrC,CAAC,CACI,CACR;AAEd;;;;"}

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

@@ -23,7 +23,9 @@ export interface SettingsMenuProps {
     focusItemId?: string;
     className?: string;
 }
-export type SettingsMenuMobileProps = Omit<SettingsMenuProps, 'activeItemId' | 'focusItemId' | 'onChange'>;
+export type SettingsMenuMobileProps = Omit<SettingsMenuProps, 'activeItemId' | 'focusItemId' | 'onChange'> & {
+    enableTabsScroll?: boolean;
+};
 export interface SettingsProps {
     children: React.ReactNode;
     title?: string;
@@ -41,6 +43,7 @@ export interface SettingsProps {
     renderRightAdornment?: (item: SettingsItemProps) => React.ReactNode;
     renderSectionRightAdornment?: (section: SettingsPageSection) => React.ReactNode;
     showRightAdornmentOnHover?: boolean;
+    enableMobileSettingsTabsScroll?: boolean;
 }
 export interface SettingsGroupProps {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/navigation",
-  "version": "6.0.0",
+  "version": "6.1.1",
   "description": "Gravity UI Navigation components",
   "license": "MIT",
   "repository": {
@@ -71,7 +71,7 @@
     "@gravity-ui/prettier-config": "^1.0.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.31.0",
+    "@gravity-ui/uikit": "^7.42.0",
     "@jest/globals": "^30.0.5",
     "@playwright/experimental-ct-react": "^1.49.1",
     "@playwright/test": "^1.49.1",
@@ -126,7 +126,7 @@
   "peerDependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/icons": "^2.2.0",
-    "@gravity-ui/uikit": "^7.2.0",
+    "@gravity-ui/uikit": "^7.42.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },